website refactor

apps/website/components/teams/TeamHeroStats.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import { Users, UserPlus } from 'lucide-react';
-import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/Stack';
 
 interface TeamHeroStatsProps {
   teamCount: number;
@@ -13,7 +12,7 @@ interface TeamHeroStatsProps {
 export function TeamHeroStats({ teamCount, recruitingCount }: TeamHeroStatsProps) {
   return (
     <Stack direction="row" align="center" gap={4}>
-      <Box 
+      <Stack 
         display="flex" 
         alignItems="center" 
         gap={2} 
@@ -27,8 +26,8 @@ export function TeamHeroStats({ teamCount, recruitingCount }: TeamHeroStatsProps
         <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 
+      </Stack>
+      <Stack 
         display="flex" 
         alignItems="center" 
         gap={2} 
@@ -42,7 +41,7 @@ export function TeamHeroStats({ teamCount, recruitingCount }: TeamHeroStatsProps
         <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>
     </Stack>
   );
 }