website refactor

apps/website/ui/StatGridItem.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { LucideIcon } from 'lucide-react';
+import { Box } from './Box';
+import { Text } from './Text';
+import { Icon } from './Icon';
+import { Stack } from './Stack';
+
+interface StatGridItemProps {
+  label: string;
+  value: string | number;
+  color?: string;
+  icon?: LucideIcon;
+}
+
+export function StatGridItem({ label, value, color = 'text-white', icon }: StatGridItemProps) {
+  return (
+    <Box 
+      p={4} 
+      bg="bg-deep-graphite/60" 
+      rounded="xl" 
+      border={true} 
+      borderColor="border-charcoal-outline" 
+      textAlign="center"
+    >
+      {icon && (
+        <Stack direction="row" align="center" justify="center" gap={2} mb={1} className={color}>
+          <Icon icon={icon} size={4} />
+          <Text size="xs" weight="medium" uppercase letterSpacing="0.05em">{label}</Text>
+        </Stack>
+      )}
+      {!icon && (
+        <Text size="xs" color="text-gray-500" uppercase letterSpacing="0.05em" block mb={1}>{label}</Text>
+      )}
+      <Text size="3xl" weight="bold" color={color} block>{value}</Text>
+    </Box>
+  );
+}