Update src/app/page.tsx

src/app/page.tsx

@@ -5,263 +5,109 @@ import ReactLenis from "lenis/react";
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
 import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
-import HeroSplit from '@/components/sections/hero/HeroSplit';
+import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
-import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import SplitAbout from '@/components/sections/about/SplitAbout';
+import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
-import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
+import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
+import { Zap, Scissors, Star } from "lucide-react";
 
 export default function LandingPage() {
   return (
     <ThemeProvider
         defaultButtonVariant="elastic-effect"
         defaultTextAnimation="reveal-blur"
-        borderRadius="soft"
+        borderRadius="pill"
         contentWidth="mediumSmall"
-        sizing="mediumLargeSizeMediumTitles"
+        sizing="largeSizeMediumTitles"
-        background="noise"
+        background="noiseDiagonalGradient"
-        cardStyle="gradient-mesh"
+        cardStyle="glass-depth"
-        primaryButtonStyle="radial-glow"
+        primaryButtonStyle="primary-glow"
         secondaryButtonStyle="glass"
-        headingFontWeight="light"
+        headingFontWeight="semibold"
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
-      <NavbarStyleCentered
+      <NavbarLayoutFloatingOverlay
       navItems={[
-        {
+        { name: "About", id: "#about" },
-          name: "About",
+        { name: "Services", id: "#services" },
-          id: "#about",
+        { name: "Testimonials", id: "#testimonials" },
-        },
+        { name: "Contact", id: "#contact" }
-        {
-          name: "Services",
-          id: "#services",
-        },
-        {
-          name: "Testimonials",
-          id: "#testimonials",
-        },
-        {
-          name: "Contact",
-          id: "#contact",
-        },
       ]}
       brandName="Pablo's Barbershop"
     />
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroSplit
+      <HeroBillboardScroll
-      background={{
+      background={{ variant: "sparkles-gradient" }}
-        variant: "plain",
-      }}
       title="Mastery in Every Cut"
       description="Pablo's Barbershop delivers a premium grooming experience, blending classic tradition with modern precision. Redefine your style with our expert artisans."
-      buttons={[
+      buttons={[{ text: "Book Your Session", href: "#contact" }]}
-        {
-          text: "Book Now",
-          href: "#contact",
-        },
-      ]}
       imageSrc="http://img.b2bpic.net/free-photo/man-getting-his-beard-shaved-with-razor_107420-94772.jpg"
-      imageAlt="Professional barber in luxury setting"
-      mediaAnimation="slide-up"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/medium-shot-young-man-getting-haircut_23-2149220536.jpg",
-          alt: "Customer",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/brutal-bearded-male-violet-jacket-isolated-with-contrast-illumination-grey-background_613910-1950.jpg",
-          alt: "Customer",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/back-view-customer-checking-his-beard_23-2148298299.jpg",
-          alt: "Customer",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/hairdresser-cutting-man-s-hair-barber-shop_23-2149186462.jpg",
-          alt: "Customer",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/pleased-slavic-middle-aged-male-barber-uniform-holding-barber-tools-isolated-purple-wall_141793-91610.jpg",
-          alt: "Customer",
-        },
-      ]}
-      avatarText="Join 10,000+ satisfied gentlemen"
-      marqueeItems={[
-        {
-          type: "text",
-          text: "Classic Cuts",
-        },
-        {
-          type: "text",
-          text: "Hot Towel Shaves",
-        },
-        {
-          type: "text",
-          text: "Beard Sculpting",
-        },
-        {
-          type: "text",
-          text: "Premium Grooming",
-        },
-        {
-          type: "text",
-          text: "Modern Precision",
-        },
-      ]}
     />
   </div>
 
   <div id="about" data-section="about">
-      <SplitAbout
+      <TestimonialAboutCard
-      textboxLayout="split"
+      tag="Legacy & Tradition"
-      useInvertedBackground={true}
+      title="The Pablo's Difference"
-      title="A Legacy of Grooming"
       description="At Pablo's, we believe a haircut is more than just a trim—it's a ritual. Our legacy of precision, style, and dedicated care has made us the cornerstone of premium men's grooming."
