Merge version_1 into main #2
376
src/app/page.tsx
376
src/app/page.tsx
@@ -17,286 +17,120 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="expand-hover"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "services",
|
||||
},
|
||||
{
|
||||
name: "Location",
|
||||
id: "location",
|
||||
},
|
||||
]}
|
||||
brandName="KING OF CUT"
|
||||
button={{
|
||||
text: "Book Now",
|
||||
href: "#contact",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Location", id: "location" }
|
||||
]}
|
||||
brandName="KING OF CUT"
|
||||
button={{ text: "Book Now", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardScroll
|
||||
background={{
|
||||
variant: "rotated-rays-static-grid",
|
||||
}}
|
||||
title="KING OF CUT"
|
||||
description="Berlin’s #1 Barber Experience in Wedding. Precision cuts. Royal treatment."
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Appointment",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
text: "Walk In Today",
|
||||
href: "#location",
|
||||
},
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcvQIE1KmE2hVeJzLSpi7Z3zVe/a-cinematic-dark-moody-close-up-of-a-pro-1774801210894-3bf01cee.png"
|
||||
imageAlt="Professional barber precision cut"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardScroll
|
||||
background={{ variant: "rotated-rays-static-grid" }}
|
||||
title="KING OF CUT"
|
||||
description="Berlin’s #1 Barber Experience in Wedding. Precision cuts. Royal treatment."
|
||||
buttons={[{ text: "Book Appointment", href: "#contact" }, { text: "Walk In Today", href: "#location" }]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcvQIE1KmE2hVeJzLSpi7Z3zVe/a-cinematic-dark-moody-close-up-of-a-pro-1774801210894-3bf01cee.png"
|
||||
imageAlt="Professional barber precision cut"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="why-us" data-section="why-us">
|
||||
<SplitAbout
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
title="Not Just a Haircut. A Statement."
|
||||
description="We don't just cut hair—we craft your look. Experience the discipline and precision of Berlin's finest."
|
||||
bulletPoints={[
|
||||
{
|
||||
title: "Precision",
|
||||
description: "Every cut is clean, sharp, and tailored to you.",
|
||||
},
|
||||
{
|
||||
title: "Experience",
|
||||
description: "Relaxed atmosphere, no rush, real attention.",
|
||||
},
|
||||
{
|
||||
title: "Consistency",
|
||||
description: "Clients come back for years—for a reason.",
|
||||
},
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcvQIE1KmE2hVeJzLSpi7Z3zVe/a-clean-modern-barber-station-with-minim-1774801211239-99a3b681.png"
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="why-us" data-section="why-us">
|
||||
<SplitAbout
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
title="Not Just a Haircut. A Statement."
|
||||
description="We don't just cut hair—we craft your look. Experience the discipline and precision of Berlin's finest."
|
||||
bulletPoints={[
|
||||
{ title: "Precision", description: "Every cut is clean, sharp, and tailored to you." },
|
||||
{ title: "Experience", description: "Relaxed atmosphere, no rush, real attention." },
|
||||
{ title: "Consistency", description: "Clients come back for years—for a reason." }
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcvQIE1KmE2hVeJzLSpi7Z3zVe/a-clean-modern-barber-station-with-minim-1774801211239-99a3b681.png"
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<PricingCardEight
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "1",
|
||||
badge: "Essential",
|
||||
price: "€15",
|
||||
subtitle: "Basic precision cut",
|
||||
buttons: [
|
||||
{
|
||||
text: "Book",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
features: [
|
||||
"Precision cut",
|
||||
"Consultation",
|
||||
"Styling",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
badge: "Popular",
|
||||
price: "€25",
|
||||
subtitle: "Full service fade",
|
||||
buttons: [
|
||||
{
|
||||
text: "Book",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
features: [
|
||||
"Skin Fade",
|
||||
"Beard Trim",
|
||||
"Hot Towel",
|
||||
"Styling",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
badge: "Signature",
|
||||
price: "€35",
|
||||
subtitle: "The Royal Treatment",
|
||||
buttons: [
|
||||
{
|
||||
text: "Book",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
features: [
|
||||
"Full Service",
|
||||
"Premium Beard Care",
|
||||
"Scalp Massage",
|
||||
"Detailed Styling",
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Premium Services"
|
||||
description="Select the service that defines your look."
|
||||
/>
|
||||
</div>
|
||||
<div id="services" data-section="services">
|
||||
<PricingCardEight
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{ id: "1", badge: "Essential", price: "€15", subtitle: "Basic precision cut", buttons: [{ text: "Book", href: "#contact" }], features: ["Precision cut", "Consultation", "Styling"] },
|
||||
{ id: "2", badge: "Popular", price: "€25", subtitle: "Full service fade", buttons: [{ text: "Book", href: "#contact" }], features: ["Skin Fade", "Beard Trim", "Hot Towel", "Styling"] },
|
||||
{ id: "3", badge: "Signature", price: "€35", subtitle: "The Royal Treatment", buttons: [{ text: "Book", href: "#contact" }], features: ["Full Service", "Premium Beard Care", "Scalp Massage", "Detailed Styling"] }
|
||||
]}
|
||||
title="Premium Services"
|
||||
description="Select the service that defines your look."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTen
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Perfect Cut",
|
||||
quote: "Best barber in Wedding. Perfect haircut from the boss.",
|
||||
name: "Kafa Razzak",
|
||||
role: "Client",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcvQIE1KmE2hVeJzLSpi7Z3zVe/portrait-of-a-confident-sharp-looking-ma-1774801211391-ae2271b9.png",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Top Tier",
|
||||
quote: "Number 1 in Berlin.",
|
||||
name: "Phil J.",
|
||||
role: "Client",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcvQIE1KmE2hVeJzLSpi7Z3zVe/portrait-of-a-stylish-man-with-a-classic-1774801211224-2948764a.png",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Great Vibe",
|
||||
quote: "Super cool crew.",
|
||||
name: "Max Hans",
|
||||
role: "Client",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcvQIE1KmE2hVeJzLSpi7Z3zVe/portrait-of-a-man-with-a-modern-beard-tr-1774801211810-05418fa1.png",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
title: "Loyal Customer",
|
||||
quote: "Customer for over 6 years—service always top.",
|
||||
name: "Fatih Mert",
|
||||
role: "Client",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcvQIE1KmE2hVeJzLSpi7Z3zVe/portrait-of-a-man-showing-off-a-clean-pr-1774801211074-7b6b723b.png?_wi=1",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
title: "Excellence",
|
||||
quote: "The only shop I trust in the city for my fade.",
|
||||
name: "Lukas V.",
|
||||
role: "Client",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcvQIE1KmE2hVeJzLSpi7Z3zVe/portrait-of-a-man-showing-off-a-clean-pr-1774801211074-7b6b723b.png?_wi=2",
|
||||
},
|
||||
]}
|
||||
title="Trusted by Berlin’s Sharpest Men"
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTen
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
description="See what our clients say."
|
||||
testimonials={[
|
||||
{ id: "1", title: "Perfect Cut", quote: "Best barber in Wedding. Perfect haircut from the boss.", name: "Kafa Razzak", role: "Client", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcvQIE1KmE2hVeJzLSpi7Z3zVe/portrait-of-a-confident-sharp-looking-ma-1774801211391-ae2271b9.png" },
|
||||
{ id: "2", title: "Top Tier", quote: "Number 1 in Berlin.", name: "Phil J.", role: "Client", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcvQIE1KmE2hVeJzLSpi7Z3zVe/portrait-of-a-stylish-man-with-a-classic-1774801211224-2948764a.png" },
|
||||
{ id: "3", title: "Great Vibe", quote: "Super cool crew.", name: "Max Hans", role: "Client", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcvQIE1KmE2hVeJzLSpi7Z3zVe/portrait-of-a-man-with-a-modern-beard-tr-1774801211810-05418fa1.png" },
|
||||
{ id: "4", title: "Loyal Customer", quote: "Customer for over 6 years—service always top.", name: "Fatih Mert", role: "Client", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcvQIE1KmE2hVeJzLSpi7Z3zVe/portrait-of-a-man-showing-off-a-clean-pr-1774801211074-7b6b723b.png" },
|
||||
{ id: "5", title: "Excellence", quote: "The only shop I trust in the city for my fade.", name: "Lukas V.", role: "Client", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcvQIE1KmE2hVeJzLSpi7Z3zVe/portrait-of-a-man-showing-off-a-clean-pr-1774801211074-7b6b723b.png" }
|
||||
]}
|
||||
title="Trusted by Berlin’s Sharpest Men"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="experience" data-section="experience">
|
||||
<FeatureCardSeven
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: 1,
|
||||
title: "No Rushed Cuts",
|
||||
description: "We take the time required to ensure perfection.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcvQIE1KmE2hVeJzLSpi7Z3zVe/a-view-of-a-high-end-luxury-barbershop-i-1774801212925-460542c8.png?_wi=1",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Detail Oriented",
|
||||
description: "Real attention to every detail of your look.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcvQIE1KmE2hVeJzLSpi7Z3zVe/a-view-of-a-high-end-luxury-barbershop-i-1774801212925-460542c8.png?_wi=2",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Active Listening",
|
||||
description: "Barbers who actually listen to your needs.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcvQIE1KmE2hVeJzLSpi7Z3zVe/a-view-of-a-high-end-luxury-barbershop-i-1774801212925-460542c8.png?_wi=3",
|
||||
},
|
||||
]}
|
||||
title="The King of Cut Experience"
|
||||
description="You walk in. You sit down. You leave sharper, cleaner, more confident."
|
||||
/>
|
||||
</div>
|
||||
<div id="experience" data-section="experience">
|
||||
<FeatureCardSeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ id: 1, title: "No Rushed Cuts", description: "We take the time required to ensure perfection.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcvQIE1KmE2hVeJzLSpi7Z3zVe/a-view-of-a-high-end-luxury-barbershop-i-1774801212925-460542c8.png" },
|
||||
{ id: 2, title: "Detail Oriented", description: "Real attention to every detail of your look.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcvQIE1KmE2hVeJzLSpi7Z3zVe/a-view-of-a-high-end-luxury-barbershop-i-1774801212925-460542c8.png" },
|
||||
{ id: 3, title: "Active Listening", description: "Barbers who actually listen to your needs.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcvQIE1KmE2hVeJzLSpi7Z3zVe/a-view-of-a-high-end-luxury-barbershop-i-1774801212925-460542c8.png" }
|
||||
]}
|
||||
title="The King of Cut Experience"
|
||||
description="You walk in. You sit down. You leave sharper, cleaner, more confident."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="location" data-section="location">
|
||||
<ContactText
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
text="Visit us in Wedding. Walk-ins welcome. Get the sharpest cut in Berlin."
|
||||
buttons={[
|
||||
{
|
||||
text: "Get Directions",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="location" data-section="location">
|
||||
<ContactText
|
||||
useInvertedBackground={true}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
text="Visit us in Wedding. Walk-ins welcome. Get the sharpest cut in Berlin."
|
||||
buttons={[{ text: "Get Directions", href: "#" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Navigation",
|
||||
items: [
|
||||
{
|
||||
label: "Services",
|
||||
href: "#services",
|
||||
},
|
||||
{
|
||||
label: "Booking",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About Us",
|
||||
href: "#why-us",
|
||||
},
|
||||
{
|
||||
label: "Location",
|
||||
href: "#location",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms of Service",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
bottomLeftText="© 2024 King of Cut Berlin"
|
||||
bottomRightText="Wedding District, Berlin"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{ title: "Navigation", items: [{ label: "Services", href: "#services" }, { label: "Booking", href: "#contact" }] },
|
||||
{ title: "Company", items: [{ label: "About Us", href: "#why-us" }, { label: "Location", href: "#location" }] },
|
||||
{ title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] }
|
||||
]}
|
||||
bottomLeftText="© 2024 King of Cut Berlin"
|
||||
bottomRightText="Wedding District, Berlin"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user