website refactor

apps/website/components/teams/TeamCard.tsx

@@ -7,13 +7,12 @@ import {
 } from 'lucide-react';
 import { ReactNode } from 'react';
 import { Badge } from '@/ui/Badge';
-import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
 import { Card } from '@/ui/Card';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
 import { Image } from '@/ui/Image';
 import { PlaceholderImage } from '@/ui/PlaceholderImage';
-import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 
 interface TeamCardProps {
@@ -46,13 +45,13 @@ export function TeamCard({
   onClick,
 }: TeamCardProps) {
   return (
-    <Box onClick={onClick} h="full" cursor={onClick ? 'pointer' : 'default'} className="group">
+    <Stack onClick={onClick} h="full" cursor={onClick ? 'pointer' : 'default'} className="group">
       <Card h="full" p={0} display="flex" flexDirection="col" overflow="hidden" className="bg-panel-gray/40 border-border-gray/50 hover:border-primary-accent/30 hover:bg-panel-gray/60 transition-all duration-300">
         {/* Header with Logo */}
-        <Box p={5} pb={0}>
+        <Stack p={5} pb={0}>
           <Stack direction="row" align="start" gap={4}>
             {/* Logo */}
-            <Box 
+            <Stack 
               w="16" 
               h="16" 
               rounded="none" 
@@ -77,11 +76,11 @@ export function TeamCard({
               ) : (
                 <PlaceholderImage size={64} />
               )}
-              <Box position="absolute" top="-1px" left="-1px" w="2" h="2" borderTop borderLeft borderColor="primary-accent/30" />
-            </Box>
+              <Stack position="absolute" top="-1px" left="-1px" w="2" h="2" borderTop borderLeft borderColor="primary-accent/30" />
+            </Stack>
 
             {/* Title & Badges */}
-            <Box flexGrow={1} minWidth="0">
+            <Stack flexGrow={1} minWidth="0">
               <Stack direction="row" align="start" justify="between" gap={2}>
                 <Heading level={4} weight="bold" fontSize="lg" className="tracking-tight group-hover:text-primary-accent transition-colors">
                   {name}
@@ -99,12 +98,12 @@ export function TeamCard({
                 {specializationContent}
                 {categoryBadge}
               </Stack>
-            </Box>
+            </Stack>
           </Stack>
-        </Box>
+        </Stack>
 
         {/* Content */}
-        <Box p={5} display="flex" flexDirection="col" flexGrow={1}>
+        <Stack p={5} display="flex" flexDirection="col" flexGrow={1}>
           {/* Description */}
           <Text 
             size="xs" 
@@ -122,7 +121,7 @@ export function TeamCard({
           {(region || languagesContent) && (
             <Stack direction="row" align="center" gap={2} wrap mb={4}>
               {region && (
-                <Box 
+                <Stack 
                   display="flex" 
                   alignItems="center" 
                   gap={2} 
@@ -135,17 +134,17 @@ export function TeamCard({
                 >
                   <Icon icon={Globe} size={3} color="text-primary-accent" />
                   <Text size="xs" color="text-gray-400" weight="bold" className="uppercase tracking-widest">{region}</Text>
-                </Box>
+                </Stack>
               )}
               {languagesContent}
             </Stack>
           )}
 
           {/* Spacer */}
-          <Box flexGrow={1} />
+          <Stack flexGrow={1} />
 
           {/* Footer */}
-          <Box 
+          <Stack 
             display="flex" 
             alignItems="center" 
             justifyContent="between" 
@@ -165,9 +164,9 @@ export function TeamCard({
               <Text size="xs" color="text-gray-500" weight="bold" className="uppercase tracking-widest">VIEW</Text>
               <Icon icon={ChevronRight} size={3} color="text-gray-500" className="transition-transform group-hover:translate-x-0.5" />
             </Stack>
-          </Box>
-        </Box>
+          </Stack>
+        </Stack>
       </Card>
-    </Box>
+    </Stack>
   );
 }