Update src/app/page.tsx
This commit is contained in:
376
src/app/page.tsx
376
src/app/page.tsx
@@ -27,274 +27,130 @@ export default function LandingPage() {
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "services",
|
||||
},
|
||||
{
|
||||
name: "Team",
|
||||
id: "team",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Babylon Drachten"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Team", id: "team" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
brandName="Babylon Drachten"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDualMedia
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Crafting Your Style in Drachten"
|
||||
description="Experience the classic art of barbering at Kapsalon Babylon. Expert cuts, precise shaves, and a welcoming atmosphere."
|
||||
tag="Since 2010"
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/barber-doing-haircut-bearded-aged-client-hair-salon_23-2148182013.jpg",
|
||||
imageAlt: "Modern barber station",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/professional-hairdresser-wearing-protective-face-mask-make-haircut-european-bearded-brutal-man-beauty-salon_343596-4460.jpg",
|
||||
imageAlt: "Barber cutting hair",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-preparing-equipment-work-barber-shop_23-2148182010.jpg",
|
||||
imageAlt: "Hairdresser preparing equipment for work in barber shop",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-details-hairdresser-salon_23-2149205858.jpg",
|
||||
imageAlt: "Close up details of hairdresser salon",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-barber-hair-salon_23-2148242782.jpg",
|
||||
imageAlt: "Full shot of barber at hair salon",
|
||||
},
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
rating={5}
|
||||
ratingText="Top-rated in Drachten"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDualMedia
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Crafting Your Style in Drachten"
|
||||
description="Experience the classic art of barbering at Kapsalon Babylon. Expert cuts, precise shaves, and a welcoming atmosphere."
|
||||
tag="Since 2010"
|
||||
mediaItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/barber-doing-haircut-bearded-aged-client-hair-salon_23-2148182013.jpg", imageAlt: "Modern barber station" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/professional-hairdresser-wearing-protective-face-mask-make-haircut-european-bearded-brutal-man-beauty-salon_343596-4460.jpg", imageAlt: "Barber cutting hair" }
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
rating={5}
|
||||
ratingText="Top-rated in Drachten"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={false}
|
||||
heading={[
|
||||
{
|
||||
type: "text",
|
||||
content: "Our Passion for Grooming",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/anime-style-beauty-salon-with-cosmetology-equipment_23-2151501010.jpg",
|
||||
alt: "Babylon Barbershop exterior",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={false}
|
||||
heading={[
|
||||
{ type: "text", content: "Our Passion for Grooming" },
|
||||
{ type: "image", src: "http://img.b2bpic.net/free-photo/anime-style-beauty-salon-with-cosmetology-equipment_23-2151501010.jpg", alt: "Babylon Barbershop exterior" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardSix
|
||||
textboxLayout="inline-image"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "Classic Haircut",
|
||||
description: "Professional scissor or clipper cuts tailored to your unique style.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-from-man-barber-shop_23-2148257045.jpg",
|
||||
imageAlt: "Classic cut",
|
||||
},
|
||||
{
|
||||
title: "Beard Grooming",
|
||||
description: "Detailed beard shaping and hot towel shaves for a polished look.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-grooming-man-s-beard-professional-barber-shop-close-up_23-2148353420.jpg",
|
||||
imageAlt: "Beard grooming",
|
||||
},
|
||||
{
|
||||
title: "Hot Towel Shave",
|
||||
description: "The ultimate indulgence with premium products and relaxing techniques.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/guy-barbershop_1157-7717.jpg",
|
||||
imageAlt: "Shave service",
|
||||
},
|
||||
]}
|
||||
title="Our Professional Services"
|
||||
description="We offer a full range of grooming services for the modern man."
|
||||
/>
|
||||
</div>
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardSix
|
||||
textboxLayout="inline-image"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{ title: "Classic Haircut", description: "Professional scissor or clipper cuts tailored to your unique style.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-from-man-barber-shop_23-2148257045.jpg", imageAlt: "Classic cut" },
|
||||
{ title: "Beard Grooming", description: "Detailed beard shaping and hot towel shaves for a polished look.", imageSrc: "http://img.b2bpic.net/free-photo/woman-grooming-man-s-beard-professional-barber-shop-close-up_23-2148353420.jpg", imageAlt: "Beard grooming" },
|
||||
{ title: "Hot Towel Shave", description: "The ultimate indulgence with premium products and relaxing techniques.", imageSrc: "http://img.b2bpic.net/free-photo/guy-barbershop_1157-7717.jpg", imageAlt: "Shave service" }
|
||||
]}
|
||||
title="Our Professional Services"
|
||||
description="We offer a full range of grooming services for the modern man."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardTen
|
||||
useInvertedBackground={false}
|
||||
title="Meet Our Master Barbers"
|
||||
members={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Alex",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-with-ginger-beard-apron-gloves-holding-knife_273609-22043.jpg",
|
||||
imageAlt: "Master Barber",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Ben",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cheerful-mature-bearded-man-pointing-fingers-camera-praise-accomplished-goal-inviting-you-picking-people-join-team-inviting-event-standing-white-background_176420-45014.jpg",
|
||||
imageAlt: "Senior Barber",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Chris",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/barber-customer-giving-high-five_23-2147737094.jpg",
|
||||
imageAlt: "Stylist",
|
||||
},
|
||||
]}
|
||||
memberVariant="card"
|
||||
membersAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardTen
|
||||
useInvertedBackground={false}
|
||||
title="Meet Our Master Barbers"
|
||||
tag="Expert Stylists"
|
||||
members={[
|
||||
{ id: "t1", name: "Alex", imageSrc: "http://img.b2bpic.net/free-photo/man-with-ginger-beard-apron-gloves-holding-knife_273609-22043.jpg", imageAlt: "Master Barber" },
|
||||
{ id: "t2", name: "Ben", imageSrc: "http://img.b2bpic.net/free-photo/cheerful-mature-bearded-man-pointing-fingers-camera-praise-accomplished-goal-inviting-you-picking-people-join-team-inviting-event-standing-white-background_176420-45014.jpg", imageAlt: "Senior Barber" },
|
||||
{ id: "t3", name: "Chris", imageSrc: "http://img.b2bpic.net/free-photo/barber-customer-giving-high-five_23-2147737094.jpg", imageAlt: "Stylist" }
|
||||
]}
|
||||
memberVariant="card"
|
||||
membersAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardThirteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Jan",
|
||||
handle: "@drachten_local",
|
||||
testimonial: "Best barber in town, professional and friendly.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-male-hairdresser-salon_52683-111009.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Pieter",
|
||||
handle: "@styled_guy",
|
||||
testimonial: "Always consistent, never disappointed with the fade.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-sexy-goodlooking-attractive-stylish-bearded-man-brown_285396-4616.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Simon",
|
||||
handle: "@gentleman",
|
||||
testimonial: "A classic barbershop experience I highly recommend.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-man-sitting-chair_23-2149220526.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Erik",
|
||||
handle: "@regular",
|
||||
testimonial: "Great attention to detail, worth every penny.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-smiling-beautiful-adult-businesswoman_1262-1760.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Mark",
|
||||
handle: "@freshcut",
|
||||
testimonial: "Relaxing and efficient, exactly what I need.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-hair-salon_23-2150665451.jpg",
|
||||
},
|
||||
]}
|
||||
showRating={true}
|
||||
title="What Our Clients Say"
|
||||
description="Don't just take our word for it—read what our satisfied clients have to say about their experience at Kapsalon Babylon."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardThirteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Jan", handle: "@drachten_local", testimonial: "Best barber in town, professional and friendly.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-male-hairdresser-salon_52683-111009.jpg" },
|
||||
{ id: "2", name: "Pieter", handle: "@styled_guy", testimonial: "Always consistent, never disappointed with the fade.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-sexy-goodlooking-attractive-stylish-bearded-man-brown_285396-4616.jpg" },
|
||||
{ id: "3", name: "Simon", handle: "@gentleman", testimonial: "A classic barbershop experience I highly recommend.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-man-sitting-chair_23-2149220526.jpg" },
|
||||
{ id: "4", name: "Erik", handle: "@regular", testimonial: "Great attention to detail, worth every penny.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/closeup-smiling-beautiful-adult-businesswoman_1262-1760.jpg" },
|
||||
{ id: "5", name: "Mark", handle: "@freshcut", testimonial: "Relaxing and efficient, exactly what I need.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-hair-salon_23-2150665451.jpg" }
|
||||
]}
|
||||
showRating={true}
|
||||
title="What Our Clients Say"
|
||||
description="Don't just take our word for it—read what our satisfied clients have to say about their experience at Kapsalon Babylon."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Do I need an appointment?",
|
||||
content: "Yes, we recommend booking online to guarantee your preferred time.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "What are your opening hours?",
|
||||
content: "We are open Tue-Sat, 9am to 6pm.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Do you offer walk-ins?",
|
||||
content: "We occasionally accept walk-ins, but scheduling is better.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/full-body-portrait-stylish-male-who-himself-shaving-while-sitting-barber-chair-hairdressing-salon_613910-18655.jpg"
|
||||
title="Common Questions"
|
||||
faqsAnimation="blur-reveal"
|
||||
description="Have questions about our services or need help planning your visit? Here are the most frequently asked questions."
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "f1", title: "Do I need an appointment?", content: "Yes, we recommend booking online to guarantee your preferred time." },
|
||||
{ id: "f2", title: "What are your opening hours?", content: "We are open Tue-Sat, 9am to 6pm." },
|
||||
{ id: "f3", title: "Do you offer walk-ins?", content: "We occasionally accept walk-ins, but scheduling is better." }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/full-body-portrait-stylish-male-who-himself-shaving-while-sitting-barber-chair-hairdressing-salon_613910-18655.jpg"
|
||||
title="Common Questions"
|
||||
faqsAnimation="blur-reveal"
|
||||
description="Have questions about our services or need help planning your visit? Here are the most frequently asked questions."
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
title="Visit Us Today"
|
||||
description="Book your appointment and step into Babylon for a premium experience."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/haircuting-process-small-dog-sits-table-dog-with-professional_1157-48821.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
tag="Contact Us"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={true}
|
||||
background={{ variant: "plain" }}
|
||||
title="Visit Us Today"
|
||||
description="Book your appointment and step into Babylon for a premium experience."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/haircuting-process-small-dog-sits-table-dog-with-professional_1157-48821.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
tag="Contact Us"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="Babylon Drachten"
|
||||
columns={[
|
||||
{
|
||||
title: "Links",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Services",
|
||||
href: "#services",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Follow",
|
||||
items: [
|
||||
{
|
||||
label: "Instagram",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Facebook",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="Babylon Drachten"
|
||||
columns={[
|
||||
{ title: "Links", items: [{ label: "About", href: "#about" }, { label: "Services", href: "#services" }] },
|
||||
{ title: "Follow", items: [{ label: "Instagram", href: "#" }, { label: "Facebook", href: "#" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user