website refactor

apps/website/ui/StatBox.tsx

@@ -9,19 +9,21 @@ export interface StatBoxProps {
   value: string | number;
   icon: LucideIcon;
   intent?: 'primary' | 'success' | 'warning' | 'critical' | 'telemetry' | 'low';
+  color?: string;
 }
 
 export const StatBox = ({ 
   label, 
   value, 
   icon, 
-  intent = 'primary' 
+  intent = 'primary',
+  color
 }: StatBoxProps) => {
   return (
     <Surface variant="muted" rounded="xl" padding={4} style={{ border: '1px solid var(--ui-color-border-default)' }}>
       <Box display="flex" alignItems="center" gap={4}>
-        <Box padding={2} rounded="lg" bg="var(--ui-color-bg-surface-muted)">
-          <Icon icon={icon} size={5} intent={intent} />
+        <Box padding={2} rounded="lg" bg="var(--ui-color-bg-surface-muted)" style={color ? { color } : undefined}>
+          <Icon icon={icon} size={5} intent={color ? undefined : intent} />
         </Box>
         <Box>
           <Text size="xs" weight="bold" variant="low" uppercase>