website refactor

apps/website/components/dashboard/DashboardHeroWrapper.tsx

@@ -0,0 +1,59 @@
+
+
+import { routes } from '@/lib/routing/RouteConfig';
+import { Button } from '@/ui/Button';
+import { DashboardHero as UiDashboardHero } from '@/ui/DashboardHero';
+import { Icon } from '@/ui/Icon';
+import { Link } from '@/ui/Link';
+import { StatBox } from '@/ui/StatBox';
+import { Flag, Medal, Target, Trophy, User, Users } from 'lucide-react';
+
+interface DashboardHeroProps {
+  currentDriver: {
+    name: string;
+    avatarUrl: string;
+    country: string;
+    rating: string | number;
+    rank: string | number;
+    totalRaces: string | number;
+    wins: string | number;
+    podiums: string | number;
+    consistency: string;
+  };
+  activeLeaguesCount: string | number;
+}
+
+export function DashboardHero({ currentDriver, activeLeaguesCount }: DashboardHeroProps) {
+  return (
+    <UiDashboardHero
+      driverName={currentDriver.name}
+      avatarUrl={currentDriver.avatarUrl}
+      country={currentDriver.country}
+      rating={currentDriver.rating}
+      rank={currentDriver.rank}
+      totalRaces={currentDriver.totalRaces}
+      actions={
+        <>
+          <Link href={routes.public.leagues} variant="ghost">
+            <Button variant="secondary" icon={<Icon icon={Flag} size={4} />}>
+              Browse Leagues
+            </Button>
+          </Link>
+          <Link href={routes.protected.profile} variant="ghost">
+            <Button variant="primary" icon={<Icon icon={User} size={4} />}>
+              View Profile
+            </Button>
+          </Link>
+        </>
+      }
+      stats={
+        <>
+          <StatBox icon={Trophy} label="Wins" value={currentDriver.wins} color="var(--performance-green)" />
+          <StatBox icon={Medal} label="Podiums" value={currentDriver.podiums} color="var(--warning-amber)" />
+          <StatBox icon={Target} label="Consistency" value={currentDriver.consistency} color="var(--primary-blue)" />
+          <StatBox icon={Users} label="Active Leagues" value={activeLeaguesCount} color="var(--neon-purple)" />
+        </>
+      }
+    />
+  );
+}

apps/website/components/dashboard/QuickActions.tsx

@@ -0,0 +1,29 @@
+
+
+import { routes } from '@/lib/routing/RouteConfig';
+import { Trophy, Users } from 'lucide-react';
+import { Box } from '@/ui/Box';
+import { Heading } from '@/ui/Heading';
+import { QuickActionItem } from '@/ui/QuickActionItem';
+
+export function QuickActions() {
+  return (
+    <Box>
+      <Heading level={3} mb={4}>Quick Actions</Heading>
+      <Box display="flex" flexDirection="col" gap={2}>
+        <QuickActionItem
+          href={routes.public.leagues}
+          label="Browse Leagues"
+          icon={Users}
+          iconVariant="blue"
+        />
+        <QuickActionItem
+          href={routes.public.leaderboards}
+          label="View Leaderboards"
+          icon={Trophy}
+          iconVariant="amber"
+        />
+      </Box>
+    </Box>
+  );
+}