Stat card animations

src/app/leaderboards/page.tsx

@@ -191,10 +191,30 @@ export default function Leaderboards() {
 
         {/* Stats */}
         <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-          <StatCard icon={Globe} label="Total Runners" value="12,453" />
+          <StatCard
-          <StatCard icon={Trophy} label="World Record" value="2:34.21" />
+            icon={Globe}
-          <StatCard icon={TrendingUp} label="Runs This Week" value="847K" />
+            label="Total Runners"
-          <StatCard icon={Calendar} label="Until Reset" value="5d 12h" />
+            value="12,453"
+            index={0}
+          />
+          <StatCard
+            icon={Trophy}
+            label="World Record"
+            value="2:34.21"
+            index={1}
+          />
+          <StatCard
+            icon={TrendingUp}
+            label="Runs This Week"
+            value="847K"
+            index={2}
+          />
+          <StatCard
+            icon={Calendar}
+            label="Until Reset"
+            value="5d 12h"
+            index={3}
+          />
         </div>
 
         {/* Tabs + Filters */}

src/app/runs/page.tsx

@@ -81,10 +81,15 @@ export default function LiveRuns() {
 
         {/* Stats */}
         <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-          <StatCard icon={Zap} label="Live Runs" value="42" />
+          <StatCard icon={Zap} label="Live Runs" value="42" index={0} />
-          <StatCard icon={Users} label="Active Runners" value="39" />
+          <StatCard icon={Users} label="Active Runners" value="39" index={1} />
-          <StatCard icon={Timer} label="Avg Runtime" value="1:47" />
+          <StatCard icon={Timer} label="Avg Runtime" value="1:47" index={2} />
-          <StatCard icon={TrendingUp} label="PB Pace Runs" value="7" />
+          <StatCard
+            icon={TrendingUp}
+            label="PB Pace Runs"
+            value="7"
+            index={3}
+          />
         </div>
 
         {/* Filters */}

src/components/app/StatCard.tsx

@@ -4,13 +4,21 @@ export default function StatCard({
   icon: Icon,
   label,
   value,
+  index = 0,
 }: {
   icon: any;
   label: string;
   value: string;
+  index?: number;
 }) {
   return (
-    <Card>
+    <Card
+      className="opacity-0 animate-fade-in"
+      style={{
+        animationDelay: `${index * 0.1}s`,
+        animationFillMode: "forwards",
+      }}
+    >
       <CardHeader className="pb-2 text-center">
         <Icon className="mx-auto h-5 w-5 text-primary" />
         <CardTitle className="font-mono text-2xl">{value}</CardTitle>