From cb93b659128d78a54844339a3c33241faf19bb13 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Mon, 25 May 2026 10:28:52 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 470 +++++++++++++++--------------------------------
 1 file changed, 144 insertions(+), 326 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 10fafbe..ba55d3c 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -11,6 +11,7 @@ import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
 import TextAbout from '@/components/sections/about/TextAbout';
+import { Scissors, Star } from 'lucide-react';
 
 export default function LandingPage() {
   return (
@@ -27,341 +28,158 @@ export default function LandingPage() {
         headingFontWeight="extrabold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingOverlay
-      navItems={[
-        {
-          name: "Home",
-          id: "hero",
-        },
-        {
-          name: "Services",
-          id: "services",
-        },
-        {
-          name: "Reviews",
-          id: "testimonials",
-        },
-        {
-          name: "Location",
-          id: "location",
-        },
-      ]}
-      brandName="Express Barbershop"
-      button={{
-        text: "Book Now",
-        href: "#",
-      }}
-    />
-  </div>
+        <div id="nav" data-section="nav">
+            <NavbarLayoutFloatingOverlay
+              navItems={[
+                { name: "Home", id: "hero" },
+                { name: "Services", id: "services" },
+                { name: "Reviews", id: "testimonials" },
+                { name: "Location", id: "location" },
+              ]}
+              brandName="Express Barbershop"
+              button={{
+                text: "Book Now",                href: "#"}}
+            />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroLogo
-      logoText="Express Barbershop"
-      description="Sharp Cuts. Clean Fades. Easy Online Booking.\n\nExpress Barbershop in Milnerton offers professional cuts, fades, beard styling and grooming services with simple online booking through Booksy."
-      buttons={[
-        {
-          text: "Book Now",
-          href: "#",
-        },
-        {
-          text: "View Services",
-          href: "#services",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/front-view-leather-barber-shop-chair_23-2148256927.jpg"
-      imageAlt="Express Barbershop Interior"
-    />
-  </div>
+        <div id="hero" data-section="hero">
+            <HeroLogo
+              logoText="Express Barbershop"
+              description="Sharp Cuts. Clean Fades. Easy Online Booking.\n\nExpress Barbershop in Milnerton offers professional cuts, fades, beard styling and grooming services with simple online booking through Booksy."
+              buttons={[
+                { text: "Book Now", href: "#" },
+                { text: "View Services", href: "#services" },
+              ]}
+              imageSrc="http://img.b2bpic.net/free-photo/front-view-leather-barber-shop-chair_23-2148256927.jpg"
+              imageAlt="Express Barbershop Interior"
+            />
+        </div>
 
-  <div id="trust-bar" data-section="trust-bar">
-      <MetricCardFourteen
-      useInvertedBackground={false}
-      title="Why Choose Us"
-      tag="Quality Assured"
-      metrics={[
-        {
-          id: "1",
-          value: "5.0",
-          description: "Star Rating",
-        },
-        {
-          id: "2",
-          value: "7+",
-          description: "Verified Booksy Reviews",
-        },
-        {
-          id: "3",
-          value: "Milnerton",
-          description: "Based Barbershop",
-        },
-      ]}
-      metricsAnimation="slide-up"
-    />
-  </div>
+        <div id="trust-bar" data-section="trust-bar">
+            <MetricCardFourteen
+              useInvertedBackground={false}
+              title="Why Choose Us"
+              tag="Quality Assured"
+              metrics={[
+                { id: "1", value: "5.0", description: "Star Rating" },
+                { id: "2", value: "7+", description: "Verified Booksy Reviews" },
+                { id: "3", value: "Milnerton", description: "Based Barbershop" },
+              ]}
+              metricsAnimation="slide-up"
+            />
+        </div>
 
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardSixteen
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      testimonials={[
-        {
-          id: "1",
-          name: "Client A",
-          role: "Regular",
-          company: "Milnerton",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/happy-overjoyed-woman-rejoicing-her-success_74855-3513.jpg",
-        },
-        {
-          id: "2",
-          name: "Client B",
-          role: "Regular",
-          company: "Milnerton",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-man-with-deep-blue-eyes_8353-1193.jpg",
-        },
-        {
-          id: "3",
-          name: "Client C",
-          role: "Regular",
-          company: "Milnerton",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/professional-barber-working-with-client-hairdressing-salon-uses-hair-dryer-men-s-haircut-barbershop_613910-18285.jpg",
-        },
-        {
-          id: "4",
-          name: "Client D",
-          role: "Regular",
-          company: "Milnerton",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-gray-checkered-suit_158538-4205.jpg",
-        },
-        {
-          id: "5",
-          name: "Client E",
-          role: "Regular",
-          company: "Milnerton",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-girl-shows-okay-ok-signs-look-satisfied-recommend-good-company-perfect-quality-praise-good-job-well-done-standing-pleased-against-white-background_176420-54380.jpg",
-        },
-      ]}
-      kpiItems={[
-        {
-          value: "5.0",
-          label: "Avg Rating",
-        },
-        {
-          value: "100%",
-          label: "Satisfaction",
-        },
-        {
-          value: "Local",
-          label: "Community",
-        },
-      ]}
-      title="What Our Clients Say"
-      description="Highly rated barbershop services in the heart of Milnerton."
-      buttons={[
-        {
-          text: "Book Now",
-          href: "#",
-        },
-      ]}
-    />
-  </div>
+        <div id="testimonials" data-section="testimonials">
+            <TestimonialCardSixteen
+              animationType="slide-up"
+              textboxLayout="default"
+              useInvertedBackground={false}
+              testimonials={[
+                { id: "1", name: "Client A", role: "Regular", company: "Milnerton", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/happy-overjoyed-woman-rejoicing-her-success_74855-3513.jpg" },
+                { id: "2", name: "Client B", role: "Regular", company: "Milnerton", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-man-with-deep-blue-eyes_8353-1193.jpg" },
+                { id: "3", name: "Client C", role: "Regular", company: "Milnerton", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/professional-barber-working-with-client-hairdressing-salon-uses-hair-dryer-men-s-haircut-barbershop_613910-18285.jpg" },
+                { id: "4", name: "Client D", role: "Regular", company: "Milnerton", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-gray-checkered-suit_158538-4205.jpg" },
+                { id: "5", name: "Client E", role: "Regular", company: "Milnerton", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-girl-shows-okay-ok-signs-look-satisfied-recommend-good-company-perfect-quality-praise-good-job-well-done-standing-pleased-against-white-background_176420-54380.jpg" },
+              ]}
+              kpiItems={[
+                { value: "5.0", label: "Avg Rating" },
+                { value: "100%", label: "Satisfaction" },
+                { value: "Local", label: "Community" },
+              ]}
+              title="What Our Clients Say"
+              description="Highly rated barbershop services in the heart of Milnerton."
+              buttons={[{ text: "Book Now", href: "#" }]}
+            />
+        </div>
 
-  <div id="services" data-section="services">
-      <FeatureCardTwentySix
-      textboxLayout="default"
-      useInvertedBackground={false}
-      features={[
-        {
-          title: "Gents Cut",
-          description: "R150 / 30 min",
-          imageSrc: "http://img.b2bpic.net/free-photo/various-hairdressing-equipment-white-background_23-2147711631.jpg",
-          buttonIcon: "Scissors",
-        },
-        {
-          title: "Fade",
-          description: "R170 / 30 min",
-          imageSrc: "http://img.b2bpic.net/free-photo/instruments-used-latino-hair-salon_23-2150555177.jpg",
-          buttonIcon: "Scissors",
-        },
-        {
-          title: "Kids Cut",
-          description: "R120 / 30 min",
-          imageSrc: "http://img.b2bpic.net/free-photo/man-working-with-radio-equipment-close-up_23-2148815385.jpg",
-          buttonIcon: "Scissors",
-        },
-        {
-          title: "Kids Fade",
-          description: "R140 / 30 min",
-          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-view-various-barber-tools-row_23-2147839820.jpg",
-          buttonIcon: "Scissors",
-        },
-        {
-          title: "Beard Styling",
-          description: "R140 / 30 min",
-          imageSrc: "http://img.b2bpic.net/free-photo/music-controller-foreground_1381-27.jpg",
-          buttonIcon: "Scissors",
-        },
-        {
-          title: "Hot Towel Shave",
-          description: "R140 / 30 min",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-hairdresser-shop-instruments_23-2149319798.jpg",
-          buttonIcon: "Scissors",
-        },
-      ]}
-      title="Our Professional Services"
-      description="High-quality grooming for every style."
-    />
-  </div>
+        <div id="services" data-section="services">
+            <FeatureCardTwentySix
+              textboxLayout="default"
+              useInvertedBackground={false}
+              features={[
+                { title: "Gents Cut", description: "R150 / 30 min", imageSrc: "http://img.b2bpic.net/free-photo/various-hairdressing-equipment-white-background_23-2147711631.jpg", buttonIcon: Scissors },
+                { title: "Fade", description: "R170 / 30 min", imageSrc: "http://img.b2bpic.net/free-photo/instruments-used-latino-hair-salon_23-2150555177.jpg", buttonIcon: Scissors },
+                { title: "Kids Cut", description: "R120 / 30 min", imageSrc: "http://img.b2bpic.net/free-photo/man-working-with-radio-equipment-close-up_23-2148815385.jpg", buttonIcon: Scissors },
+                { title: "Kids Fade", description: "R140 / 30 min", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-view-various-barber-tools-row_23-2147839820.jpg", buttonIcon: Scissors },
+                { title: "Beard Styling", description: "R140 / 30 min", imageSrc: "http://img.b2bpic.net/free-photo/music-controller-foreground_1381-27.jpg", buttonIcon: Scissors },
+                { title: "Hot Towel Shave", description: "R140 / 30 min", imageSrc: "http://img.b2bpic.net/free-photo/close-up-hairdresser-shop-instruments_23-2149319798.jpg", buttonIcon: Scissors },
+              ]}
+              title="Our Professional Services"
+              description="High-quality grooming for every style."
+            />
+        </div>
 
-  <div id="gallery" data-section="gallery">
-      <FeatureCardTwentySix
-      textboxLayout="default"
-      useInvertedBackground={false}
-      features={[
-        {
-          title: "Sharp Fade",
-          description: "Expert precision",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-traveler-male-dressed-fleece-shirt-wild-park-background_613910-12816.jpg",
-          buttonIcon: "Star",
-        },
-        {
-          title: "Beard Grooming",
-          description: "Signature style",
-          imageSrc: "http://img.b2bpic.net/free-photo/two-stylish-bearded-men-background-old-town_1153-8187.jpg",
-          buttonIcon: "Star",
-        },
-        {
-          title: "Modern Shop",
-          description: "Premium experience",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-man-barber-shop-after-getting-haircut_23-2149186513.jpg",
-          buttonIcon: "Star",
-        },
-        {
-          title: "Kids Cuts",
-          description: "Family friendly",
-          imageSrc: "http://img.b2bpic.net/free-photo/confident-young-female-barber-wearing-glasses-uniform-holding-combs-looking-camera-applying-hair-spray-her-own-hair-isolated-olive-green-background_141793-137891.jpg",
-          buttonIcon: "Star",
-        },
-        {
-          title: "Hot Towel",
-          description: "Refined finish",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-stylish-bearded-male-sits-chair-his-two-irish-setter-dogs_613910-8054.jpg",
-          buttonIcon: "Star",
-        },
-        {
-          title: "Clean Space",
-          description: "Always welcoming",
-          imageSrc: "http://img.b2bpic.net/free-photo/hair-stylist-making-styling-beard-client-salon_23-2148181978.jpg",
-          buttonIcon: "Star",
-        },
-      ]}
-      title="Our Work"
-      description="Like the look? Book your next cut today."
-    />
-  </div>
+        <div id="gallery" data-section="gallery">
+            <FeatureCardTwentySix
+              textboxLayout="default"
+              useInvertedBackground={false}
+              features={[
+                { title: "Sharp Fade", description: "Expert precision", imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-traveler-male-dressed-fleece-shirt-wild-park-background_613910-12816.jpg", buttonIcon: Star },
+                { title: "Beard Grooming", description: "Signature style", imageSrc: "http://img.b2bpic.net/free-photo/two-stylish-bearded-men-background-old-town_1153-8187.jpg", buttonIcon: Star },
+                { title: "Modern Shop", description: "Premium experience", imageSrc: "http://img.b2bpic.net/free-photo/young-man-barber-shop-after-getting-haircut_23-2149186513.jpg", buttonIcon: Star },
+                { title: "Kids Cuts", description: "Family friendly", imageSrc: "http://img.b2bpic.net/free-photo/confident-young-female-barber-wearing-glasses-uniform-holding-combs-looking-camera-applying-hair-spray-her-own-hair-isolated-olive-green-background_141793-137891.jpg", buttonIcon: Star },
+                { title: "Hot Towel", description: "Refined finish", imageSrc: "http://img.b2bpic.net/free-photo/portrait-stylish-bearded-male-sits-chair-his-two-irish-setter-dogs_613910-8054.jpg", buttonIcon: Star },
+                { title: "Clean Space", description: "Always welcoming", imageSrc: "http://img.b2bpic.net/free-photo/hair-stylist-making-styling-beard-client-salon_23-2148181978.jpg", buttonIcon: Star },
+              ]}
+              title="Our Work"
+              description="Like the look? Book your next cut today."
+            />
+        </div>
 
-  <div id="location" data-section="location">
-      <TextAbout
-      useInvertedBackground={false}
-      title="Visit Express Barbershop"
-      buttons={[
-        {
-          text: "Book Now",
-          href: "#",
-        },
-      ]}
-    />
-  </div>
+        <div id="location" data-section="location">
+            <TextAbout
+              useInvertedBackground={false}
+              title="Visit Express Barbershop"
+              buttons={[{ text: "Book Now", href: "#" }]}
+            />
+        </div>
 
-  <div id="faq" data-section="faq">
-      <FaqDouble
-      textboxLayout="default"
-      useInvertedBackground={false}
-      faqs={[
-        {
-          id: "1",
-          title: "Do I need to book?",
-          content: "Yes, online booking is recommended to secure your time.",
-        },
-        {
-          id: "2",
-          title: "Can I walk in?",
-          content: "Walk ins may be available, but booking online is best to avoid waiting.",
-        },
-        {
-          id: "3",
-          title: "How do I book?",
-          content: "Click any Book Now button and choose your service and time through Booksy.",
-        },
-        {
-          id: "4",
-          title: "Do you offer kids cuts?",
-          content: "Yes, kids cuts and kids fades are available.",
-        },
-      ]}
-      title="Frequently Asked Questions"
-      faqsAnimation="slide-up"
-      description="Everything you need to know about your next visit."
-    />
-  </div>
+        <div id="faq" data-section="faq">
+            <FaqDouble
+              textboxLayout="default"
+              useInvertedBackground={false}
+              faqs={[
+                { id: "1", title: "Do I need to book?", content: "Yes, online booking is recommended to secure your time." },
+                { id: "2", title: "Can I walk in?", content: "Walk ins may be available, but booking online is best to avoid waiting." },
+                { id: "3", title: "How do I book?", content: "Click any Book Now button and choose your service and time through Booksy." },
+                { id: "4", title: "Do you offer kids cuts?", content: "Yes, kids cuts and kids fades are available." },
+              ]}
+              title="Frequently Asked Questions"
+              faqsAnimation="slide-up"
+              description="Everything you need to know about your next visit."
+            />
+        </div>
 
-  <div id="booking" data-section="booking">
-      <ContactText
-      useInvertedBackground={false}
-      background={{
-        variant: "plain",
-      }}
-      text="Book Your Next Cut Online. Choose your service, select a time and confirm your appointment through Booksy. All bookings stay synced."
-      buttons={[
-        {
-          text: "Book Now",
-          href: "#",
-        },
-      ]}
-    />
-  </div>
+        <div id="booking" data-section="booking">
+            <ContactText
+              useInvertedBackground={false}
+              background={{ variant: "plain" }}
+              text="Book Your Next Cut Online. Choose your service, select a time and confirm your appointment through Booksy. All bookings stay synced."
+              buttons={[{ text: "Book Now", href: "#" }]}
+            />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterMedia
-      imageSrc="http://img.b2bpic.net/free-photo/brown-vintage-leather-chair-stylish-barber-shop_627829-6180.jpg"
-      logoText="Express Barbershop"
-      columns={[
-        {
-          title: "Navigation",
-          items: [
-            {
-              label: "Services",
-              href: "#services",
-            },
-            {
-              label: "Reviews",
-              href: "#testimonials",
-            },
-          ],
-        },
-        {
-          title: "Support",
-          items: [
-            {
-              label: "Booksy",
-              href: "#",
-            },
-            {
-              label: "Contact",
-              href: "#",
-            },
-          ],
-        },
-      ]}
-    />
-  </div>
+        <div id="footer" data-section="footer">
+            <FooterMedia
+              imageSrc="http://img.b2bpic.net/free-photo/brown-vintage-leather-chair-stylish-barber-shop_627829-6180.jpg"
+              logoText="Express Barbershop"
+              columns={[
+                {
+                  title: "Navigation",                  items: [
+                    { label: "Services", href: "#services" },
+                    { label: "Reviews", href: "#testimonials" },
+                  ],
+                },
+                {
+                  title: "Support",                  items: [
+                    { label: "Booksy", href: "#" },
+                    { label: "Contact", href: "#" },
+                  ],
+                },
+              ]}
+            />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file