From 4f863ea6de4091c2eb353a07cfda9eb4aacd5a29 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Wed, 29 Apr 2026 16:21:36 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 376 +++++++++++++++--------------------------------
 1 file changed, 116 insertions(+), 260 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 8b091f0..c286009 100644
--- a/src/app/page.tsx
+++ b/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>
   );