From 4e6d3df67a4e7571513d0885ea8ca05b305ace23 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Sun, 26 Apr 2026 02:52:31 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 390 ++++++++++++++---------------------------------
 1 file changed, 118 insertions(+), 272 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 9357323..a31721d 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,6 +2,7 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
+import { Zap, Scissors, Waves, User } from "lucide-react";
 import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
 import FooterBase from '@/components/sections/footer/FooterBase';
@@ -28,287 +29,132 @@ export default function LandingPage() {
         headingFontWeight="light"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingOverlay
-      navItems={[
-        {
-          name: "Home",
-          id: "hero",
-        },
-        {
-          name: "Services",
-          id: "services",
-        },
-        {
-          name: "Team",
-          id: "team",
-        },
-        {
-          name: "Reviews",
-          id: "reviews",
-        },
-      ]}
-      brandName="The Porch"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            navItems={[
+              { name: "Home", id: "hero" },
+              { name: "Services", id: "services" },
+              { name: "Team", id: "team" },
+              { name: "Reviews", id: "reviews" },
+            ]}
+            brandName="The Porch"
+          />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroBillboardScroll
-      background={{
-        variant: "gradient-bars",
-      }}
-      title="Crispy Cuts. Real People. Every Time."
-      description="Experience the ultimate grooming standard at The Porch Barbershop. Where luxury meets craftsmanship."
-      imageSrc="http://img.b2bpic.net/free-photo/handsome-bearded-man-barbershop-barber-work_627829-7242.jpg?_wi=1"
-      imageAlt="luxury barbershop interior dark theme"
-      buttons={[
-        {
-          text: "Book Appointment",
-          href: "#contact",
-        },
-      ]}
-    />
-  </div>
+        <div id="hero" data-section="hero">
+          <HeroBillboardScroll
+            background={{ variant: "gradient-bars" }}
+            title="Crispy Cuts. Real People. Every Time."
+            description="Experience the ultimate grooming standard at The Porch Barbershop. Where luxury meets craftsmanship."
+            imageSrc="http://img.b2bpic.net/free-photo/handsome-bearded-man-barbershop-barber-work_627829-7242.jpg"
+            imageAlt="luxury barbershop interior dark theme"
+            buttons={[{ text: "Book Appointment", href: "#contact" }]}
+          />
+        </div>
 
-  <div id="metrics" data-section="metrics">
-      <MetricCardFourteen
-      useInvertedBackground={true}
-      title="The Porch Standard"
-      tag="Excellence"
-      metrics={[
-        {
-          id: "m1",
-          value: "7+",
-          description: "Years of Craft",
-        },
-        {
-          id: "m2",
-          value: "4.9",
-          description: "Google Rating",
-        },
-        {
-          id: "m3",
-          value: "500+",
-          description: "Happy Clients",
-        },
-      ]}
-      metricsAnimation="slide-up"
-    />
-  </div>
+        <div id="metrics" data-section="metrics">
+          <MetricCardFourteen
+            useInvertedBackground={true}
+            title="The Porch Standard"
+            tag="Excellence"
+            metrics={[
+              { id: "m1", value: "7+", description: "Years of Craft" },
+              { id: "m2", value: "4.9", description: "Google Rating" },
+              { id: "m3", value: "500+", description: "Happy Clients" },
+            ]}
+            metricsAnimation="slide-up"
+          />
+        </div>
 
-  <div id="about" data-section="about">
-      <TextSplitAbout
-      useInvertedBackground={false}
-      title="More Than A Haircut"
-      description={[
-        "Founded on the principles of community and precision, The Porch Barbershop is built for those who value authenticity.",
-        "From the moment you walk in, you're not just a client, you're part of the neighborhood.",
-      ]}
-    />
-  </div>
+        <div id="about" data-section="about">
+          <TextSplitAbout
+            useInvertedBackground={false}
+            title="More Than A Haircut"
+            description={[
+              "Founded on the principles of community and precision, The Porch Barbershop is built for those who value authenticity.",              "From the moment you walk in, you're not just a client, you're part of the neighborhood."]}
+          />
+        </div>
 
-  <div id="services" data-section="services">
-      <FeatureCardTwentySix
-      textboxLayout="default"
-      useInvertedBackground={true}
-      features={[
-        {
-          title: "Precision Fade",
-          description: "The cleanest fades in town.",
-          buttonIcon: "Zap",
-          imageSrc: "http://img.b2bpic.net/free-photo/side-view-leather-barber-shop-chair_23-2148242807.jpg",
-          imageAlt: "Side view of leather barber shop chair",
-        },
-        {
-          title: "Classic Haircut",
-          description: "Timeless styles for everyone.",
-          buttonIcon: "Scissors",
-          imageSrc: "http://img.b2bpic.net/free-photo/handsome-bearded-man-barbershop-barber-work_627829-7242.jpg?_wi=2",
-          imageAlt: "Side view of leather barber shop chair",
-        },
-        {
-          title: "Beard Trim",
-          description: "Sculpted to perfection.",
-          buttonIcon: "Waves",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-male-sunglasses-with-tattoo-his-arm_613910-12144.jpg?_wi=1",
-          imageAlt: "Side view of leather barber shop chair",
-        },
-        {
-          title: "Kids Cut",
-          description: "Style for the young ones.",
-          buttonIcon: "User",
-          imageSrc: "http://img.b2bpic.net/free-photo/happy-handsome-african-american-tattooed-man-with-stylish-hair-beard-white-shirt-holding-hand-his-chin_613910-6571.jpg?_wi=1",
-          imageAlt: "Side view of leather barber shop chair",
-        },
-      ]}
-      title="Our Signature Services"
-      description="A curated list of grooming services performed by master barbers."
-    />
-  </div>
+        <div id="services" data-section="services">
+          <FeatureCardTwentySix
+            textboxLayout="default"
+            useInvertedBackground={true}
+            features={[
+              { title: "Precision Fade", description: "The cleanest fades in town.", buttonIcon: Zap, imageSrc: "http://img.b2bpic.net/free-photo/side-view-leather-barber-shop-chair_23-2148242807.jpg" },
+              { title: "Classic Haircut", description: "Timeless styles for everyone.", buttonIcon: Scissors, imageSrc: "http://img.b2bpic.net/free-photo/handsome-bearded-man-barbershop-barber-work_627829-7242.jpg" },
+              { title: "Beard Trim", description: "Sculpted to perfection.", buttonIcon: Waves, imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-male-sunglasses-with-tattoo-his-arm_613910-12144.jpg" },
+              { title: "Kids Cut", description: "Style for the young ones.", buttonIcon: User, imageSrc: "http://img.b2bpic.net/free-photo/happy-handsome-african-american-tattooed-man-with-stylish-hair-beard-white-shirt-holding-hand-his-chin_613910-6571.jpg" },
+            ]}
+            title="Our Signature Services"
+            description="A curated list of grooming services performed by master barbers."
+          />
+        </div>
 
-  <div id="team" data-section="team">
-      <TeamCardTwo
-      animationType="slide-up"
-      textboxLayout="split"
-      gridVariant="three-columns-all-equal-width"
-      useInvertedBackground={false}
-      members={[
-        {
-          id: "1",
-          name: "Louie",
-          role: "Master Barber",
-          description: "The veteran with 10 years experience.",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-male-sunglasses-with-tattoo-his-arm_613910-12144.jpg?_wi=2",
-          imageAlt: "portrait of male barber smiling",
-        },
-        {
-          id: "2",
-          name: "Gus",
-          role: "Senior Barber",
-          description: "Precision fade expert.",
-          imageSrc: "http://img.b2bpic.net/free-photo/happy-handsome-african-american-tattooed-man-with-stylish-hair-beard-white-shirt-holding-hand-his-chin_613910-6571.jpg?_wi=2",
-          imageAlt: "portrait of male barber smiling",
-        },
-        {
-          id: "3",
-          name: "Jesus",
-          role: "Barber",
-          description: "Fresh and stylish cuts.",
-          imageSrc: "http://img.b2bpic.net/free-photo/handsome-businessman-barber-shop_1157-21514.jpg",
-          imageAlt: "portrait of male barber smiling",
-        },
-      ]}
-      title="Meet The Crew"
-      description="Our barbers are master craftsmen."
-    />
-  </div>
+        <div id="team" data-section="team">
+          <TeamCardTwo
+            animationType="slide-up"
+            textboxLayout="split"
+            gridVariant="three-columns-all-equal-width"
+            useInvertedBackground={false}
+            members={[
+              { id: "1", name: "Louie", role: "Master Barber", description: "The veteran with 10 years experience.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-male-sunglasses-with-tattoo-his-arm_613910-12144.jpg" },
+              { id: "2", name: "Gus", role: "Senior Barber", description: "Precision fade expert.", imageSrc: "http://img.b2bpic.net/free-photo/happy-handsome-african-american-tattooed-man-with-stylish-hair-beard-white-shirt-holding-hand-his-chin_613910-6571.jpg" },
+              { id: "3", name: "Jesus", role: "Barber", description: "Fresh and stylish cuts.", imageSrc: "http://img.b2bpic.net/free-photo/handsome-businessman-barber-shop_1157-21514.jpg" },
+            ]}
+            title="Meet The Crew"
+            description="Our barbers are master craftsmen."
+          />
+        </div>
 
-  <div id="reviews" data-section="reviews">
-      <TestimonialCardTwelve
-      useInvertedBackground={true}
-      testimonials={[
-        {
-          id: "1",
-          name: "John D.",
-          imageSrc: "http://img.b2bpic.net/free-photo/funny-worker-amusing-colleague-office-telling-joke_482257-102093.jpg",
-          imageAlt: "portrait of satisfied customer man",
-        },
-        {
-          id: "2",
-          name: "Mike R.",
-          imageSrc: "http://img.b2bpic.net/free-photo/looking-proud-confident-cool-cheeky-arrogant-smiling-feeling-successful_1194-400217.jpg",
-          imageAlt: "portrait of satisfied customer man",
-        },
-        {
-          id: "3",
-          name: "Sam K.",
-          imageSrc: "http://img.b2bpic.net/free-photo/energized-good-looking-assured-successful-man-with-beard-blue-eyes-stylish-formal-suit-showing-thumbs-up-being-assured-plan-work-great-standing-self-assured-against-gray-wall_176420-22712.jpg",
-          imageAlt: "portrait of satisfied customer man",
-        },
-        {
-          id: "4",
-          name: "David W.",
-          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-young-man-getting-haircut_23-2149220536.jpg",
-          imageAlt: "portrait of satisfied customer man",
-        },
-        {
-          id: "5",
-          name: "Brian L.",
-          imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-grooming-their-client_23-2149205917.jpg",
-          imageAlt: "portrait of satisfied customer man",
-        },
-        {
-          id: "6",
-          name: "Chris B.",
-          imageSrc: "http://img.b2bpic.net/free-photo/bearded-man-wearing-white-shirt-looking-smiling-confident-showing-ok-sign-standing-pink-wall_141793-55819.jpg",
-          imageAlt: "portrait of satisfied customer man",
-        },
-      ]}
-      cardTitle="Client Voices"
-      cardTag="4.9 Stars"
-      cardAnimation="slide-up"
-    />
-  </div>
+        <div id="reviews" data-section="reviews">
+          <TestimonialCardTwelve
+            useInvertedBackground={true}
+            testimonials={[
+              { id: "1", name: "John D.", imageSrc: "http://img.b2bpic.net/free-photo/funny-worker-amusing-colleague-office-telling-joke_482257-102093.jpg" },
+              { id: "2", name: "Mike R.", imageSrc: "http://img.b2bpic.net/free-photo/looking-proud-confident-cool-cheeky-arrogant-smiling-feeling-successful_1194-400217.jpg" },
+              { id: "3", name: "Sam K.", imageSrc: "http://img.b2bpic.net/free-photo/energized-good-looking-assured-successful-man-with-beard-blue-eyes-stylish-formal-suit-showing-thumbs-up-being-assured-plan-work-great-standing-self-assured-against-gray-wall_176420-22712.jpg" },
+              { id: "4", name: "David W.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-young-man-getting-haircut_23-2149220536.jpg" },
+              { id: "5", name: "Brian L.", imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-grooming-their-client_23-2149205917.jpg" },
+              { id: "6", name: "Chris B.", imageSrc: "http://img.b2bpic.net/free-photo/bearded-man-wearing-white-shirt-looking-smiling-confident-showing-ok-sign-standing-pink-wall_141793-55819.jpg" },
+            ]}
+            cardTitle="Client Voices"
+            cardTag="4.9 Stars"
+            cardAnimation="slide-up"
+          />
+        </div>
 
-  <div id="social" data-section="social">
-      <SocialProofOne
-      textboxLayout="default"
-      useInvertedBackground={false}
-      names={[
-        "Google",
-        "Yelp",
-        "StyleSeat",
-        "Instagram",
-        "Facebook",
-        "TikTok",
-        "Local Magazine",
-      ]}
-      title="Quality Assured"
-      description="Trusted by grooming enthusiasts across the region."
-    />
-  </div>
+        <div id="social" data-section="social">
+          <SocialProofOne
+            textboxLayout="default"
+            useInvertedBackground={false}
+            names={["Google", "Yelp", "StyleSeat", "Instagram", "Facebook", "TikTok", "Local Magazine"]}
+            title="Quality Assured"
+            description="Trusted by grooming enthusiasts across the region."
+          />
+        </div>
 
-  <div id="contact" data-section="contact">
-      <ContactSplit
-      useInvertedBackground={true}
-      background={{
-        variant: "plain",
-      }}
-      tag="Booking"
-      title="Book Your Seat"
-      description="Ready to get the freshest cut in town? Fill out the form and we'll reach out to confirm your slot."
-      imageSrc="http://img.b2bpic.net/free-photo/different-razors-table_23-2147736988.jpg"
-      mediaAnimation="slide-up"
-      imageAlt="barbershop tools on shelf"
-    />
-  </div>
+        <div id="contact" data-section="contact">
+          <ContactSplit
+            useInvertedBackground={true}
+            background={{ variant: "plain" }}
+            tag="Booking"
+            title="Book Your Seat"
+            description="Ready to get the freshest cut in town? Fill out the form and we'll reach out to confirm your slot."
+            imageSrc="http://img.b2bpic.net/free-photo/different-razors-table_23-2147736988.jpg"
+            mediaAnimation="slide-up"
+          />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterBase
-      columns={[
-        {
-          title: "Navigation",
-          items: [
-            {
-              label: "Home",
-              href: "#hero",
-            },
-            {
-              label: "Services",
-              href: "#services",
-            },
-            {
-              label: "Team",
-              href: "#team",
-            },
-          ],
-        },
-        {
-          title: "Social",
-          items: [
-            {
-              label: "Instagram",
-              href: "#",
-            },
-            {
-              label: "Facebook",
-              href: "#",
-            },
-          ],
-        },
-        {
-          title: "Legal",
-          items: [
-            {
-              label: "Privacy Policy",
-              href: "#",
-            },
-          ],
-        },
-      ]}
-      logoText="The Porch"
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterBase
+            columns={[
+              { title: "Navigation", items: [{ label: "Home", href: "#hero" }, { label: "Services", href: "#services" }, { label: "Team", href: "#team" }] },
+              { title: "Social", items: [{ label: "Instagram", href: "#" }, { label: "Facebook", href: "#" }] },
+              { title: "Legal", items: [{ label: "Privacy Policy", href: "#" }] },
+            ]}
+            logoText="The Porch"
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );