Merge version_1 into main #2
429
src/app/page.tsx
429
src/app/page.tsx
@@ -19,313 +19,148 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="text-shift"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "services",
|
||||
},
|
||||
{
|
||||
name: "Team",
|
||||
id: "team",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Pro-Cuts"
|
||||
button={{
|
||||
text: "Book Now",
|
||||
href: "#contact",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Team", id: "team" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Pro-Cuts"
|
||||
button={{ text: "Book Now", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCarouselLogo
|
||||
logoText="Pro-Cuts"
|
||||
description="Experience premium grooming at Pro-Cuts. Where tradition meets modern style."
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Your Cut",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
slides={[
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=uccpn4&_wi=1",
|
||||
imageAlt: "barbershop chair stylish interior",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=bsig77&_wi=1",
|
||||
imageAlt: "barber cutting hair with precision",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=0zak4a&_wi=1",
|
||||
imageAlt: "clean barbershop interior style",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=s0txp7",
|
||||
imageAlt: "barber shop waiting area modern",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=000o0f",
|
||||
imageAlt: "barber shop atmosphere dim light",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=8f1qrk",
|
||||
imageAlt: "barber grooming finished haircut",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCarouselLogo
|
||||
logoText="Pro-Cuts"
|
||||
description="Experience premium grooming at Pro-Cuts. Where tradition meets modern style."
|
||||
buttons={[{ text: "Book Your Cut", href: "#contact" }]}
|
||||
slides={[
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=uccpn4", imageAlt: "barbershop chair stylish interior" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=bsig77", imageAlt: "barber cutting hair with precision" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=0zak4a", imageAlt: "clean barbershop interior style" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=s0txp7", imageAlt: "barber shop waiting area modern" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=000o0f", imageAlt: "barber shop atmosphere dim light" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=8f1qrk", imageAlt: "barber grooming finished haircut" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextAbout
|
||||
useInvertedBackground={false}
|
||||
title="Your Style, Perfected."
|
||||
tag="About Us"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TextAbout useInvertedBackground={false} title="Your Style, Perfected." tag="About Us" />
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardTen
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "Classic Haircut",
|
||||
description: "Timeless cuts for the modern gentleman.",
|
||||
media: {
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=gdbvre",
|
||||
imageAlt: "haircut service professional barber",
|
||||
},
|
||||
items: [
|
||||
{
|
||||
icon: CheckCircle,
|
||||
text: "Precision tapering",
|
||||
},
|
||||
{
|
||||
icon: CheckCircle,
|
||||
text: "Styling product application",
|
||||
},
|
||||
],
|
||||
reverse: false,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=uccpn4&_wi=2",
|
||||
imageAlt: "haircut service professional barber",
|
||||
},
|
||||
{
|
||||
title: "Beard Grooming",
|
||||
description: "Sculpting and shaping for your beard.",
|
||||
media: {
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=f6ajt9",
|
||||
imageAlt: "haircut service professional barber",
|
||||
},
|
||||
items: [
|
||||
{
|
||||
icon: CheckCircle,
|
||||
text: "Hot towel treatment",
|
||||
},
|
||||
{
|
||||
icon: CheckCircle,
|
||||
text: "Beard oil finish",
|
||||
},
|
||||
],
|
||||
reverse: true,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=bsig77&_wi=2",
|
||||
imageAlt: "haircut service professional barber",
|
||||
},
|
||||
{
|
||||
title: "Full Service",
|
||||
description: "Comprehensive grooming session.",
|
||||
media: {
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=hejalz",
|
||||
imageAlt: "haircut service professional barber",
|
||||
},
|
||||
items: [
|
||||
{
|
||||
icon: CheckCircle,
|
||||
text: "Haircut & Beard",
|
||||
},
|
||||
{
|
||||
icon: CheckCircle,
|
||||
text: "Straight razor shave",
|
||||
},
|
||||
],
|
||||
reverse: false,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=0zak4a&_wi=2",
|
||||
imageAlt: "haircut service professional barber",
|
||||
},
|
||||
]}
|
||||
title="Our Grooming Services"
|
||||
description="Expert care for your hair and beard, tailored to your unique style."
|
||||
/>
|
||||
</div>
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardTen
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "Classic Haircut", description: "Timeless cuts for the modern gentleman.", media: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=gdbvre", imageAlt: "haircut service professional barber" },
|
||||
items: [{ icon: CheckCircle, text: "Precision tapering" }, { icon: CheckCircle, text: "Styling product application" }],
|
||||
reverse: false
|
||||
},
|
||||
{
|
||||
title: "Beard Grooming", description: "Sculpting and shaping for your beard.", media: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=f6ajt9", imageAlt: "haircut service professional barber" },
|
||||
items: [{ icon: CheckCircle, text: "Hot towel treatment" }, { icon: CheckCircle, text: "Beard oil finish" }],
|
||||
reverse: true
|
||||
},
|
||||
{
|
||||
title: "Full Service", description: "Comprehensive grooming session.", media: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=hejalz", imageAlt: "haircut service professional barber" },
|
||||
items: [{ icon: CheckCircle, text: "Haircut & Beard" }, { icon: CheckCircle, text: "Straight razor shave" }],
|
||||
reverse: false
|
||||
},
|
||||
]}
|
||||
title="Our Grooming Services"
|
||||
description="Expert care for your hair and beard, tailored to your unique style."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
members={[
|
||||
{
|
||||
id: "b1",
|
||||
name: "John Doe",
|
||||
role: "Master Barber",
|
||||
description: "10 years of experience in classic techniques.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=jdlcyd",
|
||||
},
|
||||
{
|
||||
id: "b2",
|
||||
name: "Jane Smith",
|
||||
role: "Stylist",
|
||||
description: "Specialist in modern fades and styling.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=3zdgwt",
|
||||
},
|
||||
{
|
||||
id: "b3",
|
||||
name: "Mike Ross",
|
||||
role: "Barber",
|
||||
description: "Expert in beard shaping and hot towel shaves.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=k4xjmp",
|
||||
},
|
||||
]}
|
||||
title="Meet The Barbers"
|
||||
description="The skilled hands behind your next look."
|
||||
/>
|
||||
</div>
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
members={[
|
||||
{ id: "b1", name: "John Doe", role: "Master Barber", description: "10 years of experience in classic techniques.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=jdlcyd" },
|
||||
{ id: "b2", name: "Jane Smith", role: "Stylist", description: "Specialist in modern fades and styling.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=3zdgwt" },
|
||||
{ id: "b3", name: "Mike Ross", role: "Barber", description: "Expert in beard shaping and hot towel shaves.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=k4xjmp" },
|
||||
]}
|
||||
title="Meet The Barbers"
|
||||
description="The skilled hands behind your next look."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSix
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Alice",
|
||||
handle: "@alice",
|
||||
testimonial: "Best haircut in town, hands down.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=wi9jsi",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Bob",
|
||||
handle: "@bob",
|
||||
testimonial: "Very professional and friendly atmosphere.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=v8j9lp",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Charlie",
|
||||
handle: "@charlie",
|
||||
testimonial: "The hot towel shave is a game changer.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=12pso6",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "David",
|
||||
handle: "@david",
|
||||
testimonial: "Consistent, quality service every time.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=lexmb5",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Eve",
|
||||
handle: "@eve",
|
||||
testimonial: "Love the style advice from the barbers.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=umknrp",
|
||||
},
|
||||
]}
|
||||
title="What Our Clients Say"
|
||||
description="See why our clients trust us with their grooming needs."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSix
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Alice", handle: "@alice", testimonial: "Best haircut in town, hands down.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=wi9jsi" },
|
||||
{ id: "2", name: "Bob", handle: "@bob", testimonial: "Very professional and friendly atmosphere.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=v8j9lp" },
|
||||
{ id: "3", name: "Charlie", handle: "@charlie", testimonial: "The hot towel shave is a game changer.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=12pso6" },
|
||||
{ id: "4", name: "David", handle: "@david", testimonial: "Consistent, quality service every time.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=lexmb5" },
|
||||
{ id: "5", name: "Eve", handle: "@eve", testimonial: "Love the style advice from the barbers.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=umknrp" },
|
||||
]}
|
||||
title="What Our Clients Say"
|
||||
description="See why our clients trust us with their grooming needs."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "Do I need an appointment?",
|
||||
content: "Appointments are highly recommended for the best experience.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "What are your hours?",
|
||||
content: "We are open Tuesday through Sunday, 9am to 7pm.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
name: "Do you accept walk-ins?",
|
||||
content: "Subject to availability, but appointments are safer.",
|
||||
},
|
||||
]}
|
||||
sideTitle="Questions?"
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "q1", title: "Do I need an appointment?", content: "Appointments are highly recommended for the best experience." },
|
||||
{ id: "q2", title: "What are your hours?", content: "We are open Tuesday through Sunday, 9am to 7pm." },
|
||||
{ id: "q3", title: "Do you accept walk-ins?", content: "Subject to availability, but appointments are safer." },
|
||||
]}
|
||||
sideTitle="Questions?"
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
tag="Visit Us"
|
||||
title="Book Your Appointment"
|
||||
description="Ready for a fresh cut? Send us your email and we'll reach out."
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=rrv98f"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={true}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Visit Us"
|
||||
title="Book Your Appointment"
|
||||
description="Ready for a fresh cut? Send us your email and we'll reach out."
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=rrv98f"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Services",
|
||||
href: "#services",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
bottomLeftText="© 2024 Pro-Cuts Barbershop."
|
||||
bottomRightText="All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Company", items: [{ label: "About", href: "#about" }, { label: "Services", href: "#services" }],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms", href: "#" }],
|
||||
},
|
||||
]}
|
||||
bottomLeftText="© 2024 Pro-Cuts Barbershop."
|
||||
bottomRightText="All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user