website refactor

apps/website/components/leaderboards/DriverLeaderboardPreview.tsx

@@ -1,7 +1,12 @@
 import React from 'react';
 import { Trophy, Crown, Flag, ChevronRight } from 'lucide-react';
-import Button from '@/ui/Button';
-import Image from 'next/image';
+import { Button } from '@/ui/Button';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Heading } from '@/ui/Heading';
+import { Icon } from '@/ui/Icon';
+import { Stack } from '@/ui/Stack';
+import { Image } from '@/ui/Image';
 import { SkillLevelDisplay } from '@/lib/display-objects/SkillLevelDisplay';
 import { MedalDisplay } from '@/lib/display-objects/MedalDisplay';
 import { RatingDisplay } from '@/lib/display-objects/RatingDisplay';
@@ -26,71 +31,115 @@ export function DriverLeaderboardPreview({ drivers, onDriverClick, onNavigateToD
   const top10 = drivers; // Already sliced in builder
 
   return (
-    <div className="rounded-xl bg-iron-gray/30 border border-charcoal-outline overflow-hidden">
-      <div className="flex items-center justify-between px-5 py-4 border-b border-charcoal-outline bg-iron-gray/20">
-        <div className="flex items-center gap-3">
-          <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-primary-blue/20 to-primary-blue/5 border border-primary-blue/20">
-            <Trophy className="w-5 h-5 text-primary-blue" />
-          </div>
-          <div>
-            <h3 className="text-lg font-semibold text-white">Driver Rankings</h3>
-            <p className="text-xs text-gray-500">Top performers across all leagues</p>
-          </div>
-        </div>
+    <Box rounded="xl" bg="bg-iron-gray/30" border borderColor="border-charcoal-outline" overflow="hidden">
+      <Box display="flex" alignItems="center" justifyContent="between" px={5} py={4} borderBottom borderColor="border-charcoal-outline" bg="bg-iron-gray/20">
+        <Box display="flex" alignItems="center" gap={3}>
+          <Box display="flex" h="10" w="10" alignItems="center" justifyContent="center" rounded="xl" bg="bg-gradient-to-br from-primary-blue/20 to-primary-blue/5" border borderColor="border-primary-blue/20">
+            <Icon icon={Trophy} size={5} color="text-primary-blue" />
+          </Box>
+          <Box>
+            <Heading level={3} fontSize="lg" weight="semibold" color="text-white">Driver Rankings</Heading>
+            <Text size="xs" color="text-gray-500" block>Top performers across all leagues</Text>
+          </Box>
+        </Box>
         <Button
           variant="secondary"
           onClick={onNavigateToDrivers}
-          className="flex items-center gap-2 text-sm"
+          size="sm"
         >
-          View All
-          <ChevronRight className="w-4 h-4" />
+          <Stack direction="row" align="center" gap={2}>
+            <Text size="sm">View All</Text>
+            <Icon icon={ChevronRight} size={4} />
+          </Stack>
         </Button>
-      </div>
+      </Box>
 
-      <div className="divide-y divide-charcoal-outline/50">
+      <Stack gap={0} 
+        // eslint-disable-next-line gridpilot-rules/component-classification
+        className="divide-y divide-charcoal-outline/50"
+      >
         {top10.map((driver, index) => {
           const position = index + 1;
 
           return (
-            <button
+            <Box
               key={driver.id}
+              as="button"
               type="button"
               onClick={() => onDriverClick(driver.id)}
-              className="flex items-center gap-4 px-5 py-3 w-full text-left hover:bg-iron-gray/30 transition-colors group"
+              display="flex"
+              alignItems="center"
+              gap={4}
+              px={5}
+              py={3}
+              w="full"
+              textAlign="left"
+              transition
+              hoverBg="bg-iron-gray/30"
+              group
             >
-              <div className={`flex h-8 w-8 items-center justify-center rounded-full text-xs font-bold border ${MedalDisplay.getBg(position)} ${MedalDisplay.getColor(position)}`}>
-                {position <= 3 ? <Crown className="w-3.5 h-3.5" /> : position}
-              </div>
+              <Box 
+                display="flex" 
+                h="8" 
+                w="8" 
+                alignItems="center" 
+                justifyContent="center" 
+                rounded="full" 
+                border 
+                // eslint-disable-next-line gridpilot-rules/component-classification
+                className={`text-xs font-bold ${MedalDisplay.getBg(position)} ${MedalDisplay.getColor(position)}`}
+              >
+                {position <= 3 ? <Icon icon={Crown} size={3.5} /> : <Text weight="bold">{position}</Text>}
+              </Box>
 
-              <div className="relative w-9 h-9 rounded-full overflow-hidden border-2 border-charcoal-outline">
-                <Image src={driver.avatarUrl} alt={driver.name} fill className="object-cover" />
-              </div>
+              <Box position="relative" w="9" h="9" rounded="full" overflow="hidden" border borderWidth="2px" borderColor="border-charcoal-outline">
+                <Image src={driver.avatarUrl} alt={driver.name} fullWidth fullHeight objectFit="cover" />
+              </Box>
 
-              <div className="flex-1 min-w-0">
-                <p className="text-white font-medium truncate group-hover:text-primary-blue transition-colors">
+              <Box flexGrow={1} minWidth="0">
+                <Text weight="medium" color="text-white" truncate groupHoverTextColor="text-primary-blue" transition block>
                   {driver.name}
-                </p>
-                <div className="flex items-center gap-2 text-xs text-gray-500">
-                  <Flag className="w-3 h-3" />
-                  {driver.nationality}
-                  <span className={SkillLevelDisplay.getColor(driver.skillLevel)}>{SkillLevelDisplay.getLabel(driver.skillLevel)}</span>
-                </div>
-              </div>
+                </Text>
+                <Box display="flex" alignItems="center" gap={2}>
+                  <Icon icon={Flag} size={3} color="text-gray-500" />
+                  <Text size="xs" color="text-gray-500">{driver.nationality}</Text>
+                  <Box as="span" 
+                    // eslint-disable-next-line gridpilot-rules/component-classification
+                    className={SkillLevelDisplay.getColor(driver.skillLevel)}
+                  >
+                    <Text size="xs">{SkillLevelDisplay.getLabel(driver.skillLevel)}</Text>
+                  </Box>
+                </Box>
+              </Box>
 
-              <div className="flex items-center gap-4 text-sm">
-                <div className="text-center">
-                  <p className="text-primary-blue font-mono font-semibold">{RatingDisplay.format(driver.rating)}</p>
-                  <p className="text-[10px] text-gray-500">Rating</p>
-                </div>
-                <div className="text-center">
-                  <p className="text-performance-green font-mono font-semibold">{driver.wins}</p>
-                  <p className="text-[10px] text-gray-500">Wins</p>
-                </div>
-              </div>
-            </button>
+              <Box display="flex" alignItems="center" gap={4}>
+                <Box textAlign="center">
+                  <Text color="text-primary-blue" font="mono" weight="semibold" block>{RatingDisplay.format(driver.rating)}</Text>
+                  <Text 
+                    // eslint-disable-next-line gridpilot-rules/component-classification
+                    style={{ fontSize: '10px' }} 
+                    color="text-gray-500" 
+                    block
+                  >
+                    Rating
+                  </Text>
+                </Box>
+                <Box textAlign="center">
+                  <Text color="text-performance-green" font="mono" weight="semibold" block>{driver.wins}</Text>
+                  <Text 
+                    // eslint-disable-next-line gridpilot-rules/component-classification
+                    style={{ fontSize: '10px' }} 
+                    color="text-gray-500" 
+                    block
+                  >
+                    Wins
+                  </Text>
+                </Box>
+              </Box>
+            </Box>
           );
         })}
-      </div>
-    </div>
+      </Stack>
+    </Box>
   );
 }

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>
 

apps/website/components/leaderboards/TeamLeaderboardPreview.tsx

@@ -1,7 +1,12 @@
 import React from 'react';
-import Image from 'next/image';
-import { Users, Crown, Shield, ChevronRight } from 'lucide-react';
-import Button from '@/ui/Button';
+import { Users, Crown, ChevronRight } from 'lucide-react';
+import { Button } from '@/ui/Button';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Heading } from '@/ui/Heading';
+import { Icon } from '@/ui/Icon';
+import { Stack } from '@/ui/Stack';
+import { Image } from '@/ui/Image';
 import { getMediaUrl } from '@/lib/utilities/media';
 import { SkillLevelDisplay } from '@/lib/display-objects/SkillLevelDisplay';
 import { MedalDisplay } from '@/lib/display-objects/MedalDisplay';
