website refactor

apps/website/components/sponsors/SponsorHeaderPanel.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import { LucideIcon } from 'lucide-react';
-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';
 
@@ -29,7 +28,7 @@ export function SponsorHeaderPanel({
   stats,
 }: SponsorHeaderPanelProps) {
   return (
-    <Box mb={8}>
+    <Stack mb={8}>
       <Stack direction="row" align="start" justify="between" wrap gap={6}>
         <Stack direction="row" align="center" gap={4}>
           <Surface 
@@ -42,23 +41,23 @@ export function SponsorHeaderPanel({
           >
             <Icon icon={icon} size={7} color="text-primary-blue" />
           </Surface>
-          <Box>
+          <Stack>
             <Heading level={1} fontSize="2xl" weight="bold">{title}</Heading>
             {description && (
               <Text color="text-gray-400" block mt={1} size="sm">{description}</Text>
             )}
-          </Box>
+          </Stack>
         </Stack>
 
         <Stack direction="row" align="center" gap={4}>
           {stats && (
-            <Box borderRight borderColor="border-charcoal-outline" pr={4} mr={2} display={{ base: 'none', md: 'block' }}>
+            <Stack borderRight borderColor="border-charcoal-outline" pr={4} mr={2} display={{ base: 'none', md: 'block' }}>
               {stats}
-            </Box>
+            </Stack>
           )}
-          {actions && <Box>{actions}</Box>}
+          {actions && <Stack>{actions}</Stack>}
         </Stack>
       </Stack>
-    </Box>
+    </Stack>
   );
 }