src/pages/HomePage.tsx

@@ -7,13 +7,13 @@ import React from 'react';
 import HeroSection from './HomePage/sections/Hero';
 import AboutSection from './HomePage/sections/About';
 import FeaturesSection from './HomePage/sections/Features';
-import MetricsSection from './HomePage/sections/Metrics';
 import PricingSection from './HomePage/sections/Pricing';
 import TestimonialsSection from './HomePage/sections/Testimonials';
 import FaqSection from './HomePage/sections/Faq';
 import ContactSection from './HomePage/sections/Contact';
 
-export default function HomePage(): React.JSX.Element {
+
+import WhyChooseUsSection from './HomePage/sections/WhyChooseUs';export default function HomePage(): React.JSX.Element {
   return (
 <>
   <HeroSection />
@@ -22,7 +22,7 @@ export default function HomePage(): React.JSX.Element {
 
   <FeaturesSection />
 
-  <MetricsSection />
+      <WhyChooseUsSection />
 
   <PricingSection />
 

src/pages/HomePage/sections/Metrics.tsx

@@ -1,46 +0,0 @@
-// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
-// file as the canonical source for the "metrics" section.
-
-import React from 'react';
-import MetricsFeatureCards from '@/components/sections/metrics/MetricsFeatureCards';
-import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
-
-export default function MetricsSection(): React.JSX.Element {
-  return (
-    <div id="metrics" data-section="metrics">
-        <SectionErrorBoundary name="metrics">
-              <MetricsFeatureCards
-          tag="Our Impact"
-          title="Quality You Can See"
-          description="We don't just landscape; we build trust one project at a time across our local community."
-          metrics={[
-            {
-              value: "150+",
-              title: "Projects Completed",
-              features: [
-                "Residential properties",
-                "Commercial maintenance",
-              ],
-            },
-            {
-              value: "10 Years",
-              title: "Local Authority",
-              features: [
-                "Dedicated craftsmanship",
-                "Expert knowledge",
-              ],
-            },
-            {
-              value: "98%",
-              title: "Satisfied Clients",
-              features: [
-                "On-time delivery",
-                "Professional communication",
-              ],
-            },
-          ]}
-        />
-        </SectionErrorBoundary>
-      </div>
-  );
-}

src/pages/HomePage/sections/WhyChooseUs.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+import TextAnimation from "@/components/ui/TextAnimation";
+import CheckList from "@/components/ui/CheckList";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+
+export default function WhyChooseUsSection(): React.JSX.Element {
+  return (
+    <div id="why-choose-us" data-webild-section="why-choose-us" className="py-24 bg-background">
+      <SectionErrorBoundary name="why-choose-us">
+        <div className="w-content-width mx-auto flex flex-col items-center">
+          <ScrollReveal variant="fade">
+            <TextAnimation
+              text="Why Customers Choose Daniel’s Landscaping"
+              variant="fade-blur"
+              tag="h2"
+              gradientText={false}
+              className="text-3xl md:text-4xl font-bold text-foreground mb-12 text-center"
+            />
+          </ScrollReveal>
+          <ScrollReveal variant="fade" delay={0.2} className="w-full max-w-2xl">
+            <div className="card p-8 md:p-12 w-full">
+              <CheckList
+                items={[
+                  "Professional and reliable service",
+                  "Fair and transparent pricing",
+                  "Clean and detailed workmanship",
+                  "Clear communication from start to finish"
+                ]}
+                className="text-lg text-foreground flex flex-col gap-4"
+              />
+            </div>
+          </ScrollReveal>
+        </div>
+      </SectionErrorBoundary>
+    </div>
+  );
+}