website refactor

apps/website/components/leaderboards/LeaderboardsHero.tsx

@@ -2,7 +2,6 @@
 
 import React from 'react';
 import { Award, Trophy, Users } from 'lucide-react';
-import { Box } from '@/ui/Box';
 import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Heading } from '@/ui/Heading';
@@ -31,9 +30,9 @@ export function LeaderboardsHero({ onNavigateToDrivers, onNavigateToTeams }: Lea
       <DecorativeBlur color="blue" size="lg" position="top-right" opacity={10} />
       <DecorativeBlur color="purple" size="md" position="bottom-left" opacity={5} />
 
-      <Box position="relative" zIndex={10}>
+      <Stack position="relative" zIndex={10}>
         <Stack direction="row" align="center" gap={4} mb={4}>
-          <Box 
+          <Stack 
             p={3} 
             bg="linear-gradient(to bottom right, rgba(25, 140, 255, 0.2), rgba(25, 140, 255, 0.05))" 
             border 
@@ -44,11 +43,11 @@ export function LeaderboardsHero({ onNavigateToDrivers, onNavigateToTeams }: Lea
             justifyContent="center"
           >
             <Icon icon={Award} size={7} color="text-primary-blue" />
-          </Box>
-          <Box>
+          </Stack>
+          <Stack>
             <Heading level={1} weight="bold" letterSpacing="tight">Leaderboards</Heading>
             <Text color="text-gray-400" block mt={1} size="sm" uppercase letterSpacing="widest" weight="bold">Precision Performance Tracking</Text>
-          </Box>
+          </Stack>
         </Stack>
 
         <Text 
@@ -80,7 +79,7 @@ export function LeaderboardsHero({ onNavigateToDrivers, onNavigateToTeams }: Lea
             Team Rankings
           </Button>
         </Stack>
-      </Box>
+      </Stack>
     </Surface>
   );
 }