website refactor

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>
   );
 }