Update src/app/page.tsx

Merge version_3 into main

src/app/page.tsx

@@ -3,9 +3,10 @@
 import ReactLenis from "lenis/react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
-import HeroOverlay from "@/components/sections/hero/HeroOverlay";
+import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
 import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
 import FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
+import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
 import TestimonialCardThirteen from "@/components/sections/testimonial/TestimonialCardThirteen";
 import FaqSplitText from "@/components/sections/faq/FaqSplitText";
 import ContactCTA from "@/components/sections/contact/ContactCTA";
@@ -42,15 +43,21 @@ export default function HvacPage() {
         </div>
 
         <div id="hero" data-section="hero">
-          <HeroOverlay
+          <HeroSplitKpi
             title="Your Comfort Is Our Priority"
             description="Professional heating, ventilation, and air conditioning services for homes and businesses. From installations to emergency repairs, we keep your climate perfect year-round."
+            background={{ variant: "plain" }}
+            kpis={[
+              { value: "2.5k+", label: "Units Installed" },
+              { value: "98%", label: "Customer Satisfaction" },
+              { value: "20+ Yrs", label: "Industry Experience" }
+            ]}
+            enableKpiAnimation={true}
             buttons={[
               { text: "Schedule Service", href: "#contact" },
               { text: "Our Services", href: "#services" },
             ]}
             imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/hvac/img-1.jpg"
-            showDimOverlay={true}
           />
         </div>
 
@@ -96,18 +103,18 @@ export default function HvacPage() {
         </div>
         
         <div id="services" data-section="services">
-          <FeatureCardOne
+          <ProductCardTwo
             title="Our Services"
             description="Comprehensive solutions for every season."
-            features={[
-              { title: "AC Installation", description: "Energy-efficient systems.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/hvac/img-4.jpg?_wi=2" },
-              { title: "Heating Systems", description: "Expert furnace care.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/hvac/img-5.jpg?_wi=2" },
-              { title: "Maintenance", description: "System longevity plans.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/hvac/img-6.jpg" },
-              { title: "Emergency Repair", description: "24/7 rapid response.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/hvac/img-7.jpg" }
+            products={[
+              { id: "1", brand: "AirPro", name: "AC Installation", price: "From $2,500", rating: 5, reviewCount: "120", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/hvac/img-4.jpg?_wi=2" },
+              { id: "2", brand: "AirPro", name: "Heating Systems", price: "From $1,800", rating: 5, reviewCount: "85", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/hvac/img-5.jpg?_wi=2" },
+              { id: "3", brand: "AirPro", name: "Maintenance", price: "From $150", rating: 4, reviewCount: "200", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/hvac/img-6.jpg" },
+              { id: "4", brand: "AirPro", name: "Emergency Repair", price: "Custom Quote", rating: 5, reviewCount: "450", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/hvac/img-7.jpg" }
             ]}
             textboxLayout="default"
             animationType="slide-up"
-            gridVariant="uniform-all-items-equal"
+            gridVariant="four-items-2x2-equal-grid"
             useInvertedBackground={true}
           />
         </div>