website refactor

apps/website/components/leaderboards/DriverLeaderboardPreview.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Trophy, Crown, Flag, ChevronRight } from 'lucide-react';
-import Button from '@/components/ui/Button';
+import Button from '@/ui/Button';
 import Image from 'next/image';
 import { SkillLevelDisplay } from '@/lib/display-objects/SkillLevelDisplay';
 import { MedalDisplay } from '@/lib/display-objects/MedalDisplay';

apps/website/components/leaderboards/LeaderboardsHero.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+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';
+import { Button } from '@/ui/Button';
+import { Surface } from '@/ui/Surface';
+import { Icon } from '@/ui/Icon';
+import { DecorativeBlur } from '@/ui/DecorativeBlur';
+
+interface LeaderboardsHeroProps {
+  onNavigateToDrivers: () => void;
+  onNavigateToTeams: () => void;
+}
+
+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)' }}>
+      <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 }}>
+        <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)' }}>
+            <Icon icon={Award} size={7} color="#facc15" />
+          </Surface>
+          <Box>
+            <Heading level={1}>Leaderboards</Heading>
+            <Text color="text-gray-400" block mt={1}>Where champions rise and legends are made</Text>
+          </Box>
+        </Stack>
+
+        <Text size="lg" color="text-gray-400" block mb={6} style={{ lineHeight: 1.625, maxWidth: '42rem' }}>
+          Track the best drivers and teams across all competitions. Every race counts. Every position matters. Who will claim the throne?
+        </Text>
+
+        <Stack direction="row" gap={3} wrap>
+          <Button
+            variant="secondary"
+            onClick={onNavigateToDrivers}
+            icon={<Icon icon={Trophy} size={4} color="#3b82f6" />}
+          >
+            Driver Rankings
+          </Button>
+          <Button
+            variant="secondary"
+            onClick={onNavigateToTeams}
+            icon={<Icon icon={Users} size={4} color="#a855f7" />}
+          >
+            Team Rankings
+          </Button>
+        </Stack>
+      </Box>
+    </Surface>
+  );
+}

apps/website/components/leaderboards/TeamLeaderboardPreview.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import Image from 'next/image';
 import { Users, Crown, Shield, ChevronRight } from 'lucide-react';
-import Button from '@/components/ui/Button';
+import Button from '@/ui/Button';
 import { getMediaUrl } from '@/lib/utilities/media';
 import { SkillLevelDisplay } from '@/lib/display-objects/SkillLevelDisplay';
 import { MedalDisplay } from '@/lib/display-objects/MedalDisplay';