Update src/app/services/page.tsx

Merge version_3 into main

src/app/page.tsx

@@ -7,6 +7,7 @@ import HeroBillboardScroll from "@/components/sections/hero/HeroBillboardScroll"
 import FeatureBento from "@/components/sections/feature/FeatureBento";
 import TestimonialCardThirteen from "@/components/sections/testimonial/TestimonialCardThirteen";
 import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
+import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
 import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
 import ContactFaq from "@/components/sections/contact/ContactFaq";
 import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
@@ -29,6 +30,9 @@ import {
   Clock,
   Award,
   Users,
+  TrendingUp,
+  Hammer,
+  Gauge,
 } from "lucide-react";
 
 export default function HomePage() {
@@ -160,6 +164,35 @@ export default function HomePage() {
         />
       </div>
 
+      <div id="metrics" data-section="metrics">
+        <MetricCardOne
+          title="Our Impact by the Numbers"
+          description="Real results that showcase our commitment to excellence and customer satisfaction across Renton and surrounding communities."
+          tag="Performance Metrics"
+          tagIcon={TrendingUp}
+          tagAnimation="slide-up"
+          metrics={[
+            {
+              id: "1",              value: "500+",              title: "Happy Customers",              description: "Satisfied homeowners across Renton and nearby areas",              icon: Users,
+            },
+            {
+              id: "2",              value: "25+",              title: "Years Experience",              description: "Combined expertise and proven track record",              icon: Award,
+            },
+            {
+              id: "3",              value: "1-2hrs",              title: "Avg Response Time",              description: "Quick arrival for all your plumbing emergencies",              icon: Clock,
+            },
+            {
+              id: "4",              value: "100%",              title: "Satisfaction Guarantee",              description: "Every job backed by our commitment to excellence",              icon: CheckCircle,
+            },
+          ]}
+          gridVariant="uniform-all-items-equal"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          ariaLabel="Key performance metrics and impact"
+        />
+      </div>
+
       <div id="why-choose-us" data-section="why-choose-us">
         <MetricSplitMediaAbout
           tag="Our Commitment"

src/app/services/page.tsx

@@ -4,6 +4,7 @@ import Link from "next/link";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
 import FeatureBento from "@/components/sections/feature/FeatureBento";
+import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
 import ContactFaq from "@/components/sections/contact/ContactFaq";
 import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
 import {
@@ -17,6 +18,10 @@ import {
   Zap,
   Hammer,
   Shield,
+  TrendingUp,
+  Users,
+  Award,
+  CheckCircle,
 } from "lucide-react";
 
 export default function ServicesPage() {
@@ -89,6 +94,35 @@ export default function ServicesPage() {
         />
       </div>
 
+      <div id="service-metrics" data-section="service-metrics">
+        <MetricCardOne
+          title="Our Service Excellence"
+          description="Numbers that reflect our dedication to quality plumbing services and customer satisfaction."
+          tag="Service Quality"
+          tagIcon={TrendingUp}
+          tagAnimation="slide-up"
+          metrics={[
+            {
+              id: "1",              value: "24/7",              title: "Emergency Availability",              description: "Round-the-clock emergency plumbing response",              icon: Zap,
+            },
+            {
+              id: "2",              value: "1-2hrs",              title: "Average Response Time",              description: "Quick arrival for urgent plumbing needs",              icon: Phone,
+            },
+            {
+              id: "3",              value: "8",              title: "Core Services",              description: "Comprehensive plumbing solutions available",              icon: Wrench,
+            },
+            {
+              id: "4",              value: "100%",              title: "Satisfaction Rate",              description: "Backed by our guarantee on every job",              icon: CheckCircle,
+            },
+          ]}
+          gridVariant="uniform-all-items-equal"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          ariaLabel="Service quality metrics"
+        />
+      </div>
+
       <div id="services-cta" data-section="services-cta">
         <ContactFaq
           ctaTitle="Ready to Get Started?"

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #ffffff;
-  --card: #f9f9f9;
-  --foreground: #0a1a2e;
-  --primary-cta: #d4a574;
+  --background: #f5faff;
+  --card: #f1f8ff;
+  --foreground: #001122;
+  --primary-cta: #15479c;
   --primary-cta-text: #fbfaff;
-  --secondary-cta: #f9f9f9;
+  --secondary-cta: #ffffff;
   --secondary-cta-text: #0f0022;
-  --accent: #c9a961;
-  --background-accent: #e8dcc8;
+  --accent: #ff7b05;
+  --background-accent: #ff8c42;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);