??

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>