Update src/app/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -4,7 +4,8 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FooterMedia from '@/components/sections/footer/FooterMedia';
-import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
+import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
+import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import TeamCardSix from '@/components/sections/team/TeamCardSix';
 import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
@@ -28,128 +29,40 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleFullscreen
       navItems={[
-        {
-          name: "Home",
-          id: "#hero",
-        },
-        {
-          name: "About",
-          id: "#about",
-        },
-        {
-          name: "Team",
-          id: "#team",
-        },
-        {
-          name: "Testimonials",
-          id: "#testimonials",
-        },
-        {
-          name: "Contact",
-          id: "#contact",
-        },
+        { name: "Home", id: "#hero" },
+        { name: "About", id: "#about" },
+        { name: "Team", id: "#team" },
+        { name: "Testimonials", id: "#testimonials" },
+        { name: "Contact", id: "#contact" },
       ]}
       brandName="Exclusive Barbershop"
     />
   </div>
 
-  <div id="hero" data-section="hero">
-      <HeroBillboardTestimonial
-      background={{
-        variant: "plain",
-      }}
-      title="Exclusive Grooming. Heritage Redefined."
-      description="Where tradition meets modern precision. We provide top-tier haircuts and grooming services in a premium, black-owned environment designed for your comfort and style."
-      testimonials={[
-        {
-          name: "Marcus J.",
-          handle: "@marcusj",
-          testimonial: "The best fade in the city. Real professional atmosphere.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/full-throttle-bearded-hipster-male-drinks-coffee-before-hair-styling-hairdresser-s-salon_613910-5397.jpg?_wi=1",
-        },
-        {
-          name: "David L.",
-          handle: "@davidl",
-          testimonial: "I finally found a barber who understands my hair perfectly.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/professional-bearded-barber-man-apron-with-happy-face-smiling-showing-thumbs-up-standing-white-wall_141793-48491.jpg?_wi=1",
-        },
-        {
-          name: "Andre R.",
-          handle: "@andrer",
-          testimonial: "Class act establishment. Very clean and professional.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-posing-studio_23-2149411429.jpg?_wi=1",
-        },
-        {
-          name: "Kevin B.",
-          handle: "@kevinb",
-          testimonial: "Always on point. Never going anywhere else.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-stylish-blond-bearded-male-dressed-suit-grey-background_613910-11879.jpg?_wi=1",
-        },
-        {
-          name: "Chris M.",
-          handle: "@chrism",
-          testimonial: "Excellent vibes and even better haircuts.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/positive-blond-bearded-male-dressed-plaid-shirt-denim-jacket-posing-grey-vignette-background_613910-11770.jpg?_wi=1",
-        },
-      ]}
-      buttons={[
-        {
-          text: "Book Appointment",
-          href: "#contact",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/from-hands-shaving-neck_23-2147778916.jpg"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/full-throttle-bearded-hipster-male-drinks-coffee-before-hair-styling-hairdresser-s-salon_613910-5397.jpg",
-          alt: "Client 1",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/professional-bearded-barber-man-apron-with-happy-face-smiling-showing-thumbs-up-standing-white-wall_141793-48491.jpg",
-          alt: "Client 2",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/medium-shot-man-posing-studio_23-2149411429.jpg",
-          alt: "Client 3",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-stylish-blond-bearded-male-dressed-suit-grey-background_613910-11879.jpg",
-          alt: "Client 4",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/positive-blond-bearded-male-dressed-plaid-shirt-denim-jacket-posing-grey-vignette-background_613910-11770.jpg",
-          alt: "Client 5",
-        },
-      ]}
-      avatarText="Join 500+ satisfied clients"
-      marqueeItems={[
-        {
-          type: "text",
-          text: "Premium Haircuts",
-        },
-        {
-          type: "text",
-          text: "Beard Grooming",
-        },
-        {
-          type: "text",
-          text: "Luxury Experience",
-        },
-        {
-          type: "text",
-          text: "Black-Owned",
-        },
-        {
-          type: "text",
-          text: "Precision Fades",
-        },
-      ]}
-    />
+  <div id="hero-carousel" data-section="hero-carousel">
+      <HeroBillboardCarousel
+        title="Exclusive Grooming. Heritage Redefined."
+        description="Where tradition meets modern precision."
+        background={{ variant: "plain" }}
+        mediaItems={[
+          { imageSrc: "http://img.b2bpic.net/free-photo/from-hands-shaving-neck_23-2147778916.jpg", imageAlt: "Barbering" },
+          { imageSrc: "http://img.b2bpic.net/free-photo/professional-bearded-barber-man-apron-with-happy-face-smiling-showing-thumbs-up-standing-white-wall_141793-48491.jpg", imageAlt: "Professional Barber" }
+        ]}
+      />
+  </div>
+
+  <div id="hero-kpi" data-section="hero-kpi">
+      <HeroSplitKpi
+        title="Setting the Standard"
+        description="Proven excellence in every service we provide."
+        background={{ variant: "glowing-orb" }}
+        kpis={[
+          { value: "500+", label: "Happy Clients" },
+          { value: "10+", label: "Expert Barbers" },
+          { value: "5", label: "Stars Rating" }
+        ]}
+        enableKpiAnimation={true}
+      />
   </div>
 
   <div id="about" data-section="about">