-      bulletPoints={[
+      subdescription="Every service is an artisanal experience designed to elevate your personal style."
-        {
+      icon={Scissors}
-          title: "Artisanal Precision",
-          description: "Hand-crafted techniques perfected through years of dedicated service.",
-        },
-        {
-          title: "Premium Environment",
-          description: "Relax in a sophisticated setting designed for your ultimate comfort.",
-        },
-        {
-          title: "Curated Grooming",
-          description: "Products selected specifically for the modern man's routine.",
-        },
-      ]}
       imageSrc="http://img.b2bpic.net/free-photo/barber-corrects-guy-s-beard_140725-7665.jpg"
-      imageAlt="Barber craftsmanship"
+      useInvertedBackground={true}
-      mediaAnimation="slide-up"
     />
   </div>
 
   <div id="services" data-section="services">
       <FeatureCardThree
-      animationType="slide-up"
+      title="Signature Services"
-      textboxLayout="default"
+      description="Discover our curated suite of premium grooming options."
       gridVariant="three-columns-all-equal-width"
+      animationType="blur-reveal"
+      textboxLayout="split-description"
       useInvertedBackground={false}
       features={[
         {
-          title: "Traditional Shave",
+          title: "Traditional Shave",          description: "A hot-towel experience for a smooth, classic finish.",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-hairdresser-doing-his-job_23-2149220583.jpg"},
-          description: "The ultimate hot-towel experience for a clean, refreshed finish.",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-hairdresser-doing-his-job_23-2149220583.jpg",
-          imageAlt: "Hot towel shave",
-        },
         {
-          title: "Precision Cut",
+          title: "Precision Cut",          description: "Bespoke styling tailored to your specific facial structure.",          imageSrc: "http://img.b2bpic.net/free-photo/female-hairdresser-cutting-hair-bearded-hipster-male-saloon_613910-5711.jpg"},
-          description: "Bespoke styling designed to complement your unique facial features.",
-          imageSrc: "http://img.b2bpic.net/free-photo/female-hairdresser-cutting-hair-bearded-hipster-male-saloon_613910-5711.jpg",
-          imageAlt: "Precision haircut",
-        },
         {
-          title: "Beard Sculpting",
+          title: "Beard Sculpting",          description: "Expert grooming to define and enhance your beard.",          imageSrc: "http://img.b2bpic.net/free-photo/crop-barber-combing-moustache-client_23-2147778841.jpg"}
-          description: "Expert trimming and shaping to keep your beard perfectly defined.",
-          imageSrc: "http://img.b2bpic.net/free-photo/crop-barber-combing-moustache-client_23-2147778841.jpg",
-          imageAlt: "Beard sculpting",
-        },
       ]}
-      title="Our Signature Services"
-      description="Discover a suite of premium grooming options tailored to your distinct style."
     />
   </div>
 
   <div id="testimonials" data-section="testimonials">
-      <TestimonialCardSixteen
+      <TestimonialCardSix
+      title="Words from Gentlemen"
+      description="Trusted by the city's most discerning men."
       animationType="slide-up"
