From c142880e12fe5e9a1b60148abc3ae67c008afa00 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Sun, 19 Apr 2026 21:16:51 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 287 +++++++++--------------------------------------
 1 file changed, 56 insertions(+), 231 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index e73b420..c78c3fa 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -32,21 +32,13 @@ export default function LandingPage() {
       <NavbarStyleFullscreen
       navItems={[
         {
-          name: "Services",
-          id: "services",
-        },
+          name: "Services",          id: "services"},
         {
-          name: "Results",
-          id: "results",
-        },
+          name: "Results",          id: "results"},
         {
-          name: "Team",
-          id: "team",
-        },
+          name: "Team",          id: "team"},
         {
-          name: "Book Now",
-          id: "contact",
-        },
+          name: "Book Now",          id: "contact"},
       ]}
       brandName="BARBERS PLAYGROUND"
     />
@@ -55,65 +47,40 @@ export default function LandingPage() {
   <div id="hero" data-section="hero">
       <HeroCentered
       background={{
-        variant: "gradient-bars",
-      }}
+        variant: "gradient-bars"}}
       title="Precision Cuts. Premium Experience."
       description="Elevate your style at Barbers Playground — where grooming meets craftsmanship."
       avatars={[
         {
-          src: "http://img.b2bpic.net/free-photo/young-successful-businessman-posing-dark-wall_176420-54.jpg",
-          alt: "Client 1",
-        },
+          src: "http://img.b2bpic.net/free-photo/young-successful-businessman-posing-dark-wall_176420-54.jpg",          alt: "Client 1"},
         {
-          src: "http://img.b2bpic.net/free-photo/smiling-young-handsome-man-looking-camera_23-2147891187.jpg",
-          alt: "Client 2",
-        },
+          src: "http://img.b2bpic.net/free-photo/smiling-young-handsome-man-looking-camera_23-2147891187.jpg",          alt: "Client 2"},
         {
-          src: "http://img.b2bpic.net/free-photo/blond-man-happy-expression_1194-2921.jpg",
-          alt: "Client 3",
-        },
+          src: "http://img.b2bpic.net/free-photo/blond-man-happy-expression_1194-2921.jpg",          alt: "Client 3"},
         {
-          src: "http://img.b2bpic.net/free-photo/pleased-young-beautiful-female-barber-uniform-showing-timeout-gesture-isolated-green-wall_141793-106149.jpg",
-          alt: "Client 4",
-        },
+          src: "http://img.b2bpic.net/free-photo/pleased-young-beautiful-female-barber-uniform-showing-timeout-gesture-isolated-green-wall_141793-106149.jpg",          alt: "Client 4"},
         {
-          src: "http://img.b2bpic.net/free-photo/front-view-barber-shop-concept_23-2148506342.jpg",
-          alt: "Client 5",
-        },
+          src: "http://img.b2bpic.net/free-photo/front-view-barber-shop-concept_23-2148506342.jpg",          alt: "Client 5"},
       ]}
       avatarText="Join 1,000+ satisfied clients"
       buttons={[
         {
-          text: "Book Your Cut",
-          href: "#contact",
-        },
+          text: "Book Your Cut",          href: "#contact"},
         {
-          text: "View Services",
-          href: "#services",
-        },
+          text: "View Services",          href: "#services"},
       ]}
       buttonAnimation="slide-up"
       marqueeItems={[
         {
-          type: "text",
-          text: "Expert Barbers",
-        },
+          type: "text",          text: "Expert Barbers"},
         {
-          type: "text",
-          text: "Modern Styles",
-        },
+          type: "text",          text: "Modern Styles"},
         {
-          type: "text",
-          text: "Premium Grooming",
-        },
+          type: "text",          text: "Premium Grooming"},
         {
-          type: "text",
-          text: "Sharp Fades",
-        },
+          type: "text",          text: "Sharp Fades"},
         {
-          type: "text",
-          text: "Classic Techniques",
-        },
+          type: "text",          text: "Classic Techniques"},
       ]}
     />
   </div>
@@ -126,24 +93,16 @@ export default function LandingPage() {
       features={[
         {
           icon: Scissors,
-          title: "Expert Barbers",
-          description: "Skilled in modern & classic styles",
-        },
+          title: "Expert Barbers",          description: "Skilled in modern & classic styles"},
         {
           icon: Coffee,
-          title: "Premium Atmosphere",
-          description: "Clean, minimalist, relaxing space",
-        },
+          title: "Premium Atmosphere",          description: "Clean, minimalist, relaxing space"},
         {
           icon: Clock,
-          title: "No Waiting Time",
-          description: "Book and get served on schedule",
-        },
+          title: "No Waiting Time",          description: "Book and get served on schedule"},
         {
           icon: Award,
-          title: "Consistent Results",
-          description: "You get what you ask for—every time",
-        },
+          title: "Consistent Results",          description: "You get what you ask for—every time"},
       ]}
       title="Why Choose Barbers Playground?"
       description="Excellence in every cut and a space designed for your comfort."
