website refactor

apps/website/components/leaderboards/LeaderboardsHero.tsx

@@ -18,42 +18,42 @@ export function LeaderboardsHero({ onNavigateToDrivers, onNavigateToTeams }: Lea
   return (
     <Surface 
       variant="muted" 
-      rounded="2xl" 
+      rounded="xl" 
       border 
       padding={8} 
       position="relative" 
       overflow="hidden" 
-      bg="bg-gradient-to-br from-primary-blue/10 via-deep-charcoal to-graphite-black" 
-      borderColor="border-primary-blue/20"
+      bg="linear-gradient(to bottom right, rgba(25, 140, 255, 0.1), var(--ui-color-bg-surface), var(--ui-color-bg-base))" 
+      borderColor="var(--ui-color-border-default)"
     >
       <DecorativeBlur color="blue" size="lg" position="top-right" opacity={10} />
       <DecorativeBlur color="purple" size="md" position="bottom-left" opacity={5} />
 
       <Stack position="relative" zIndex={10}>
-        <Stack direction="row" align="center" gap={4} mb={4}>
-          <Stack 
-            p={3} 
+        <Stack direction="row" align="center" gap={4} marginBottom={4}>
+          <Surface 
+            padding={3} 
             bg="linear-gradient(to bottom right, rgba(25, 140, 255, 0.2), rgba(25, 140, 255, 0.05))" 
             border 
-            borderColor="border-primary-blue/30"
+            borderColor="rgba(25, 140, 255, 0.3)"
             rounded="xl"
             display="flex"
             alignItems="center"
             justifyContent="center"
           >
-            <Icon icon={Award} size={7} color="text-primary-blue" />
-          </Stack>
+            <Icon icon={Award} size={7} intent="primary" />
+          </Surface>
           <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>
+            <Heading level={1} weight="bold">Leaderboards</Heading>
+            <Text variant="low" block marginTop={1} size="sm" uppercase weight="bold">Precision Performance Tracking</Text>
           </Stack>
         </Stack>
 
         <Text 
           size="lg" 
-          color="text-gray-400" 
+          variant="low" 
           block 
-          mb={8} 
+          marginBottom={8} 
           leading="relaxed" 
           maxWidth="42rem"
         >
@@ -65,7 +65,6 @@ export function LeaderboardsHero({ onNavigateToDrivers, onNavigateToTeams }: Lea
             variant="primary"
             onClick={onNavigateToDrivers}
             icon={<Icon icon={Trophy} size={4} />}
-            shadow="shadow-lg shadow-primary-blue/20"
           >
             Driver Rankings
           </Button>
@@ -73,7 +72,6 @@ export function LeaderboardsHero({ onNavigateToDrivers, onNavigateToTeams }: Lea
             variant="secondary"
             onClick={onNavigateToTeams}
             icon={<Icon icon={Users} size={4} />}
-            hoverBg="bg-white/5"
           >
             Team Rankings
           </Button>