Update src/app/page.tsx

Merge version_16 into main

src/app/page.tsx

@@ -2,9 +2,9 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactText from '@/components/sections/contact/ContactText';
-import FaqSplitText from '@/components/sections/faq/FaqSplitText';
-import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
 import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
@@ -51,6 +51,7 @@ export default function LandingPage() {
         { value: "100%", label: "Satisfaction"},
       ]}
       enableKpiAnimation={true}
+      buttons={[{ text: "Book Now", href: "#contact" }]}
       imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CRaO5i0elf1aDIpszoFKWNR31x/uploaded-1776352201800-hefnk77v.jpg"
       imageAlt="Lackawanna Barber Shop"
       mediaAnimation="slide-up"
@@ -87,9 +88,9 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       plans={[
-        { id: "basic", badge: "Classic", price: "$40", subtitle: "Precision Haircut", buttons: [{ text: "Walk-in Only", href: "#contact" }], features: ["Classic Scissor Cut", "Modern Styling", "Expert Consultation"]},
-        { id: "pro", badge: "Premium", price: "$75", subtitle: "Full Grooming Experience", buttons: [{ text: "Walk-in Only", href: "#contact" }], features: ["Precision Haircut", "Beard Trim", "Hot Towel Service", "Relaxed Refresh"]},
-        { id: "kids", badge: "Family", price: "$30", subtitle: "Youth Haircut", buttons: [{ text: "Walk-in Only", href: "#contact" }], features: ["Gentle Scissor Cut", "Fast Friendly Service", "Classic Style"]},
+        { id: "basic", badge: "Classic", price: "$40", subtitle: "Precision Haircut", buttons: [{ text: "Get Directions", href: "#contact" }], features: ["Classic Scissor Cut", "Modern Styling", "Expert Consultation"]},
+        { id: "pro", badge: "Premium", price: "$75", subtitle: "Full Grooming Experience", buttons: [{ text: "Get Directions", href: "#contact" }], features: ["Precision Haircut", "Beard Trim", "Hot Towel Service", "Relaxed Refresh"]},
+        { id: "kids", badge: "Family", price: "$30", subtitle: "Youth Haircut", buttons: [{ text: "Get Directions", href: "#contact" }], features: ["Gentle Scissor Cut", "Fast Friendly Service", "Classic Style"]},
       ]}
       title="Quality Service, Transparent Price"
       description="Simple, honest pricing for the services you need."
@@ -118,6 +119,9 @@ export default function LandingPage() {
       testimonials={[
         { id: "1", name: "Barry H.", role: "Loyal Customer", company: "FL", rating: 5 },
         { id: "2", name: "Melissa C.", role: "Regular Client", company: "NY", rating: 5 },
+        { id: "3", name: "Tom K.", role: "Local Resident", company: "NJ", rating: 5 },
+        { id: "4", name: "Sarah J.", role: "Frequent Visitor", company: "NJ", rating: 5 },
+        { id: "5", name: "Michael P.", role: "Client", company: "NY", rating: 5 },
       ]}
       kpiItems={[
         { value: "100+", label: "Weekly Cuts" },
@@ -130,36 +134,45 @@ export default function LandingPage() {
   </div>
 
   <div id="faq" data-section="faq">
-      <FaqSplitText
-      useInvertedBackground={false}
-      faqs={[
-        { id: "q1", title: "Do you accept appointments?", content: "We operate primarily as a walk-in shop to maintain that classic, casual vibe." },
-        { id: "q2", title: "Is it cash only?", content: "Yes, we are a classic cash-only establishment." },
-      ]}
-      sideTitle="Common Questions"
-      faqsAnimation="blur-reveal"
-    />
+      <FaqSplitMedia
+        faqs={[
+          { id: "q1", title: "Do you accept appointments?", content: "We operate primarily as a walk-in shop to maintain that classic, casual vibe." },
+          { id: "q2", title: "Is it cash only?", content: "Yes, we are a classic cash-only establishment." },
+        ]}
+        buttons={[
+          { text: "Get Directions", href: "#contact" }
+        ]}
+        title="Common Questions"
+        description="Everything you need to know about our barber shop services."
+        faqsAnimation="slide-up"
+        textboxLayout="default"
+        mediaPosition="right"
+        useInvertedBackground={false}
+        imageSrc="http://img.b2bpic.net/free-photo/front-view-baber-shop-chiar_23-2148506337.jpg"
+        imageAlt="Lackawanna Barber Shop Interior"
+      />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactText
-      useInvertedBackground={false}
-      background={{ variant: "sparkles-gradient" }}
-      text="Ready for your next haircut? Stop by the shop today and meet the team. We look forward to seeing you!"
-      buttons={[{ text: "+1 (973) 538-1675", href: "tel:+19735381675" }]}
-    />
+      <ContactCenter
+        tag="Visit Us"
+        title="Ready for your next cut?"
+        description="Stop by our Morristown shop to experience the Lackawanna difference."
+        background={{ variant: "sparkles-gradient" }}
+        useInvertedBackground={true}
+      />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterBaseReveal
-      logoText="Lackawanna Barber Shop"
-      columns={[
-        { title: "Shop", items: [{ label: "Morristown, NJ", href: "#" }] },
-      ]}
-      copyrightText="© 2024 Lackawanna Barber Shop. All rights reserved."
-    />
+      <FooterLogoEmphasis
+        logoText="Lackawanna Barber Shop"
+        columns={[
+          { items: [{ label: "132 Morris St, Morristown, NJ", href: "#contact" }, { label: "+1 (973) 538-1675" }] },
+          { items: [{ label: "Services", href: "#services" }, { label: "Team", href: "#team" }, { label: "FAQs", href: "#faq" }] }
+        ]}
+      />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #ffffff;
-  --card: #f9f9f9;
-  --foreground: #120006e6;
-  --primary-cta: #e63946;
-  --primary-cta-text: #ffffff;
-  --secondary-cta: #f9f9f9;
-  --secondary-cta-text: #120006e6;
-  --accent: #e2e2e2;
-  --background-accent: #c4c4c4;
+  --background: #f5f4ef;
+  --card: #dad6cd;
+  --foreground: #2a2928;
+  --primary-cta: #2a2928;
+  --primary-cta-text: #f5f4ef;
+  --secondary-cta: #ecebea;
+  --secondary-cta-text: #2a2928;
+  --accent: #ffffff;
+  --background-accent: #c6b180;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);