Update src/app/styles/variables.css

src/app/page.tsx

@@ -2,9 +2,9 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactSplit from '@/components/sections/contact/ContactSplit';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FaqSplitText from '@/components/sections/faq/FaqSplitText';
-import FooterMedia from '@/components/sections/footer/FooterMedia';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
 import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import TeamCardSix from '@/components/sections/team/TeamCardSix';
@@ -18,71 +18,33 @@ export default function LandingPage() {
         borderRadius="soft"
         contentWidth="medium"
         sizing="largeSmallSizeMediumTitles"
-        background="floatingGradient"
+        background="noise"
-        cardStyle="gradient-radial"
+        cardStyle="solid"
-        primaryButtonStyle="primary-glow"
+        primaryButtonStyle="flat"
         secondaryButtonStyle="solid"
-        headingFontWeight="normal"
+        headingFontWeight="bold"
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
       <NavbarStyleCentered
       navItems={[
-        {
+        { name: "Services", id: "services" },
-          name: "Services",
+        { name: "Booking", id: "booking" },
-          id: "services",
-        },
-        {
-          name: "Booking",
-          id: "booking",
-        },
       ]}
-      button={{
+      button={{ text: "Book Now", href: "#booking" }}
-        text: "Book Now",
-        href: "#booking",
-      }}
       brandName="Fresh Cut Barbers"
     />
   </div>
 
   <div id="hero" data-section="hero">
       <HeroBillboardCarousel
-      background={{
+      background={{ variant: "plain" }}
-        variant: "plain",
-      }}
       title="Book Your Appointment in Seconds"
-      description="Experience premium grooming with our expert barbers. Skip the wait and secure your spot online instantly."
+      description="Premium grooming at your fingertips. Choose your service, pick a time, and secure your spot instantly."
-      buttons={[
+      buttons={[{ text: "Book Now", href: "#booking" }]}
-        {
-          text: "Book Now",
-          href: "#booking",
-        },
-      ]}
       mediaItems={[
-        {
+        { imageSrc: "http://img.b2bpic.net/free-photo/close-up-details-hairdresser-salon_23-2149205860.jpg", imageAlt: "modern barbershop interior" },
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-details-hairdresser-salon_23-2149205860.jpg",
+        { imageSrc: "http://img.b2bpic.net/free-photo/professional-hairdresser-sitting-barber-chair-waiting-customer_613910-3902.jpg", imageAlt: "barber chair" }
-          imageAlt: "modern barbershop interior professional chair",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/front-view-leather-barber-shop-chair_23-2148256927.jpg",
-          imageAlt: "modern barbershop interior professional chair",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/professional-hairdresser-sitting-barber-chair-waiting-customer_613910-3902.jpg",
-          imageAlt: "modern barbershop interior professional chair",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/professional-barber-shop-chairs-close-up_23-2148353478.jpg",
-          imageAlt: "modern barbershop interior professional chair",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/male-hairdresser-combing-hair-senior-client_23-2148181882.jpg",
-          imageAlt: "modern barbershop interior professional chair",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/side-view-old-couple-with-cute-dog_23-2149614016.jpg",
-          imageAlt: "modern barbershop interior professional chair",
-        },
       ]}
     />
   </div>
@@ -90,15 +52,10 @@ export default function LandingPage() {
   <div id="testimonial" data-section="testimonial">
       <TestimonialCardFifteen
       useInvertedBackground={false}
-      testimonial="The best haircut experience in the city. Professional, clean, and always on time."
+      testimonial="The most seamless booking experience I've ever had. Clean, professional, and sharp cuts."
       rating={5}
-      author="James Peterson"
+      author="Marcus Thorne"
-      avatars={[
+      avatars={[{ src: "http://img.b2bpic.net/free-photo/young-man-barber-shop-after-getting-haircut_23-2149186513.jpg", alt: "client" }]}
-        {
-          src: "http://img.b2bpic.net/free-photo/young-man-barber-shop-after-getting-haircut_23-2149186513.jpg",
-          alt: "Happy customer profile",
-        },
-      ]}
       ratingAnimation="slide-up"
       avatarsAnimation="opacity"
     />
@@ -110,22 +67,12 @@ export default function LandingPage() {
       textboxLayout="default"
       gridVariant="uniform-all-items-equal"
       useInvertedBackground={false}
-      title="Meet Our Expert Barbers"
+      title="Our Grooming Experts"
-      description="Our team brings years of experience and a passion for modern grooming to every chair."
+      description="Masters of the fade, beard sculptors, and style perfectionists."
-      tag="Our Experts"
+      tag="Meet the Crew"
       members={[
-        {
+        { id: "a", name: "Alex", role: "Head Barber", imageSrc: "http://img.b2bpic.net/free-photo/full-shot-barber-hair-salon_23-2148242782.jpg" },
-          id: "barber-1",
+        { id: "b", name: "Marcus", role: "Lead Stylist", imageSrc: "http://img.b2bpic.net/free-photo/close-up-details-hairdresser-salon_23-2149205856.jpg" },
-          name: "Alex",
-          role: "Master Barber",
-          imageSrc: "http://img.b2bpic.net/free-photo/full-shot-barber-hair-salon_23-2148242782.jpg",
-        },
-        {
-          id: "barber-2",
-          name: "Marcus",
-          role: "Senior Stylist",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-details-hairdresser-salon_23-2149205856.jpg",
-        },
       ]}
     />
   </div>
@@ -133,77 +80,38 @@ export default function LandingPage() {
   <div id="faq" data-section="faq">
       <FaqSplitText
       useInvertedBackground={false}
-      sideTitle="Common Questions"
+      sideTitle="FAQs"
-      sideDescription="Everything you need to know about our services and booking process."
       faqs={[
-        {
+        { id: "1", title: "Services Available", content: "Haircut, Fade, and Beard Trim available for all sessions." },
-          id: "q1",
+        { id: "2", title: "Can I reschedule?", content: "Yes, you can modify your appointment online up to 2 hours before the start time." },
-          title: "Do I need an appointment?",
-          content: "While we accept walk-ins, we highly recommend booking online to guarantee your spot.",
-        },
-        {
-          id: "q2",
-          title: "What services do you offer?",
-          content: "We provide classic haircuts, beard trims, shaves, and grooming consultations.",
-        },
       ]}
       faqsAnimation="blur-reveal"
     />
   </div>
 
   <div id="booking" data-section="booking">
-      <ContactSplit
+      <ContactSplitForm
       useInvertedBackground={true}
-      background={{
+      title="Book Your Appointment"
-        variant: "plain",
+      description="Select your service and preferred time. Confirmation will be sent directly to your phone."
-      }}
+      inputs={[
-      tag="Instant Booking"
+        { name: "name", type: "text", placeholder: "Full Name" },
-      title="Book Your Session"
+        { name: "phone", type: "tel", placeholder: "Phone Number" }
-      description="Select your service, preferred date, and share your contact details. We will confirm your visit shortly."
+      ]}
-      mediaAnimation="none"
+      multiSelect={{ name: "service", label: "Select Service", options: ["Haircut", "Fade", "Beard Trim"] }}
-      inputPlaceholder="Enter your phone number for booking"
+      buttonText="Confirm Booking"
-      buttonText="Book Appointment"
       imageSrc="http://img.b2bpic.net/free-photo/barber-doing-haircut-bearded-aged-client-hair-salon_23-2148182013.jpg"
-      imageAlt="Barber doing haircut bearded aged client in hair salon"
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterMedia
+      <FooterLogoReveal
-      imageSrc="http://img.b2bpic.net/free-photo/still-life-eco-products_23-2149371298.jpg"
+      logoText="Fresh Cut"
-      logoText="Fresh Cut Barbers"
+      leftLink={{ text: "Privacy Policy", href: "#" }}
-      columns={[
+      rightLink={{ text: "© 2025 Fresh Cut Barbers", href: "#" }}
-        {
-          title: "Visit Us",
-          items: [
-            {
-              label: "123 Barber St, City",
-              href: "#",
-            },
-            {
-              label: "Mon - Sat: 9am - 7pm",
-              href: "#",
-            },
-          ],
-        },
-        {
-          title: "Booking",
-          items: [
-            {
-              label: "Services",
-              href: "#services",
-            },
-            {
-              label: "Book Now",
-              href: "#booking",
-            },
-          ],
-        },
-      ]}
-      imageAlt="barbershop branding logo minimalist"
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f5f5f5;
+  --background: #0a0a0a;
-  --card: #ffffff;
+  --card: #1a1a1a;
-  --foreground: #1c1c1c;
+  --foreground: #ffffff;
-  --primary-cta: #1c1c1c;
+  --primary-cta: #ffffff;
   --primary-cta-text: #f5f5f5;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #1a1a1a;
   --secondary-cta-text: #1c1c1c;
-  --accent: #15479c;
+  --accent: #333333;
-  --background-accent: #a8cce8;
+  --background-accent: #222222;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);