website refactor

apps/website/components/leaderboards/LeaderboardsHero.tsx

@@ -18,13 +18,29 @@ interface LeaderboardsHeroProps {
 
 export function LeaderboardsHero({ onNavigateToDrivers, onNavigateToTeams }: LeaderboardsHeroProps) {
   return (
-    <Surface variant="muted" rounded="2xl" border padding={8} style={{ position: 'relative', overflow: 'hidden', background: 'linear-gradient(to bottom right, rgba(202, 138, 4, 0.2), rgba(38, 38, 38, 0.8), #0f1115)', borderColor: 'rgba(234, 179, 8, 0.2)' }}>
+    <Surface 
+      variant="muted" 
+      rounded="2xl" 
+      border 
+      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"
+    >
       <DecorativeBlur color="yellow" size="lg" position="top-right" opacity={10} />
       <DecorativeBlur color="blue" size="md" position="bottom-left" opacity={5} />
 
-      <Box style={{ position: 'relative', zIndex: 10 }}>
+      <Box position="relative" zIndex={10}>
         <Stack direction="row" align="center" gap={4} mb={4}>
-          <Surface variant="muted" rounded="xl" padding={3} style={{ background: 'linear-gradient(to bottom right, rgba(250, 204, 21, 0.2), rgba(217, 119, 6, 0.1))', border: '1px solid rgba(250, 204, 21, 0.3)' }}>
+          <Surface 
+            variant="muted" 
+            rounded="xl" 
+            padding={3} 
+            bg="bg-gradient-to-br from-yellow-400/20 to-yellow-600/10" 
+            border 
+            borderColor="border-yellow-400/30"
+          >
             <Icon icon={Award} size={7} color="#facc15" />
           </Surface>
           <Box>
@@ -33,7 +49,14 @@ export function LeaderboardsHero({ onNavigateToDrivers, onNavigateToTeams }: Lea
           </Box>
         </Stack>
 
-        <Text size="lg" color="text-gray-400" block mb={6} style={{ lineHeight: 1.625, maxWidth: '42rem' }}>
+        <Text 
+          size="lg" 
+          color="text-gray-400" 
+          block 
+          mb={6} 
+          leading="relaxed" 
+          maxWidth="42rem"
+        >
           Track the best drivers and teams across all competitions. Every race counts. Every position matters. Who will claim the throne?
         </Text>