website refactor

apps/website/ui/DashboardHero.tsx

@@ -0,0 +1,139 @@
+
+
+import { ReactNode } from 'react';
+import { Badge } from './Badge';
+import { Box } from './Box';
+import { Heading } from './Heading';
+import { Image } from './Image';
+import { Stack } from './Stack';
+
+interface DashboardHeroProps {
+  driverName: string;
+  avatarUrl: string;
+  country: string;
+  rating: string | number;
+  rank: string | number;
+  totalRaces: string | number;
+  actions?: ReactNode;
+  stats?: ReactNode;
+}
+
+export function DashboardHero({
+  driverName,
+  avatarUrl,
+  country,
+  rating,
+  rank,
+  totalRaces,
+  actions,
+  stats,
+}: DashboardHeroProps) {
+  return (
+    <Box as="section" position="relative" overflow="hidden">
+      {/* Background Pattern */}
+      <Box
+        position="absolute"
+        inset="0"
+        style={{
+          background: 'linear-gradient(to bottom right, rgba(59, 130, 246, 0.1), #0f1115, rgba(147, 51, 234, 0.05))',
+        }}
+      />
+
+      <Box
+        position="relative"
+        maxWidth="80rem"
+        mx="auto"
+        px={6}
+        py={10}
+      >
+        <Stack gap={8}>
+          <Stack direction="row" align="center" justify="between" wrap gap={8}>
+            {/* Welcome Message */}
+            <Stack direction="row" align="start" gap={5}>
+              <Box position="relative">
+                <Box
+                  w="20"
+                  h="20"
+                  rounded="xl"
+                  p={0.5}
+                  style={{
+                    background: 'linear-gradient(to bottom right, #3b82f6, #9333ea)',
+                    boxShadow: '0 20px 25px -5px rgba(59, 130, 246, 0.2)',
+                  }}
+                >
+                  <Box
+                    w="full"
+                    h="full"
+                    rounded="lg"
+                    overflow="hidden"
+                    bg="bg-deep-graphite"
+                  >
+                    <Image
+                      src={avatarUrl}
+                      alt={driverName}
+                      width={80}
+                      height={80}
+                      style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+                    />
+                  </Box>
+                </Box>
+                <Box
+                  position="absolute"
+                  bottom="-1"
+                  right="-1"
+                  w="5"
+                  h="5"
+                  rounded="full"
+                  bg="bg-performance-green"
+                  border
+                  style={{ borderColor: '#0f1115', borderWidth: '3px' }}
+                />
+              </Box>
+              <Box>
+                <Text size="sm" color="text-gray-400" block mb={1}>
+                  Good morning,
+                </Text>
+                <Heading level={1} mb={2}>
+                  {driverName}
+                  <Text size="2xl" ml={3}>
+                    {country}
+                  </Text>
+                </Heading>
+                <Stack direction="row" align="center" gap={3} wrap>
+                  <Badge variant="primary">
+                    {rating}
+                  </Badge>
+                  <Badge variant="warning">
+                    #{rank}
+                  </Badge>
+                  <Text size="xs" color="text-gray-500">
+                    {totalRaces} races completed
+                  </Text>
+                </Stack>
+              </Box>
+            </Stack>
+
+            {/* Quick Actions */}
+            {actions && (
+              <Stack direction="row" gap={3} wrap>
+                {actions}
+              </Stack>
+            )}
+          </Stack>
+
+          {/* Quick Stats Row */}
+          {stats && (
+            <Box
+              display="grid"
+              gridCols={2}
+              responsiveGridCols={{ md: 4 }}
+              gap={4}
+            >
+              {stats}
+            </Box>
+          )}
+        </Stack>
+      </Box>
+    </Box>
+  );
+}