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