From 05c1307ad713d09dfc26b222ff3f2bba74c539d0 Mon Sep 17 00:00:00 2001
From: Leo dev <klesti.selimay@icloud.com>
Date: Tue, 3 Feb 2026 15:23:37 +0100
Subject: [PATCH] Stat card animations

---
 src/app/leaderboards/page.tsx   | 28 ++++++++++++++++++++++++----
 src/app/runs/page.tsx           | 13 +++++++++----
 src/components/app/StatCard.tsx | 10 +++++++++-
 3 files changed, 42 insertions(+), 9 deletions(-)

diff --git a/src/app/leaderboards/page.tsx b/src/app/leaderboards/page.tsx
index 80d7067..d43b4f8 100644
--- a/src/app/leaderboards/page.tsx
+++ b/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 icon={Trophy} label="World Record" value="2:34.21" />
-          <StatCard icon={TrendingUp} label="Runs This Week" value="847K" />
-          <StatCard icon={Calendar} label="Until Reset" value="5d 12h" />
+          <StatCard
+            icon={Globe}
+            label="Total Runners"
+            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 */}
diff --git a/src/app/runs/page.tsx b/src/app/runs/page.tsx
index b1655da..7ba7a3c 100644
--- a/src/app/runs/page.tsx
+++ b/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={Users} label="Active Runners" value="39" />
-          <StatCard icon={Timer} label="Avg Runtime" value="1:47" />
-          <StatCard icon={TrendingUp} label="PB Pace Runs" value="7" />
+          <StatCard icon={Zap} label="Live Runs" value="42" index={0} />
+          <StatCard icon={Users} label="Active Runners" value="39" index={1} />
+          <StatCard icon={Timer} label="Avg Runtime" value="1:47" index={2} />
+          <StatCard
+            icon={TrendingUp}
+            label="PB Pace Runs"
+            value="7"
+            index={3}
+          />
         </div>
 
         {/* Filters */}
diff --git a/src/components/app/StatCard.tsx b/src/components/app/StatCard.tsx
index 963e918..9fb77d2 100644
--- a/src/components/app/StatCard.tsx
+++ b/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>