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>
+      }
+    />
   );
 }