@@ -157,55 +116,28 @@ export default function LandingPage() {
       useInvertedBackground={false}
       plans={[
         {
-          id: "p1",
-          badge: "Popular",
-          price: "₱450",
-          subtitle: "Precision haircut",
-          buttons: [
+          id: "p1",          badge: "Popular",          price: "₱450",          subtitle: "Precision haircut",          buttons: [
             {
-              text: "Book Now",
-              href: "#contact",
-            },
+              text: "Book Now",              href: "#contact"},
           ],
           features: [
-            "Consultation",
-            "Detailed Cut",
-            "Neck Shave",
-          ],
+            "Consultation",            "Detailed Cut",            "Neck Shave"],
         },
         {
-          id: "p2",
-          badge: "Value",
-          price: "₱300",
-          subtitle: "Clean beard trim",
-          buttons: [
+          id: "p2",          badge: "Value",          price: "₱300",          subtitle: "Clean beard trim",          buttons: [
             {
-              text: "Book Now",
-              href: "#contact",
-            },
+              text: "Book Now",              href: "#contact"},
           ],
           features: [
-            "Hot Towel",
-            "Trim",
-            "Line Up",
-          ],
+            "Hot Towel",            "Trim",            "Line Up"],
         },
         {
-          id: "p3",
-          badge: "Combo",
-          price: "₱700",
-          subtitle: "Hair + Beard",
-          buttons: [
+          id: "p3",          badge: "Combo",          price: "₱700",          subtitle: "Hair + Beard",          buttons: [
             {
-              text: "Book Now",
-              href: "#contact",
-            },
+              text: "Book Now",              href: "#contact"},
           ],
           features: [
-            "Full Cut",
-            "Beard Sculpting",
-            "Style",
-          ],
+            "Full Cut",            "Beard Sculpting",            "Style"],
         },
       ]}
       title="Our Services"
@@ -215,52 +147,23 @@ export default function LandingPage() {
 
   <div id="results" data-section="results">
       <ProductCardFour
+      animationType="slide-up"
       textboxLayout="default"
       gridVariant="four-items-2x2-equal-grid"
       useInvertedBackground={false}
       products={[
         {
-          id: "r1",
-          name: "Classic Fade",
-          price: "Fresh",
-          variant: "Style",
-          imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-blue-eyed-bearded-hipster-male-with-crossed-arms-grey-background_613910-12834.jpg",
-        },
+          id: "r1",          name: "Classic Fade",          price: "Fresh",          variant: "Style",          imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-blue-eyed-bearded-hipster-male-with-crossed-arms-grey-background_613910-12834.jpg"},
         {
-          id: "r2",
-          name: "Beard Sculpt",
-          price: "Sharp",
-          variant: "Style",
-          imageSrc: "http://img.b2bpic.net/free-photo/braid-beard-sketch-blackboard_1379-313.jpg",
-        },
+          id: "r2",          name: "Beard Sculpt",          price: "Sharp",          variant: "Style",          imageSrc: "http://img.b2bpic.net/free-photo/braid-beard-sketch-blackboard_1379-313.jpg"},
         {
-          id: "r3",
-          name: "Taper Fade",
-          price: "Clean",
-          variant: "Style",
-          imageSrc: "http://img.b2bpic.net/free-photo/handsome-bearded-hipster-with-serious-emotion-red-brick-wall_343059-28.jpg",
-        },
+          id: "r3",          name: "Taper Fade",          price: "Clean",          variant: "Style",          imageSrc: "http://img.b2bpic.net/free-photo/handsome-bearded-hipster-with-serious-emotion-red-brick-wall_343059-28.jpg"},
         {
-          id: "r4",
-          name: "Executive Cut",
-          price: "Premium",
-          variant: "Style",
-          imageSrc: "http://img.b2bpic.net/free-photo/barber-shaves-bearded-man-vintage-atmosphere_1153-7904.jpg",
-        },
+          id: "r4",          name: "Executive Cut",          price: "Premium",          variant: "Style",          imageSrc: "http://img.b2bpic.net/free-photo/barber-shaves-bearded-man-vintage-atmosphere_1153-7904.jpg"},
         {
-          id: "r5",
-          name: "Skin Fade",
-          price: "Tight",
-          variant: "Style",
-          imageSrc: "http://img.b2bpic.net/free-photo/extreme-close-up-man-with-new-haircut_23-2148256993.jpg",
-        },
+          id: "r5",          name: "Skin Fade",          price: "Tight",          variant: "Style",          imageSrc: "http://img.b2bpic.net/free-photo/extreme-close-up-man-with-new-haircut_23-2148256993.jpg"},
         {
-          id: "r6",
-          name: "Full Style",
-          price: "Custom",
-          variant: "Style",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-bright-portrait-young-handsome-hipster-man-wearing-plaid-shirt-pretty-face-brown-eyes_291049-1491.jpg",
-        },
+          id: "r6",          name: "Full Style",          price: "Custom",          variant: "Style",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-bright-portrait-young-handsome-hipster-man-wearing-plaid-shirt-pretty-face-brown-eyes_291049-1491.jpg"},
       ]}
       title="Recent Results"
       description="Precision fades and beard work from our chair."
