website refactor

apps/website/ui/StatCard.tsx

@@ -0,0 +1,53 @@
+import React, { ReactNode } from 'react';
+import { Card } from './Card';
+import { Text } from './Text';
+
+interface StatCardProps {
+  label: string;
+  value: string | number;
+  icon?: ReactNode;
+  variant?: 'blue' | 'purple' | 'green' | 'orange';
+  className?: string;
+}
+
+export function StatCard({ 
+  label, 
+  value, 
+  icon,
+  variant = 'blue',
+  className = ''
+}: StatCardProps) {
+  const variantClasses = {
+    blue: 'bg-gradient-to-br from-blue-900/20 to-blue-700/10 border-blue-500/30',
+    purple: 'bg-gradient-to-br from-purple-900/20 to-purple-700/10 border-purple-500/30',
+    green: 'bg-gradient-to-br from-green-900/20 to-green-700/10 border-green-500/30',
+    orange: 'bg-gradient-to-br from-orange-900/20 to-orange-700/10 border-orange-500/30'
+  };
+  
+  const iconColorClasses = {
+    blue: 'text-blue-400',
+    purple: 'text-purple-400',
+    green: 'text-green-400',
+    orange: 'text-orange-400'
+  };
+  
+  return (
+    <Card className={`${variantClasses[variant]} ${className}`}>
+      <div className="flex items-center justify-between">
+        <div>
+          <Text size="sm" color="text-gray-400" className="mb-1">
+            {label}
+          </Text>
+          <Text size="3xl" weight="bold" color="text-white">
+            {value}
+          </Text>
+        </div>
+        {icon && (
+          <div className={iconColorClasses[variant]}>
+            {icon}
+          </div>
+        )}
+      </div>
+    </Card>
+  );
+}