Switch to version 1: modified src/app/styles/variables.css

Merge version_3 into main

src/app/page.tsx

@@ -2,9 +2,9 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FaqSplitText from '@/components/sections/faq/FaqSplitText';
-import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
 import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import TeamCardSix from '@/components/sections/team/TeamCardSix';
@@ -18,33 +18,71 @@ export default function LandingPage() {
         borderRadius="soft"
         contentWidth="medium"
         sizing="largeSmallSizeMediumTitles"
-        background="noise"
-        cardStyle="solid"
-        primaryButtonStyle="flat"
+        background="floatingGradient"
+        cardStyle="gradient-radial"
+        primaryButtonStyle="primary-glow"
         secondaryButtonStyle="solid"
-        headingFontWeight="bold"
+        headingFontWeight="normal"
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
       <NavbarStyleCentered
       navItems={[
-        { name: "Services", id: "services" },
-        { name: "Booking", id: "booking" },
+        {
+          name: "Services",
+          id: "services",
+        },
+        {
+          name: "Booking",
+          id: "booking",
+        },
       ]}
-      button={{ text: "Book Now", href: "#booking" }}
+      button={{
+        text: "Book Now",
+        href: "#booking",
+      }}
       brandName="Fresh Cut Barbers"
     />
   </div>
 
   <div id="hero" data-section="hero">
       <HeroBillboardCarousel
-      background={{ variant: "plain" }}
+      background={{
+        variant: "plain",
+      }}
       title="Book Your Appointment in Seconds"
-      description="Premium grooming at your fingertips. Choose your service, pick a time, and secure your spot instantly."
-      buttons={[{ text: "Book Now", href: "#booking" }]}
+      description="Experience premium grooming with our expert barbers. Skip the wait and secure your spot online instantly."
+      buttons={[
+        {
+          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/professional-hairdresser-sitting-barber-chair-waiting-customer_613910-3902.jpg", imageAlt: "barber chair" }
+        {
+          imageSrc: "http://img.b2bpic.net/free-photo/close-up-details-hairdresser-salon_23-2149205860.jpg",
+          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>
@@ -52,10 +90,15 @@ export default function LandingPage() {
   <div id="testimonial" data-section="testimonial">
       <TestimonialCardFifteen
       useInvertedBackground={false}
-      testimonial="The most seamless booking experience I've ever had. Clean, professional, and sharp cuts."
+      testimonial="The best haircut experience in the city. Professional, clean, and always on time."
       rating={5}
-      author="Marcus Thorne"
-      avatars={[{ src: "http://img.b2bpic.net/free-photo/young-man-barber-shop-after-getting-haircut_23-2149186513.jpg", alt: "client" }]}
+      author="James Peterson"
+      avatars={[
+        {
+          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"
     />
@@ -67,12 +110,22 @@ export default function LandingPage() {
       textboxLayout="default"
       gridVariant="uniform-all-items-equal"
       useInvertedBackground={false}
-      title="Our Grooming Experts"
-      description="Masters of the fade, beard sculptors, and style perfectionists."
-      tag="Meet the Crew"
+      title="Meet Our Expert Barbers"
+      description="Our team brings years of experience and a passion for modern grooming to every chair."
+      tag="Our Experts"
       members={[
-        { id: "a", name: "Alex", role: "Head Barber", imageSrc: "http://img.b2bpic.net/free-photo/full-shot-barber-hair-salon_23-2148242782.jpg" },
-        { id: "b", name: "Marcus", role: "Lead Stylist", imageSrc: "http://img.b2bpic.net/free-photo/close-up-details-hairdresser-salon_23-2149205856.jpg" },
+        {
+          id: "barber-1",
+          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>
@@ -80,39 +133,77 @@ export default function LandingPage() {
   <div id="faq" data-section="faq">
       <FaqSplitText
       useInvertedBackground={false}
-      sideTitle="FAQs"
+      sideTitle="Common Questions"
+      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: "2", title: "Can I reschedule?", content: "Yes, you can modify your appointment online up to 2 hours before the start time." },
+        {
+          id: "q1",
+          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">
-      <ContactSplitForm
+      <ContactSplit
       useInvertedBackground={true}
-      title="Book Your Appointment"
-      description="Select your service and preferred time. Confirmation will be sent directly to your phone."
-      inputs={[
-        { name: "name", type: "text", placeholder: "Full Name" },
-        { name: "phone", type: "tel", placeholder: "Phone Number" }
-      ]}
-      multiSelect={{ name: "service", label: "Select Service", options: ["Haircut", "Fade", "Beard Trim"] }}
-      buttonText="Confirm Booking"
-      buttonClassName="bg-[#ffdf7d] text-black font-extrabold text-lg px-8 py-4"
+      background={{
+        variant: "plain",
+      }}
+      tag="Instant Booking"
+      title="Book Your Session"
+      description="Select your service, preferred date, and share your contact details. We will confirm your visit shortly."
+      mediaAnimation="none"
+      inputPlaceholder="Enter your phone number for 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">
-      <FooterLogoReveal
-      logoText="Fresh Cut"
-      leftLink={{ text: "Privacy Policy", href: "#" }}
-      rightLink={{ text: "© 2025 Fresh Cut Barbers", href: "#" }}
+      <FooterMedia
+      imageSrc="http://img.b2bpic.net/free-photo/still-life-eco-products_23-2149371298.jpg"
+      logoText="Fresh Cut Barbers"
+      columns={[
+        {
+          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: #0a0a0a;
-  --card: #1a1a1a;
-  --foreground: #ffffff;
-  --primary-cta: #ffffff;
+  --background: #f5f5f5;
+  --card: #ffffff;
+  --foreground: #1c1c1c;
+  --primary-cta: #1c1c1c;
   --primary-cta-text: #f5f5f5;
-  --secondary-cta: #1a1a1a;
+  --secondary-cta: #ffffff;
   --secondary-cta-text: #1c1c1c;
-  --accent: #333333;
-  --background-accent: #222222;
+  --accent: #15479c;
+  --background-accent: #a8cce8;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);