website refactor

apps/website/components/teams/TeamCard.tsx

@@ -1,15 +1,23 @@
 'use client';
 
 import React from 'react';
-import { TeamCard as UiTeamCard } from '@/ui/TeamCard';
+import { ChevronRight, Users, Zap } from 'lucide-react';
+import { Card } from '@/ui/Card';
+import { CountryFlag } from '@/ui/CountryFlag';
+import { Heading } from '@/ui/Heading';
+import { Icon } from '@/ui/Icon';
+import { Logo } from '@/ui/Logo';
+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';
-import { Image } from '@/ui/Image';
 
 interface TeamCardProps {
   team?: TeamSummaryData;
   // Compatibility props
   name?: string;
-  leagueName?: string;
   logo?: string;
   memberCount?: number;
   ratingLabel?: string;
@@ -25,7 +33,6 @@ interface TeamCardProps {
 export function TeamCard({ 
   team, 
   name,
-  leagueName,
   logo,
   memberCount,
   ratingLabel,
@@ -40,7 +47,6 @@ export function TeamCard({
   const data = team || {
     teamId: '',
     teamName: name || '',
-    leagueName: leagueName || '',
     memberCount: memberCount || 0,
     logoUrl: logo,
     ratingLabel: ratingLabel || '-',
@@ -50,22 +56,98 @@ export function TeamCard({
     isRecruiting: isRecruiting || false,
     performanceLevel: performanceLevel,
     description: description,
+    countryCode: region,
   };
 
   return (
-    <UiTeamCard
-      name={data.teamName}
-      leagueName={data.leagueName}
-      logo={data.logoUrl ? <Image src={data.logoUrl} alt={data.teamName} fullWidth fullHeight objectFit="cover" /> : undefined}
-      memberCount={data.memberCount}
-      rating={data.ratingLabel}
-      wins={data.winsLabel}
-      races={data.racesLabel}
-      region={data.region}
-      isRecruiting={data.isRecruiting}
-      performanceLevel={data.performanceLevel}
-      description={data.description}
+    <Card 
+      variant="precision" 
+      padding="none" 
       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 */}
+        <Stack direction="row" align="start" gap={4}>
+          <Logo 
+            src={data.logoUrl} 
+            alt={data.teamName} 
+            size={40} 
+            rounded="sm" 
+            variant="dark"
+            icon={Users}
+          />
+          <Stack flex={1} gap={1} paddingTop={1}>
+            <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 marginBottom={1} 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 marginBottom={1} 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 marginBottom={1} 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>
+              </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>
+        </Stack>
+      </Stack>
+    </Card>
   );
 }