feat(Stats): [UI] add hover to display full text on stats cards (#583)

* feat(Stats): [UI] add hover to display full text on stats cards

* fix on mobile view

Author: Anshgrover23

src/components/Stats.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { motion } from 'framer-motion';
 import { stats, statisticsData } from '@/constants/Stats.ts';
 import {
@@ -9,6 +10,8 @@ import {
 } from '@/styles/Animations';
 
 const Stats = () => {
+  const [activeCardIndex, setActiveCardIndex] = useState<number | null>(null);
+
   return (
     <section className="max-w-7xl mx-auto py-10 sm:py-16 md:py-20 px-4 sm:px-6 bg-white dark:bg-gray-900">
       <div className="relative mb-12 sm:mb-16 md:mb-24">
@@ -205,27 +208,42 @@ const Stats = () => {
 
         {/* Interactive Stats Summary - Grid Layout */}
         <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-2 sm:gap-3 md:gap-4 max-w-6xl mx-auto px-2">
-          {statisticsData.map((stat, index) => (
-            <motion.div
-              key={index}
-              className={`px-2 sm:px-3 md:px-4 py-2 sm:py-3 rounded-md sm:rounded-lg ${stat.bgColor} border ${stat.borderColor} flex flex-col items-center justify-center`}
-              whileHover={{
-                scale: 1.05,
-                boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
-              }}
-              transition={{ type: 'spring', stiffness: 400, damping: 10 }}
-            >
-              <span
-                className={`font-bold text-transparent bg-clip-text bg-gradient-to-r ${stat.gradient} text-base sm:text-xl md:text-2xl`}
+          {statisticsData.map((stat, index) => {
+            const isActive = activeCardIndex === index;
+            const showFullText = isActive;
+
+            return (
+              <motion.div
+                key={index}
+                className={`px-2 sm:px-3 md:px-4 py-2 sm:py-3 rounded-md sm:rounded-lg ${stat.bgColor} border ${stat.borderColor} flex flex-col items-center justify-center relative group cursor-pointer`}
+                whileHover={{
+                  scale: 1.05,
+                  boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
+                }}
+                transition={{ type: 'spring', stiffness: 400, damping: 10 }}
+                onClick={() => setActiveCardIndex(isActive ? null : index)}
               >
-                {stat.value}
-              </span>
-              <span className="text-gray-700 dark:text-gray-300 text-2xs sm:text-xs md:text-sm text-center mt-0.5 sm:mt-1 line-clamp-1">
-                {stat.title.split('.')[0].substring(0, 12)}
-                {stat.title.split('.')[0].length > 12 ? '...' : ''}
-              </span>
-            </motion.div>
-          ))}
+                <span
+                  className={`font-bold text-transparent bg-clip-text bg-gradient-to-r ${stat.gradient} text-base sm:text-xl md:text-2xl`}
+                >
+                  {stat.value}
+                </span>
+                {/* Truncated text - visible by default, hidden on hover (desktop) or when active (mobile) */}
+                <span
+                  className={`text-gray-700 dark:text-gray-300 text-2xs sm:text-xs md:text-sm text-center mt-0.5 sm:mt-1 line-clamp-1 ${showFullText ? 'hidden' : ''} lg:block lg:group-hover:hidden`}
+                >
+                  {stat.title.split('.')[0].substring(0, 12)}
+                  {stat.title.split('.')[0].length > 12 ? '...' : ''}
+                </span>
+                {/* Full text - visible on hover (desktop) or when active (mobile) */}
+                <span
+                  className={`text-gray-700 dark:text-gray-300 text-2xs sm:text-xs md:text-sm text-center mt-0.5 sm:mt-1 whitespace-normal px-1 ${showFullText ? 'block' : 'hidden'} lg:hidden lg:group-hover:block`}
+                >
+                  {stat.title}
+                </span>
+              </motion.div>
+            );
+          })}
         </div>
       </motion.div>
     </section>