auth rework

apps/website/components/ui/StatCard.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import React from 'react';
+import Card from './Card';
+
+interface StatCardProps {
+  icon: React.ElementType;
+  label: string;
+  value: string;
+  subValue?: string;
+  color?: string;
+  bgColor?: string;
+  trend?: {
+    value: number;
+    isPositive: boolean;
+  };
+}
+
+/**
+ * Statistics card component for displaying metrics with icon, label, value, and optional trend.
+ * Used in dashboards and overview sections.
+ */
+export default function StatCard({ 
+  icon: Icon, 
+  label, 
+  value, 
+  subValue,
+  color = 'text-primary-blue',
+  bgColor = 'bg-primary-blue/10',
+  trend,
+}: StatCardProps) {
+  return (
+    <Card className="p-5">
+      <div className="flex items-start justify-between">
+        <div>
+          <div className="flex items-center gap-2 mb-2">
+            <div className={`p-2 rounded-lg ${bgColor}`}>
+              <Icon className={`w-4 h-4 ${color}`} />
+            </div>
+            <span className="text-sm text-gray-400">{label}</span>
+          </div>
+          <div className="text-2xl font-bold text-white">{value}</div>
+          {subValue && (
+            <div className="text-xs text-gray-500 mt-1">{subValue}</div>
+          )}
+        </div>
+        {trend && (
+          <div className={`flex items-center gap-1 text-sm ${trend.isPositive ? 'text-performance-green' : 'text-racing-red'}`}>
+            <span>{trend.isPositive ? '↑' : '↓'}</span>
+            <span>{Math.abs(trend.value)}%</span>
+          </div>
+        )}
+      </div>
+    </Card>
+  );
+}