UI changed, added dashboard

components/dashboard/stats-card.tsx

@@ -0,0 +1,38 @@
+"use client"
+
+import { Card, CardContent } from "@/components/ui/card"
+import { LucideIcon } from "lucide-react"
+
+interface StatsCardProps {
+    title: string
+    value: string | number
+    icon: LucideIcon
+    gradient: string
+    isLoading?: boolean
+}
+
+export function StatsCard({ title, value, icon: Icon, gradient, isLoading }: StatsCardProps) {
+    return (
+        <Card className="glass-card card-glow border-0 overflow-hidden group hover:scale-[1.02] transition-transform duration-300">
+            <CardContent className="p-5">
+                <div className="flex items-center justify-between">
+                    <div className="space-y-1">
+                        <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
+                            {title}
+                        </p>
+                        {isLoading ? (
+                            <div className="h-8 w-16 bg-primary/10 rounded animate-pulse" />
+                        ) : (
+                            <p className="text-3xl font-bold text-foreground">
+                                {value}
+                            </p>
+                        )}
+                    </div>
+                    <div className={`p-3 rounded-xl ${gradient} group-hover:scale-110 transition-transform duration-300`}>
+                        <Icon className="h-6 w-6 text-white" />
+                    </div>
+                </div>
+            </CardContent>
+        </Card>
+    )
+}