Update src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -2,16 +2,16 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactText from '@/components/sections/contact/ContactText';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
 import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
-import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
+import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
 import FooterCard from '@/components/sections/footer/FooterCard';
-import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
+import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
-import MediaAbout from '@/components/sections/about/MediaAbout';
+import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
-import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
+import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
+import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
-import { Flame, MapPin, Settings } from "lucide-react";
+import { Flame, MapPin, Settings, Mail, Facebook, Instagram, Twitter } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -41,50 +41,30 @@ export default function LandingPage() {
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroSplitDualMedia
+      <HeroBillboardTestimonial
       background={{ variant: "plain" }}
       title="Premium Climate Care for Your Home"
       description="Expert air conditioning and heating repair you can trust. Fast diagnostics, honest pricing, and technicians who treat your home with care."
       tag="Camarillo & Ventura County"
       buttons={[{ text: "Book a Service", href: "#contact" }]}
-      mediaItems={[
+      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=c9vlt2"
-        { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=c9vlt2", imageAlt: "Professional HVAC technician working modern equipment" },
-        { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=a5x3xe", imageAlt: "Modern air conditioner unit installation" }
-      ]}
       mediaAnimation="slide-up"
-      rating={5}
+      testimonials={[
-      ratingText="18 Google Reviews"
+        { name: "Merry Jane S.", handle: "@homeowner", testimonial: "Fast, professional, and reliable!", rating: 5 },
-      tagIcon={MapPin}
+        { name: "Nevan T.", handle: "@homeowner", testimonial: "Best service in the county.", rating: 5 }
+      ]}
     />
   </div>
 
   <div id="services" data-section="services">
-      <FeatureCardTwentyFive
+      <FeatureBorderGlow
       animationType="slide-up"
-      textboxLayout="split-description"
+      textboxLayout="split"
       useInvertedBackground={false}
       features={[
-        {
+        { title: "AC System Repair", description: "Full diagnosis and repair of central AC units.", icon: Flame },
-          title: "AC System Repair",          description: "Full diagnosis and repair of central AC units.",          icon: Flame,
+        { title: "Heating Repair", description: "Expert repair of all heating systems.", icon: Flame },
-          mediaItems: [
+        { title: "Thermostat Services", description: "Wiring diagnostics and smart installs.", icon: Settings }
-            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=pwjpsi" },
-            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=m8aau9" }
-          ]
-        },
-        {
-          title: "Heating Repair",          description: "Expert repair of all heating systems.",          icon: Flame,
-          mediaItems: [
-            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=yzjz7f" },
-            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=to86s6" }
-          ]
-        },
-        {
-          title: "Thermostat Services",          description: "Wiring diagnostics and smart installs.",          icon: Settings,
-          mediaItems: [
-            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ivz0v5" },
-            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=r75j5l" }
-          ]
-        }
       ]}
       title="Full-Spectrum HVAC Services"
       description="From emergency repairs to full system installs — we handle every corner of your home's climate."
@@ -92,23 +72,26 @@ export default function LandingPage() {
   </div>
 
   <div id="why" data-section="why">
-      <MediaAbout
+      <MetricSplitMediaAbout
       useInvertedBackground={false}
       title="The Standard You Deserve"
       description="We build reputation with honest communication and expert technicians who provide long-lasting comfort solutions for your family."
       imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zps2sb"
+      metrics={[
+        { value: "5.0", title: "Rating" },
+        { value: "24/7", title: "Support" }
+      ]}
     />
   </div>
 
   <div id="metrics" data-section="metrics">
-      <MetricCardSeven
+      <MetricCardThree
       animationType="slide-up"
       textboxLayout="default"
       useInvertedBackground={false}
       metrics={[
-        { id: "m1", value: "5.0", title: "Google Rating", items: ["18+ Reviews", "100% Satisfaction"] },
+        { id: "m1", icon: MapPin, title: "Service Areas", value: "Ventura" },
-        { id: "m2", value: "Same Day", title: "Service Availability", items: ["Prompt response", "Urgent priority"] },
+        { id: "m2", icon: Mail, title: "Avg Response", value: "< 2hrs" }
-        { id: "m3", value: "100%", title: "Local Focus", items: ["Camarillo Based", "Ventura Trusted"] }
       ]}
       title="Our Impact in Numbers"
       description="Results that speak for themselves."
@@ -116,21 +99,14 @@ export default function LandingPage() {
   </div>
 
   <div id="reviews" data-section="reviews">
-      <TestimonialCardSixteen
+      <TestimonialCardOne
       animationType="slide-up"
       textboxLayout="split"
       useInvertedBackground={false}
+      gridVariant="bento-grid"
       testimonials={[
         { id: "t1", name: "Merry Jane S.", role: "Homeowner", company: "Camarillo", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=x6estz" },
-        { id: "t2", name: "Nevan T.", role: "Homeowner", company: "Ventura", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=jjrqf9" },
+        { id: "t2", name: "Nevan T.", role: "Homeowner", company: "Ventura", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=jjrqf9" }
-        { id: "t3", name: "Roger H.", role: "Homeowner", company: "Camarillo", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=p2id34" },
-        { id: "t4", name: "Brett W.", role: "Homeowner", company: "Ventura", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=nbigpx" },
-        { id: "t5", name: "Fiona F.", role: "Homeowner", company: "Camarillo", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=201pkc" }
-      ]}
-      kpiItems={[
-        { value: "5.0", label: "Average Rating" },
-        { value: "18+", label: "Total Reviews" },
-        { value: "100%", label: "Satisfied" }
       ]}
       title="Trusted by Homeowners"
       description="Hear what our local customers have to say about our work."
@@ -139,36 +115,41 @@ export default function LandingPage() {
 
   <div id="faq" data-section="faq">
       <FaqSplitMedia
-      textboxLayout="default"
       useInvertedBackground={false}
-      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." },
-        { id: "f3", title: "Are you licensed and insured?", content: "Absolutely, all our technicians are fully licensed and insured." }
-      ]}
-      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zrt7yc"
       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"
+      textboxLayout="split"
+      imageSrc="https://images.unsplash.com/photo-1621905251189-08b45d6a268e?q=80&w=1200&auto=format&fit=crop"
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactText
+      <ContactCTA
-      useInvertedBackground={false}
+      tag="Contact Us"
-      background={{ variant: "plain" }}
+      title="Ready to Fix it Together?"
-      text="Get in touch for professional HVAC repair and climate care. We're ready to fix it together."
+      description="Get in touch for professional HVAC repair and climate care."
       buttons={[{ text: "Contact Us", href: "#contact" }]}
+      background={{ variant: "sparkles-gradient" }}
+      useInvertedBackground={true}
     />
   </div>
 
   <div id="footer" data-section="footer">
       <FooterCard
       logoText="SoCal Green"
-      copyrightText="© 2025 SoCal Green Air & Heating Repair"
+      socialLinks={[
+        { icon: Facebook, href: "#", ariaLabel: "Facebook" },
+        { icon: Instagram, href: "#", ariaLabel: "Instagram" },
+        { icon: Twitter, href: "#", ariaLabel: "Twitter" }
+      ]}
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}