website refactor

apps/website/components/teams/RecruitingTeamCard.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import { Users, Trophy } from 'lucide-react';
-import { Box } from '@/ui/Box';
-import { Text } from '@/ui/Text';
 import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
 import { Image } from '@/ui/Image';
 import { Icon } from '@/ui/Icon';
 import { Badge } from '@/ui/Badge';
@@ -27,7 +26,7 @@ export function RecruitingTeamCard({
   onClick,
 }: RecruitingTeamCardProps) {
   return (
-    <Box
+    <Stack
       as="button"
       type="button"
       onClick={onClick}
@@ -38,8 +37,8 @@ export function RecruitingTeamCard({
       borderColor="border-charcoal-outline"
       className="hover:border-performance-green/40 transition-all duration-200 text-left group"
     >
-      <Box display="flex" alignItems="start" justifyContent="between" mb={3}>
-        <Box width="8" height="8" rounded="lg" bg="bg-charcoal-outline" border={true} borderColor="border-charcoal-outline" overflow="hidden">
+      <Stack display="flex" alignItems="start" justifyContent="between" mb={3}>
+        <Stack width="8" height="8" rounded="lg" bg="bg-charcoal-outline" border={true} borderColor="border-charcoal-outline" overflow="hidden">
           <Image
             src={logoUrl}
             alt={name}
@@ -47,12 +46,12 @@ export function RecruitingTeamCard({
             height={32}
             objectFit="cover"
           />
-        </Box>
+        </Stack>
         <Badge variant="success">
-          <Box w="1.5" h="1.5" rounded="full" bg="bg-performance-green" animate="pulse" mr={1} />
+          <Stack w="1.5" h="1.5" rounded="full" bg="bg-performance-green" animate="pulse" mr={1} />
           Recruiting
         </Badge>
-      </Box>
+      </Stack>
 
       <Text color="text-white" weight="semibold" block mb={1} className="group-hover:text-performance-green transition-colors line-clamp-1">
         {name}
@@ -62,7 +61,7 @@ export function RecruitingTeamCard({
       <Stack direction="row" align="center" gap={2} wrap>
         {category && (
           <Stack direction="row" align="center" gap={1}>
-            <Box w="1.5" h="1.5" rounded="full" bg="bg-purple-400" />
+            <Stack w="1.5" h="1.5" rounded="full" bg="bg-purple-400" />
             <Text size="xs" color="text-purple-400">{category}</Text>
           </Stack>
         )}
@@ -75,6 +74,6 @@ export function RecruitingTeamCard({
           <Text size="xs" color="text-gray-400">{totalWins} wins</Text>
         </Stack>
       </Stack>
-    </Box>
+    </Stack>
   );
 }