website refactor

apps/website/components/dashboard/DashboardHero.tsx

@@ -0,0 +1,146 @@
+import { Flag, Star, Trophy, Users } from 'lucide-react';
+import { Avatar } from '../../ui/Avatar';
+import { Badge } from '../../ui/Badge';
+import { Heading } from '../../ui/Heading';
+import { Icon } from '../../ui/Icon';
+import { Box } from '../../ui/primitives/Box';
+import { Stack } from '../../ui/primitives/Stack';
+import { Text } from '../../ui/Text';
+
+interface DashboardHeroProps {
+  driverName: string;
+  avatarUrl?: string | null;
+  rating: number;
+  rank: number;
+  totalRaces: number;
+  winRate: number;
+  className?: string;
+}
+
+export function DashboardHero({
+  driverName,
+  avatarUrl,
+  rating,
+  rank,
+  totalRaces,
+  winRate,
+  className = '',
+}: DashboardHeroProps) {
+  return (
+    <Box
+      position="relative"
+      bg="bg-[#0C0D0F]"
+      borderBottom
+      borderColor="border-[#23272B]"
+      overflow="hidden"
+      className={className}
+    >
+      {/* Background Glow */}
+      <Box
+        position="absolute"
+        top={-100}
+        right={-100}
+        w="500px"
+        h="500px"
+        bg="bg-primary-blue/10"
+        rounded="full"
+        blur="3xl"
+      />
+
+      <Box p={{ base: 6, md: 10 }} position="relative" zIndex={10}>
+        <Stack direction={{ base: 'col', md: 'row' }} align="center" gap={8}>
+          {/* Avatar Section */}
+          <Box position="relative">
+            <Box
+              p={1}
+              rounded="2xl"
+              bg="bg-[#141619]"
+              border
+              borderColor="border-[#23272B]"
+            >
+              <Avatar
+                src={avatarUrl}
+                alt={driverName}
+                size={120}
+                className="rounded-xl"
+              />
+            </Box>
+            <Box
+              position="absolute"
+              bottom={-2}
+              right={-2}
+              w="10"
+              h="10"
+              rounded="xl"
+              bg="bg-[#4ED4E0]"
+              borderWidth="2px"
+              borderStyle="solid"
+              borderColor="border-[#0C0D0F]"
+              display="flex"
+              center
+            >
+              <Icon icon={Star} size={5} color="#0C0D0F" />
+            </Box>
+          </Box>
+
+          {/* Info Section */}
+          <Stack flex={1} align={{ base: 'center', md: 'start' }} gap={4}>
+            <Box>
+              <Heading level={1} uppercase letterSpacing="tighter" mb={2}>
+                {driverName}
+              </Heading>
+              <Stack direction="row" gap={4}>
+                <Stack gap={0.5}>
+                  <Text size="xs" color="text-gray-500" uppercase>Rating</Text>
+                  <Text size="sm" weight="bold" color="text-[#4ED4E0]" font="mono">{rating}</Text>
+                </Stack>
+                <Stack gap={0.5}>
+                  <Text size="xs" color="text-gray-500" uppercase>Rank</Text>
+                  <Text size="sm" weight="bold" color="text-[#FFBE4D]" font="mono">#{rank}</Text>
+                </Stack>
+                <Stack gap={0.5}>
+                  <Text size="xs" color="text-gray-500" uppercase>Starts</Text>
+                  <Text size="sm" weight="bold" color="text-gray-300" font="mono">{totalRaces}</Text>
+                </Stack>
+              </Stack>
+            </Box>
+
+            <Stack direction="row" gap={3} wrap>
+              <Badge variant="primary" rounded="lg" icon={Trophy}>
+                {winRate}% Win Rate
+              </Badge>
+              <Badge variant="info" rounded="lg" icon={Flag}>
+                Pro License
+              </Badge>
+              <Badge variant="default" rounded="lg" icon={Users}>
+                Team Redline
+              </Badge>
+            </Stack>
+          </Stack>
+
+          {/* Quick Stats */}
+          <Stack 
+            direction="row" 
+            gap={4} 
+            p={6} 
+            bg="bg-white/5" 
+            rounded="2xl" 
+            border 
+            borderColor="border-white/10"
+            className="backdrop-blur-md"
+          >
+            <Stack align="center" px={4}>
+              <Text size="2xl" weight="bold" color="text-white">12</Text>
+              <Text size="xs" color="text-gray-500" uppercase>Podiums</Text>
+            </Stack>
+            <Box w="1px" h="10" bg="bg-white/10" />
+            <Stack align="center" px={4}>
+              <Text size="2xl" weight="bold" color="text-white">4</Text>
+              <Text size="xs" color="text-gray-500" uppercase>Wins</Text>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Box>
+    </Box>
+  );
+}

apps/website/components/dashboard/DashboardHeroWrapper.tsx

@@ -1,6 +1,6 @@
+import { DashboardHero as UiDashboardHero } from '@/components/dashboard/DashboardHero';
 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';