website refactor

apps/website/components/dashboard/DashboardHero.tsx

@@ -1,11 +1,13 @@
 import { Flag, Star, Trophy, Users } from 'lucide-react';
 import { Avatar } from '../../ui/Avatar';
 import { Badge } from '../../ui/Badge';
+import { Box } from '../../ui/Box';
 import { Heading } from '../../ui/Heading';
 import { Icon } from '../../ui/Icon';
 import { ProfileHero, ProfileAvatar, ProfileStatsGroup, ProfileStat } from '../../ui/ProfileHero';
 import { BadgeGroup } from '../../ui/BadgeGroup';
 import { QuickStatCard, QuickStatItem } from '../../ui/QuickStatCard';
+import { Stack } from '../../ui/Stack';
 import React from 'react';
 
 interface DashboardHeroProps {
@@ -27,7 +29,7 @@ export function DashboardHero({
 }: DashboardHeroProps) {
   return (
     <ProfileHero glowColor="aqua">
-      <div style={{ display: 'flex', alignItems: 'center', gap: '2rem', flexWrap: 'wrap' }}>
+      <Stack direction="row" align="center" gap={8} wrap>
         {/* Avatar Section */}
         <ProfileAvatar 
           badge={<Icon icon={Star} size={5} intent="high" />}
@@ -40,7 +42,7 @@ export function DashboardHero({
         </ProfileAvatar>
 
         {/* Info Section */}
-        <div style={{ flex: 1, minWidth: '200px' }}>
+        <Box flex={1} minWidth="200px">
           <Heading level={1}>{driverName}</Heading>
           
           <ProfileStatsGroup>
@@ -60,14 +62,14 @@ export function DashboardHero({
               Team Redline
             </Badge>
           </BadgeGroup>
-        </div>
+        </Box>
 
         {/* Quick Stats */}
         <QuickStatCard>
           <QuickStatItem label="Podiums" value="12" />
           <QuickStatItem label="Wins" value="4" />
         </QuickStatCard>
-      </div>
+      </Stack>
     </ProfileHero>
   );
 }

apps/website/components/dashboard/DashboardHeroWrapper.tsx

@@ -5,6 +5,7 @@ import { routes } from '@/lib/routing/RouteConfig';
 import { Button } from '@/ui/Button';
 import { Icon } from '@/ui/Icon';
 import { Link } from '@/ui/Link';
+import { Stack } from '@/ui/Stack';
 import { StatGrid } from '@/ui/StatGrid';
 import { Flag, Medal, Target, Trophy, User, Users } from 'lucide-react';
 import React from 'react';
@@ -26,7 +27,7 @@ interface DashboardHeroProps {
 
 export function DashboardHero({ currentDriver, activeLeaguesCount }: DashboardHeroProps) {
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
+    <Stack gap={8}>
       <UiDashboardHero
         driverName={currentDriver.name}
         avatarUrl={currentDriver.avatarUrl}
@@ -36,7 +37,7 @@ export function DashboardHero({ currentDriver, activeLeaguesCount }: DashboardHe
         winRate={Math.round((currentDriver.wins / currentDriver.totalRaces) * 100) || 0}
       />
 
-      <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
+      <Stack direction="row" gap={4} wrap>
         <Link href={routes.public.leagues}>
           <Button variant="secondary" icon={<Icon icon={Flag} size={4} />}>
             Browse Leagues
@@ -47,7 +48,7 @@ export function DashboardHero({ currentDriver, activeLeaguesCount }: DashboardHe
             View Profile
           </Button>
         </Link>
-      </div>
+      </Stack>
 
       <StatGrid
         variant="box"
@@ -59,6 +60,6 @@ export function DashboardHero({ currentDriver, activeLeaguesCount }: DashboardHe
           { icon: Users, label: 'Active Leagues', value: activeLeaguesCount, intent: 'telemetry' },
         ]}
       />
-    </div>
+    </Stack>
   );
 }