website refactor

apps/website/ui/LeagueCard.tsx

@@ -5,6 +5,7 @@ import { Box } from './Box';
 import { Heading } from './Heading';
 import { Icon } from './Icon';
 import { Text } from './Text';
+import { Stack } from './Stack';
 import { Image } from './Image';
 import { PlaceholderImage } from './PlaceholderImage';
 import { Calendar as LucideCalendar, ChevronRight as LucideChevronRight, Users as LucideUsers } from 'lucide-react';
@@ -60,13 +61,13 @@ export function LeagueCard({
       <Box 
         position="relative" 
         h="full" 
-        rounded="xl" 
-        bg="bg-iron-gray" 
+        rounded="none" 
+        bg="panel-gray/40" 
         border 
-        borderColor="border-charcoal-outline" 
+        borderColor="border-gray/50" 
         overflow="hidden" 
         transition 
-        className="hover:border-primary-blue/50 hover:shadow-[0_0_30px_rgba(25,140,255,0.15)] hover:bg-iron-gray/80"
+        className="hover:border-primary-accent/30 hover:bg-panel-gray/60 transition-all duration-300"
       >
         {/* Cover Image */}
         <Box position="relative" h="32" overflow="hidden">
@@ -76,10 +77,10 @@ export function LeagueCard({
             fullWidth
             fullHeight
             objectFit="cover"
-            className="transition-transform duration-300 group-hover:scale-105"
+            className="transition-transform duration-500 group-hover:scale-105 opacity-60"
           />
           {/* Gradient Overlay */}
-          <Box position="absolute" inset="0" bg="bg-gradient-to-t from-iron-gray via-iron-gray/60 to-transparent" />
+          <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}>
@@ -93,7 +94,7 @@ export function LeagueCard({
 
           {/* Logo */}
           <Box position="absolute" left="4" bottom="-6" zIndex={10}>
-            <Box w="12" h="12" rounded="lg" overflow="hidden" border borderColor="border-iron-gray" bg="bg-deep-graphite" shadow="xl">
+            <Box w="12" h="12" rounded="none" overflow="hidden" border borderColor="border-gray/50" bg="graphite-black" shadow="xl">
               {logoUrl ? (
                 <Image
                   src={logoUrl}
@@ -114,34 +115,37 @@ export function LeagueCard({
         {/* Content */}
         <Box pt={8} px={4} pb={4} display="flex" flexDirection="col" fullHeight>
           {/* Title & Description */}
-          <Heading level={3} className="line-clamp-1 group-hover:text-primary-blue transition-colors" mb={1}>
-            {name}
-          </Heading>
-          <Text size="xs" color="text-gray-500" lineClamp={2} mb={3} style={{ height: '2rem' }} block>
+          <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>
 
           {/* Stats Row */}
-          <Box display="flex" alignItems="center" gap={3} mb={3}>
+          <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}>
-                <Text size="xs" color="text-gray-500">{slotLabel}</Text>
-                <Text size="xs" color="text-gray-400">
+              <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.5" rounded="full" bg="bg-charcoal-outline" overflow="hidden">
+              <Box h="1" rounded="none" bg="border-gray/30" overflow="hidden">
                 <Box
                   h="full"
-                  rounded="full"
+                  rounded="none"
                   transition
                   bg={
                     fillPercentage >= 90
-                      ? 'bg-warning-amber'
+                      ? 'warning-amber'
                       : fillPercentage >= 70
-                      ? 'bg-primary-blue'
-                      : 'bg-performance-green'
+                      ? 'primary-accent'
+                      : 'success-green'
                   }
                   style={{ width: `${Math.min(fillPercentage, 100)}%` }}
                 />
@@ -150,35 +154,25 @@ export function LeagueCard({
 
             {/* Open Slots Badge */}
             {hasOpenSlots && (
-              <Box display="flex" alignItems="center" gap={1} px={2} py={1} rounded="lg" bg="bg-neon-aqua/10" border borderColor="border-neon-aqua/20">
-                <Box w="1.5" h="1.5" rounded="full" bg="bg-neon-aqua" animate="pulse" />
-                <Text size="xs" color="text-neon-aqua" weight="medium">
-                  {openSlotsCount} open
+              <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>
 
-          {/* Driver count for team leagues */}
-          {isTeamLeague && (
-            <Box display="flex" alignItems="center" gap={2} mb={3}>
-              <Icon icon={LucideUsers} size={3} color="text-gray-500" />
-              <Text size="xs" color="text-gray-500">
-                {usedDriverSlots ?? 0}/{maxDrivers ?? '∞'} drivers
-              </Text>
-            </Box>
-          )}
-
           {/* Spacer to push footer to bottom */}
           <Box flexGrow={1} />
 
           {/* Footer Info */}
-          <Box display="flex" alignItems="center" justifyContent="between" pt={3} borderTop style={{ borderColor: 'rgba(38, 38, 38, 0.5)' }} mt="auto">
+          <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={1}>
+                <Box display="flex" alignItems="center" gap={2}>
                   <Icon icon={LucideCalendar} size={3} color="text-gray-500" />
-                  <Text size="xs" color="text-gray-500">
+                  <Text size="xs" color="text-gray-500" font="mono">
                     {timingSummary.split('•')[1]?.trim() || timingSummary}
                   </Text>
                 </Box>
@@ -186,8 +180,8 @@ export function LeagueCard({
             </Box>
             
             {/* View Arrow */}
-            <Box display="flex" alignItems="center" gap={1} className="group-hover:text-primary-blue transition-colors">
-              <Text size="xs" color="text-gray-500">View</Text>
+            <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>