website refactor

apps/website/components/leagues/AvailableLeagueCard.tsx

@@ -0,0 +1,161 @@
+
+
+import { CheckCircle2, Clock, Star } from 'lucide-react';
+import { Badge } from '@/ui/Badge';
+import { Box } from '@/ui/Box';
+import { Button } from '@/ui/Button';
+import { Card } from '@/ui/Card';
+import { Heading } from '@/ui/Heading';
+import { Icon } from '@/ui/Icon';
+import { Link } from '@/ui/Link';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+
+interface AvailableLeague {
+  id: string;
+  name: string;
+  game: string;
+  drivers: number;
+  avgViewsPerRace: number;
+  mainSponsorSlot: { available: boolean; price: number };
+  secondarySlots: { available: number; total: number; price: number };
+  rating: number;
+  tier: 'premium' | 'standard' | 'starter';
+  nextRace?: string;
+  seasonStatus: 'active' | 'upcoming' | 'completed';
+  description: string;
+  formattedAvgViews: string;
+  formattedCpm: string;
+}
+
+interface AvailableLeagueCardProps {
+  league: AvailableLeague;
+}
+
+export function AvailableLeagueCard({ league }: AvailableLeagueCardProps) {
+  const tierConfig = {
+    premium: { icon: '⭐', label: 'Premium' },
+    standard: { icon: '🏆', label: 'Standard' },
+    starter: { icon: '🚀', label: 'Starter' },
+  };
+
+  const statusConfig = {
+    active: { color: 'text-performance-green', bgColor: 'bg-performance-green/10', label: 'Active Season' },
+    upcoming: { color: 'text-warning-amber', bgColor: 'bg-warning-amber/10', label: 'Starting Soon' },
+    completed: { color: 'text-gray-400', bgColor: 'bg-gray-400/10', label: 'Season Ended' },
+  };
+
+  const config = tierConfig[league.tier];
+  const status = statusConfig[league.seasonStatus];
+
+  return (
+    <Card>
+      <Stack gap={4}>
+        {/* Header */}
+        <Stack direction="row" align="start" justify="between">
+          <Box flexGrow={1}>
+            <Stack direction="row" align="center" gap={2} mb={1} wrap>
+              <Badge variant="primary">{config.icon} {config.label}</Badge>
+              <Box px={2} py={0.5} rounded="full" className={status.bgColor}>
+                <Text size="xs" weight="medium" className={status.color}>{status.label}</Text>
+              </Box>
+            </Stack>
+            <Heading level={3}>{league.name}</Heading>
+            <Text size="sm" color="text-gray-500" block mt={1}>{league.game}</Text>
+          </Box>
+          <Box px={2} py={1} rounded="lg" bg="bg-iron-gray/50">
+            <Stack direction="row" align="center" gap={1}>
+              <Icon icon={Star} size={3.5} color="text-yellow-400" />
+              <Text size="sm" weight="medium" color="text-white">{league.rating}</Text>
+            </Stack>
+          </Box>
+        </Stack>
+
+        {/* Description */}
+        <Text size="sm" color="text-gray-400" block truncate>{league.description}</Text>
+
+        {/* Stats Grid */}
+        <Box display="grid" gridCols={3} gap={2}>
+          <StatItem label="Drivers" value={league.drivers} />
+          <StatItem label="Avg Views" value={league.formattedAvgViews} />
+          <StatItem label="CPM" value={league.formattedCpm} color="text-performance-green" />
+        </Box>
+
+        {/* Next Race */}
+        {league.nextRace && (
+          <Stack direction="row" align="center" gap={2}>
+            <Icon icon={Clock} size={4} color="text-gray-400" />
+            <Text size="sm" color="text-gray-400">Next:</Text>
+            <Text size="sm" color="text-white">{league.nextRace}</Text>
+          </Stack>
+        )}
+
+        {/* Sponsorship Slots */}
+        <Stack gap={2}>
+          <SlotRow 
+            label="Main Sponsor" 
+            available={league.mainSponsorSlot.available} 
+            price={`$${league.mainSponsorSlot.price}/season`} 
+          />
+          <SlotRow 
+            label="Secondary Slots" 
+            available={league.secondarySlots.available > 0} 
+            price={`${league.secondarySlots.available}/${league.secondarySlots.total} @ $${league.secondarySlots.price}`} 
+          />
+        </Stack>
+
+        {/* Actions */}
+        <Stack direction="row" gap={2}>
+          <Box flexGrow={1}>
+            <Link href={`/sponsor/leagues/${league.id}`} block>
+              <Button variant="secondary" fullWidth size="sm">
+                View Details
+              </Button>
+            </Link>
+          </Box>
+          {(league.mainSponsorSlot.available || league.secondarySlots.available > 0) && (
+            <Box flexGrow={1}>
+              <Link href={`/sponsor/leagues/${league.id}?action=sponsor`} block>
+                <Button variant="primary" fullWidth size="sm">
+                  Sponsor
+                </Button>
+              </Link>
+            </Box>
+          )}
+        </Stack>
+      </Stack>
+    </Card>
+  );
+}
+
+function StatItem({ label, value, color = 'text-white' }: { label: string, value: string | number, color?: string }) {
+  return (
+    <Box p={2} bg="bg-iron-gray/50" rounded="lg" textAlign="center">
+      <Text weight="bold" className={color}>{value}</Text>
+      <Text size="xs" color="text-gray-500" block mt={1}>{label}</Text>
+    </Box>
+  );
+}
+
+function SlotRow({ label, available, price }: { label: string, available: boolean, price: string }) {
+  return (
+    <Box p={2} rounded="lg" bg="bg-iron-gray/30">
+      <Stack direction="row" align="center" justify="between">
+        <Stack direction="row" align="center" gap={2}>
+          <Box width="2.5" height="2.5" rounded="full" bg={available ? 'bg-performance-green' : 'bg-error-red'} />
+          <Text size="sm" color="text-gray-300">{label}</Text>
+        </Stack>
+        <Box>
+          {available ? (
+            <Text size="sm" weight="semibold" color="text-white">{price}</Text>
+          ) : (
+            <Stack direction="row" align="center" gap={1}>
+              <Icon icon={CheckCircle2} size={3} color="text-gray-500" />
+              <Text size="sm" color="text-gray-500">Filled</Text>
+            </Stack>
+          )}
+        </Box>
+      </Stack>
+    </Box>
+  );
+}

