Merge version_1 into main #1
354
src/app/page.tsx
354
src/app/page.tsx
@@ -26,263 +26,115 @@ export default function LandingPage() {
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "home",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "services",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Mike's Place"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
brandName="Mike's Place"
|
||||
button={{ text: "Book Now", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplit
|
||||
background={{
|
||||
variant: "radial-gradient",
|
||||
}}
|
||||
title="Mike's Place: Appointment-Only Prestige"
|
||||
description="Experience 20+ years of barbering excellence in a private, luxurious setting designed for the discerning gentleman."
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Appointment",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
text: "View Services",
|
||||
href: "#services",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/makeup-brush-with-design-space-beauty-brands_53876-167285.jpg"
|
||||
mediaAnimation="blur-reveal"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/pov-diverse-men-hotel-lobby-meeting-abroad-create-new-parnership-collaborate-project-team-businessmen-attend-videocall-conference-together-lounge-area_482257-69534.jpg",
|
||||
alt: "Client 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-portrait-bearded-male-with-long-hair-dark-background_613910-16005.jpg",
|
||||
alt: "Client 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-bearded-redhead-hipster-male-dressed-blue-jacket-grey-background_613910-1740.jpg",
|
||||
alt: "Client 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/hairdresser-grooming-their-client_23-2149205929.jpg",
|
||||
alt: "Client 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/medium-shot-man-sitting-chair_23-2149220533.jpg",
|
||||
alt: "Client 5",
|
||||
},
|
||||
]}
|
||||
avatarText="Trusted by 500+ professionals"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Precision Cuts",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Beard Sculpting",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Hot Towel Shaves",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Premium Grooming",
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "By Appointment Only",
|
||||
icon: Calendar,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplit
|
||||
background={{ variant: "radial-gradient" }}
|
||||
title="Mike's Place: Appointment-Only Prestige"
|
||||
description="Experience 20+ years of barbering excellence in a private, luxurious setting designed for the discerning gentleman."
|
||||
buttons={[{ text: "Book Appointment", href: "#contact" }, { text: "View Services", href: "#services" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/makeup-brush-with-design-space-beauty-brands_53876-167285.jpg"
|
||||
mediaAnimation="blur-reveal"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/pov-diverse-men-hotel-lobby-meeting-abroad-create-new-parnership-collaborate-project-team-businessmen-attend-videocall-conference-together-lounge-area_482257-69534.jpg", alt: "Client 1" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/close-up-portrait-bearded-male-with-long-hair-dark-background_613910-16005.jpg", alt: "Client 2" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/portrait-bearded-redhead-hipster-male-dressed-blue-jacket-grey-background_613910-1740.jpg", alt: "Client 3" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/hairdresser-grooming-their-client_23-2149205929.jpg", alt: "Client 4" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/medium-shot-man-sitting-chair_23-2149220533.jpg", alt: "Client 5" }
|
||||
]}
|
||||
avatarText="Trusted by 500+ professionals"
|
||||
marqueeItems={[
|
||||
{ type: "text", text: "Precision Cuts" },
|
||||
{ type: "text", text: "Beard Sculpting" },
|
||||
{ type: "text", text: "Hot Towel Shaves" },
|
||||
{ type: "text", text: "Premium Grooming" },
|
||||
{ type: "text-icon", text: "By Appointment Only", icon: Calendar }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={true}
|
||||
heading={[
|
||||
{
|
||||
type: "text",
|
||||
content: "Mastering the Art of Grooming",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/man-getting-his-beard-shaved-with-razor_107420-94772.jpg",
|
||||
alt: "Mike's Craft",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={true}
|
||||
heading={[
|
||||
{ type: "text", content: "Mastering the Art of Grooming" },
|
||||
{ type: "image", src: "http://img.b2bpic.net/free-photo/man-getting-his-beard-shaved-with-razor_107420-94772.jpg", alt: "Mike's Craft" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "s1",
|
||||
title: "Precision Cut",
|
||||
description: "Tailored haircutting based on your hair type and style preferences.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/child-getting-haircut-salon_23-2150462472.jpg",
|
||||
},
|
||||
{
|
||||
id: "s2",
|
||||
title: "Beard Sculpting",
|
||||
description: "Expert beard shaping and grooming to match your unique features.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-barbershop_1303-5407.jpg",
|
||||
},
|
||||
{
|
||||
id: "s3",
|
||||
title: "Signature Shave",
|
||||
description: "A classic hot towel shave experience for absolute smoothness.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-boy-learning-how-shave_23-2149450891.jpg",
|
||||
},
|
||||
{
|
||||
id: "s4",
|
||||
title: "Gentleman's Styling",
|
||||
description: "Complete hair grooming and styling with premium products.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/elegant-pipe-smoker-white-background-isolated-white-background_613910-14429.jpg",
|
||||
},
|
||||
]}
|
||||
title="Refined Grooming Services"
|
||||
description="Premium services for the modern gentleman, ensuring perfection in every cut."
|
||||
/>
|
||||
</div>
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ id: "s1", title: "Precision Cut", description: "Tailored haircutting based on your hair type and style preferences.", imageSrc: "http://img.b2bpic.net/free-photo/child-getting-haircut-salon_23-2150462472.jpg" },
|
||||
{ id: "s2", title: "Beard Sculpting", description: "Expert beard shaping and grooming to match your unique features.", imageSrc: "http://img.b2bpic.net/free-photo/man-barbershop_1303-5407.jpg" },
|
||||
{ id: "s3", title: "Signature Shave", description: "A classic hot towel shave experience for absolute smoothness.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-boy-learning-how-shave_23-2149450891.jpg" },
|
||||
{ id: "s4", title: "Gentleman's Styling", description: "Complete hair grooming and styling with premium products.", imageSrc: "http://img.b2bpic.net/free-photo/elegant-pipe-smoker-white-background-isolated-white-background_613910-14429.jpg" }
|
||||
]}
|
||||
title="Refined Grooming Services"
|
||||
description="Premium services for the modern gentleman, ensuring perfection in every cut."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
animationType="scale-rotate"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "David W.",
|
||||
role: "Executive",
|
||||
testimonial: "Mike has been my barber for 15 years. Pure consistency and unmatched precision.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/pov-diverse-men-hotel-lobby-meeting-abroad-create-new-parnership-collaborate-project-team-businessmen-attend-videocall-conference-together-lounge-area_482257-69534.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "James R.",
|
||||
role: "Creative Director",
|
||||
testimonial: "The private setting makes all the difference. No waiting, just professional results.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-bearded-male-with-long-hair-dark-background_613910-16005.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Robert S.",
|
||||
role: "Architect",
|
||||
testimonial: "Exceptional eye for detail. Best haircut I've found in two decades.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-redhead-hipster-male-dressed-blue-jacket-grey-background_613910-1740.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Mark L.",
|
||||
role: "Entrepreneur",
|
||||
testimonial: "Truly a premium service. Worth every penny for the quality Mike delivers.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-grooming-their-client_23-2149205929.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "George P.",
|
||||
role: "Consultant",
|
||||
testimonial: "Old-school craft meeting modern luxury. A rare, top-tier barbershop.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-sitting-chair_23-2149220533.jpg",
|
||||
},
|
||||
]}
|
||||
title="The Mike's Place Difference"
|
||||
description="Don't just take our word for it—our clients value the private, professional, and consistent experience."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
animationType="scale-rotate"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{ id: "t1", name: "David W.", role: "Executive", testimonial: "Mike has been my barber for 15 years. Pure consistency and unmatched precision.", imageSrc: "http://img.b2bpic.net/free-photo/pov-diverse-men-hotel-lobby-meeting-abroad-create-new-parnership-collaborate-project-team-businessmen-attend-videocall-conference-together-lounge-area_482257-69534.jpg" },
|
||||
{ id: "t2", name: "James R.", role: "Creative Director", testimonial: "The private setting makes all the difference. No waiting, just professional results.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-bearded-male-with-long-hair-dark-background_613910-16005.jpg" },
|
||||
{ id: "t3", name: "Robert S.", role: "Architect", testimonial: "Exceptional eye for detail. Best haircut I've found in two decades.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-redhead-hipster-male-dressed-blue-jacket-grey-background_613910-1740.jpg" },
|
||||
{ id: "t4", name: "Mark L.", role: "Entrepreneur", testimonial: "Truly a premium service. Worth every penny for the quality Mike delivers.", imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-grooming-their-client_23-2149205929.jpg" },
|
||||
{ id: "t5", name: "George P.", role: "Consultant", testimonial: "Old-school craft meeting modern luxury. A rare, top-tier barbershop.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-sitting-chair_23-2149220533.jpg" }
|
||||
]}
|
||||
title="The Mike's Place Difference"
|
||||
description="Don't just take our word for it—our clients value the private, professional, and consistent experience."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Secure Your Slot"
|
||||
description="Mike's Place operates by appointment only to ensure absolute focus on your experience."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Your Name",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "phone",
|
||||
type: "tel",
|
||||
placeholder: "Your Phone Number",
|
||||
required: true,
|
||||
},
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "Preferred time or special requests",
|
||||
rows: 4,
|
||||
required: true,
|
||||
}}
|
||||
mediaAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/man-getting-his-beard-shaved-with-razor_107420-94772.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Secure Your Slot"
|
||||
description="Mike's Place operates by appointment only to ensure absolute focus on your experience."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Your Name", required: true },
|
||||
{ name: "phone", type: "tel", placeholder: "Your Phone Number", required: true }
|
||||
]}
|
||||
textarea={{ name: "message", placeholder: "Preferred time or special requests", rows: 4, required: true }}
|
||||
mediaAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/man-getting-his-beard-shaved-with-razor_107420-94772.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Location",
|
||||
items: [
|
||||
{
|
||||
label: "Downtown Luxury District",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "By Appointment Only",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Contact",
|
||||
items: [
|
||||
{
|
||||
label: "Call to Book",
|
||||
href: "tel:+15550000000",
|
||||
},
|
||||
{
|
||||
label: "Instagram",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="Mike's Place"
|
||||
copyrightText="© 2025 Mike's Place | Private Barbershop"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{ title: "Location", items: [{ label: "Downtown Luxury District", href: "#" }, { label: "By Appointment Only", href: "#" }] },
|
||||
{ title: "Contact", items: [{ label: "Call to Book", href: "tel:+15550000000" }, { label: "Instagram", href: "#" }] }
|
||||
]}
|
||||
logoText="Mike's Place"
|
||||
copyrightText="© 2025 Mike's Place | Private Barbershop"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user