website refactor

apps/website/ui/StatCard.tsx

@@ -1,21 +1,30 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
 import { Card } from './Card';
 import { Text } from './Text';
+import { Icon } from './Icon';
+import { LucideIcon } from 'lucide-react';
 
 interface StatCardProps {
   label: string;
   value: string | number;
-  icon?: ReactNode;
+  subValue?: string;
+  icon?: LucideIcon;
   variant?: 'blue' | 'purple' | 'green' | 'orange';
   className?: string;
+  trend?: {
+    value: number;
+    isPositive: boolean;
+  };
 }
 
 export function StatCard({ 
   label, 
   value, 
+  subValue,
   icon,
   variant = 'blue',
-  className = ''
+  className = '',
+  trend,
 }: StatCardProps) {
   const variantClasses = {
     blue: 'bg-gradient-to-br from-blue-900/20 to-blue-700/10 border-blue-500/30',
@@ -25,28 +34,38 @@ export function StatCard({
   };
   
   const iconColorClasses = {
-    blue: 'text-blue-400',
-    purple: 'text-purple-400',
-    green: 'text-green-400',
-    orange: 'text-orange-400'
+    blue: '#60a5fa',
+    purple: '#a78bfa',
+    green: '#34d399',
+    orange: '#fb923c'
   };
   
   return (
     <Card className={`${variantClasses[variant]} ${className}`}>
-      <div className="flex items-center justify-between">
+      <div className="flex items-start justify-between">
         <div>
-          <Text size="sm" color="text-gray-400" className="mb-1">
+          <Text size="sm" color="text-gray-400" className="mb-1" block>
             {label}
           </Text>
-          <Text size="3xl" weight="bold" color="text-white">
+          <Text size="3xl" weight="bold" color="text-white" block>
             {value}
           </Text>
+          {subValue && (
+            <Text size="xs" color="text-gray-500" className="mt-1" block>
+              {subValue}
+            </Text>
+          )}
+        </div>
+        <div className="flex flex-col items-end gap-2">
+          {icon && (
+            <Icon icon={icon} size={8} color={iconColorClasses[variant]} />
+          )}
+          {trend && (
+            <Text size="sm" color={trend.isPositive ? 'text-performance-green' : 'text-error-red'}>
+              {trend.isPositive ? '↑' : '↓'}{Math.abs(trend.value)}%
+            </Text>
+          )}
         </div>
-        {icon && (
-          <div className={iconColorClasses[variant]}>
-            {icon}
-          </div>
-        )}
       </div>
     </Card>
   );