apps/website/components/leagues/JoinRequestItem.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Stack } from '@/ui/Stack';
+import { Button } from '@/ui/Button';
+
+interface JoinRequestItemProps {
+  driverId: string;
+  requestedAt: string | Date;
+  onApprove: () => void;
+  onReject: () => void;
+  isApproving?: boolean;
+  isRejecting?: boolean;
+}
+
+export function JoinRequestItem({
+  driverId,
+  requestedAt,
+  onApprove,
+  onReject,
+  isApproving,
+  isRejecting,
+}: JoinRequestItemProps) {
+  return (
+    <Box
+      display="flex"
+      alignItems="center"
+      justifyContent="between"
+      p={4}
+      rounded="lg"
+      bg="bg-deep-graphite"
+      border={true}
+      borderColor="border-charcoal-outline"
+    >
+      <Stack direction="row" align="center" gap={4} flexGrow={1}>
+        <Box 
+          width="12" 
+          height="12" 
+          rounded="full" 
+          bg="bg-primary-blue/20" 
+          display="flex" 
+          center 
+          color="text-white"
+          weight="bold"
+          style={{ fontSize: '1.125rem' }}
+        >
+          {driverId.charAt(0)}
+        </Box>
+        <Box flexGrow={1}>
+          <Text color="text-white" weight="medium" block>{driverId}</Text>
+          <Text size="sm" color="text-gray-400" block>
+            Requested {new Date(requestedAt).toLocaleDateString()}
+          </Text>
+        </Box>
+      </Stack>
+      <Stack direction="row" gap={2}>
+        <Button
+          variant="primary"
+          onClick={onApprove}
+          disabled={isApproving}
+          size="sm"
+        >
+          {isApproving ? 'Approving...' : 'Approve'}
+        </Button>
+        <Button
+          variant="danger"
+          onClick={onReject}
+          disabled={isRejecting}
+          size="sm"
+        >
+          {isRejecting ? 'Rejecting...' : 'Reject'}
+        </Button>
+      </Stack>
+    </Box>
+  );
+}

apps/website/components/leagues/JoinRequestList.tsx

@@ -0,0 +1,14 @@
+import React, { ReactNode } from 'react';
+import { Stack } from '@/ui/Stack';
+
+interface JoinRequestListProps {
+  children: ReactNode;
+}
+
+export function JoinRequestList({ children }: JoinRequestListProps) {
+  return (
+    <Stack gap={3}>
+      {children}
+    </Stack>
+  );
+}

