From 5a4f55ccd005a4c2d52f0187577e33dc5172aa29 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Thu, 16 Apr 2026 03:35:35 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 455 ++++++++++++++---------------------------------
 1 file changed, 138 insertions(+), 317 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 56d38ae..9c4ba34 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -29,332 +29,153 @@ export default function LandingPage() {
         headingFontWeight="bold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleCentered
-      navItems={[
-        {
-          name: "Home",
-          id: "hero",
-        },
-        {
-          name: "About",
-          id: "about",
-        },
-        {
-          name: "Services",
-          id: "services",
-        },
-        {
-          name: "Pricing",
-          id: "pricing",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
-      ]}
-      brandName="Pro-Cuts"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered
+            navItems={[
+              { name: "Home", id: "hero" },
+              { name: "About", id: "about" },
+              { name: "Services", id: "services" },
+              { name: "Pricing", id: "pricing" },
+              { name: "Contact", id: "contact" },
+            ]}
+            brandName="Pro-Cuts"
+          />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroCarouselLogo
-      logoText="Pro-Cuts"
-      description="Where precision meets style. Your local destination for the sharpest fades and clean shaves in town."
-      buttons={[
-        {
-          text: "Book Appointment",
-          href: "#contact",
-        },
-      ]}
-      slides={[
-        {
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=fai5t3",
-          imageAlt: "Barber station",
-        },
-        {
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=43j323",
-          imageAlt: "Detail cutting",
-        },
-        {
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=59t3zm",
-          imageAlt: "Tools",
-        },
-        {
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=0pbf4z",
-          imageAlt: "Mirror",
-        },
-        {
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=rb7oh6",
-          imageAlt: "Happy client",
-        },
-        {
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=nhghm6",
-          imageAlt: "Razor",
-        },
-      ]}
-    />
-  </div>
+        <div id="hero" data-section="hero">
+          <HeroCarouselLogo
+            logoText="Pro-Cuts"
+            description="Where precision meets style. Your local destination for the sharpest fades and clean shaves in town."
+            buttons={[{ text: "Book Appointment", href: "#contact" }]}
+            slides={[
+              { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=fai5t3", imageAlt: "barbershop chair interior modern" },
+              { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=43j323", imageAlt: "barber cutting man hair" },
+              { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=59t3zm", imageAlt: "barber tools organized wood" },
+              { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=0pbf4z", imageAlt: "barbershop mirror reflection light" },
+              { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=rb7oh6", imageAlt: "barber cape man smile" },
+              { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=nhghm6", imageAlt: "razor blade shaving detail" },
+            ]}
+          />
+        </div>
 
-  <div id="about" data-section="about">
-      <MetricSplitMediaAbout
-      useInvertedBackground={false}
-      title="Traditional Craft, Modern Style"
-      description="At Pro-Cuts, we combine old-school techniques with contemporary grooming trends to ensure you look your absolute best every single day."
-      metrics={[
-        {
-          value: "10k+",
-          title: "Haircuts Done",
-        },
-        {
-          value: "5 Stars",
-          title: "Customer Rating",
-        },
-        {
-          value: "10 Yrs",
-          title: "Experience",
-        },
-      ]}
-      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=3dqkz9"
-      imageAlt="Barbershop interior"
-      mediaAnimation="slide-up"
-      metricsAnimation="slide-up"
-    />
-  </div>
+        <div id="about" data-section="about">
+          <MetricSplitMediaAbout
+            useInvertedBackground={false}
+            title="Traditional Craft, Modern Style"
+            description="At Pro-Cuts, we combine old-school techniques with contemporary grooming trends to ensure you look your absolute best every single day."
+            metrics={[
+              { value: "10k+", title: "Haircuts Done" },
+              { value: "5 Stars", title: "Customer Rating" },
+              { value: "10 Yrs", title: "Experience" },
+            ]}
+            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=3dqkz9"
+            imageAlt="traditional barbershop interior warmth"
+            mediaAnimation="slide-up"
+            metricsAnimation="slide-up"
+          />
+        </div>
 
-  <div id="services" data-section="services">
-      <FeatureHoverPattern
-      textboxLayout="split"
-      useInvertedBackground={true}
-      features={[
-        {
-          title: "Classic Fade",
-          description: "Taper, skin fade, and everything in between.",
-          icon: Scissors,
-        },
-        {
-          title: "Hot Towel Shave",
-          description: "Relaxing straight razor treatment.",
-          icon: Waves,
-        },
-        {
-          title: "Beard Sculpting",
-          description: "Precision shaping and lining.",
-          icon: Scissors,
-        },
-      ]}
-      title="Our Grooming Services"
-      description="Premium treatments tailored to your lifestyle."
-    />
-  </div>
+        <div id="services" data-section="services">
+          <FeatureHoverPattern
+            textboxLayout="split"
+            useInvertedBackground={true}
+            animationType="slide-up"
+            features={[
+              { title: "Classic Fade", description: "Taper, skin fade, and everything in between.", icon: Scissors },
+              { title: "Hot Towel Shave", description: "Relaxing straight razor treatment.", icon: Waves },
+              { title: "Beard Sculpting", description: "Precision shaping and lining.", icon: Scissors },
+            ]}
+            title="Our Grooming Services"
+            description="Premium treatments tailored to your lifestyle."
+          />
+        </div>
 
-  <div id="pricing" data-section="pricing">
-      <PricingCardTwo
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      plans={[
-        {
-          id: "basic",
-          badge: "Essential",
-          price: "$30",
-          subtitle: "Quick clean cut",
-          buttons: [
-            {
-              text: "Book",
-              href: "#contact",
-            },
-          ],
-          features: [
-            "Haircut",
-            "Neck trim",
-          ],
-        },
-        {
-          id: "standard",
-          badge: "Recommended",
-          price: "$45",
-          subtitle: "Complete Grooming",
-          buttons: [
-            {
-              text: "Book",
-              href: "#contact",
-            },
-          ],
-          features: [
-            "Haircut",
-            "Hot towel",
-            "Beard trim",
-          ],
-        },
-        {
-          id: "premium",
-          badge: "The Works",
-          price: "$60",
-          subtitle: "Full Experience",
-          buttons: [
-            {
-              text: "Book",
-              href: "#contact",
-            },
-          ],
-          features: [
-            "Haircut",
-            "Shave",
-            "Facial massage",
-          ],
-        },
-      ]}
-      title="Transparent Pricing"
-      description="Simple rates for premium quality cuts."
-    />
-  </div>
+        <div id="pricing" data-section="pricing">
+          <PricingCardTwo
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            plans={[
+              { id: "basic", badge: "Essential", price: "$30", subtitle: "Quick clean cut", buttons: [{ text: "Book", href: "#contact" }], features: ["Haircut", "Neck trim"] },
+              { id: "standard", badge: "Recommended", price: "$45", subtitle: "Complete Grooming", buttons: [{ text: "Book", href: "#contact" }], features: ["Haircut", "Hot towel", "Beard trim"] },
+              { id: "premium", badge: "The Works", price: "$60", subtitle: "Full Experience", buttons: [{ text: "Book", href: "#contact" }], features: ["Haircut", "Shave", "Facial massage"] },
+            ]}
+            title="Transparent Pricing"
+            description="Simple rates for premium quality cuts."
+          />
+        </div>
 
-  <div id="team" data-section="team">
-      <TeamCardTen
-      useInvertedBackground={true}
-      title="Meet Your Barbers"
-      tag="The Pro Crew"
-      membersAnimation="slide-up"
-      members={[
-        {
-          id: "m1",
-          name: "Alex",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4izljb",
-        },
-        {
-          id: "m2",
-          name: "Ben",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ki0ogx",
-        },
-        {
-          id: "m3",
-          name: "Chris",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=c8l3zq",
-        },
-        {
-          id: "m4",
-          name: "Dave",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=workbi",
-        },
-      ]}
-      memberVariant="card"
-    />
-  </div>
+        <div id="team" data-section="team">
+          <TeamCardTen
+            useInvertedBackground={true}
+            title="Meet Your Barbers"
+            tag="The Pro Crew"
+            membersAnimation="slide-up"
+            members={[
+              { id: "m1", name: "Alex", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4izljb" },
+              { id: "m2", name: "Ben", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ki0ogx" },
+              { id: "m3", name: "Chris", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=c8l3zq" },
+              { id: "m4", name: "Dave", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=workbi" },
+            ]}
+            memberVariant="card"
+          />
+        </div>
 
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardTwelve
-      useInvertedBackground={false}
-      testimonials={[
-        {
-          id: "t1",
-          name: "John D.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=hmzyn2",
-        },
-        {
-          id: "t2",
-          name: "Mike S.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=71agdf",
-        },
-        {
-          id: "t3",
-          name: "Sarah W.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=tfuypm",
-        },
-        {
-          id: "t4",
-          name: "Kevin L.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=l4wx86",
-        },
-        {
-          id: "t5",
-          name: "Greg H.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=j42yxr",
-        },
-      ]}
-      cardTitle="Client Reviews"
-      cardTag="Verified Feedback"
-      cardAnimation="slide-up"
-    />
-  </div>
+        <div id="testimonials" data-section="testimonials">
+          <TestimonialCardTwelve
+            useInvertedBackground={false}
+            cardAnimation="slide-up"
+            testimonials={[
+              { id: "t1", name: "John D.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=hmzyn2" },
+              { id: "t2", name: "Mike S.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=71agdf" },
+              { id: "t3", name: "Sarah W.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=tfuypm" },
+              { id: "t4", name: "Kevin L.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=l4wx86" },
+              { id: "t5", name: "Greg H.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=j42yxr" },
+            ]}
+            cardTitle="Client Reviews"
+            cardTag="Verified Feedback"
+          />
+        </div>
 
-  <div id="faq" data-section="faq">
-      <FaqBase
-      textboxLayout="split"
-      useInvertedBackground={true}
-      faqs={[
-        {
-          id: "f1",
-          title: "Do I need an appointment?",
-          content: "We recommend booking ahead, but we do accept walk-ins based on availability.",
-        },
-        {
-          id: "f2",
-          title: "Do you do kids cuts?",
-          content: "Yes, we welcome all ages to our shop.",
-        },
-        {
-          id: "f3",
-          title: "What payment methods?",
-          content: "We accept cash and all major cards.",
-        },
-      ]}
-      title="Common Questions"
-      description="Find everything you need to know about our services."
-      faqsAnimation="slide-up"
-    />
-  </div>
+        <div id="faq" data-section="faq">
+          <FaqBase
+            textboxLayout="split"
+            useInvertedBackground={true}
+            faqsAnimation="slide-up"
+            faqs={[
+              { id: "f1", title: "Do I need an appointment?", content: "We recommend booking ahead, but we do accept walk-ins based on availability." },
+              { id: "f2", title: "Do you do kids cuts?", content: "Yes, we welcome all ages to our shop." },
+              { id: "f3", title: "What payment methods?", content: "We accept cash and all major cards." },
+            ]}
+            title="Common Questions"
+            description="Find everything you need to know about our services."
+          />
+        </div>
 
-  <div id="contact" data-section="contact">
-      <ContactSplit
-      useInvertedBackground={false}
-      background={{
-        variant: "plain",
-      }}
-      tag="Booking"
-      title="Book Your Seat"
-      description="Reserve your time at Pro-Cuts today."
-      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=nnz7u3"
-      mediaAnimation="slide-up"
-      inputPlaceholder="Your email for confirmation"
-      buttonText="Confirm Booking"
-    />
-  </div>
+        <div id="contact" data-section="contact">
+          <ContactSplit
+            useInvertedBackground={false}
+            background={{ variant: "plain" }}
+            tag="Booking"
+            title="Book Your Seat"
+            description="Reserve your time at Pro-Cuts today."
+            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=nnz7u3"
+            mediaAnimation="slide-up"
+            inputPlaceholder="Your email for confirmation"
+            buttonText="Confirm Booking"
+          />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterBaseReveal
-      logoText="Pro-Cuts"
-      columns={[
-        {
-          title: "Shop",
-          items: [
-            {
-              label: "Services",
-              href: "#services",
-            },
-            {
-              label: "Pricing",
-              href: "#pricing",
-            },
-          ],
-        },
-        {
-          title: "Connect",
-          items: [
-            {
-              label: "Instagram",
-              href: "#",
-            },
-            {
-              label: "Contact",
-              href: "#contact",
-            },
-          ],
-        },
-      ]}
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterBaseReveal
+            logoText="Pro-Cuts"
+            columns={[
+              { title: "Shop", items: [{ label: "Services", href: "#services" }, { label: "Pricing", href: "#pricing" }] },
+              { title: "Connect", items: [{ label: "Instagram", href: "#" }, { label: "Contact", href: "#contact" }] },
+            ]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file
-- 
2.49.1