??

.gitignore

@@ -42,3 +42,4 @@ env.local
 /lib/deprecated-backup
 public/git-info.json
 public/git-info.json
+public/git-info.json

app/page.tsx

@@ -1,11 +1,17 @@
 import { getPlatformStatsServer } from "@/lib/api";
 import { HomeNavbar } from "@/components/home-navbar";
 import { Suspense } from "react";
-import { AnimatedStatsSection } from "@/components/animated-stats-section";
 import { Shield, LineChart, Zap } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import Link from "next/link";
 import HeroSection from "@/components/3d/HeroSection";
+import dynamic from 'next/dynamic';
+
+// Dynamically import the 3D stats component to avoid SSR issues
+const StatsSection = dynamic(() => import('@/components/3d/StatsSection'), { 
+  ssr: false,
+  loading: () => <div className="h-40 w-full bg-gray-900 animate-pulse rounded-lg"></div>
+});
 
 // Constants
 const PY_20 = 20;
@@ -42,8 +48,9 @@ export default async function Home() {
         {/* Statistics Section */}
         <section className="py-16 px-6 md:px-10 bg-black">
           <div className="max-w-6xl mx-auto">
-            <Suspense fallback={<div className="text-center">Loading statistics...</div>}>
-              <AnimatedStatsSection stats={stats} />
+            <h2 className="text-3xl md:text-4xl font-bold text-center mb-10 text-white">Platform Statistics</h2>
+            <Suspense fallback={<div className="h-40 w-full bg-gray-900 animate-pulse rounded-lg"></div>}>
+              <StatsSection stats={stats} />
             </Suspense>
           </div>
         </section>

components/3d/StatsSection.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import React from 'react';
+import { motion } from 'framer-motion';
+import StatCard from './StatCard';
+
+interface StatsProps {
+  stats: {
+    totalProducts?: number;
+    totalVendors?: number;
+    totalOrders?: number;
+    totalCustomers?: number;
+    gmv?: number;
+  };
+}
+
+function formatNumberValue(num: number = 0): string {
+  return new Intl.NumberFormat().format(Math.round(num));
+}
+
+function formatCurrencyValue(amount: number = 0): string {
+  return new Intl.NumberFormat('en-GB', {
+    style: 'currency',
+    currency: 'GBP',
+    maximumFractionDigits: 0
+  }).format(amount);
+}
+
+export default function StatsSection({ stats }: StatsProps) {
+  const { totalProducts = 0, totalVendors = 0, totalOrders = 0, totalCustomers = 0, gmv = 0 } = stats;
+
+  // Container animation variants
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.1
+      }
+    }
+  };
+
+  // Item animation variants
+  const itemVariants = {
+    hidden: { y: 20, opacity: 0 },
+    visible: {
+      y: 0,
+      opacity: 1,
+      transition: {
+        type: "spring",
+        stiffness: 260,
+        damping: 20
+      }
+    }
+  };
+
+  return (
+    <div className="perspective-1000">
+      <motion.div
+        className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5 sm:gap-6"
+        variants={containerVariants}
+        initial="hidden"
+        animate="visible"
+        style={{ perspective: "1000px" }}
+      >
+        <motion.div variants={itemVariants}>
+          <StatCard title="Total Products" value={formatNumberValue(totalProducts)} className="h-32" />
+        </motion.div>
+        
+        <motion.div variants={itemVariants}>
+          <StatCard title="Total Vendors" value={formatNumberValue(totalVendors)} className="h-32" />
+        </motion.div>
+        
+        <motion.div variants={itemVariants}>
+          <StatCard title="Total Orders" value={formatNumberValue(totalOrders)} className="h-32" />
+        </motion.div>
+        
+        <motion.div variants={itemVariants} className="sm:col-span-2 lg:col-span-1">
+          <StatCard title="Revenue" value={formatCurrencyValue(gmv)} className="h-32 bg-gradient-to-br from-pink-900/40 to-gray-900 border-pink-800/30" />
+        </motion.div>
+      </motion.div>
+    </div>
+  );
+}