-      textboxLayout="default"
+      textboxLayout="split"
-      useInvertedBackground={true}
+      useInvertedBackground={false}
       testimonials={[
         {
-          id: "1",
+          id: "t1",          name: "Arthur J.",          handle: "@arthur_j",          testimonial: "The best grooming experience I've ever had. Truly masterful technique.",          icon: Star
-          name: "Arthur J.",
-          role: "Entrepreneur",
-          company: "TechInnovate",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-young-man-getting-haircut_23-2149220536.jpg",
         },
         {
-          id: "2",
+          id: "t2",          name: "Benjamin S.",          handle: "@bens_arch",          testimonial: "Pablo's is a classic. Always consistent, always precise.",          icon: Star
-          name: "Benjamin S.",
+        }
-          role: "Architect",
-          company: "DesignCo",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/brutal-bearded-male-violet-jacket-isolated-with-contrast-illumination-grey-background_613910-1950.jpg",
-        },
-        {
-          id: "3",
-          name: "Charles D.",
-          role: "Chef",
-          company: "Culinary",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/back-view-customer-checking-his-beard_23-2148298299.jpg",
-        },
-        {
-          id: "4",
-          name: "David W.",
-          role: "Lawyer",
-          company: "GlobalLegal",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-cutting-man-s-hair-barber-shop_23-2149186462.jpg",
-        },
-        {
-          id: "5",
-          name: "Edward M.",
-          role: "Creative",
-          company: "Studio",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/pleased-slavic-middle-aged-male-barber-uniform-holding-barber-tools-isolated-purple-wall_141793-91610.jpg",
-        },
       ]}
-      kpiItems={[
-        {
-          value: "10k+",
-          label: "Grooms",
-        },
-        {
-          value: "500+",
-          label: "5-Star Reviews",
-        },
-        {
-          value: "15",
-          label: "Expert Barbers",
-        },
-      ]}
-      title="Trusted by Gentlemen"
-      description="Read what our distinguished clients say about their grooming journey at Pablo's."
     />
   </div>
 
   <div id="contact" data-section="contact">
       <ContactSplitForm
-      useInvertedBackground={false}
+      title="Book Your Chair"
-      title="Secure Your Chair"
+      description="Secure a spot for your next session at our premier shop."
-      description="Experience premium grooming. Fill the form to request an appointment or reach out with any inquiries."
       inputs={[
-        {
+        { name: "name", type: "text", placeholder: "Full Name", required: true },
-          name: "name",
+        { name: "email", type: "email", placeholder: "Email Address", required: true }
-          type: "text",
-          placeholder: "Name",
-          required: true,
-        },
-        {
-          name: "email",
-          type: "email",
-          placeholder: "Email",
-          required: true,
-        },
       ]}
-      textarea={{
+      textarea={{ name: "message", placeholder: "Tell us what service you're looking for..." }}
-        name: "message",
+      useInvertedBackground={false}
-        placeholder: "Preferred service and time...",
-        rows: 4,
-      }}
       imageSrc="http://img.b2bpic.net/free-photo/front-view-baber-shop-chiar_23-2148506341.jpg"
-      imageAlt="Barbershop interior"
     />
   </div>
 
@@ -270,35 +116,11 @@ export default function LandingPage() {
       logoText="Pablo's Barbershop"
       columns={[
         {
-          title: "Navigation",
+          title: "Connect",          items: [
-          items: [
+            { label: "About", href: "#about" },
-            {
+            { label: "Contact", href: "#contact" }
-              label: "About",
+          ]
-              href: "#about",
+        }
-            },
-            {
-              label: "Services",
-              href: "#services",
-            },
-            {
-              label: "Contact",
-              href: "#contact",
-            },
-          ],
-        },
-        {
-          title: "Legal",
-          items: [
-            {
-              label: "Privacy Policy",
-              href: "#",
-            },
-            {
-              label: "Terms of Service",
-              href: "#",
-            },
-          ],
-        },
       ]}
     />
   </div>

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f5f4ef;
+  --background: #050505;
-  --card: #dad6cd;
+  --card: #121212;
-  --foreground: #2a2928;
+  --foreground: #f5f5f5;
-  --primary-cta: #2a2928;
+  --primary-cta: #d4af37;
   --primary-cta-text: #f5f4ef;
-  --secondary-cta: #ecebea;
+  --secondary-cta: #1c1c1c;
   --secondary-cta-text: #2a2928;
-  --accent: #ffffff;
+  --accent: #d4af37;
-  --background-accent: #c6b180;
+  --background-accent: #1a1a1a;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);