website refactor

apps/website/components/sponsors/SponsorTierCard.tsx

@@ -2,10 +2,9 @@
 
 import { CheckCircle2, LucideIcon } from 'lucide-react';
 import { Badge } from '@/ui/Badge';
-import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/Stack';
 import { Surface } from '@/ui/Surface';
 import { Text } from '@/ui/Text';
 
@@ -47,7 +46,7 @@ export function SponsorTierCard({
       position="relative"
     >
       <Stack direction="row" align="start" justify="between" mb={4}>
-        <Box>
+        <Stack>
           <Stack direction="row" align="center" gap={2} mb={1}>
             <Icon icon={icon} size={5} className={iconColor} />
             <Heading level={3}>{isMain ? 'Main Sponsor' : 'Secondary Sponsor'}</Heading>
@@ -55,7 +54,7 @@ export function SponsorTierCard({
           <Text size="sm" color="text-gray-400">
             {isMain ? 'Primary branding position' : 'Supporting branding position'}
           </Text>
-        </Box>
+        </Stack>
         <Badge variant={available ? 'success' : 'default'}>
           {isMain 
             ? (available ? 'Available' : 'Filled')
@@ -64,12 +63,12 @@ export function SponsorTierCard({
         </Badge>
       </Stack>
       
-      <Box mb={4}>
+      <Stack mb={4}>
         <Text size="3xl" weight="bold" color="text-white">
           ${price}
           <Text size="sm" weight="normal" color="text-gray-500">/season</Text>
         </Text>
-      </Box>
+      </Stack>
 
       <Stack gap={2} mb={4}>
         {benefits.map((benefit, i) => (
@@ -81,8 +80,8 @@ export function SponsorTierCard({
       </Stack>
 
       {isSelected && available && (
-        <Box position="absolute" top="4" right="4">
-          <Box 
+        <Stack position="absolute" top="4" right="4">
+          <Stack 
             width="4" 
             height="4" 
             rounded="full" 
@@ -91,8 +90,8 @@ export function SponsorTierCard({
             center
           >
             <Icon icon={CheckCircle2} size={3} color="text-white" />
-          </Box>
-        </Box>
+          </Stack>
+        </Stack>
       )}
     </Surface>
   );