website refactor

apps/website/ui/TeamHeroStats.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Users, UserPlus } from 'lucide-react';
+import { Box } from './Box';
+import { Text } from './Text';
+import { Icon } from './Icon';
+import { Stack } from './Stack';
+
+interface TeamHeroStatsProps {
+  teamCount: number;
+  recruitingCount: number;
+}
+
+export function TeamHeroStats({ teamCount, recruitingCount }: TeamHeroStatsProps) {
+  return (
+    <Stack direction="row" align="center" gap={4}>
+      <Box 
+        display="flex" 
+        alignItems="center" 
+        gap={2} 
+        px={3} 
+        py={2} 
+        rounded="lg" 
+        bg="bg-iron-gray/50" 
+        border={true} 
+        borderColor="border-charcoal-outline"
+      >
+        <Icon icon={Users} size={4} color="text-purple-400" />
+        <Text weight="semibold" color="text-white">{teamCount}</Text>
+        <Text size="sm" color="text-gray-500">Teams</Text>
+      </Box>
+      <Box 
+        display="flex" 
+        alignItems="center" 
+        gap={2} 
+        px={3} 
+        py={2} 
+        rounded="lg" 
+        bg="bg-iron-gray/50" 
+        border={true} 
+        borderColor="border-charcoal-outline"
+      >
+        <Icon icon={UserPlus} size={4} color="text-performance-green" />
+        <Text weight="semibold" color="text-white">{recruitingCount}</Text>
+        <Text size="sm" color="text-gray-500">Recruiting</Text>
+      </Box>
+    </Stack>
+  );
+}