website refactor

apps/website/ui/StatItem.tsx

@@ -2,18 +2,23 @@ import React from 'react';
 import { Box } from './primitives/Box';
 import { Text } from './Text';
 
-interface StatItemProps {
+export interface StatItemProps {
   label: string;
   value: string | number;
-  color?: string;
+  intent?: 'primary' | 'success' | 'warning' | 'critical' | 'high' | 'med' | 'low';
   align?: 'left' | 'center' | 'right';
 }
 
-export function StatItem({ label, value, color = 'text-white', align = 'left' }: StatItemProps) {
+export const StatItem = ({ 
+  label, 
+  value, 
+  intent = 'high',
+  align = 'left'
+}: StatItemProps) => {
   return (
-    <Box display="flex" flexDirection="column" alignItems={align === 'center' ? 'center' : align === 'right' ? 'flex-end' : 'flex-start'}>
-      <Text size="xs" color="text-gray-500" block mb={0.5}>{label}</Text>
-      <Text size="sm" weight="semibold" color={color}>{value}</Text>
+    <Box textAlign={align}>
+      <Text size="xs" variant="low" block marginBottom={0.5}>{label}</Text>
+      <Text size="sm" weight="semibold" variant={intent}>{value}</Text>
     </Box>
   );
-}
+};