apps/website/components/leagues/JoinRequestsPanel.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Heading } from '@/ui/Heading';
+import { Button } from '@/ui/Button';
+import { Check, X, Clock } from 'lucide-react';
+import { Icon } from '@/ui/Icon';
+
+interface JoinRequestsPanelProps {
+  requests: Array<{
+    id: string;
+    driverName: string;
+    driverAvatar?: string;
+    message?: string;
+    requestedAt: string;
+  }>;
+  onAccept: (id: string) => void;
+  onDecline: (id: string) => void;
+}
+
+export function JoinRequestsPanel({ requests, onAccept, onDecline }: JoinRequestsPanelProps) {
+  if (requests.length === 0) {
+    return (
+      <Box p={8} border borderDash borderColor="border-steel-grey" bg="surface-charcoal/20" textAlign="center">
+        <Text color="text-gray-500" size="sm">No pending join requests</Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box border borderColor="border-steel-grey" bg="surface-charcoal/50" overflow="hidden">
+      <Box p={4} borderBottom borderColor="border-steel-grey" bg="base-graphite/50">
+        <Heading level={4} weight="bold" className="uppercase tracking-widest text-gray-400 text-[10px]">
+          Pending Requests ({requests.length})
+        </Heading>
+      </Box>
+      <Stack gap={0} className="divide-y divide-border-steel-grey/30">
+        {requests.map((request) => (
+          <Box key={request.id} p={4} className="hover:bg-white/[0.02] transition-colors">
+            <Stack direction="row" align="start" justify="between" gap={4}>
+              <Stack direction="row" align="center" gap={3}>
+                <Box w="10" h="10" bg="base-graphite" border borderColor="border-steel-grey" display="flex" center>
+                  <Text size="xs" weight="bold" color="text-primary-blue">
+                    {request.driverName.substring(0, 2).toUpperCase()}
+                  </Text>
+                </Box>
+                <Box>
+                  <Text weight="bold" size="sm" color="text-white" block>{request.driverName}</Text>
+                  <Stack direction="row" align="center" gap={1.5} mt={0.5}>
+                    <Icon icon={Clock} size={3} color="text-gray-500" />
+                    <Text size="xs" color="text-gray-500" font="mono">{request.requestedAt}</Text>
+                  </Stack>
+                </Box>
+              </Stack>
+              
+              <Stack direction="row" align="center" gap={2}>
+                <Button 
+                  variant="secondary" 
+                  size="sm" 
+                  onClick={() => onDecline(request.id)}
+                  className="h-8 w-8 p-0 flex items-center justify-center border-red-500/30 hover:bg-red-500/10"
+                >
+                  <Icon icon={X} size={4} color="text-red-400" />
+                </Button>
+                <Button 
+                  variant="primary" 
+                  size="sm" 
+                  onClick={() => onAccept(request.id)}
+                  className="h-8 w-8 p-0 flex items-center justify-center"
+                >
+                  <Icon icon={Check} size={4} />
+                </Button>
+              </Stack>
+            </Stack>
+            {request.message && (
+              <Box mt={3} p={3} bg="base-graphite/30" borderLeft borderPrimary borderColor="primary-blue/40">
+                <Text size="xs" color="text-gray-400" italic leading="relaxed">
+                  &ldquo;{request.message}&rdquo;
+                </Text>
+              </Box>
+            )}
+          </Box>
+        ))}
+      </Stack>
+    </Box>
+  );
+}

apps/website/components/leagues/LeagueCard.tsx

@@ -1,23 +1,32 @@
-'use client';
 
-import React from 'react';
+
+import { ReactNode } from 'react';
 import { Box } from '@/ui/Box';
-import { Text } from '@/ui/Text';
 import { Heading } from '@/ui/Heading';
+import { Icon } from '@/ui/Icon';
+import { Text } from '@/ui/Text';
+import { Stack } from '@/ui/Stack';
 import { Image } from '@/ui/Image';
-import { Trophy, Users, Calendar, ChevronRight } from 'lucide-react';
+import { PlaceholderImage } from '@/ui/PlaceholderImage';
+import { Calendar as LucideCalendar, ChevronRight as LucideChevronRight } from 'lucide-react';
 
 interface LeagueCardProps {
-  id: string;
   name: string;
   description?: string;
   coverUrl: string;
   logoUrl?: string;
-  gameName?: string;
-  memberCount: number;
-  maxMembers?: number;
-  nextRaceDate?: string;
-  championshipType: 'driver' | 'team' | 'nations' | 'trophy';
+  badges?: ReactNode;
+  championshipBadge?: ReactNode;
+  slotLabel: string;
+  usedSlots: number;
+  maxSlots: number | string;
+  fillPercentage: number;
+  hasOpenSlots: boolean;
+  openSlotsCount: number;
+  isTeamLeague?: boolean;
+  usedDriverSlots?: number;
+  maxDrivers?: number | string;
+  timingSummary?: string;
   onClick?: () => void;
 }
 
@@ -26,154 +35,154 @@ export function LeagueCard({
   description,
   coverUrl,
   logoUrl,
-  gameName,
-  memberCount,
-  maxMembers,
-  nextRaceDate,
-  championshipType,
+  badges,
+  championshipBadge,
+  slotLabel,
+  usedSlots,
+  maxSlots,
+  fillPercentage,
+  hasOpenSlots,
+  openSlotsCount,
+  isTeamLeague: _isTeamLeague,
+  usedDriverSlots: _usedDriverSlots,
+  maxDrivers: _maxDrivers,
+  timingSummary,
   onClick,
 }: LeagueCardProps) {
-  const fillPercentage = maxMembers ? (memberCount / maxMembers) * 100 : 0;
-
   return (
-    <Box 
-      as="article"
-      onClick={onClick}
+    <Box
       position="relative"
-      display="flex"
-      flexDirection="col"
-      overflow="hidden"
-      border
-      borderColor="zinc-800"
-      bg="zinc-900/50"
-      hoverBorderColor="blue-500/30"
-      hoverBg="zinc-900"
-      transition
-      cursor="pointer"
-      group
+      cursor={onClick ? 'pointer' : 'default'}
+      h="full"
+      onClick={onClick}
+      className="group"
     >
-      {/* Cover Image */}
-      <Box position="relative" h="32" overflow="hidden">
-        <Box fullWidth fullHeight opacity={0.6}>
+      {/* Card Container */}
+      <Box 
+        position="relative" 
+        h="full" 
+        rounded="none" 
+        bg="panel-gray/40" 
+        border 
+        borderColor="border-gray/50" 
+        overflow="hidden" 
+        transition 
+        className="hover:border-primary-accent/30 hover:bg-panel-gray/60 transition-all duration-300"
+      >
+        {/* Cover Image */}
+        <Box position="relative" h="32" overflow="hidden">
           <Image
             src={coverUrl}
             alt={`${name} cover`}
             fullWidth
             fullHeight
             objectFit="cover"
-            // eslint-disable-next-line gridpilot-rules/component-classification
-            className="transition-transform duration-500 group-hover:scale-105"
+            className="transition-transform duration-500 group-hover:scale-105 opacity-60"
           />
-        </Box>
-        <Box position="absolute" inset="0" bg="linear-gradient(to top, #09090b, transparent)" />
-        
-        {/* Game Badge */}
-        {gameName && (
-          <Box 
-            position="absolute" 
-            top="3" 
-            left="3" 
-            px={2} 
-            py={1} 
-            bg="zinc-900/80" 
-            border 
-            borderColor="white/10" 
-            blur="sm"
-          >
-            <Text weight="bold" color="text-zinc-300" uppercase letterSpacing="0.05em" fontSize="10px">
-              {gameName}
-            </Text>
+          {/* Gradient Overlay */}
+          <Box position="absolute" inset="0" bg="linear-gradient(to top, #0C0D0F, transparent)" />
+          
+          {/* Badges - Top Left */}
+          <Box position="absolute" top="3" left="3" display="flex" alignItems="center" gap={2}>
+            {badges}
           </Box>
-        )}
 
-        {/* Championship Icon */}
-        <Box 
-          position="absolute" 
-          top="3" 
-          right="3" 
-          p={1.5} 
-          bg="zinc-900/80" 
-          color="text-zinc-400" 
-          border 
-          borderColor="white/10" 
-          blur="sm"
-        >
-          {championshipType === 'driver' && <Trophy size={14} />}
-          {championshipType === 'team' && <Users size={14} />}
-        </Box>
-      </Box>
+          {/* Championship Type Badge - Top Right */}
+          <Box position="absolute" top="3" right="3">
+            {championshipBadge}
+          </Box>
 
-      {/* Content */}
-      <Box position="relative" display="flex" flexDirection="col" flexGrow={1} p={4} pt={6}>
-        {/* Logo */}
-        <Box 
-          position="absolute" 
-          top="-6" 
-          left="4" 
-          w="12" 
-          h="12" 
-          border 
-          borderColor="zinc-800" 
-          bg="zinc-950" 
-          shadow="xl" 
-          overflow="hidden"
-        >
-          {logoUrl ? (
-            <Image src={logoUrl} alt={`${name} logo`} fullWidth fullHeight objectFit="cover" />
-          ) : (
-            <Box fullWidth fullHeight display="flex" alignItems="center" justifyContent="center" bg="zinc-900" color="text-zinc-700">
-              <Trophy size={20} />
+          {/* Logo */}
+          <Box position="absolute" left="4" bottom="-6" zIndex={10}>
+            <Box w="12" h="12" rounded="none" overflow="hidden" border borderColor="border-gray/50" bg="graphite-black" shadow="xl">
+              {logoUrl ? (
+                <Image
+                  src={logoUrl}
+                  alt={`${name} logo`}
+                  width={48}
+                  height={48}
+                  fullWidth
+                  fullHeight
+                  objectFit="cover"
+                />
+              ) : (
+                <PlaceholderImage size={48} />
+              )}
             </Box>
-          )}
+          </Box>
         </Box>
 
-        <Box display="flex" flexDirection="col" gap={1} mb={4}>
-          <Heading level={3} fontSize="lg" weight="bold" color="text-white" 
-            // eslint-disable-next-line gridpilot-rules/component-classification
-            className="group-hover:text-blue-400 transition-colors truncate"
-          >
-            {name}
-          </Heading>
-          <Text size="xs" color="text-zinc-500" lineClamp={2} leading="relaxed" h="8">
+        {/* Content */}
+        <Box pt={8} px={4} pb={4} display="flex" flexDirection="col" fullHeight>
+          {/* Title & Description */}
+          <Stack direction="row" align="center" gap={2} mb={1}>
+            <Box w="1" h="4" bg="primary-accent" />
+            <Heading level={3} fontSize="lg" weight="bold" className="line-clamp-1 group-hover:text-primary-accent transition-colors tracking-tight">
+              {name}
+            </Heading>
+          </Stack>
+          <Text size="xs" color="text-gray-500" lineClamp={2} mb={4} style={{ height: '2.5rem' }} block leading="relaxed">
             {description || 'No description available'}
           </Text>
-        </Box>
 
-        {/* Stats */}
-        <Box display="flex" flexDirection="col" gap={3} mt="auto">
-          <Box display="flex" flexDirection="col" gap={1.5}>
-            <Box display="flex" justifyContent="between">
-              <Text weight="bold" color="text-zinc-500" uppercase letterSpacing="widest" fontSize="10px">Drivers</Text>
-              <Text color="text-zinc-400" font="mono" fontSize="10px">{memberCount}/{maxMembers || '∞'}</Text>
-            </Box>
-            <Box h="1" bg="zinc-800" overflow="hidden">
-              <Box 
-                h="full" 
-                transition 
-                bg={fillPercentage > 90 ? 'bg-amber-500' : 'bg-blue-500'}
-                w={`${Math.min(fillPercentage, 100)}%`}
-              />
+          {/* Stats Row */}
+          <Box display="flex" alignItems="center" gap={3} mb={4}>
+            {/* Primary Slots (Drivers/Teams/Nations) */}
+            <Box flexGrow={1}>
+              <Box display="flex" alignItems="center" justifyContent="between" mb={1.5}>
+                <Text size="xs" color="text-gray-500" weight="bold" className="uppercase tracking-widest">{slotLabel}</Text>
+                <Text size="xs" color="text-gray-400" font="mono">
+                  {usedSlots}/{maxSlots || '∞'}
+                </Text>
+              </Box>
+              <Box h="1" rounded="none" bg="border-gray/30" overflow="hidden">
+                <Box
+                  h="full"
+                  rounded="none"
+                  transition
+                  bg={
+                    fillPercentage >= 90
+                      ? 'warning-amber'
+                      : fillPercentage >= 70
+                      ? 'primary-accent'
+                      : 'success-green'
+                  }
+                  style={{ width: `${Math.min(fillPercentage, 100)}%` }}
+                />
+              </Box>
             </Box>
+
+            {/* Open Slots Badge */}
+            {hasOpenSlots && (
+              <Box display="flex" alignItems="center" gap={1.5} px={2} py={1} rounded="none" bg="primary-accent/5" border borderColor="primary-accent/20">
+                <Box w="1.5" h="1.5" rounded="full" bg="primary-accent" className="animate-pulse" />
+                <Text size="xs" color="text-primary-accent" weight="bold" className="uppercase tracking-tighter">
+                  {openSlotsCount} OPEN
+                </Text>
+              </Box>
+            )}
           </Box>
 
-          <Box display="flex" alignItems="center" justifyContent="between" pt={3} borderTop borderColor="zinc-800/50">
-            <Box display="flex" alignItems="center" gap={2} color="text-zinc-500">
-              <Calendar size={12} />
-              <Text weight="bold" uppercase font="mono" fontSize="10px">
-                {nextRaceDate || 'TBD'}
-              </Text>
+          {/* Spacer to push footer to bottom */}
+          <Box flexGrow={1} />
+
+          {/* Footer Info */}
+          <Box display="flex" alignItems="center" justifyContent="between" pt={3} borderTop borderColor="border-gray/30" mt="auto">
+            <Box display="flex" alignItems="center" gap={3}>
+              {timingSummary && (
+                <Box display="flex" alignItems="center" gap={2}>
+                  <Icon icon={LucideCalendar} size={3} color="text-gray-500" />
+                  <Text size="xs" color="text-gray-500" font="mono">
+                    {timingSummary.split('•')[1]?.trim() || timingSummary}
+                  </Text>
+                </Box>
+              )}
             </Box>
-            <Box display="flex" alignItems="center" gap={1} color="text-zinc-500" 
-              // eslint-disable-next-line gridpilot-rules/component-classification
-              className="group-hover:text-blue-400 transition-colors"
-            >
-              <Text weight="bold" uppercase letterSpacing="widest" fontSize="10px">View</Text>
-              <Box 
-                // eslint-disable-next-line gridpilot-rules/component-classification
-                className="transition-transform group-hover:translate-x-0.5"
-              >
-                <ChevronRight size={12} />
-              </Box>
+            
+            {/* View Arrow */}
+            <Box display="flex" alignItems="center" gap={1} className="group-hover:text-primary-accent transition-colors">
+              <Text size="xs" color="text-gray-500" weight="bold" className="uppercase tracking-widest">VIEW</Text>
+              <Icon icon={LucideChevronRight} size={3} color="text-gray-500" className="transition-transform group-hover:translate-x-0.5" />
             </Box>
           </Box>
         </Box>
@@ -181,3 +190,4 @@ export function LeagueCard({
     </Box>
   );
 }
+

apps/website/components/leagues/LeagueCardWrapper.tsx

@@ -9,7 +9,7 @@ import {
 import type { LeagueSummaryViewModel } from '@/lib/view-models/LeagueSummaryViewModel';
 import { getMediaUrl } from '@/lib/utilities/media';
 import { Badge } from '@/ui/Badge';
-import { LeagueCard as UiLeagueCard } from '@/ui/LeagueCard';
+import { LeagueCard as UiLeagueCard } from './LeagueCard';
 
 interface LeagueCardProps {
   league: LeagueSummaryViewModel;
@@ -117,8 +117,8 @@ export function LeagueCard({ league, onClick }: LeagueCardProps) {
   const gameVariant = getGameVariant(league.scoring?.gameId);
   const isNew = isNewLeague(league.createdAt);
   const isTeamLeague = league.maxTeams && league.maxTeams > 0;
-  const categoryLabel = getCategoryLabel(league.category);
-  const categoryVariant = getCategoryVariant(league.category);
+  const categoryLabel = getCategoryLabel(league.category || undefined);
+  const categoryVariant = getCategoryVariant(league.category || undefined);
   
   const usedSlots = isTeamLeague ? (league.usedTeamSlots ?? 0) : (league.usedDriverSlots ?? 0);
   const maxSlots = isTeamLeague ? (league.maxTeams ?? 0) : (league.maxDrivers ?? 0);
@@ -135,7 +135,7 @@ export function LeagueCard({ league, onClick }: LeagueCardProps) {
   return (
     <UiLeagueCard
       name={league.name}
-      description={league.description}
+      description={league.description || undefined}
       coverUrl={coverUrl}
       logoUrl={logoUrl || undefined}
       slotLabel={slotLabel}

apps/website/components/leagues/LeagueCover.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { SafeImage } from '@/components/shared/SafeImage';
+import { ImagePlaceholder } from '@/ui/ImagePlaceholder';
+
+export interface LeagueCoverProps {
+  leagueId?: string;
+  src?: string;
+  alt: string;
+  height?: string;
+  aspectRatio?: string;
+  className?: string;
+}
+
+export function LeagueCover({ 
+  leagueId, 
+  src, 
+  alt, 
+  height, 
+  aspectRatio = '21/9',
+  className = '',
+}: LeagueCoverProps) {
+  const coverSrc = src || (leagueId ? `/api/media/leagues/${leagueId}/cover` : undefined);
+
+  return (
+    <Box
+      width="full"
+      overflow="hidden"
+      bg="bg-charcoal-outline/10"
+      className={className}
+      style={{ height, aspectRatio: height ? undefined : aspectRatio }}
+    >
+      {coverSrc ? (
+        <SafeImage
+          src={coverSrc}
+          alt={alt}
+          className="w-full h-full object-cover"
+          fallbackComponent={<ImagePlaceholder aspectRatio={aspectRatio} rounded="none" />}
+        />
+      ) : (
+        <ImagePlaceholder aspectRatio={aspectRatio} rounded="none" />
+      )}
+    </Box>
+  );
+}

apps/website/components/leagues/LeagueCoverWrapper.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { LeagueCover as UiLeagueCover } from '@/components/leagues/LeagueCover';
+
+export interface LeagueCoverProps {
+  leagueId: string;
+  alt: string;
+}
+
+export function LeagueCover({ leagueId, alt }: LeagueCoverProps) {
+  return (
+    <UiLeagueCover
+      leagueId={leagueId}
+      alt={alt}
+    />
+  );
+}

apps/website/components/leagues/LeagueHeader.tsx

@@ -1,89 +1,62 @@
-'use client';
 
-import React from 'react';
+
+import { ReactNode } from 'react';
 import { Box } from '@/ui/Box';
-import { Stack } from '@/ui/Stack';
 import { Heading } from '@/ui/Heading';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Image } from '@/ui/Image';
-import { MembershipStatus } from './MembershipStatus';
 
-interface MainSponsorInfo {
+interface LeagueHeaderProps {
   name: string;
-  logoUrl?: string;
-  websiteUrl?: string;
-}
-
-export interface LeagueHeaderProps {
-  leagueId: string;
-  leagueName: string;
   description?: string | null;
-  ownerId: string;
-  ownerName: string;
-  mainSponsor?: MainSponsorInfo | null;
+  logoUrl: string;
+  sponsorContent?: ReactNode;
+  statusContent?: ReactNode;
 }
 
 export function LeagueHeader({
-  leagueId,
-  leagueName,
+  name,
   description,
-  mainSponsor,
+  logoUrl,
+  sponsorContent,
+  statusContent,
 }: LeagueHeaderProps) {
   return (
-    <Box as="header" mb={8}>
-      <Stack direction="row" align="center" gap={6}>
-        <Box 
-          position="relative" 
-          w="20" 
-          h="20" 
-          overflow="hidden" 
-          border 
-          borderColor="white/10" 
-          bg="zinc-900" 
-          shadow="2xl"
-        >
-          <Image
-            src={`/api/media/league-logo/${leagueId}`}
-            alt={`${leagueName} logo`}
-            fullWidth
-            fullHeight
-            objectFit="cover"
-          />
-        </Box>
-        <Stack gap={1}>
-          <Stack direction="row" align="center" gap={4}>
-            <Heading level={1} fontSize="3xl" weight="bold" color="text-white">
-              {leagueName}
-              {mainSponsor && (
-                <Text ml={3} size="lg" weight="normal" color="text-zinc-500">
-                  by{' '}
-                  {mainSponsor.websiteUrl ? (
-                    <Box
-                      as="a"
-                      href={mainSponsor.websiteUrl}
-                      target="_blank"
-                      rel="noreferrer"
-                      color="text-blue-500"
-                      hoverTextColor="text-blue-400"
-                      transition
-                    >
-                      {mainSponsor.name}
-                    </Box>
-                  ) : (
-                    <Text color="text-blue-500">{mainSponsor.name}</Text>
-                  )}
-                </Text>
-              )}
-            </Heading>
-            <MembershipStatus leagueId={leagueId} />
-          </Stack>
-          {description && (
-            <Text color="text-zinc-400" size="sm" maxWidth="2xl" block leading="relaxed">
-              {description}
-            </Text>
-          )}
+    <Box mb={8}>
+      <Box display="flex" alignItems="center" justifyContent="between" mb={6}>
+        <Stack direction="row" align="center" gap={4}>
+          <Box h="16" w="16" rounded="xl" overflow="hidden" border style={{ borderColor: 'rgba(38, 38, 38, 0.8)', backgroundColor: '#1a1d23' }} shadow="lg">
+            <Image
+              src={logoUrl}
+              alt={`${name} logo`}
+              width={64}
+              height={64}
+              fullWidth
+              fullHeight
+              objectFit="cover"
+            />
+          </Box>
+          <Box>
+            <Box display="flex" alignItems="center" gap={3} mb={1}>
+              <Heading level={1}>
+                {name}
+                {sponsorContent && (
+                  <Text color="text-gray-400" weight="normal" size="lg" ml={2}>
+                    by {sponsorContent}
+                  </Text>
+                )}
+              </Heading>
+              {statusContent}
+            </Box>
+            {description && (
+              <Text color="text-gray-400" size="sm" maxWidth="xl" block>
+                {description}
+              </Text>
+            )}
+          </Box>
         </Stack>
-      </Stack>
+      </Box>
     </Box>
   );
 }

apps/website/components/leagues/LeagueListItem.tsx

@@ -0,0 +1,60 @@
+
+
+import { Box } from '@/ui/Box';
+import { Button } from '@/ui/Button';
+import { Link } from '@/ui/Link';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
+import { Text } from '@/ui/Text';
+
+interface League {
+  leagueId: string;
+  name: string;
+  description: string;
+  membershipRole?: string;
+}
+
+interface LeagueListItemProps {
+  league: League;
+  isAdmin?: boolean;
+}
+
+export function LeagueListItem({ league, isAdmin }: LeagueListItemProps) {
+  return (
+    <Surface
+      variant="dark"
+      rounded="lg"
+      border
+      padding={4}
+      style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderColor: '#262626' }}
+    >
+      <Box style={{ flex: 1, minWidth: 0 }}>
+        <Text weight="medium" color="text-white" block>{league.name}</Text>
+        <Text size="xs" color="text-gray-400" block mt={1} style={{ display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
+          {league.description}
+        </Text>
+        {league.membershipRole && (
+          <Text size="xs" color="text-gray-500" block mt={1}>
+            Your role:{' '}
+            <Text color="text-gray-400" style={{ textTransform: 'capitalize' }}>{league.membershipRole}</Text>
+          </Text>
+        )}
+      </Box>
+      <Stack direction="row" align="center" gap={2} style={{ marginLeft: '1rem' }}>
+        <Link
+          href={`/leagues/${league.leagueId}`}
+          variant="ghost"
+        >
+          <Text size="sm" color="text-gray-300">View</Text>
+        </Link>
+        {isAdmin && (
+          <Link href={`/leagues/${league.leagueId}?tab=admin`} variant="ghost">
+            <Button variant="primary" size="sm">
+              Manage
+            </Button>
+          </Link>
+        )}
+      </Stack>
+    </Surface>
+  );
+}

apps/website/components/leagues/LeagueLogo.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { SafeImage } from '@/components/shared/SafeImage';
+import { Trophy } from 'lucide-react';
+import { Icon } from '@/ui/Icon';
+
+export interface LeagueLogoProps {
+  leagueId?: string;
+  src?: string;
+  alt: string;
+  size?: number;
+  className?: string;
+  border?: boolean;
+  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+}
+
+export function LeagueLogo({ 
+  leagueId, 
+  src, 
+  alt, 
+  size = 64, 
+  className = '',
+  border = true,
+  rounded = 'md',
+}: LeagueLogoProps) {
+  const logoSrc = src || (leagueId ? `/api/media/leagues/${leagueId}/logo` : undefined);
+
+  return (
+    <Box
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+      rounded={rounded}
+      overflow="hidden"
+      bg="bg-charcoal-outline/10"
+      border={border}
+      borderColor="border-charcoal-outline/50"
+      className={className}
+      style={{ width: size, height: size, flexShrink: 0 }}
+    >
+      {logoSrc ? (
+        <SafeImage
+          src={logoSrc}
+          alt={alt}
+          className="w-full h-full object-contain p-1"
+          fallbackComponent={<Icon icon={Trophy} size={size > 32 ? 5 : 4} color="text-gray-500" />}
+        />
+      ) : (
+        <Icon icon={Trophy} size={size > 32 ? 5 : 4} color="text-gray-500" />
+      )}
+    </Box>
+  );
+}

apps/website/components/leagues/LeagueLogoWrapper.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { LeagueLogo as UiLeagueLogo } from '@/components/leagues/LeagueLogo';
+
+export interface LeagueLogoProps {
+  leagueId: string;
+  alt: string;
+}
+
+export function LeagueLogo({ leagueId, alt }: LeagueLogoProps) {
+  return (
+    <UiLeagueLogo
+      leagueId={leagueId}
+      alt={alt}
+    />
+  );
+}

apps/website/components/leagues/LeagueMemberTable.tsx

@@ -0,0 +1,28 @@
+import React, { ReactNode } from 'react';
+import { Table, TableHead, TableBody, TableRow, TableHeader } from '@/ui/Table';
+
+interface LeagueMemberTableProps {
+  children: ReactNode;
+  showActions?: boolean;
+}
+
+export function LeagueMemberTable({ children, showActions }: LeagueMemberTableProps) {
+  return (
+    <Table>
+      <TableHead>
+        <TableRow>
+          <TableHeader>Driver</TableHeader>
+          <TableHeader>Rating</TableHeader>
+          <TableHeader>Rank</TableHeader>
+          <TableHeader>Wins</TableHeader>
+          <TableHeader>Role</TableHeader>
+          <TableHeader>Joined</TableHeader>
+          {showActions && <TableHeader textAlign="right">Actions</TableHeader>}
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {children}
+      </TableBody>
+    </Table>
+  );
+}

apps/website/components/leagues/LeagueMembers.tsx

@@ -12,7 +12,7 @@ import { Box } from '@/ui/Box';
 import { Text } from '@/ui/Text';
 import { Select } from '@/ui/Select';
 import { Button } from '@/ui/Button';
-import { LeagueMemberTable } from '@/ui/LeagueMemberTable';
+import { LeagueMemberTable } from '@/components/leagues/LeagueMemberTable';
 import { LeagueMemberRow } from '@/components/leagues/LeagueMemberRow';
 import { MinimalEmptyState } from '@/components/shared/state/EmptyState';
 

apps/website/components/leagues/LeagueSummaryCard.tsx

@@ -0,0 +1,106 @@
+
+
+import { ArrowRight } from 'lucide-react';
+import { Box } from '@/ui/Box';
+import { Button } from '@/ui/Button';
+import { Card } from '@/ui/Card';
+import { Grid } from '@/ui/Grid';
+import { Heading } from '@/ui/Heading';
+import { Icon } from '@/ui/Icon';
+import { LeagueLogo } from './LeagueLogo';
+import { Link } from '@/ui/Link';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
+import { Text } from '@/ui/Text';
+
+interface LeagueSummaryCardProps {
+  id: string;
+  name: string;
+  description?: string;
+  maxDrivers: number;
+  qualifyingFormat: string;
+  href: string;
+}
+
+export function LeagueSummaryCard({
+  id,
+  name,
+  description,
+  maxDrivers,
+  qualifyingFormat,
+  href,
+}: LeagueSummaryCardProps) {
+  return (
+    <Card p={0} style={{ overflow: 'hidden' }}>
+      <Box p={4}>
+        <Stack direction="row" align="center" gap={4} mb={4}>
+          <LeagueLogo leagueId={id} alt={name} size={56} />
+          <Box style={{ flex: 1, minWidth: 0 }}>
+            <Text
+              size="xs"
+              color="text-gray-500"
+              style={{ textTransform: 'uppercase', letterSpacing: '0.05em' }}
+              block
+              mb={0.5}
+            >
+              League
+            </Text>
+            <Heading level={3} style={{ fontSize: '1rem' }}>
+              {name}
+            </Heading>
+          </Box>
+        </Stack>
+
+        {description && (
+          <Text
+            size="sm"
+            color="text-gray-400"
+            block
+            mb={4}
+            lineClamp={2}
+            style={{ height: '2.5rem' }}
+          >
+            {description}
+          </Text>
+        )}
+
+        <Box mb={4}>
+          <Grid cols={2} gap={3}>
+            <Surface variant="dark" rounded="lg" padding={3}>
+              <Text size="xs" color="text-gray-500" block mb={1}>
+                Max Drivers
+              </Text>
+              <Text weight="medium" color="text-white">
+                {maxDrivers}
+              </Text>
+            </Surface>
+            <Surface variant="dark" rounded="lg" padding={3}>
+              <Text size="xs" color="text-gray-500" block mb={1}>
+                Format
+              </Text>
+              <Text
+                weight="medium"
+                color="text-white"
+                style={{ textTransform: 'capitalize' }}
+              >
+                {qualifyingFormat}
+              </Text>
+            </Surface>
+          </Grid>
+        </Box>
+
+        <Box>
+          <Link href={href}>
+            <Button
+              variant="secondary"
+              fullWidth
+              icon={<Icon icon={ArrowRight} size={4} />}
+            >
+              View League
+            </Button>
+          </Link>
+        </Box>
+      </Box>
+    </Card>
+  );
+}

apps/website/components/leagues/LeagueSummaryCardWrapper.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { LeagueSummaryCard as UiLeagueSummaryCard } from '@/ui/LeagueSummaryCard';
+import { LeagueSummaryCard as UiLeagueSummaryCard } from './LeagueSummaryCard';
 import { routes } from '@/lib/routing/RouteConfig';
 
 interface LeagueSummaryCardProps {

apps/website/components/leagues/RosterTable.tsx

@@ -0,0 +1,85 @@
+import React, { ReactNode } from 'react';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Table, TableHead, TableBody, TableRow, TableHeader, TableCell } from '@/ui/Table';
+
+interface RosterTableProps {
+  children: ReactNode;
+  columns?: string[];
+}
+
+export function RosterTable({ children, columns = ['Driver', 'Role', 'Joined', 'Rating', 'Rank'] }: RosterTableProps) {
+  return (
+    <Box border borderColor="border-steel-grey" bg="surface-charcoal/50" overflow="hidden">
+      <Table>
+        <TableHead className="bg-base-graphite/50">
+          <TableRow>
+            {columns.map((col) => (
+              <TableHeader key={col} className="py-3 border-b border-border-steel-grey">
+                <Text size="xs" weight="bold" color="text-gray-500" className="uppercase tracking-widest" block>
+                  {col}
+                </Text>
+              </TableHeader>
+            ))}
+            <TableHeader className="py-3 border-b border-border-steel-grey">
+              {null}
+            </TableHeader>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {children}
+        </TableBody>
+      </Table>
+    </Box>
+  );
+}
+
+interface RosterTableRowProps {
+  driver: ReactNode;
+  role: ReactNode;
+  joined: string;
+  rating: ReactNode;
+  rank: ReactNode;
+  actions?: ReactNode;
+  onClick?: () => void;
+}
+
+export function RosterTableRow({
+  driver,
+  role,
+  joined,
+  rating,
+  rank,
+  actions,
+  onClick,
+}: RosterTableRowProps) {
+  return (
+    <TableRow 
+      onClick={onClick} 
+      clickable={!!onClick}
+      className="group hover:bg-primary-blue/5 transition-colors border-b border-border-steel-grey/30 last:border-0"
+    >
+      <TableCell className="py-4">
+        {driver}
+      </TableCell>
+      <TableCell className="py-4">
+        {role}
+      </TableCell>
+      <TableCell className="py-4">
+        <Text size="sm" color="text-gray-400" font="mono">{joined}</Text>
+      </TableCell>
+      <TableCell className="py-4">
+        {rating}
+      </TableCell>
+      <TableCell className="py-4">
+        {rank}
+      </TableCell>
+      <TableCell className="py-4 text-right">
+        <Stack direction="row" align="center" justify="end" gap={2}>
+          {actions}
+        </Stack>
+      </TableCell>
+    </TableRow>
+  );
+}

apps/website/components/leagues/RulebookTabs.tsx

@@ -0,0 +1,27 @@
+
+
+import { TabNavigation } from '@/ui/TabNavigation';
+
+export type RulebookSection = 'scoring' | 'conduct' | 'protests' | 'penalties';
+
+interface RulebookTabsProps {
+  activeSection: RulebookSection;
+  onSectionChange: (section: RulebookSection) => void;
+}
+
+export function RulebookTabs({ activeSection, onSectionChange }: RulebookTabsProps) {
+  const sections = [
+    { id: 'scoring', label: 'Scoring' },
+    { id: 'conduct', label: 'Conduct' },
+    { id: 'protests', label: 'Protests' },
+    { id: 'penalties', label: 'Penalties' },
+  ];
+
+  return (
+    <TabNavigation
+      tabs={sections}
+      activeTab={activeSection}
+      onTabChange={(id) => onSectionChange(id as RulebookSection)}
+    />
+  );
+}

apps/website/components/leagues/StewardingTabs.tsx

@@ -0,0 +1,27 @@
+
+
+import { BorderTabs } from '@/ui/BorderTabs';
+
+export type StewardingTab = 'pending' | 'resolved' | 'penalties';
+
+interface StewardingTabsProps {
+  activeTab: StewardingTab;
+  onTabChange: (tab: StewardingTab) => void;
+  pendingCount: number;
+}
+
+export function StewardingTabs({ activeTab, onTabChange, pendingCount }: StewardingTabsProps) {
+  const tabs: Array<{ id: StewardingTab; label: string; count?: number }> = [
+    { id: 'pending', label: 'Pending', count: pendingCount },
+    { id: 'resolved', label: 'Resolved' },
+    { id: 'penalties', label: 'Penalties' },
+  ];
+
+  return (
+    <BorderTabs
+      tabs={tabs}
+      activeTab={activeTab}
+      onTabChange={(id) => onTabChange(id as StewardingTab)}
+    />
+  );
+}