Merge version_1 into main #2
383
src/app/page.tsx
383
src/app/page.tsx
@@ -14,267 +14,146 @@ import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCar
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="soft"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="mediumLargeSizeMediumTitles"
|
||||
background="aurora"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="semibold"
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="soft"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="mediumLargeSizeMediumTitles"
|
||||
background="aurora"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "#hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "#about",
|
||||
},
|
||||
{
|
||||
name: "Team",
|
||||
id: "#team",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "#contact",
|
||||
},
|
||||
]}
|
||||
brandName="Gentlemen's Barber"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{ name: "Home", id: "#hero" },
|
||||
{ name: "About", id: "#about" },
|
||||
{ name: "Team", id: "#team" },
|
||||
{ name: "Contact", id: "#contact" },
|
||||
]}
|
||||
brandName="Gentlemen's Barber"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDualMedia
|
||||
background="aurora"
|
||||
title="Timeless Grooming for the Modern Gentleman"
|
||||
description="Experience superior cuts, hot towel shaves, and premium beard care in our sanctuary of style."
|
||||
tag="Master Barbering"
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-arrangement-with-scissors_23-2149007425.jpg?_wi=1",
|
||||
imageAlt: "Barber shop interior professional",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/child-getting-haircut-salon_23-2150462516.jpg",
|
||||
imageAlt: "Barber cutting hair professional",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/composition-fathers-day_23-2148101903.jpg",
|
||||
imageAlt: "Composition for fathers day",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/vintage-salon-tools-jobs-career-concept_53876-127080.jpg",
|
||||
imageAlt: "Vintage salon tools in jobs and career concept",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/tools-shaving-beard-desk_23-2148181852.jpg",
|
||||
imageAlt: "Tools for shaving beard on desk",
|
||||
},
|
||||
]}
|
||||
mediaAnimation="blur-reveal"
|
||||
rating={5}
|
||||
ratingText="Rated 5/5 by 500+ satisfied clients"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDualMedia
|
||||
background={{ variant: "rotated-rays-static" }}
|
||||
title="Timeless Grooming for the Modern Gentleman"
|
||||
description="Experience superior cuts, hot towel shaves, and premium beard care in our sanctuary of style."
|
||||
tag="Master Barbering"
|
||||
mediaItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/high-angle-arrangement-with-scissors_23-2149007425.jpg", imageAlt: "Barber shop interior professional" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/child-getting-haircut-salon_23-2150462516.jpg", imageAlt: "Barber cutting hair professional" }
|
||||
]}
|
||||
mediaAnimation="blur-reveal"
|
||||
rating={5}
|
||||
ratingText="Rated 5/5 by 500+ satisfied clients"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<MetricSplitMediaAbout
|
||||
useInvertedBackground={true}
|
||||
title="A Legacy of Grooming Excellence"
|
||||
description="At Gentlemen's BarberShop, we combine old-school techniques with modern precision to provide an unmatched grooming experience."
|
||||
metrics={[
|
||||
{
|
||||
value: "15+",
|
||||
title: "Years Experience",
|
||||
},
|
||||
{
|
||||
value: "10k+",
|
||||
title: "Haircuts Done",
|
||||
},
|
||||
{
|
||||
value: "500+",
|
||||
title: "Five-Star Reviews",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/view-vintage-sewing-machine_23-2150315196.jpg"
|
||||
imageAlt="barbershop interior warm lighting"
|
||||
mediaAnimation="blur-reveal"
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<MetricSplitMediaAbout
|
||||
useInvertedBackground={true}
|
||||
title="A Legacy of Grooming Excellence"
|
||||
description="At Gentlemen's BarberShop, we combine old-school techniques with modern precision to provide an unmatched grooming experience."
|
||||
metrics={[
|
||||
{ value: "15+", title: "Years Experience" },
|
||||
{ value: "10k+", title: "Haircuts Done" },
|
||||
{ value: "500+", title: "Five-Star Reviews" },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/view-vintage-sewing-machine_23-2150315196.jpg"
|
||||
imageAlt="barbershop interior warm lighting"
|
||||
mediaAnimation="blur-reveal"
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyOne
|
||||
useInvertedBackground={false}
|
||||
title="Our Signature Services"
|
||||
description="Premium treatments tailored to your style."
|
||||
accordionItems={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Classic Haircut",
|
||||
content: "Precision scissors and clipper work tailored to your face shape.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Hot Towel Shave",
|
||||
content: "A relaxing, traditional service providing an impeccably smooth finish.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Beard Grooming",
|
||||
content: "Professional trimming, conditioning, and shaping for your beard.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/haircut-machine-scissors_23-2147736989.jpg"
|
||||
imageAlt="Haircut machine and scissors"
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyOne
|
||||
useInvertedBackground={false}
|
||||
title="Our Signature Services"
|
||||
description="Premium treatments tailored to your style."
|
||||
accordionItems={[
|
||||
{ id: "f1", title: "Classic Haircut", content: "Precision scissors and clipper work tailored to your face shape." },
|
||||
{ id: "f2", title: "Hot Towel Shave", content: "A relaxing, traditional service providing an impeccably smooth finish." },
|
||||
{ id: "f3", title: "Beard Grooming", content: "Professional trimming, conditioning, and shaping for your beard." },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/haircut-machine-scissors_23-2147736989.jpg"
|
||||
imageAlt="Haircut machine and scissors"
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardEleven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
groups={[
|
||||
{
|
||||
id: "g1",
|
||||
groupTitle: "Our Professionals",
|
||||
members: [
|
||||
{
|
||||
id: "m1",
|
||||
title: "James",
|
||||
subtitle: "Master Barber",
|
||||
detail: "15 years of precision styling.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/joyful-young-handsome-barber-wearing-uniform-holding-hair-clippers-clenching-fist-isolated-purple_141793-84227.jpg",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
title: "Robert",
|
||||
subtitle: "Senior Stylist",
|
||||
detail: "Expert in beard design.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/latino-hair-salon-owner-preparing-clients_23-2150286080.jpg",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
title: "Michael",
|
||||
subtitle: "Grooming Specialist",
|
||||
detail: "Specialist in classic shaves.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-cuts-his-beard-barbershop_1157-16145.jpg",
|
||||
},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-arrangement-with-scissors_23-2149007425.jpg?_wi=2",
|
||||
imageAlt: "professional barber smiling",
|
||||
},
|
||||
]}
|
||||
title="Meet Your Barbers"
|
||||
description="Skilled craftsmen dedicated to your image."
|
||||
/>
|
||||
</div>
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardEleven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
groups={[
|
||||
{
|
||||
id: "g1", groupTitle: "Our Professionals", members: [
|
||||
{ id: "m1", title: "James", subtitle: "Master Barber", detail: "15 years of precision styling.", imageSrc: "http://img.b2bpic.net/free-photo/joyful-young-handsome-barber-wearing-uniform-holding-hair-clippers-clenching-fist-isolated-purple_141793-84227.jpg" },
|
||||
{ id: "m2", title: "Robert", subtitle: "Senior Stylist", detail: "Expert in beard design.", imageSrc: "http://img.b2bpic.net/free-photo/latino-hair-salon-owner-preparing-clients_23-2150286080.jpg" },
|
||||
{ id: "m3", title: "Michael", subtitle: "Grooming Specialist", detail: "Specialist in classic shaves.", imageSrc: "http://img.b2bpic.net/free-photo/man-cuts-his-beard-barbershop_1157-16145.jpg" },
|
||||
]
|
||||
}
|
||||
]}
|
||||
title="Meet Your Barbers"
|
||||
description="Skilled craftsmen dedicated to your image."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSix
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Alex",
|
||||
handle: "@alex",
|
||||
testimonial: "The best haircut I have ever had. Truly premium.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/boy-making-frame-with-hands_23-2148155770.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Brian",
|
||||
handle: "@brian",
|
||||
testimonial: "Gentlemen's BarberShop is the gold standard.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-barber-shop-concept_23-2148506366.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Charlie",
|
||||
handle: "@charlie",
|
||||
testimonial: "Consistent, clean, and welcoming environment.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-smiling-kitchen_107420-12357.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "David",
|
||||
handle: "@david",
|
||||
testimonial: "Highly recommend the hot towel shave.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-man-applying-his-anti-aging-treatment_23-2149296503.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Edward",
|
||||
handle: "@edward",
|
||||
testimonial: "Top-tier craftsmanship in every visit.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-bearded-man-barbershop-barber-work-washing-head_627829-7234.jpg",
|
||||
},
|
||||
]}
|
||||
title="Client Stories"
|
||||
description="Hear what our clients have to say about their experience."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSix
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Alex", handle: "@alex", testimonial: "The best haircut I have ever had. Truly premium.", imageSrc: "http://img.b2bpic.net/free-photo/boy-making-frame-with-hands_23-2148155770.jpg" },
|
||||
{ id: "t2", name: "Brian", handle: "@brian", testimonial: "Gentlemen's BarberShop is the gold standard.", imageSrc: "http://img.b2bpic.net/free-photo/front-view-barber-shop-concept_23-2148506366.jpg" },
|
||||
{ id: "t3", name: "Charlie", handle: "@charlie", testimonial: "Consistent, clean, and welcoming environment.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-smiling-kitchen_107420-12357.jpg" },
|
||||
{ id: "t4", name: "David", handle: "@david", testimonial: "Highly recommend the hot towel shave.", imageSrc: "http://img.b2bpic.net/free-photo/young-man-applying-his-anti-aging-treatment_23-2149296503.jpg" },
|
||||
{ id: "t5", name: "Edward", handle: "@edward", testimonial: "Top-tier craftsmanship in every visit.", imageSrc: "http://img.b2bpic.net/free-photo/handsome-bearded-man-barbershop-barber-work-washing-head_627829-7234.jpg" },
|
||||
]}
|
||||
title="Client Stories"
|
||||
description="Hear what our clients have to say about their experience."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
tag="Visit Us"
|
||||
title="Book Your Appointment"
|
||||
description="Ready for your next visit? Sign up to receive our grooming tips and news."
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={true}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Visit Us"
|
||||
title="Book Your Appointment"
|
||||
description="Ready for your next visit? Sign up to receive our grooming tips and news."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Shop",
|
||||
items: [
|
||||
{
|
||||
label: "Services",
|
||||
href: "#features",
|
||||
},
|
||||
{
|
||||
label: "Team",
|
||||
href: "#team",
|
||||
},
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
bottomLeftText="© 2024 Gentlemen's BarberShop"
|
||||
bottomRightText="All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Shop", items: [
|
||||
{ label: "Services", href: "#features" },
|
||||
{ label: "Team", href: "#team" },
|
||||
{ label: "About", href: "#about" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy", href: "#" },
|
||||
{ label: "Terms", href: "#" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
bottomLeftText="© 2024 Gentlemen's BarberShop"
|
||||
bottomRightText="All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user