ugh

components/animated-stats-section.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import { Package, Users, CreditCard } from "lucide-react";
+import { AnimatedCounter } from "./animated-counter";
+import { TextTyper } from "./text-typer";
+import { PlatformStats } from "@/lib/stats-service";
+
+const formatCurrency = (value: number) => {
+  return new Intl.NumberFormat('en-GB', {
+    style: 'currency',
+    currency: 'GBP',
+    minimumFractionDigits: 0,
+  }).format(value);
+};
+
+interface AnimatedStatsProps {
+  stats: PlatformStats;
+}
+
+export function AnimatedStatsSection({ stats }: AnimatedStatsProps) {
+  return (
+    <div className="mx-auto grid max-w-5xl grid-cols-1 gap-8 md:grid-cols-3 mt-8">
+      <div className="flex flex-col items-center space-y-2 rounded-lg border border-zinc-800 p-6 transition-all hover:bg-zinc-800">
+        <div className="rounded-full bg-zinc-900 p-3 text-[#D53F8C]">
+          <Package className="h-8 w-8" />
+        </div>
+        <div className="text-3xl font-bold text-white">
+          <AnimatedCounter 
+            value={stats.orders.completed} 
+            duration={2000}
+            suffix="+"
+          />
+        </div>
+        <h3 className="text-xl font-bold text-white">
+          <TextTyper 
+            text="Completed Orders" 
+            typingSpeed={30} 
+            delay={500}
+          />
+        </h3>
+        <p className="text-center text-zinc-400">
+          <TextTyper 
+            text="Successfully fulfilled orders across our platform" 
+            typingSpeed={10} 
+            delay={1500}
+          />
+        </p>
+      </div>
+      
+      <div className="flex flex-col items-center space-y-2 rounded-lg border border-zinc-800 p-6 transition-all hover:bg-zinc-800">
+        <div className="rounded-full bg-zinc-900 p-3 text-[#D53F8C]">
+          <Users className="h-8 w-8" />
+        </div>
+        <div className="text-3xl font-bold text-white">
+          <AnimatedCounter 
+            value={stats.vendors.total} 
+            duration={2000}
+            suffix="+"
+          />
+        </div>
+        <h3 className="text-xl font-bold text-white">
+          <TextTyper 
+            text="Registered Vendors" 
+            typingSpeed={30} 
+            delay={1000}
+          />
+        </h3>
+        <p className="text-center text-zinc-400">
+          <TextTyper 
+            text="Active sellers offering products on our marketplace" 
+            typingSpeed={10} 
+            delay={2000}
+          />
+        </p>
+      </div>
+      
+      <div className="flex flex-col items-center space-y-2 rounded-lg border border-zinc-800 p-6 transition-all hover:bg-zinc-800">
+        <div className="rounded-full bg-zinc-900 p-3 text-[#D53F8C]">
+          <CreditCard className="h-8 w-8" />
+        </div>
+        <div className="text-3xl font-bold text-white">
+          <AnimatedCounter 
+            value={stats.transactions.volume} 
+            duration={2500}
+            formatter={formatCurrency}
+          />
+        </div>
+        <h3 className="text-xl font-bold text-white">
+          <TextTyper 
+            text="Transaction Volume" 
+            typingSpeed={30} 
+            delay={1500}
+          />
+        </h3>
+        <p className="text-center text-zinc-400">
+          <TextTyper 
+            text="Total value of successful transactions processed" 
+            typingSpeed={10} 
+            delay={2500}
+          />
+        </p>
+      </div>
+    </div>
+  );
+}