website refactor

apps/website/components/home/LeagueSummaryPanel.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { LeagueCard } from '@/components/leagues/LeagueCard';
+import { LeagueCard } from '@/components/leagues/LeagueCardWrapper';
 import { routes } from '@/lib/routing/RouteConfig';
 import { Heading } from '@/ui/Heading';
 import { Link } from '@/ui/Link';
@@ -46,15 +46,7 @@ export function LeagueSummaryPanel({ leagues }: LeagueSummaryPanelProps) {
         {leagues.slice(0, 2).map((league) => (
           <LeagueCard
             key={league.id}
-            name={league.name}
-            description={league.description}
-            coverUrl="/images/ff1600.jpeg"
-            slotLabel="Drivers"
-            usedSlots={18}
-            maxSlots={24}
-            fillPercentage={75}
-            hasOpenSlots={true}
-            openSlotsCount={6}
+            league={league as any}
           />
         ))}
       </CardStack>

apps/website/components/landing/DiscoverySection.tsx

@@ -8,7 +8,7 @@ import { Grid } from '@/ui/Grid';
 import { Heading } from '@/ui/Heading';
 import { Link } from '@/ui/Link';
 import { Text } from '@/ui/Text';
-import { LeagueCard } from '@/components/leagues/LeagueCard';
+import { LeagueCard } from '@/components/leagues/LeagueCardWrapper';
 import { TeamCard } from '@/components/teams/TeamCard';
 import { UpcomingRaceItem } from '@/components/races/UpcomingRaceItem';
 import { HomeViewData } from '@/templates/HomeTemplate';
@@ -49,15 +49,7 @@ export function DiscoverySection({ viewData }: DiscoverySectionProps) {
                 {viewData.topLeagues.slice(0, 2).map((league) => (
                   <LeagueCard
                     key={league.id}
-                    name={league.name}
-                    description={league.description}
-                    coverUrl="/images/ff1600.jpeg"
-                    slotLabel="Drivers"
-                    usedSlots={18}
-                    maxSlots={24}
-                    fillPercentage={75}
-                    hasOpenSlots={true}
-                    openSlotsCount={6}
+                    league={league as any}
                   />
                 ))}
               </Stack>

apps/website/components/leagues/LeagueCard.tsx

@@ -1,135 +0,0 @@
-'use client';
-
-import { Heading } from '@/ui/Heading';
-import { Icon } from '@/ui/Icon';
-import { Image } from '@/ui/Image';
-import { PlaceholderImage } from '@/ui/PlaceholderImage';
-import { Text } from '@/ui/Text';
-import { Box } from '@/ui/Box';
-import { Group } from '@/ui/Group';
-import { Surface } from '@/ui/Surface';
-import { Stack } from '@/ui/Stack';
-import { LeagueCard as UILeagueCard, LeagueCardStats, LeagueCardFooter } from '@/ui/LeagueCard';
-import { Calendar, Users, Activity } from 'lucide-react';
-import React, { ReactNode } from 'react';
-
-interface LeagueCardProps {
-  name: string;
-  description?: string;
-  coverUrl: string;
-  logoUrl?: string;
-  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;
-}
-
-export function LeagueCard({
-  name,
-  description,
-  coverUrl,
-  logoUrl,
-  badges,
-  championshipBadge,
-  slotLabel,
-  usedSlots,
-  maxSlots,
-  fillPercentage,
-  hasOpenSlots,
-  openSlotsCount,
-  timingSummary,
-  onClick,
-}: LeagueCardProps) {
-  return (
-    <UILeagueCard
-      onClick={onClick}
-      coverUrl={coverUrl}
-      logo={
-        <Surface 
-          width="3.5rem" 
-          height="3.5rem" 
-          rounded="lg" 
-          overflow="hidden" 
-          border 
-          variant="precision"
-        >
-          {logoUrl ? (
-            <Image
-              src={logoUrl}
-              alt={`${name} logo`}
-              width={56}
-              height={56}
-              objectFit="cover"
-            />
-          ) : (
-            <PlaceholderImage size={56} />
-          )}
-        </Surface>
-      }
-      badges={
-        <Group gap={2}>
-          {badges}
-          {championshipBadge}
-        </Group>
-      }
-    >
-      <Stack gap={4} fullHeight>
-        <Stack gap={1}>
-          <Group gap={2} align="center">
-            <Box width="2px" height="1rem" bg="var(--ui-color-intent-telemetry)" />
-            <Heading level={3} weight="bold" truncate>{name}</Heading>
-          </Group>
-          <Text size="xs" variant="low" lineClamp={2} block leading="relaxed">
-            {description || 'No infrastructure description provided.'}
-          </Text>
-        </Stack>
-
-        <Box>
-          <LeagueCardStats
-            label={slotLabel}
-            value={`${usedSlots} / ${maxSlots || '∞'}`}
-            percentage={fillPercentage}
-            intent={fillPercentage >= 90 ? 'warning' : fillPercentage >= 70 ? 'primary' : 'success'}
-          />
-          
-          {hasOpenSlots && (
-            <Group gap={2} align="center">
-              <Icon icon={Activity} size={3} intent="success" />
-              <Text size="xs" variant="success" weight="bold" uppercase font="mono">
-                {openSlotsCount} slots available
-              </Text>
-            </Group>
-          )}
-        </Box>
-
-        <LeagueCardFooter>
-          <Stack gap={2}>
-            {timingSummary && (
-              <Group gap={2}>
-                <Icon icon={Calendar} size={3} intent="low" />
-                <Text size="xs" variant="low" font="mono">
-                  {timingSummary.split('•')[1]?.trim() || timingSummary}
-                </Text>
-              </Group>
-            )}
-            <Group gap={2}>
-              <Icon icon={Users} size={3} intent="low" />
-              <Text size="xs" variant="low" font="mono">
-                {usedSlots} active participants
-              </Text>
-            </Group>
-          </Stack>
-        </LeagueCardFooter>
-      </Stack>
-    </UILeagueCard>
-  );
-}

apps/website/components/leagues/LeagueCardWrapper.tsx

@@ -11,7 +11,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 './LeagueCard';
+import { LeagueCard as UiLeagueCard } from '@/ui/LeagueCard';
 
 interface LeagueCardProps {
   league: LeagueSummaryViewModel;

apps/website/components/teams/TeamCard.tsx

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { ChevronRight, Users, Zap } from 'lucide-react';
-import { Card } from '@/ui/Card';
+import { ProfileCard } from '@/ui/ProfileCard';
 import { CountryFlag } from '@/ui/CountryFlag';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
@@ -11,7 +11,6 @@ import { Text } from '@/ui/Text';
 import { Badge } from '@/ui/Badge';
 import { Stack } from '@/ui/Stack';
 import { Grid } from '@/ui/Grid';
-import { Box } from '@/ui/Box';
 import { TeamSummaryData } from '@/lib/view-data/TeamsViewData';
 
 interface TeamCardProps {
@@ -60,24 +59,10 @@ export function TeamCard({
   };
 
   return (
-    <Card 
-      variant="precision" 
-      padding="none" 
+    <ProfileCard
+      variant="precision"
       onClick={() => onClick?.(data.teamId)}
-      transition
-      fullHeight
-      position="relative"
-    >
-      {data.isRecruiting && (
-        <Box position="absolute" top={0} right={0} zIndex={10}>
-          <Badge variant="success" size="xs" rounded="none" style={{ borderBottomLeftRadius: '4px' }}>
-            RECRUITING
-          </Badge>
-        </Box>
-      )}
-      
-      <Stack padding={6} gap={6} fullHeight>
-        {/* Header: Logo and Identity */}
+      identity={
         <Stack direction="row" align="start" gap={4}>
           <Logo 
             src={data.logoUrl} 
@@ -91,63 +76,56 @@ export function TeamCard({
             <Heading level={5} weight="bold" uppercase style={{ lineHeight: '1.2' }}>
               {data.teamName}
             </Heading>
-            <Stack direction="row" gap={3} wrap>
-              {data.performanceLevel && (
-                <Stack direction="row" align="center" gap={1}>
-                  <Icon icon={Zap} size={3} intent="telemetry" />
-                  <Text size="xs" variant="telemetry" mono uppercase>{data.performanceLevel}</Text>
-                </Stack>
-              )}
-            </Stack>
-          </Stack>
-        </Stack>
-
-        {/* Technical Stats Grid - Engineered Look */}
-        <Grid cols={3} gap="px" style={{ backgroundColor: 'var(--ui-color-border-muted)', border: '1px solid var(--ui-color-border-muted)' }}>
-          <Stack padding={3} align="center" style={{ backgroundColor: 'var(--ui-color-bg-surface)' }}>
-            <Text size="xs" variant="low" uppercase block mono>Rating</Text>
-            <Text size="md" weight="bold" mono variant="primary">{data.ratingLabel}</Text>
-          </Stack>
-          <Stack padding={3} align="center" style={{ backgroundColor: 'var(--ui-color-bg-surface)' }}>
-            <Text size="xs" variant="low" uppercase block mono>Wins</Text>
-            <Text size="md" weight="bold" mono variant="telemetry">{data.winsLabel}</Text>
-          </Stack>
-          <Stack padding={3} align="center" style={{ backgroundColor: 'var(--ui-color-bg-surface)' }}>
-            <Text size="xs" variant="low" uppercase block mono>Races</Text>
-            <Text size="md" weight="bold" mono variant="high">{data.racesLabel}</Text>
-          </Stack>
-        </Grid>
-
-        {data.description && (
-          <Text size="xs" variant="low" lineClamp={2} block leading="relaxed">
-            {data.description}
-          </Text>
-        )}
-
-        {/* Spacer to push footer down */}
-        <Box flex={1} />
-
-        {/* Footer: Metadata */}
-        <Stack direction="row" justify="between" paddingTop={4} style={{ borderTop: '1px solid var(--ui-color-border-muted)' }}>
-          <Stack direction="row" gap={4}>
-            <Stack direction="row" align="center" gap={1.5}>
-              <Icon icon={Users} size={3} intent="low" />
-              <Text size="xs" variant="low" mono>{data.memberCount}</Text>
-            </Stack>
-            {data.countryCode && (
-              <Stack direction="row" align="center" gap={1.5}>
-                <CountryFlag countryCode={data.countryCode} size="sm" />
-                <Text size="xs" variant="low" mono uppercase>{data.countryCode}</Text>
+            {data.performanceLevel && (
+              <Stack direction="row" align="center" gap={1}>
+                <Icon icon={Zap} size={3} intent="telemetry" />
+                <Text size="xs" variant="telemetry" mono uppercase>{data.performanceLevel}</Text>
               </Stack>
             )}
           </Stack>
-          
-          <Stack direction="row" align="center" gap={1} style={{ color: 'var(--ui-color-intent-primary)' }}>
-            <Text size="xs" weight="bold" uppercase mono>Details</Text>
-            <Icon icon={ChevronRight} size={3} />
+        </Stack>
+      }
+      actions={
+        data.isRecruiting ? (
+          <Badge variant="success" size="xs">
+            RECRUITING
+          </Badge>
+        ) : undefined
+      }
+      stats={
+        <Stack gap={4}>
+          <Grid cols={3} gap="px" style={{ backgroundColor: 'var(--ui-color-border-muted)', border: '1px solid var(--ui-color-border-muted)', borderRadius: 'var(--ui-radius-md)', overflow: 'hidden' }}>
+            <Stack padding={2} align="center" style={{ backgroundColor: 'var(--ui-color-bg-surface)' }}>
+              <Text size="xs" variant="low" uppercase block mono>Rating</Text>
+              <Text size="sm" weight="bold" mono variant="primary">{data.ratingLabel}</Text>
+            </Stack>
+            <Stack padding={2} align="center" style={{ backgroundColor: 'var(--ui-color-bg-surface)' }}>
+              <Text size="xs" variant="low" uppercase block mono>Wins</Text>
+              <Text size="sm" weight="bold" mono variant="telemetry">{data.winsLabel}</Text>
+            </Stack>
+            <Stack padding={2} align="center" style={{ backgroundColor: 'var(--ui-color-bg-surface)' }}>
+              <Text size="xs" variant="low" uppercase block mono>Races</Text>
+              <Text size="sm" weight="bold" mono variant="high">{data.racesLabel}</Text>
+            </Stack>
+          </Grid>
+
+          <Stack direction="row" justify="between" align="center">
+            <Stack direction="row" gap={4}>
+              <Stack direction="row" align="center" gap={1.5}>
+                <Icon icon={Users} size={3} intent="low" />
+                <Text size="xs" variant="low" mono>{data.memberCount}</Text>
+              </Stack>
+              {data.countryCode && (
+                <Stack direction="row" align="center" gap={1.5}>
+                  <CountryFlag countryCode={data.countryCode} size="sm" />
+                  <Text size="xs" variant="low" mono uppercase>{data.countryCode}</Text>
+                </Stack>
+              )}
+            </Stack>
+            <Icon icon={ChevronRight} size={3} intent="primary" />
           </Stack>
         </Stack>
-      </Stack>
-    </Card>
+      }
+    />
   );
 }

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;
 }