Upload components/StatCard.jsx with huggingface_hub

components/StatCard.jsx

@@ -3,8 +3,9 @@ import { TrendingUp, TrendingDown } from 'lucide-react';
 
 export default function StatCard({ title, value, change, positive, icon }) {
   return (
-    <div className="card p-6 transition-transform hover:-translate-y-1 duration-300">
-      <div className="flex items-center justify-between">
+    <div className="card p-6 transition-all duration-300 hover:shadow-lg hover:-translate-y-1 relative overflow-hidden group">
+      <div className="absolute top-0 right-0 -mt-4 -mr-4 w-24 h-24 bg-gradient-to-br from-primary-500/10 to-transparent rounded-full group-hover:scale-150 transition-transform duration-500"></div>
+      <div className="flex items-center justify-between relative z-10">
         <div>
           <p className="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
             {title}
@@ -14,12 +15,12 @@ export default function StatCard({ title, value, change, positive, icon }) {
           </p>
           <div className="mt-2 flex items-center text-sm">
             {positive ? (
-              <span className="flex items-center text-green-600 font-medium">
+              <span className="flex items-center text-green-600 font-medium bg-green-50 px-2 py-0.5 rounded dark:bg-green-900/30 dark:text-green-400">
                 <TrendingUp className="w-4 h-4 mr-1" />
                 {change}
               </span>
             ) : (
-              <span className="flex items-center text-red-600 font-medium">
+              <span className="flex items-center text-red-600 font-medium bg-red-50 px-2 py-0.5 rounded dark:bg-red-900/30 dark:text-red-400">
                 <TrendingDown className="w-4 h-4 mr-1" />
                 {change}
               </span>
@@ -29,7 +30,7 @@ export default function StatCard({ title, value, change, positive, icon }) {
             </span>
           </div>
         </div>
-        <div className="p-3 bg-gray-50 rounded-full dark:bg-gray-700/50">
+        <div className="p-3 bg-gray-50 rounded-full dark:bg-gray-700/50 group-hover:bg-primary-50 dark:group-hover:bg-primary-900/20 transition-colors duration-300">
           {icon}
         </div>
       </div>