Update theme colors

Merge version_4 into main

src/app/page.tsx

@@ -3,7 +3,7 @@
 import ReactLenis from "lenis/react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
-import HeroBillboard from "@/components/sections/hero/HeroBillboard";
+import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
 import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
 import FeatureCardTwentyNine from "@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine";
 import TestimonialCardTen from "@/components/sections/testimonial/TestimonialCardTen";
@@ -34,19 +34,25 @@ export default function SalPlumbingPage() {
           ]}
         />
         <div id="hero">
-          <HeroBillboard
+          <HeroSplitKpi
             title="Expert Plumbing & Heating Services"
             description="Reliable, professional, and affordable plumbing solutions for your home. From water heater repairs to emergency leaks, Sal's has you covered."
             buttons={[{ text: "Book Now", href: "#contact" }]}
-            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DfpSjlma8xN5ZgeOX4QBcDQpqr/uploaded-1778683562615-goxv8259.jpg"
+            kpis={[
-            imageAlt="Professional plumbing technician"
+              { value: "15+", label: "Years Experience" },
+              { value: "24/7", label: "Emergency Support" },
+              { value: "100%", label: "Satisfied Clients" }
+            ]}
+            enableKpiAnimation={true}
             background={{ variant: "plain" }}
+            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DfpSjlma8xN5ZgeOX4QBcDQpqr/uploaded-1778684136029-g88557nj.jpg"
+            imageAlt="Professional plumbing technician"
           />
           <HeroBillboardCarousel
             title="Our Work in Action"
             description="Take a look at the quality craftsmanship we bring to every job."
             mediaItems={[
-              { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DfpSjlma8xN5ZgeOX4QBcDQpqr/uploaded-1778683562615-goxv8259.jpg", imageAlt: "Work 1" },
+              { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DfpSjlma8xN5ZgeOX4QBcDQpqr/uploaded-1778683562615-goxv8259.jpg?_wi=2", imageAlt: "Work 1" },
               { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-2.webp?_wi=1", imageAlt: "Work 2" },
               { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-3.webp?_wi=1", imageAlt: "Work 3" }
             ]}
@@ -106,4 +112,4 @@ export default function SalPlumbingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #0a0a0a;
+  --background: #ffffff;
-  --card: #161616;
+  --card: #f9f9f9;
-  --foreground: #f0f0f0;
+  --foreground: #000612e6;
-  --primary-cta: #ffffff;
+  --primary-cta: #15479c;
-  --primary-cta-text: #0a0a0a;
+  --primary-cta-text: #ffffff;
-  --secondary-cta: #1e1e1e;
+  --secondary-cta: #f9f9f9;
-  --secondary-cta-text: #e0e0e0;
+  --secondary-cta-text: #000612e6;
-  --accent: #d0d0d0;
+  --accent: #e2e2e2;
-  --background-accent: #9a9a9a;
+  --background-accent: #c4c4c4;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);