@@ -273,60 +176,15 @@ export default function LandingPage() {
       useInvertedBackground={false}
       testimonials={[
         {
-          id: "t1",
-          name: "Mark D.",
-          date: "1 week ago",
-          title: "Expert Work",
-          quote: "Best fade I’ve had in years. Worth every peso.",
-          tag: "Regular",
-          avatarSrc: "http://img.b2bpic.net/free-photo/european-brutal-man-with-beard-cut-barbershop_343596-4697.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/brown-vintage-leather-chair-stylish-barber-shop_627829-6180.jpg",
-          imageAlt: "man happy customer portrait",
-        },
+          id: "t1",          name: "Mark D.",          date: "1 week ago",          title: "Expert Work",          quote: "Best fade I’ve had in years. Worth every peso.",          tag: "Regular",          avatarSrc: "http://img.b2bpic.net/free-photo/european-brutal-man-with-beard-cut-barbershop_343596-4697.jpg",          imageSrc: "http://img.b2bpic.net/free-photo/brown-vintage-leather-chair-stylish-barber-shop_627829-6180.jpg",          imageAlt: "man happy customer portrait"},
         {
-          id: "t2",
-          name: "Jason R.",
-          date: "2 weeks ago",
-          title: "Efficient",
-          quote: "Clean shop, professional barbers, and no waiting.",
-          tag: "First Timer",
-          avatarSrc: "http://img.b2bpic.net/free-photo/professional-hairdresser-sitting-barber-chair-waiting-customer_613910-3902.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/anime-style-beauty-salon-with-cosmetology-equipment_23-2151501012.jpg",
-          imageAlt: "man happy customer portrait",
-        },
+          id: "t2",          name: "Jason R.",          date: "2 weeks ago",          title: "Efficient",          quote: "Clean shop, professional barbers, and no waiting.",          tag: "First Timer",          avatarSrc: "http://img.b2bpic.net/free-photo/professional-hairdresser-sitting-barber-chair-waiting-customer_613910-3902.jpg",          imageSrc: "http://img.b2bpic.net/free-photo/anime-style-beauty-salon-with-cosmetology-equipment_23-2151501012.jpg",          imageAlt: "man happy customer portrait"},
         {
-          id: "t3",
-          name: "Kevin T.",
-          date: "1 month ago",
-          title: "Highly Recommended",
-          quote: "The beard work is unmatched. Solid team.",
-          tag: "Regular",
-          avatarSrc: "http://img.b2bpic.net/free-photo/portrait-man-with-tattoo-his-face-with-crossed-arms-dressed-white-shirt-grey-background_613910-1374.jpg",
-          imageSrc: "http://img.b2bpic.net/free-vector/flat-design-boho-spa-treatment-label-set_23-2149670903.jpg",
-          imageAlt: "man happy customer portrait",
-        },
+          id: "t3",          name: "Kevin T.",          date: "1 month ago",          title: "Highly Recommended",          quote: "The beard work is unmatched. Solid team.",          tag: "Regular",          avatarSrc: "http://img.b2bpic.net/free-photo/portrait-man-with-tattoo-his-face-with-crossed-arms-dressed-white-shirt-grey-background_613910-1374.jpg",          imageSrc: "http://img.b2bpic.net/free-vector/flat-design-boho-spa-treatment-label-set_23-2149670903.jpg",          imageAlt: "man happy customer portrait"},
         {
-          id: "t4",
-          name: "Paul M.",
-          date: "2 months ago",
-          title: "Consistently Good",
-          quote: "I get the same quality result every single time I visit.",
-          tag: "Member",
-          avatarSrc: "http://img.b2bpic.net/free-photo/close-up-view-young-smiling-happy-male-hairdesser-wearing-gray-apron-holding-scissor-comb-pastel-blue-color-background_140725-155027.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/white-alarm-clock-speech-bubble-yellow-background-flat-lay_169016-29462.jpg",
-          imageAlt: "man happy customer portrait",
-        },
+          id: "t4",          name: "Paul M.",          date: "2 months ago",          title: "Consistently Good",          quote: "I get the same quality result every single time I visit.",          tag: "Member",          avatarSrc: "http://img.b2bpic.net/free-photo/close-up-view-young-smiling-happy-male-hairdesser-wearing-gray-apron-holding-scissor-comb-pastel-blue-color-background_140725-155027.jpg",          imageSrc: "http://img.b2bpic.net/free-photo/white-alarm-clock-speech-bubble-yellow-background-flat-lay_169016-29462.jpg",          imageAlt: "man happy customer portrait"},
         {
-          id: "t5",
-          name: "Eric H.",
-          date: "3 months ago",
-          title: "Top Tier",
-          quote: "The best atmosphere in the city. Truly a barbers playground.",
-          tag: "Regular",
-          avatarSrc: "http://img.b2bpic.net/free-photo/studio-portrait-blond-bearded-male-dressed-red-fleece-shirt-dark-grey-background_613910-13366.jpg",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=dk64cz",
-          imageAlt: "man happy customer portrait",
-        },
+          id: "t5",          name: "Eric H.",          date: "3 months ago",          title: "Top Tier",          quote: "The best atmosphere in the city. Truly a barbers playground.",          tag: "Regular",          avatarSrc: "http://img.b2bpic.net/free-photo/studio-portrait-blond-bearded-male-dressed-red-fleece-shirt-dark-grey-background_613910-13366.jpg",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=dk64cz",          imageAlt: "man happy customer portrait"},
       ]}
       title="Client Reviews"
       description="Trusted by men who value precision."
