new

components/pages/home/statistics.tsx

@@ -0,0 +1,49 @@
+export function Statistics() {
+  const stats = [
+    {
+      number: '25',
+      symbol: '+',
+      label: 'Years Experience',
+    },
+    {
+      number: '450',
+      symbol: '+',
+      label: 'Families Saved',
+    },
+    {
+      number: '99',
+      symbol: '+',
+      label: 'Trained Staff',
+    },
+    {
+      number: '93',
+      symbol: '%',
+      label: 'Trusted Clients',
+    },
+  ];
+
+  return (
+    <section className="w-full bg-black py-10 sm:py-20 lg:py-15">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-8 lg:gap-12">
+          {stats.map((stat, index) => (
+            <div key={index} className="flex flex-col items-center justify-center">
+              {/* Number and Symbol */}
+              <div className="flex items-baseline gap-2">
+                <span className="text-4xl sm:text-5xl lg:text-6xl font-bold text-white">
+                  {stat.number}
+                </span>
+                <span className="text-2xl sm:text-3xl font-bold text-red-600">{stat.symbol}</span>
+              </div>
+
+              {/* Label */}
+              <p className="text-sm sm:text-base text-gray-300 mt-4 text-center font-medium">
+                {stat.label}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}