website refactor

apps/website/components/teams/FeaturedRecruiting.tsx

@@ -3,7 +3,6 @@
 import React from 'react';
 import { UserPlus } from 'lucide-react';
 import { getMediaUrl } from '@/lib/utilities/media';
-import { Box } from '@/ui/Box';
 import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Heading } from '@/ui/Heading';
@@ -32,9 +31,9 @@ export function FeaturedRecruiting({ teams, onTeamClick }: FeaturedRecruitingPro
   if (recruitingTeams.length === 0) return null;
 
   return (
-    <Box mb={10}>
+    <Stack mb={10}>
       <Stack direction="row" align="center" gap={3} mb={4}>
-        <Box 
+        <Stack 
           display="flex" 
           center 
           width="10" 
@@ -45,11 +44,11 @@ export function FeaturedRecruiting({ teams, onTeamClick }: FeaturedRecruitingPro
           borderColor="border-performance-green/20"
         >
           <Icon icon={UserPlus} size={5} color="text-performance-green" />
-        </Box>
-        <Box>
+        </Stack>
+        <Stack>
           <Heading level={2}>Looking for Drivers</Heading>
           <Text size="xs" color="text-gray-500">Teams actively recruiting new members</Text>
-        </Box>
+        </Stack>
       </Stack>
 
       <RecruitingTeamGrid>
@@ -66,6 +65,6 @@ export function FeaturedRecruiting({ teams, onTeamClick }: FeaturedRecruitingPro
           />
         ))}
       </RecruitingTeamGrid>
-    </Box>
+    </Stack>
   );
 }