website refactor

apps/website/components/leaderboards/LeaderboardsHero.tsx

@@ -25,27 +25,29 @@ export function LeaderboardsHero({ onNavigateToDrivers, onNavigateToTeams }: Lea
       padding={8} 
       position="relative" 
       overflow="hidden" 
-      bg="bg-gradient-to-br from-yellow-600/20 via-iron-gray to-deep-graphite" 
-      borderColor="border-yellow-500/20"
+      bg="bg-gradient-to-br from-primary-blue/10 via-deep-charcoal to-graphite-black" 
+      borderColor="border-primary-blue/20"
     >
-      <DecorativeBlur color="yellow" size="lg" position="top-right" opacity={10} />
-      <DecorativeBlur color="blue" size="md" position="bottom-left" opacity={5} />
+      <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 direction="row" align="center" gap={4} mb={4}>
-          <Surface 
-            variant="muted" 
-            rounded="xl" 
-            padding={3} 
-            bg="bg-gradient-to-br from-yellow-400/20 to-yellow-600/10" 
+          <Box 
+            p={3} 
+            bg="linear-gradient(to bottom right, rgba(25, 140, 255, 0.2), rgba(25, 140, 255, 0.05))" 
             border 
-            borderColor="border-yellow-400/30"
+            borderColor="border-primary-blue/30"
+            rounded="xl"
+            display="flex"
+            alignItems="center"
+            justifyContent="center"
           >
-            <Icon icon={Award} size={7} color="#facc15" />
-          </Surface>
+            <Icon icon={Award} size={7} color="text-primary-blue" />
+          </Box>
           <Box>
-            <Heading level={1}>Leaderboards</Heading>
-            <Text color="text-gray-400" block mt={1}>Where champions rise and legends are made</Text>
+            <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>
 
@@ -53,25 +55,27 @@ export function LeaderboardsHero({ onNavigateToDrivers, onNavigateToTeams }: Lea
           size="lg" 
           color="text-gray-400" 
           block 
-          mb={6} 
+          mb={8} 
           leading="relaxed" 
           maxWidth="42rem"
         >
-          Track the best drivers and teams across all competitions. Every race counts. Every position matters. Who will claim the throne?
+          Track the best drivers and teams across all competitions. Every race counts. Every position matters. Analyze telemetry-grade rankings and performance metrics.
         </Text>
 
-        <Stack direction="row" gap={3} wrap>
+        <Stack direction="row" gap={4} wrap>
           <Button
-            variant="secondary"
+            variant="primary"
             onClick={onNavigateToDrivers}
-            icon={<Icon icon={Trophy} size={4} color="#3b82f6" />}
+            icon={<Icon icon={Trophy} size={4} />}
+            shadow="shadow-lg shadow-primary-blue/20"
           >
             Driver Rankings
           </Button>
           <Button
             variant="secondary"
             onClick={onNavigateToTeams}
-            icon={<Icon icon={Users} size={4} color="#a855f7" />}
+            icon={<Icon icon={Users} size={4} />}
+            hoverBg="bg-white/5"
           >
             Team Rankings
           </Button>