website refactor

apps/website/ui/StatGridItem.tsx

@@ -1,37 +1,36 @@
-import React from 'react';
-import { LucideIcon } from 'lucide-react';
+import React, { ReactNode } from 'react';
 import { Box } from './primitives/Box';
+import { Stack } from './primitives/Stack';
 import { Text } from './Text';
 import { Icon } from './Icon';
-import { Stack } from './primitives/Stack';
+import { LucideIcon } from 'lucide-react';
 
 interface StatGridItemProps {
   label: string;
   value: string | number;
-  color?: string;
   icon?: LucideIcon;
+  color?: string;
 }
 
-export function StatGridItem({ label, value, color = 'text-white', icon }: StatGridItemProps) {
+/**
+ * StatGridItem
+ * 
+ * A simple stat display for use in a grid.
+ */
+export function StatGridItem({ label, value, icon, color = 'text-primary-blue' }: StatGridItemProps) {
   return (
-    <Box 
-      p={4} 
-      bg="bg-deep-graphite/60" 
-      rounded="xl" 
-      border={true} 
-      borderColor="border-charcoal-outline" 
-      textAlign="center"
-    >
+    <Box p={4} textAlign="center">
       {icon && (
-        <Stack direction="row" align="center" justify="center" gap={2} mb={1} className={color}>
+        <Stack direction="row" align="center" justify="center" gap={2} mb={1} color={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>
+      <Text size="2xl" weight="bold" color="text-white" block>
+        {value}
+      </Text>
+      <Text size="xs" weight="medium" color="text-gray-500" uppercase letterSpacing="wider">
+        {label}
+      </Text>
     </Box>
   );
 }