website refactor

apps/website/components/teams/TeamHero.tsx

@@ -1,10 +1,9 @@
 
 
 import { JoinTeamButton } from '@/components/teams/JoinTeamButton';
-import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
 import { Card } from '@/ui/Card';
 import { Heading } from '@/ui/Heading';
-import { Stack } from '@/ui/Stack';
 import { TeamLogo } from '@/components/teams/TeamLogo';
 import { TeamTag } from '@/components/teams/TeamTag';
 import { Text } from '@/ui/Text';
@@ -28,7 +27,7 @@ export function TeamHero({ team, memberCount, onUpdate }: TeamHeroProps) {
     <Card>
       <Stack direction="row" align="start" justify="between" wrap gap={6}>
         <Stack direction="row" align="start" gap={6} wrap flexGrow={1}>
-          <Box 
+          <Stack 
             w="24" 
             h="24" 
             rounded="lg" 
@@ -40,9 +39,9 @@ export function TeamHero({ team, memberCount, onUpdate }: TeamHeroProps) {
             justifyContent="center"
           >
             <TeamLogo teamId={team.id} alt={team.name} />
-          </Box>
+          </Stack>
           
-          <Box flexGrow={1} minWidth="0">
+          <Stack flexGrow={1} minWidth="0">
             <Stack direction="row" align="center" gap={3} mb={2}>
               <Heading level={1}>{team.name}</Heading>
               {team.tag && <TeamTag tag={team.tag} />}
@@ -54,7 +53,7 @@ export function TeamHero({ team, memberCount, onUpdate }: TeamHeroProps) {
               <Text size="sm" color="text-gray-400">{memberCount} {memberCount === 1 ? 'member' : 'members'}</Text>
               {team.category && (
                 <Stack direction="row" align="center" gap={1.5}>
-                  <Box w="2" h="2" rounded="full" bg="bg-purple-500" />
+                  <Stack w="2" h="2" rounded="full" bg="bg-purple-500" />
                   <Text size="sm" color="text-purple-400">{team.category}</Text>
                 </Stack>
               )}
@@ -69,7 +68,7 @@ export function TeamHero({ team, memberCount, onUpdate }: TeamHeroProps) {
                 </Text>
               )}
             </Stack>
-          </Box>
+          </Stack>
         </Stack>
 
         <JoinTeamButton teamId={team.id} onUpdate={onUpdate} />