From b46830f61e686bff3d2897aae6328dbcda84a679 Mon Sep 17 00:00:00 2001
From: d3v1l0n <d3v1l0n@outlook.in>
Date: Tue, 7 Jan 2025 03:14:30 +0530
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20perf:=20i=20forgot?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/home/StatsSection.tsx | 67 ++++++++++++++++++++--------
 1 file changed, 48 insertions(+), 19 deletions(-)

diff --git a/src/components/home/StatsSection.tsx b/src/components/home/StatsSection.tsx
index e6d0f13a..5e16293f 100644
--- a/src/components/home/StatsSection.tsx
+++ b/src/components/home/StatsSection.tsx
@@ -55,46 +55,75 @@ export function StatsSection() {
   }, []);
 
   return (
-    <section className="py-20 bg-gradient-to-b from-white via-gray-50 to-gray-100">
+    <section className="py-20 bg-gradient-to-b from-gray-50 via-gray-100 to-gray-200">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="text-center mb-12">
-          <h2 className="text-4xl font-bold text-gray-900">Our Impact</h2>
-          <p className="mt-4 text-lg text-gray-600">
+        {/* Header Section */}
+        <div className="text-center mb-16">
+          <motion.h2
+            className="text-5xl font-extrabold text-gray-900"
+            initial={{ opacity: 0, y: -20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8 }}
+          >
+            Our Impact
+          </motion.h2>
+          <motion.p
+            className="mt-4 text-lg text-gray-600"
+            initial={{ opacity: 0 }}
+            whileInView={{ opacity: 1 }}
+            transition={{ duration: 1, delay: 0.2 }}
+          >
             A snapshot of our growing community and contributions.
-          </p>
+          </motion.p>
         </div>
+
+        {/* Stats Grid */}
         {error ? (
           <div className="text-center text-red-500 font-medium">
             Unable to fetch data. Please try again later.
           </div>
         ) : (
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-12">
             {stats.map((stat, index) => (
               <motion.div
                 key={stat.label}
-                initial={{ opacity: 0, y: 20 }}
-                whileInView={{ opacity: 1, y: 0 }}
-                transition={{ delay: index * 0.2, duration: 0.6 }}
-                viewport={{ once: true }}
-                className="flex flex-col items-center p-6 bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow duration-300"
+                initial={{ opacity: 0, scale: 0.8 }}
+                whileInView={{ opacity: 1, scale: 1 }}
+                transition={{
+                  delay: index * 0.2,
+                  duration: 0.6,
+                  ease: "easeOut",
+                }}
+                whileHover={{
+                  scale: 1.1,
+                  boxShadow: "0px 20px 40px rgba(0, 0, 0, 0.2)",
+                }}
+                className="flex flex-col items-center p-8 bg-white rounded-xl shadow-lg hover:shadow-2xl transition-transform duration-300"
               >
+                {/* Icon */}
                 <motion.div
                   className="p-4 bg-gradient-to-r from-blue-400 to-purple-400 rounded-full mb-6"
-                  whileHover={{ scale: 1.1 }}
-                  transition={{ duration: 0.3 }}
+                  whileHover={{ rotate: 360 }}
+                  transition={{ duration: 0.8 }}
                 >
-                  <stat.icon className="h-10 w-10 text-white" />
+                  <stat.icon className="h-12 w-12 text-white" />
                 </motion.div>
+                {/* Stat Value */}
                 <motion.p
-                  initial={{ scale: 0.8 }}
-                  whileInView={{ scale: 1 }}
-                  transition={{ delay: index * 0.2 + 0.2 }}
-                  viewport={{ once: true }}
                   className="text-4xl font-extrabold text-gray-900"
+                  initial={{ scale: 0.9 }}
+                  whileInView={{ scale: 1 }}
+                  transition={{
+                    delay: index * 0.2 + 0.2,
+                    duration: 0.6,
+                  }}
                 >
                   {stat.value}
                 </motion.p>
-                <p className="text-lg font-medium text-gray-600">{stat.label}</p>
+                {/* Stat Label */}
+                <p className="mt-2 text-lg font-medium text-gray-600">
+                  {stat.label}
+                </p>
               </motion.div>
             ))}
           </div>