src/app/page.tsx

@@ -3,15 +3,15 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import ContactCTA from '@/components/sections/contact/ContactCTA';
-import FaqSplitText from '@/components/sections/faq/FaqSplitText';
+import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
 import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
-import FooterBase from '@/components/sections/footer/FooterBase';
+import FooterCard from '@/components/sections/footer/FooterCard';
 import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
 import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
 import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
 import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
-import { Flame, MapPin, Settings, Mail } from "lucide-react";
+import { Flame, MapPin, Settings, Mail, Facebook, Instagram, Twitter } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -114,15 +114,16 @@ export default function LandingPage() {
   </div>
 
   <div id="faq" data-section="faq">
-      <FaqSplitText
+      <FaqSplitMedia
       useInvertedBackground={false}
-      sideTitle="Common Questions"
-      sideDescription="Answers to keep your home comfortable."
+      title="Common Questions"
+      description="Answers to keep your home comfortable."
       faqs={[
         { id: "f1", title: "Do you provide same-day service?", content: "Yes, we offer same-day appointments for urgent HVAC needs." },
         { id: "f2", title: "What brands do you service?", content: "We service all major brands including Lennox, Carrier, and others." }
       ]}
       faqsAnimation="slide-up"
+      imageSrc="https://images.unsplash.com/photo-1621905251189-08b45d6a268e?q=80&w=1200&auto=format&fit=crop"
     />
   </div>
 
@@ -138,11 +139,12 @@ export default function LandingPage() {
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterBase
+      <FooterCard
       logoText="SoCal Green"
-      columns={[
-        { title: "Services", items: [{ label: "AC Repair", href: "#services" }, { label: "Heating", href: "#services" }] },
-        { title: "Company", items: [{ label: "About", href: "#why" }, { label: "Contact", href: "#contact" }] }
+      socialLinks={[
+        { icon: Facebook, href: "#", ariaLabel: "Facebook" },
+        { icon: Instagram, href: "#", ariaLabel: "Instagram" },
+        { icon: Twitter, href: "#", ariaLabel: "Twitter" }
       ]}
     />
   </div>