Update src/app/page.tsx

Merge version_12 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';
@@ -118,6 +118,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,34 +133,38 @@ 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." },
+        ]}
+        title="Common Questions"
+        description="Everything you need to know about our barber shop services."
+        faqsAnimation="slide-up"
+        textboxLayout="default"
+        mediaPosition="right"
+        useInvertedBackground={false}
+      />
   </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" }, { label: "+1 (973) 538-1675" }] },
+          { items: [{ label: "Services" }, { label: "Team" }, { label: "FAQs" }] }
+        ]}
+      />
   </div>
       </ReactLenis>
     </ThemeProvider>

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f7f6f7;
-  --card: #ffffff;
-  --foreground: #0c1325;
-  --primary-cta: #0b07ff;
-  --primary-cta-text: #f7f6f7;
-  --secondary-cta: #ffffff;
-  --secondary-cta-text: #0c1325;
-  --accent: #93b7ff;
-  --background-accent: #a8bae8;
+  --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);