website refactor

apps/website/components/drivers/DriverProfile.tsx

@@ -2,10 +2,9 @@
 
 import type { DriverViewModel } from '@/lib/view-models/DriverViewModel';
 import { Card } from '@/ui/Card';
-import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Heading } from '@/ui/Heading';
-import { Stack } from '@/ui/Stack';
 import { StatCard } from '@/ui/StatCard';
 import { ProfileHeader } from '@/components/drivers/ProfileHeader';
 import { ProfileStats } from './ProfileStats';
@@ -96,12 +95,12 @@ export function DriverProfile({ driver, isOwnProfile = false, onEditClick }: Dri
       )}
 
       {driverStats && (
-        <Box display="grid" responsiveGridCols={{ base: 1, lg: 3 }} gap={6}>
-          <Box responsiveColSpan={{ lg: 2 }}>
+        <Stack display="grid" responsiveGridCols={{ base: 1, lg: 3 }} gap={6}>
+          <Stack responsiveColSpan={{ lg: 2 }}>
             <Stack gap={6}>
               <Card>
                 <Heading level={3} mb={4}>Career Statistics</Heading>
-                <Box display="grid" gridCols={2} gap={4}>
+                <Stack display="grid" gridCols={2} gap={4}>
                   <StatCard
                     label="Rating"
                     value={driverStats.rating ?? 0}
@@ -110,26 +109,26 @@ export function DriverProfile({ driver, isOwnProfile = false, onEditClick }: Dri
                   <StatCard label="Total Races" value={driverStats.totalRaces} variant="blue" />
                   <StatCard label="Wins" value={driverStats.wins} variant="green" />
                   <StatCard label="Podiums" value={driverStats.podiums} variant="orange" />
-                </Box>
+                </Stack>
               </Card>
 
               {performanceStats && <PerformanceMetrics stats={performanceStats} />}
             </Stack>
-          </Box>
+          </Stack>
 
           <DriverRankings rankings={rankings} />
-        </Box>
+        </Stack>
       )}
 
       {!driverStats && (
-        <Box display="grid" responsiveGridCols={{ base: 1, lg: 3 }} gap={6}>
+        <Stack display="grid" responsiveGridCols={{ base: 1, lg: 3 }} gap={6}>
           <Card responsiveColSpan={{ lg: 3 }}>
             <Heading level={3} mb={4}>Career Statistics</Heading>
             <Text color="text-gray-400" size="sm" block>
               No statistics available yet. Compete in races to start building your record.
             </Text>
           </Card>
-        </Box>
+        </Stack>
       )}
 
       <Card>
@@ -154,20 +153,20 @@ export function DriverProfile({ driver, isOwnProfile = false, onEditClick }: Dri
       <CareerHighlights />
 
       <Card bg="bg-charcoal-200/50" borderColor="border-primary-blue/30">
-        <Box display="flex" alignItems="center" gap={3} mb={3}>
+        <Stack display="flex" alignItems="center" gap={3} mb={3}>
           <Text size="2xl">🔒</Text>
           <Heading level={3}>Private Information</Heading>
-        </Box>
+        </Stack>
         <Text color="text-gray-400" size="sm" block>
           Detailed race history, settings, and preferences are only visible to the driver.
         </Text>
       </Card>
 
       <Card bg="bg-charcoal-200/50" borderColor="border-primary-blue/30">
-        <Box display="flex" alignItems="center" gap={3} mb={3}>
+        <Stack display="flex" alignItems="center" gap={3} mb={3}>
           <Text size="2xl">📊</Text>
           <Heading level={3}>Coming Soon</Heading>
-        </Box>
+        </Stack>
         <Text color="text-gray-400" size="sm" block>
           Per-car statistics, per-track performance, and head-to-head comparisons will be available in production.
         </Text>