@@ -157,9 +70,7 @@ export default function LandingPage() {
       useInvertedBackground={true}
       title="A Legacy of Excellence"
       description={[
-        "Exclusive Barbershop is more than just a place to get a cut; it's a hub for community, style, and black entrepreneurship.",
-        "Our master barbers are dedicated to precision, offering a curated experience that respects your time and elevates your personal brand.",
-      ]}
+        "Exclusive Barbershop is more than just a place to get a cut; it's a hub for community, style, and black entrepreneurship.",        "Our master barbers are dedicated to precision, offering a curated experience that respects your time and elevates your personal brand."]}
     />
   </div>
 
@@ -170,30 +81,10 @@ export default function LandingPage() {
       gridVariant="asymmetric-60-wide-40-narrow"
       useInvertedBackground={false}
       members={[
-        {
-          id: "1",
-          name: "James Washington",
-          role: "Head Barber",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-with-tattoo-his-face-with-crossed-arms-dressed-white-shirt-grey-background_613910-8120.jpg",
-        },
-        {
-          id: "2",
-          name: "Marcus Cole",
-          role: "Master Groomer",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-surprised-blonde-male-barber-uniform-hundred-dollars-bill-scissors-isolated-white-space-with-copy-space_141793-60405.jpg",
-        },
-        {
-          id: "3",
-          name: "Devon Harris",
-          role: "Precision Specialist",
-          imageSrc: "http://img.b2bpic.net/free-photo/confident-young-male-barber-wearing-uniform-holding-combs-hair-spray-looking-side-isolated-pink-wall-with-copy-space_141793-109744.jpg",
-        },
-        {
-          id: "4",
-          name: "Terrence Moore",
-          role: "Senior Stylist",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-blonde-woman-breeder-holds-her-cute-pug-isolated-gray-background_613910-5457.jpg",
-        },
+        { id: "1", name: "James Washington", role: "Head Barber", imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-with-tattoo-his-face-with-crossed-arms-dressed-white-shirt-grey-background_613910-8120.jpg" },
+        { id: "2", name: "Marcus Cole", role: "Master Groomer", imageSrc: "http://img.b2bpic.net/free-photo/young-surprised-blonde-male-barber-uniform-hundred-dollars-bill-scissors-isolated-white-space-with-copy-space_141793-60405.jpg" },
+        { id: "3", name: "Devon Harris", role: "Precision Specialist", imageSrc: "http://img.b2bpic.net/free-photo/confident-young-male-barber-wearing-uniform-holding-combs-hair-spray-looking-side-isolated-pink-wall-with-copy-space_141793-109744.jpg" },
+        { id: "4", name: "Terrence Moore", role: "Senior Stylist", imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-blonde-woman-breeder-holds-her-cute-pug-isolated-gray-background_613910-5457.jpg" },
       ]}
       title="Meet Our Master Barbers"
       description="Highly trained professionals dedicated to excellence in every cut."
@@ -206,41 +97,8 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={true}
       testimonials={[
-        {
-          id: "t1",
-          name: "Marcus J.",
-          role: "Regular Client",
-          testimonial: "Top tier experience every single time.",
-          imageSrc: "http://img.b2bpic.net/free-photo/full-throttle-bearded-hipster-male-drinks-coffee-before-hair-styling-hairdresser-s-salon_613910-5397.jpg?_wi=2",
-        },
-        {
-          id: "t2",
-          name: "David L.",
-          role: "Regular Client",
-          testimonial: "Professional grooming standards. Unmatched.",
-          imageSrc: "http://img.b2bpic.net/free-photo/professional-bearded-barber-man-apron-with-happy-face-smiling-showing-thumbs-up-standing-white-wall_141793-48491.jpg?_wi=2",
-        },
-        {
-          id: "t3",
-          name: "Andre R.",
-          role: "Loyal Patron",
-          testimonial: "The atmosphere is unmatched in the city.",
-          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-posing-studio_23-2149411429.jpg?_wi=2",
-        },
-        {
-          id: "t4",
-          name: "Kevin B.",
-          role: "Loyal Patron",
-          testimonial: "Crisp cuts, great conversations, always on time.",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-stylish-blond-bearded-male-dressed-suit-grey-background_613910-11879.jpg?_wi=2",
-        },
-        {
-          id: "t5",
-          name: "Chris M.",
-          role: "Loyal Patron",
-          testimonial: "Excellence is the standard here.",
-          imageSrc: "http://img.b2bpic.net/free-photo/positive-blond-bearded-male-dressed-plaid-shirt-denim-jacket-posing-grey-vignette-background_613910-11770.jpg?_wi=2",
-        },
+        { id: "t1", name: "Marcus J.", role: "Regular Client", testimonial: "Top tier experience every single time.", imageSrc: "http://img.b2bpic.net/free-photo/full-throttle-bearded-hipster-male-drinks-coffee-before-hair-styling-hairdresser-s-salon_613910-5397.jpg?_wi=2" },
+        { id: "t2", name: "David L.", role: "Regular Client", testimonial: "Professional grooming standards. Unmatched.", imageSrc: "http://img.b2bpic.net/free-photo/professional-bearded-barber-man-apron-with-happy-face-smiling-showing-thumbs-up-standing-white-wall_141793-48491.jpg?_wi=2" },
       ]}
       title="What Our Clients Say"
       description="Real feedback from our loyal community."
@@ -250,9 +108,7 @@ export default function LandingPage() {
   <div id="contact" data-section="contact">
       <ContactSplit
       useInvertedBackground={false}
-      background={{
-        variant: "rotated-rays-animated",
-      }}
+      background={{ variant: "rotated-rays-animated" }}
       tag="Visit Us"
       title="Book Your Seat"
       description="Ready for your next fresh look? Drop your details and we'll reach out to confirm your slot."
@@ -266,57 +122,13 @@ export default function LandingPage() {
       imageSrc="http://img.b2bpic.net/free-photo/vintage-paper-with-beard-shaping-salon-tools_53876-127083.jpg"
       logoText="Exclusive"
       columns={[
-        {
-          title: "Navigate",
-          items: [
-            {
-              label: "Home",
-              href: "#hero",
-            },
-            {
-              label: "About",
-              href: "#about",
-            },
-            {
-              label: "Team",
-              href: "#team",
-            },
-          ],
-        },
-        {
-          title: "Social",
-          items: [
-            {
-              label: "Instagram",
-              href: "#",
-            },
-            {
-              label: "Facebook",
-              href: "#",
-            },
-            {
-              label: "Twitter",
-              href: "#",
-            },
-          ],
-        },
-        {
-          title: "Legal",
-          items: [
-            {
-              label: "Privacy Policy",
-              href: "#",
-            },
-            {
-              label: "Terms of Use",
-              href: "#",
-            },
-          ],
-        },
+        { title: "Navigate", items: [{ label: "Home", href: "#hero-carousel" }, { label: "About", href: "#about" }, { label: "Team", href: "#team" }] },
+        { title: "Social", items: [{ label: "Instagram", href: "#" }, { label: "Facebook", href: "#" }] },
+        { title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Use", href: "#" }] },
       ]}
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}