website refactor

apps/website/ui/LeagueCard.tsx

@@ -1,4 +1,4 @@
-import { ChevronRight } from 'lucide-react';
+import { ChevronRight, Users, Clock } from 'lucide-react';
 import { ReactNode } from 'react';
 import { Box } from './Box';
 import { Card } from './Card';
@@ -7,16 +7,47 @@ import { Image } from './Image';
 import { Text } from './Text';
 import { Stack } from './Stack';
 import { Group } from './Group';
+import { Heading } from './Heading';
 
 export interface LeagueCardProps {
-  children: ReactNode;
-  onClick?: () => void;
+  name: string;
+  description?: string;
   coverUrl: string;
-  logo?: ReactNode;
+  logoUrl?: string;
+  slotLabel: string;
+  usedSlots: number;
+  maxSlots: number | string;
+  fillPercentage: number;
+  hasOpenSlots: boolean;
+  openSlotsCount: number;
+  isTeamLeague: boolean;
+  usedDriverSlots?: number;
+  maxDrivers?: number;
+  timingSummary?: string;
+  onClick?: () => void;
   badges?: ReactNode;
+  championshipBadge?: ReactNode;
 }
 
-export const LeagueCard = ({ children, onClick, coverUrl, logo, badges }: LeagueCardProps) => {
+export const LeagueCard = ({ 
+  name, 
+  description, 
+  coverUrl, 
+  logoUrl, 
+  slotLabel,
+  usedSlots,
+  maxSlots,
+  fillPercentage,
+  hasOpenSlots,
+  openSlotsCount,
+  isTeamLeague,
+  usedDriverSlots,
+  maxDrivers,
+  timingSummary,
+  onClick, 
+  badges,
+  championshipBadge 
+}: LeagueCardProps) => {
   return (
     <Card 
       variant="precision" 
@@ -24,10 +55,10 @@ export const LeagueCard = ({ children, onClick, coverUrl, logo, badges }: League
       fullHeight
       padding="none"
     >
-      <Box height="10rem" position="relative" overflow="hidden">
+      <Box height="8rem" position="relative" overflow="hidden">
         <Image 
           src={coverUrl} 
-          alt="Cover" 
+          alt={name} 
           fullWidth 
           fullHeight 
           objectFit="cover" 
@@ -38,20 +69,78 @@ export const LeagueCard = ({ children, onClick, coverUrl, logo, badges }: League
           inset={0} 
           style={{ background: 'linear-gradient(to top, var(--ui-color-bg-base), transparent)' }} 
         />
-        <Box position="absolute" top={4} left={4}>
+        <Box position="absolute" top={3} left={3}>
           <Group gap={2}>
             {badges}
           </Group>
         </Box>
-        {logo && (
-          <Box position="absolute" left={6} bottom={-4} zIndex={10}>
-            {logo}
+      </Box>
+
+      <Stack padding={5} gap={5} flex={1}>
+        <Stack direction="row" align="start" gap={4} marginTop="-2.5rem" position="relative" zIndex={10}>
+          <Box 
+            width="4rem" 
+            height="4rem" 
+            bg="var(--ui-color-bg-surface)" 
+            rounded="lg" 
+            border 
+            borderColor="var(--ui-color-border-default)"
+            overflow="hidden"
+            display="flex"
+            alignItems="center"
+            justifyContent="center"
+          >
+            {logoUrl ? (
+              <Image src={logoUrl} alt={name} fullWidth fullHeight objectFit="cover" />
+            ) : (
+              <Icon icon={Users} size={6} intent="low" />
+            )}
           </Box>
+          <Stack flex={1} gap={1} paddingTop="2.5rem">
+            <Heading level={4} weight="bold" uppercase letterSpacing="tight">
+              {name}
+            </Heading>
+            {championshipBadge}
+          </Stack>
+        </Stack>
+
+        {description && (
+          <Text size="xs" variant="low" lineClamp={2} block leading="relaxed">
+            {description}
+          </Text>
         )}
-      </Box>
-      <Box padding={6} paddingTop={10} display="flex" flexDirection="col" flex={1}>
-        {children}
-      </Box>
+
+        <Box flex={1} />
+
+        <Stack gap={4}>
+          <Stack gap={2}>
+            <Group justify="between" align="end">
+              <Text size="xs" variant="low" weight="bold" uppercase letterSpacing="widest">{slotLabel}</Text>
+              <Text size="sm" variant="high" font="mono" weight="bold">{usedSlots} / {maxSlots}</Text>
+            </Group>
+            <Box height="2px" bg="var(--ui-color-bg-surface-muted)" rounded="full" overflow="hidden">
+              <Box 
+                height="100%" 
+                bg="var(--ui-color-intent-primary)" 
+                style={{ 
+                  width: `${Math.min(fillPercentage, 100)}%`,
+                  boxShadow: `0 0 8px var(--ui-color-intent-primary)44`
+                }} 
+              />
+            </Box>
+          </Stack>
+
+          <Stack direction="row" justify="between" align="center" paddingTop={3} style={{ borderTop: '1px solid var(--ui-color-border-muted)' }}>
+            <Stack direction="row" align="center" gap={1.5}>
+              <Icon icon={Clock} size={3} intent="low" />
+              <Text size="xs" variant="low" mono uppercase truncate maxWidth="12rem">
+                {timingSummary || 'Schedule TBD'}
+              </Text>
+            </Stack>
+            <Icon icon={ChevronRight} size={3} intent="primary" />
+          </Stack>
+        </Stack>
+      </Stack>
     </Card>
   );
 };

apps/website/ui/ProfileCard.tsx

@@ -6,7 +6,7 @@ export interface ProfileCardProps {
   identity: ReactNode;
   stats?: ReactNode;
   actions?: ReactNode;
-  variant?: 'default' | 'muted' | 'outline' | 'glass';
+  variant?: 'default' | 'muted' | 'outline' | 'glass' | 'precision';
   onClick?: () => void;
 }