@@ -25,85 +30,131 @@ export function TeamLeaderboardPreview({ teams, onTeamClick, onNavigateToTeams }
   const top5 = teams; // Already sliced in builder when implemented
 
   return (
-    <div className="rounded-xl bg-iron-gray/30 border border-charcoal-outline overflow-hidden">
-      <div className="flex items-center justify-between px-5 py-4 border-b border-charcoal-outline bg-iron-gray/20">
-        <div className="flex items-center gap-3">
-          <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-purple-500/20 to-purple-500/5 border border-purple-500/20">
-            <Users className="w-5 h-5 text-purple-400" />
-          </div>
-          <div>
-            <h3 className="text-lg font-semibold text-white">Team Rankings</h3>
-            <p className="text-xs text-gray-500">Top performing racing teams</p>
-          </div>
-        </div>
+    <Box rounded="xl" bg="bg-iron-gray/30" border borderColor="border-charcoal-outline" overflow="hidden">
+      <Box display="flex" alignItems="center" justifyContent="between" px={5} py={4} borderBottom borderColor="border-charcoal-outline" bg="bg-iron-gray/20">
+        <Box display="flex" alignItems="center" gap={3}>
+          <Box display="flex" h="10" w="10" alignItems="center" justifyContent="center" rounded="xl" bg="bg-gradient-to-br from-purple-500/20 to-purple-500/5" border borderColor="border-purple-500/20">
+            <Icon icon={Users} size={5} color="text-purple-400" />
+          </Box>
+          <Box>
+            <Heading level={3} fontSize="lg" weight="semibold" color="text-white">Team Rankings</Heading>
+            <Text size="xs" color="text-gray-500" block>Top performing racing teams</Text>
+          </Box>
+        </Box>
         <Button
           variant="secondary"
           onClick={onNavigateToTeams}
-          className="flex items-center gap-2 text-sm"
+          size="sm"
         >
-          View All
-          <ChevronRight className="w-4 h-4" />
+          <Stack direction="row" align="center" gap={2}>
+            <Text size="sm">View All</Text>
+            <Icon icon={ChevronRight} size={4} />
+          </Stack>
         </Button>
-      </div>
+      </Box>
 
-      <div className="divide-y divide-charcoal-outline/50">
-        {top5.map((team, index) => {
+      <Stack gap={0} 
+        // eslint-disable-next-line gridpilot-rules/component-classification
+        className="divide-y divide-charcoal-outline/50"
+      >
+        {top5.map((team) => {
           const position = team.position;
 
           return (
-            <button
+            <Box
               key={team.id}
+              as="button"
               type="button"
               onClick={() => onTeamClick(team.id)}
-              className="flex items-center gap-4 px-5 py-3 w-full text-left hover:bg-iron-gray/30 transition-colors group"
+              display="flex"
+              alignItems="center"
+              gap={4}
+              px={5}
+              py={3}
+              w="full"
+              textAlign="left"
+              transition
+              hoverBg="bg-iron-gray/30"
+              group
             >
-              <div className={`flex h-8 w-8 items-center justify-center rounded-full text-xs font-bold border ${MedalDisplay.getBg(position)} ${MedalDisplay.getColor(position)}`}>
-                {position <= 3 ? <Crown className="w-3.5 h-3.5" /> : position}
-              </div>
+              <Box 
+                display="flex" 
+                h="8" 
+                w="8" 
+                alignItems="center" 
+                justifyContent="center" 
+                rounded="full" 
+                border 
+                // eslint-disable-next-line gridpilot-rules/component-classification
+                className={`text-xs font-bold ${MedalDisplay.getBg(position)} ${MedalDisplay.getColor(position)}`}
+              >
+                {position <= 3 ? <Icon icon={Crown} size={3.5} /> : <Text weight="bold">{position}</Text>}
+              </Box>
 
-              <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-charcoal-outline border border-charcoal-outline overflow-hidden">
+              <Box display="flex" h="9" w="9" alignItems="center" justifyContent="center" rounded="lg" bg="bg-charcoal-outline" border borderColor="border-charcoal-outline" overflow="hidden">
                 <Image
                   src={team.logoUrl || getMediaUrl('team-logo', team.id)}
                   alt={team.name}
                   width={36}
                   height={36}
-                  className="w-full h-full object-cover"
+                  fullWidth
+                  fullHeight
+                  objectFit="cover"
                 />
-              </div>
+              </Box>
 
-              <div className="flex-1 min-w-0">
-                <p className="text-white font-medium truncate group-hover:text-purple-400 transition-colors">
+              <Box flexGrow={1} minWidth="0">
+                <Text weight="medium" color="text-white" truncate groupHoverTextColor="text-purple-400" transition block>
                   {team.name}
-                </p>
-                <div className="flex items-center gap-2 text-xs text-gray-500 flex-wrap">
+                </Text>
+                <Box display="flex" alignItems="center" gap={2} flexWrap="wrap">
                   {team.category && (
-                    <span className="flex items-center gap-1 text-purple-400">
-                      <span className="w-1.5 h-1.5 rounded-full bg-purple-400"></span>
-                      {team.category}
-                    </span>
+                    <Box display="flex" alignItems="center" gap={1} color="text-purple-400">
+                      <Box w="1.5" h="1.5" rounded="full" bg="bg-purple-400" />
+                      <Text size="xs">{team.category}</Text>
+                    </Box>
                   )}
-                  <span className="flex items-center gap-1">
-                    <Users className="w-3 h-3" />
-                    {team.memberCount} members
-                  </span>
-                  <span className={SkillLevelDisplay.getColor(team.category || '')}>{SkillLevelDisplay.getLabel(team.category || '')}</span>
-                </div>
-              </div>
+                  <Box display="flex" alignItems="center" gap={1}>
+                    <Icon icon={Users} size={3} color="text-gray-500" />
+                    <Text size="xs" color="text-gray-500">{team.memberCount} members</Text>
+                  </Box>
+                  <Box as="span" 
+                    // eslint-disable-next-line gridpilot-rules/component-classification
+                    className={SkillLevelDisplay.getColor(team.category || '')}
+                  >
+                    <Text size="xs">{SkillLevelDisplay.getLabel(team.category || '')}</Text>
+                  </Box>
+                </Box>
+              </Box>
 
-              <div className="flex items-center gap-4 text-sm">
-                <div className="text-center">
-                  <p className="text-purple-400 font-mono font-semibold">{team.memberCount}</p>
-                  <p className="text-[10px] text-gray-500">Members</p>
-                </div>
-                <div className="text-center">
-                  <p className="text-performance-green font-mono font-semibold">{team.totalWins}</p>
-                  <p className="text-[10px] text-gray-500">Wins</p>
-                </div>
-              </div>
-            </button>
+              <Box display="flex" alignItems="center" gap={4}>
+                <Box textAlign="center">
+                  <Text color="text-purple-400" font="mono" weight="semibold" block>{team.memberCount}</Text>
+                  <Text 
+                    // eslint-disable-next-line gridpilot-rules/component-classification
+                    style={{ fontSize: '10px' }} 
+                    color="text-gray-500" 
+                    block
+                  >
+                    Members
+                  </Text>
+                </Box>
+                <Box textAlign="center">
+                  <Text color="text-performance-green" font="mono" weight="semibold" block>{team.totalWins}</Text>
+                  <Text 
+                    // eslint-disable-next-line gridpilot-rules/component-classification
+                    style={{ fontSize: '10px' }} 
+                    color="text-gray-500" 
+                    block
+                  >
+                    Wins
+                  </Text>
+                </Box>
+              </Box>
+            </Box>
           );
         })}
-      </div>
-    </div>
+      </Stack>
+    </Box>
   );
 }