src/pages/HomePage.tsx

@@ -14,12 +14,14 @@ import CommitmentsSection from './HomePage/sections/Commitments';
 import TestimonialsSection from './HomePage/sections/Testimonials';
 import ContactSection from './HomePage/sections/Contact';
 
-export default function HomePage(): React.JSX.Element {
+
+import TrustMetricsSection from './HomePage/sections/TrustMetrics';export default function HomePage(): React.JSX.Element {
   return (
 <>
       <HeroSection />
 
       <AboutSection />
+      <TrustMetricsSection />
 
       <CompaniesSection />
 

src/pages/HomePage/sections/TrustMetrics.tsx

@@ -0,0 +1,50 @@
+import { Calendar, Building2, Users, Clock } from "lucide-react";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import TextAnimation from "@/components/ui/TextAnimation";
+import Card from "@/components/ui/Card";
+
+export default function TrustMetricsSection() {
+  return (
+    <div data-webild-section="trust-metrics" id="trust-metrics">
+      <section className="relative w-full py-24 bg-background">
+        <div className="w-content-width mx-auto">
+          <div className="text-center mb-16">
+            <TextAnimation
+              variant="fade-blur"
+              text="Trust Metrics"
+              tag="h2"
+              className="text-sm font-semibold tracking-wider text-accent uppercase mb-4"
+              gradientText={false}
+            />
+            <TextAnimation
+              variant="fade-blur"
+              text="Proven Track Record"
+              tag="h3"
+              className="text-4xl md:text-5xl font-bold text-foreground"
+              gradientText={false}
+            />
+          </div>
+
+          <ScrollReveal variant="slide-up">
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+              {[
+                { icon: Calendar, value: "15+", label: "Years Experience" },
+                { icon: Building2, value: "100+", label: "Business Clients" },
+                { icon: Users, value: "1000+", label: "Employees Managed" },
+                { icon: Clock, value: "24/7", label: "Client Support" }
+              ].map((metric, index) => (
+                <Card key={index} className="p-8 flex flex-col items-center text-center hover:-translate-y-1 transition-transform duration-300">
+                  <div className="w-14 h-14 rounded-full bg-background-accent flex items-center justify-center mb-6 text-foreground">
+                    <metric.icon className="w-7 h-7" />
+                  </div>
+                  <h4 className="text-4xl font-bold text-foreground mb-2">{metric.value}</h4>
+                  <p className="text-accent font-medium">{metric.label}</p>
+                </Card>
+              ))}
+            </div>
+          </ScrollReveal>
+        </div>
+      </section>
+    </div>
+  );
+}