src/app/page.tsx

@@ -7,9 +7,9 @@ import AboutMetric from '@/components/sections/about/AboutMetric';
 import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
 import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
 import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
-import FaqSplitText from '@/components/sections/faq/FaqSplitText';
-import ContactSplit from '@/components/sections/contact/ContactSplit';
-import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import FaqBase from '@/components/sections/faq/FaqBase';
+import ContactText from '@/components/sections/contact/ContactText';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
 import { Award, CheckCircle, Mail, Scissors, Star, Users, Zap } from 'lucide-react';
 
 export default function LandingPage() {
@@ -143,14 +143,14 @@ export default function LandingPage() {
       </div>
 
       <div id="faq" data-section="faq">
-        <FaqSplitText
-          sideTitle="Frequently Asked Questions"
-          sideDescription="Everything you need to know about booking your appointment and our services."
+        <FaqBase
+          title="Frequently Asked Questions"
+          description="Everything you need to know about booking your appointment and our services."
           buttons={[
             { text: "Contact Us", href: "#contact" }
           ]}
           faqsAnimation="slide-up"
-          textPosition="left"
+          textboxLayout="default"
           useInvertedBackground={true}
           faqs={[
             {
@@ -176,27 +176,44 @@ export default function LandingPage() {
       </div>
 
       <div id="contact" data-section="contact">
-        <ContactSplit
-          tag="Get In Touch"
-          title="Ready to Experience Premium Barbering?"
-          description="Book your appointment today or reach out with any questions. Our friendly team is ready to serve you."
-          tagIcon={Mail}
-          tagAnimation="slide-up"
+        <ContactText
+          text="Ready to Experience Premium Barbering?"
           background={{ variant: "plain" }}
           useInvertedBackground={false}
-          mediaAnimation="slide-up"
-          mediaPosition="right"
-          inputPlaceholder="Enter your email"
-          buttonText="Book Now"
-          termsText="By booking an appointment, you agree to our Terms and Conditions."
+          buttons={[
+            { text: "Book Now", href: "#contact" },
+            { text: "Call Us", href: "tel:(555) 123-4567" }
+          ]}
+          animationType="entrance-slide"
         />
       </div>
 
       <div id="footer" data-section="footer">
-        <FooterLogoReveal
+        <FooterLogoEmphasis
           logoText="The Barbers Loft"
-          leftLink={{ text: "Contact: (555) 123-4567", href: "#contact" }}
-          rightLink={{ text: "© 2024 The Barbers Loft. All rights reserved.", href: "#" }}
+          columns={[
+            {
+              items: [
+                { label: "Services", href: "#features" },
+                { label: "About Us", href: "#about" },
+                { label: "Testimonials", href: "#testimonials" }
+              ]
+            },
+            {
+              items: [
+                { label: "Book Appointment", href: "#contact" },
+                { label: "Contact", href: "#contact" },
+                { label: "FAQ", href: "#faq" }
+              ]
+            },
+            {
+              items: [
+                { label: "Phone: (555) 123-4567", href: "tel:(555) 123-4567" },
+                { label: "Email: info@barbersloft.com", href: "mailto:info@barbersloft.com" },
+                { label: "© 2024 The Barbers Loft. All rights reserved." }
+              ]
+            }
+          ]}
         />
       </div>
     </ThemeProvider>

src/app/styles/variables.css

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