Merge version_1 into main #1
392
src/app/page.tsx
392
src/app/page.tsx
@@ -27,281 +27,137 @@ export default function LandingPage() {
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "services",
|
||||
},
|
||||
{
|
||||
name: "Team",
|
||||
id: "team",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Gentlemen’s Shop"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Team", id: "team" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Gentlemen’s Shop"
|
||||
button={{ text: "Book Now", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitKpi
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
title="Classic Grooming for the Modern Gentleman"
|
||||
description="Experience superior cuts, hot towel shaves, and refined beard maintenance in a relaxing atmosphere designed for your ultimate comfort."
|
||||
kpis={[
|
||||
{
|
||||
value: "10+",
|
||||
label: "Years Experience",
|
||||
},
|
||||
{
|
||||
value: "5k+",
|
||||
label: "Satisfied Clients",
|
||||
},
|
||||
{
|
||||
value: "4.9",
|
||||
label: "Average Rating",
|
||||
},
|
||||
]}
|
||||
enableKpiAnimation={true}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/front-view-barber-shop-concept_23-2148506290.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitKpi
|
||||
background={{ variant: "plain" }}
|
||||
title="Classic Grooming for the Modern Gentleman"
|
||||
description="Experience superior cuts, hot towel shaves, and refined beard maintenance in a relaxing atmosphere designed for your ultimate comfort."
|
||||
kpis={[
|
||||
{ value: "10+", label: "Years Experience" },
|
||||
{ value: "5k+", label: "Satisfied Clients" },
|
||||
{ value: "4.9", label: "Average Rating" },
|
||||
]}
|
||||
enableKpiAnimation={true}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/front-view-barber-shop-concept_23-2148506290.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={false}
|
||||
heading={[
|
||||
{
|
||||
type: "text",
|
||||
content: "Mastering the Art of the Cut",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/chairs-green-male-barbershop-retro-style_627829-8284.jpg",
|
||||
alt: "Barbershop interior",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={false}
|
||||
heading={[
|
||||
{ type: "text", content: "Mastering the Art of the Cut" },
|
||||
{ type: "image", src: "http://img.b2bpic.net/free-photo/chairs-green-male-barbershop-retro-style_627829-8284.jpg", alt: "Barbershop interior" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardTwentyFive
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Haircut & Styling",
|
||||
description: "Precision haircut tailored to your hair type and style preference.",
|
||||
icon: Scissors,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-electric-trimmer-dressing-table_107420-94802.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/crop-barber-styling-beard-customer_23-2147778885.jpg",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Hot Towel Shave",
|
||||
description: "The ultimate classic ritual, featuring hot towels and premium shaving products.",
|
||||
icon: Scissors,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beauty-care_1098-15694.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/profile-view-young-man-lying-bed-taking-nap-after-massage-spa_662251-2534.jpg",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Beard Grooming",
|
||||
description: "Keep your beard looking its best with our professional trim and conditioning services.",
|
||||
icon: Sparkles,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-bearded-customer-looking-up_23-2148256859.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/professional-bearded-barber-man-apron-holding-spray-hairbrush-with-smile-face-standing-orange-wall_141793-48481.jpg",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Our Signature Services"
|
||||
description="Premium grooming solutions tailored to your unique style."
|
||||
/>
|
||||
</div>
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardTwentyFive
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Haircut & Styling", description: "Precision haircut tailored to your hair type and style preference.", icon: Scissors,
|
||||
mediaItems: [
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/close-up-electric-trimmer-dressing-table_107420-94802.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/crop-barber-styling-beard-customer_23-2147778885.jpg" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Hot Towel Shave", description: "The ultimate classic ritual, featuring hot towels and premium shaving products.", icon: Scissors,
|
||||
mediaItems: [
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/beauty-care_1098-15694.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/profile-view-young-man-lying-bed-taking-nap-after-massage-spa_662251-2534.jpg" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Beard Grooming", description: "Keep your beard looking its best with our professional trim and conditioning services.", icon: Sparkles,
|
||||
mediaItems: [
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/close-up-bearded-customer-looking-up_23-2148256859.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/professional-bearded-barber-man-apron-holding-spray-hairbrush-with-smile-face-standing-orange-wall_141793-48481.jpg" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Our Signature Services"
|
||||
description="Premium grooming solutions tailored to your unique style."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardFive
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
team={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "James Sterling",
|
||||
role: "Head Barber",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-holding-painting-brush_23-2149529894.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Marcus Thorne",
|
||||
role: "Styling Specialist",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/stylish-male-azure-jacket-holds-sunglasses-grey-background_613910-13767.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Leo Vance",
|
||||
role: "Grooming Artisan",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-redhead-bearded-male-dressed-afleece-shirt-grey-background_613910-10258.jpg",
|
||||
},
|
||||
]}
|
||||
title="Meet Our Master Barbers"
|
||||
description="Our experts are committed to providing the highest level of service."
|
||||
/>
|
||||
</div>
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardFive
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
team={[
|
||||
{ id: "t1", name: "James Sterling", role: "Head Barber", imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-holding-painting-brush_23-2149529894.jpg" },
|
||||
{ id: "t2", name: "Marcus Thorne", role: "Styling Specialist", imageSrc: "http://img.b2bpic.net/free-photo/stylish-male-azure-jacket-holds-sunglasses-grey-background_613910-13767.jpg" },
|
||||
{ id: "t3", name: "Leo Vance", role: "Grooming Artisan", imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-redhead-bearded-male-dressed-afleece-shirt-grey-background_613910-10258.jpg" },
|
||||
]}
|
||||
title="Meet Our Master Barbers"
|
||||
description="Our experts are committed to providing the highest level of service."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Robert Miller",
|
||||
role: "Consultant",
|
||||
company: "Client",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/thoughtful-young-afro-american-male-barber-wearing-uniform-keeping-hand-chin-isolated-pink-wall-with-copy-space_141793-112904.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "David Carter",
|
||||
role: "Architect",
|
||||
company: "Client",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Sam Anderson",
|
||||
role: "Creative",
|
||||
company: "Client",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/barber-customer-giving-high-five_23-2147737094.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "William Scott",
|
||||
role: "Executive",
|
||||
company: "Client",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/professional-barber-finished-grooming-long-gray-beard_23-2148181941.jpg",
|
||||
},
|
||||
]}
|
||||
title="Client Experiences"
|
||||
description="What our clients say about their experience."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Robert Miller", role: "Consultant", company: "Client", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/thoughtful-young-afro-american-male-barber-wearing-uniform-keeping-hand-chin-isolated-pink-wall-with-copy-space_141793-112904.jpg" },
|
||||
{ id: "2", name: "David Carter", role: "Architect", company: "Client", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg" },
|
||||
{ id: "3", name: "Sam Anderson", role: "Creative", company: "Client", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/barber-customer-giving-high-five_23-2147737094.jpg" },
|
||||
{ id: "4", name: "William Scott", role: "Executive", company: "Client", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/professional-barber-finished-grooming-long-gray-beard_23-2148181941.jpg" },
|
||||
]}
|
||||
title="Client Experiences"
|
||||
description="What our clients say about their experience."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactFaq
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Do I need an appointment?",
|
||||
content: "Appointments are highly recommended to ensure your spot, though we occasionally accept walk-ins.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "What are your hours?",
|
||||
content: "We are open Monday to Saturday from 9 AM to 7 PM.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Do you offer beard styling?",
|
||||
content: "Yes, we specialize in comprehensive beard maintenance and grooming.",
|
||||
},
|
||||
]}
|
||||
ctaTitle="Book Your Appointment"
|
||||
ctaDescription="Ready for a refresh? Book online or call our shop."
|
||||
ctaButton={{
|
||||
text: "Book Now",
|
||||
href: "#",
|
||||
}}
|
||||
ctaIcon={Calendar}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactFaq
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "f1", title: "Do I need an appointment?", content: "Appointments are highly recommended to ensure your spot, though we occasionally accept walk-ins." },
|
||||
{ id: "f2", title: "What are your hours?", content: "We are open Monday to Saturday from 9 AM to 7 PM." },
|
||||
{ id: "f3", title: "Do you offer beard styling?", content: "Yes, we specialize in comprehensive beard maintenance and grooming." },
|
||||
]}
|
||||
ctaTitle="Book Your Appointment"
|
||||
ctaDescription="Ready for a refresh? Book online or call our shop."
|
||||
ctaButton={{ text: "Book Now", href: "#" }}
|
||||
ctaIcon={Calendar}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
columns={[
|
||||
{
|
||||
title: "Gentlemen's Shop",
|
||||
items: [
|
||||
{
|
||||
label: "123 Grooming Lane, City",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Services",
|
||||
items: [
|
||||
{
|
||||
label: "Haircut",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Shave",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Beard Trim",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Policies",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms of Service",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
columns={[
|
||||
{ title: "Gentlemen's Shop", items: [{ label: "123 Grooming Lane, City", href: "#" }] },
|
||||
{ title: "Services", items: [{ label: "Haircut", href: "#" }, { label: "Shave", href: "#" }, { label: "Beard Trim", href: "#" }] },
|
||||
{ title: "Policies", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user