From 19ba84cb2e536df8abc08267961669d7a2e0ca17 Mon Sep 17 00:00:00 2001
From: "Builder.io" <builder-bot@builder.io>
Date: Tue, 5 Aug 2025 22:56:50 +0000
Subject: [PATCH] Enhance stats section with animations and loading

cgen-a19aff77258e4294ae118bfaab95e797
---
 client/pages/Index.tsx | 40 ++++++++++++++++++++++++----------------
 1 file changed, 24 insertions(+), 16 deletions(-)

diff --git a/client/pages/Index.tsx b/client/pages/Index.tsx
index b79edfca..893bb6dc 100644
--- a/client/pages/Index.tsx
+++ b/client/pages/Index.tsx
@@ -149,24 +149,32 @@ export default function Index() {
       {/* Stats Section */}
       <section className="py-16 border-y border-border/40">
         <div className="container mx-auto px-4">
-          <div className="grid grid-cols-2 lg:grid-cols-4 gap-8">
-            {stats.map((stat, index) => {
-              const Icon = stat.icon;
-              return (
-                <div key={index} className="text-center space-y-3">
-                  <div className="flex justify-center">
-                    <div className="p-3 rounded-lg bg-gradient-to-r from-aethex-500/20 to-neon-blue/20 border border-aethex-400/20">
-                      <Icon className="h-6 w-6 text-aethex-400" />
+          {!statsVisible ? (
+            <SkeletonStats />
+          ) : (
+            <div className="grid grid-cols-2 lg:grid-cols-4 gap-8">
+              {stats.map((stat, index) => {
+                const Icon = stat.icon;
+                return (
+                  <div
+                    key={index}
+                    className="text-center space-y-3 animate-scale-in hover-lift interactive-scale"
+                    style={{ animationDelay: `${index * 0.2}s` }}
+                  >
+                    <div className="flex justify-center">
+                      <div className="p-3 rounded-lg bg-gradient-to-r from-aethex-500/20 to-neon-blue/20 border border-aethex-400/20 hover:border-aethex-400/50 transition-all duration-300 hover-glow">
+                        <Icon className="h-6 w-6 text-aethex-400 animate-pulse-glow" />
+                      </div>
+                    </div>
+                    <div>
+                      <div className="text-3xl font-bold text-gradient animate-bounce-gentle">{stat.value}</div>
+                      <p className="text-sm text-muted-foreground uppercase tracking-wide">{stat.label}</p>
                     </div>
                   </div>
-                  <div>
-                    <div className="text-3xl font-bold text-gradient">{stat.value}</div>
-                    <p className="text-sm text-muted-foreground uppercase tracking-wide">{stat.label}</p>
-                  </div>
-                </div>
-              );
-            })}
-          </div>
+                );
+              })}
+            </div>
+          )}
         </div>
       </section>