@@ -340,23 +198,11 @@ export default function LandingPage() {
       useInvertedBackground={false}
       team={[
         {
-          id: "b1",
-          name: "Alex",
-          role: "Fade Specialist",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-fashion-man-model-wearing-white-shirt-clothes-posing-street_158538-2398.jpg",
-        },
+          id: "b1",          name: "Alex",          role: "Fade Specialist",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-fashion-man-model-wearing-white-shirt-clothes-posing-street_158538-2398.jpg"},
         {
-          id: "b2",
-          name: "Sam",
-          role: "Beard Expert",
-          imageSrc: "http://img.b2bpic.net/free-photo/smiley-tattoo-artist-indoors-side-view_23-2149445974.jpg",
-        },
+          id: "b2",          name: "Sam",          role: "Beard Expert",          imageSrc: "http://img.b2bpic.net/free-photo/smiley-tattoo-artist-indoors-side-view_23-2149445974.jpg"},
         {
-          id: "b3",
-          name: "Mike",
-          role: "Classic Stylist",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-male-hairdresser-salon_52683-111009.jpg",
-        },
+          id: "b3",          name: "Mike",          role: "Classic Stylist",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-male-hairdresser-salon_52683-111009.jpg"},
       ]}
       title="Meet The Barbers"
       description="Our experts are ready for your next cut."
@@ -371,19 +217,13 @@ export default function LandingPage() {
       features={[
         {
           icon: MousePointer,
-          title: "Choose Service",
-          description: "Select your cut online.",
-        },
+          title: "Choose Service",          description: "Select your cut online."},
         {
           icon: Calendar,
-          title: "Book Time",
-          description: "Pick your schedule.",
-        },
+          title: "Book Time",          description: "Pick your schedule."},
         {
           icon: Scissors,
-          title: "Get Styled",
-          description: "Show up and enjoy.",
-        },
+          title: "Get Styled",          description: "Show up and enjoy."},
       ]}
       title="Simple Process"
       description="Booked in minutes, styled for life."
@@ -394,16 +234,13 @@ export default function LandingPage() {
       <ContactCTA
       useInvertedBackground={false}
       background={{
-        variant: "radial-gradient",
-      }}
+        variant: "radial-gradient"}}
       tag="Book Now"
       title="First Time? Get 10% Off"
       description="Limited slots available today. Book your chair now."
       buttons={[
         {
-          text: "Reserve a Seat",
-          href: "#",
-        },
+          text: "Reserve a Seat",          href: "#"},
       ]}
     />
   </div>
@@ -414,37 +251,25 @@ export default function LandingPage() {
         {
           items: [
             {
-              label: "Services",
-              href: "#services",
-            },
+              label: "Services",              href: "#services"},
             {
-              label: "Results",
-              href: "#results",
-            },
+              label: "Results",              href: "#results"},
           ],
         },
         {
           items: [
             {
-              label: "Facebook",
-              href: "#",
-            },
+              label: "Facebook",              href: "#"},
             {
-              label: "Instagram",
-              href: "#",
-            },
+              label: "Instagram",              href: "#"},
           ],
         },
         {
           items: [
             {
-              label: "Privacy Policy",
-              href: "#",
-            },
+              label: "Privacy Policy",              href: "#"},
             {
-              label: "Booking Terms",
-              href: "#",
-            },
+              label: "Booking Terms",              href: "#"},
           ],
         },
       ]}