Merge version_1 into main #1
455
src/app/page.tsx
455
src/app/page.tsx
@@ -29,332 +29,153 @@ export default function LandingPage() {
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "services",
|
||||
},
|
||||
{
|
||||
name: "Pricing",
|
||||
id: "pricing",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Pro-Cuts"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Pro-Cuts"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCarouselLogo
|
||||
logoText="Pro-Cuts"
|
||||
description="Where precision meets style. Your local destination for the sharpest fades and clean shaves in town."
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Appointment",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
slides={[
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=fai5t3",
|
||||
imageAlt: "Barber station",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=43j323",
|
||||
imageAlt: "Detail cutting",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=59t3zm",
|
||||
imageAlt: "Tools",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=0pbf4z",
|
||||
imageAlt: "Mirror",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=rb7oh6",
|
||||
imageAlt: "Happy client",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=nhghm6",
|
||||
imageAlt: "Razor",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCarouselLogo
|
||||
logoText="Pro-Cuts"
|
||||
description="Where precision meets style. Your local destination for the sharpest fades and clean shaves in town."
|
||||
buttons={[{ text: "Book Appointment", href: "#contact" }]}
|
||||
slides={[
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=fai5t3", imageAlt: "barbershop chair interior modern" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=43j323", imageAlt: "barber cutting man hair" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=59t3zm", imageAlt: "barber tools organized wood" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=0pbf4z", imageAlt: "barbershop mirror reflection light" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=rb7oh6", imageAlt: "barber cape man smile" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=nhghm6", imageAlt: "razor blade shaving detail" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<MetricSplitMediaAbout
|
||||
useInvertedBackground={false}
|
||||
title="Traditional Craft, Modern Style"
|
||||
description="At Pro-Cuts, we combine old-school techniques with contemporary grooming trends to ensure you look your absolute best every single day."
|
||||
metrics={[
|
||||
{
|
||||
value: "10k+",
|
||||
title: "Haircuts Done",
|
||||
},
|
||||
{
|
||||
value: "5 Stars",
|
||||
title: "Customer Rating",
|
||||
},
|
||||
{
|
||||
value: "10 Yrs",
|
||||
title: "Experience",
|
||||
},
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=3dqkz9"
|
||||
imageAlt="Barbershop interior"
|
||||
mediaAnimation="slide-up"
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<MetricSplitMediaAbout
|
||||
useInvertedBackground={false}
|
||||
title="Traditional Craft, Modern Style"
|
||||
description="At Pro-Cuts, we combine old-school techniques with contemporary grooming trends to ensure you look your absolute best every single day."
|
||||
metrics={[
|
||||
{ value: "10k+", title: "Haircuts Done" },
|
||||
{ value: "5 Stars", title: "Customer Rating" },
|
||||
{ value: "10 Yrs", title: "Experience" },
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=3dqkz9"
|
||||
imageAlt="traditional barbershop interior warmth"
|
||||
mediaAnimation="slide-up"
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureHoverPattern
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "Classic Fade",
|
||||
description: "Taper, skin fade, and everything in between.",
|
||||
icon: Scissors,
|
||||
},
|
||||
{
|
||||
title: "Hot Towel Shave",
|
||||
description: "Relaxing straight razor treatment.",
|
||||
icon: Waves,
|
||||
},
|
||||
{
|
||||
title: "Beard Sculpting",
|
||||
description: "Precision shaping and lining.",
|
||||
icon: Scissors,
|
||||
},
|
||||
]}
|
||||
title="Our Grooming Services"
|
||||
description="Premium treatments tailored to your lifestyle."
|
||||
/>
|
||||
</div>
|
||||
<div id="services" data-section="services">
|
||||
<FeatureHoverPattern
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
animationType="slide-up"
|
||||
features={[
|
||||
{ title: "Classic Fade", description: "Taper, skin fade, and everything in between.", icon: Scissors },
|
||||
{ title: "Hot Towel Shave", description: "Relaxing straight razor treatment.", icon: Waves },
|
||||
{ title: "Beard Sculpting", description: "Precision shaping and lining.", icon: Scissors },
|
||||
]}
|
||||
title="Our Grooming Services"
|
||||
description="Premium treatments tailored to your lifestyle."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "basic",
|
||||
badge: "Essential",
|
||||
price: "$30",
|
||||
subtitle: "Quick clean cut",
|
||||
buttons: [
|
||||
{
|
||||
text: "Book",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
features: [
|
||||
"Haircut",
|
||||
"Neck trim",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "standard",
|
||||
badge: "Recommended",
|
||||
price: "$45",
|
||||
subtitle: "Complete Grooming",
|
||||
buttons: [
|
||||
{
|
||||
text: "Book",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
features: [
|
||||
"Haircut",
|
||||
"Hot towel",
|
||||
"Beard trim",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "premium",
|
||||
badge: "The Works",
|
||||
price: "$60",
|
||||
subtitle: "Full Experience",
|
||||
buttons: [
|
||||
{
|
||||
text: "Book",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
features: [
|
||||
"Haircut",
|
||||
"Shave",
|
||||
"Facial massage",
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Transparent Pricing"
|
||||
description="Simple rates for premium quality cuts."
|
||||
/>
|
||||
</div>
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{ id: "basic", badge: "Essential", price: "$30", subtitle: "Quick clean cut", buttons: [{ text: "Book", href: "#contact" }], features: ["Haircut", "Neck trim"] },
|
||||
{ id: "standard", badge: "Recommended", price: "$45", subtitle: "Complete Grooming", buttons: [{ text: "Book", href: "#contact" }], features: ["Haircut", "Hot towel", "Beard trim"] },
|
||||
{ id: "premium", badge: "The Works", price: "$60", subtitle: "Full Experience", buttons: [{ text: "Book", href: "#contact" }], features: ["Haircut", "Shave", "Facial massage"] },
|
||||
]}
|
||||
title="Transparent Pricing"
|
||||
description="Simple rates for premium quality cuts."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardTen
|
||||
useInvertedBackground={true}
|
||||
title="Meet Your Barbers"
|
||||
tag="The Pro Crew"
|
||||
membersAnimation="slide-up"
|
||||
members={[
|
||||
{
|
||||
id: "m1",
|
||||
name: "Alex",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4izljb",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
name: "Ben",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ki0ogx",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
name: "Chris",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=c8l3zq",
|
||||
},
|
||||
{
|
||||
id: "m4",
|
||||
name: "Dave",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=workbi",
|
||||
},
|
||||
]}
|
||||
memberVariant="card"
|
||||
/>
|
||||
</div>
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardTen
|
||||
useInvertedBackground={true}
|
||||
title="Meet Your Barbers"
|
||||
tag="The Pro Crew"
|
||||
membersAnimation="slide-up"
|
||||
members={[
|
||||
{ id: "m1", name: "Alex", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4izljb" },
|
||||
{ id: "m2", name: "Ben", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ki0ogx" },
|
||||
{ id: "m3", name: "Chris", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=c8l3zq" },
|
||||
{ id: "m4", name: "Dave", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=workbi" },
|
||||
]}
|
||||
memberVariant="card"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwelve
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "John D.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=hmzyn2",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Mike S.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=71agdf",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Sarah W.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=tfuypm",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Kevin L.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=l4wx86",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Greg H.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=j42yxr",
|
||||
},
|
||||
]}
|
||||
cardTitle="Client Reviews"
|
||||
cardTag="Verified Feedback"
|
||||
cardAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwelve
|
||||
useInvertedBackground={false}
|
||||
cardAnimation="slide-up"
|
||||
testimonials={[
|
||||
{ id: "t1", name: "John D.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=hmzyn2" },
|
||||
{ id: "t2", name: "Mike S.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=71agdf" },
|
||||
{ id: "t3", name: "Sarah W.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=tfuypm" },
|
||||
{ id: "t4", name: "Kevin L.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=l4wx86" },
|
||||
{ id: "t5", name: "Greg H.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=j42yxr" },
|
||||
]}
|
||||
cardTitle="Client Reviews"
|
||||
cardTag="Verified Feedback"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Do I need an appointment?",
|
||||
content: "We recommend booking ahead, but we do accept walk-ins based on availability.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Do you do kids cuts?",
|
||||
content: "Yes, we welcome all ages to our shop.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "What payment methods?",
|
||||
content: "We accept cash and all major cards.",
|
||||
},
|
||||
]}
|
||||
title="Common Questions"
|
||||
description="Find everything you need to know about our services."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
faqsAnimation="slide-up"
|
||||
faqs={[
|
||||
{ id: "f1", title: "Do I need an appointment?", content: "We recommend booking ahead, but we do accept walk-ins based on availability." },
|
||||
{ id: "f2", title: "Do you do kids cuts?", content: "Yes, we welcome all ages to our shop." },
|
||||
{ id: "f3", title: "What payment methods?", content: "We accept cash and all major cards." },
|
||||
]}
|
||||
title="Common Questions"
|
||||
description="Find everything you need to know about our services."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
tag="Booking"
|
||||
title="Book Your Seat"
|
||||
description="Reserve your time at Pro-Cuts today."
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=nnz7u3"
|
||||
mediaAnimation="slide-up"
|
||||
inputPlaceholder="Your email for confirmation"
|
||||
buttonText="Confirm Booking"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Booking"
|
||||
title="Book Your Seat"
|
||||
description="Reserve your time at Pro-Cuts today."
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=nnz7u3"
|
||||
mediaAnimation="slide-up"
|
||||
inputPlaceholder="Your email for confirmation"
|
||||
buttonText="Confirm Booking"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
logoText="Pro-Cuts"
|
||||
columns={[
|
||||
{
|
||||
title: "Shop",
|
||||
items: [
|
||||
{
|
||||
label: "Services",
|
||||
href: "#services",
|
||||
},
|
||||
{
|
||||
label: "Pricing",
|
||||
href: "#pricing",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Connect",
|
||||
items: [
|
||||
{
|
||||
label: "Instagram",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
logoText="Pro-Cuts"
|
||||
columns={[
|
||||
{ title: "Shop", items: [{ label: "Services", href: "#services" }, { label: "Pricing", href: "#pricing" }] },
|
||||
{ title: "Connect", items: [{ label: "Instagram", href: "#" }, { label: "Contact", href: "#contact" }] },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user