website refactor

apps/website/components/shared/Carousel.tsx

@@ -0,0 +1,144 @@
+'use client';
+
+import React, { useRef, useState, useEffect } from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { IconButton } from '@/ui/IconButton';
+import { Box } from '@/ui/Box';
+import { Heading } from '@/ui/Heading';
+import { Text } from '@/ui/Text';
+
+interface CarouselProps {
+  children: React.ReactNode;
+  title?: string;
+  count?: number;
+}
+
+export function Carousel({ children, title, count }: CarouselProps) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const [showLeft, setShowLeft] = useState(false);
+  const [showRight, setShowRight] = useState(true);
+
+  const checkScroll = () => {
+    if (scrollRef.current) {
+      const { scrollLeft, scrollWidth, clientWidth } = scrollRef.current;
+      setShowLeft(scrollLeft > 10);
+      setShowRight(scrollLeft < scrollWidth - clientWidth - 10);
+    }
+  };
+
+  useEffect(() => {
+    checkScroll();
+    window.addEventListener('resize', checkScroll);
+    return () => window.removeEventListener('resize', checkScroll);
+  }, []);
+
+  const scroll = (direction: 'left' | 'right') => {
+    if (scrollRef.current) {
+      const { clientWidth } = scrollRef.current;
+      const scrollAmount = clientWidth * 0.8;
+      scrollRef.current.scrollBy({
+        left: direction === 'left' ? -scrollAmount : scrollAmount,
+        behavior: 'smooth'
+      });
+    }
+  };
+
+  return (
+    <Box position="relative">
+      {/* Header with Title and Controls */}
+      <Box display="flex" alignItems="center" justifyContent="between" marginBottom={6} paddingBottom={4} borderBottom="1px solid var(--ui-color-border-muted)">
+        <Box display="flex" alignItems="center" gap={4}>
+          {title && (
+            <Heading level={2} weight="bold" uppercase size="sm" style={{ letterSpacing: '0.2em' }}>
+              {title}
+            </Heading>
+          )}
+          {count !== undefined && (
+            <Box paddingX={2} paddingY={0.5} border="1px solid var(--ui-color-border-muted)" rounded="sm">
+              <Text size="xs" mono variant="low">{count}</Text>
+            </Box>
+          )}
+        </Box>
+
+        <Box display="flex" gap={2}>
+          <IconButton 
+            icon={ChevronLeft} 
+            onClick={() => scroll('left')}
+            variant="secondary"
+            size="sm"
+            disabled={!showLeft}
+            className={`transition-opacity duration-300 ${showLeft ? 'opacity-100' : 'opacity-30'}`}
+          />
+          <IconButton 
+            icon={ChevronRight} 
+            onClick={() => scroll('right')}
+            variant="secondary"
+            size="sm"
+            disabled={!showRight}
+            className={`transition-opacity duration-300 ${showRight ? 'opacity-100' : 'opacity-30'}`}
+          />
+        </Box>
+      </Box>
+
+      {/* Scroll Area with Fades */}
+      <Box position="relative" group>
+        {/* Left Fade */}
+        <Box 
+          position="absolute" 
+          left={-4} 
+          top={0} 
+          bottom={0} 
+          width={12} 
+          zIndex={5}
+          pointerEvents="none"
+          style={{ 
+            background: 'linear-gradient(to right, var(--ui-color-bg-base) 0%, transparent 100%)',
+            opacity: showLeft ? 1 : 0,
+            transition: 'opacity 0.3s'
+          }}
+        />
+
+        {/* Scroll Container */}
+        <Box 
+          ref={scrollRef}
+          onScroll={checkScroll}
+          display="flex"
+          alignItems="stretch"
+          overflowX="auto"
+          paddingBottom={6}
+          paddingX={0}
+          gap={6}
+          className="scrollbar-hide snap-x snap-mandatory"
+        >
+          {React.Children.map(children, (child) => (
+            <Box 
+              display="flex"
+              flexDirection="col"
+              flex="none" 
+              className="snap-start h-full" 
+              style={{ width: '380px' }}
+            >
+              {child}
+            </Box>
+          ))}
+        </Box>
+
+        {/* Right Fade */}
+        <Box 
+          position="absolute" 
+          right={-4} 
+          top={0} 
+          bottom={0} 
+          width={12} 
+          zIndex={5}
+          pointerEvents="none"
+          style={{ 
+            background: 'linear-gradient(to left, var(--ui-color-bg-base) 0%, transparent 100%)',
+            opacity: showRight ? 1 : 0,
+            transition: 'opacity 0.3s'
+          }}
+        />
+      </Box>
+    </Box>
+  );
+}

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

apps/website/components/teams/TeamHero.tsx

@@ -1,74 +1,60 @@
 'use client';
 
-import { JoinTeamButton } from '@/components/teams/JoinTeamButton';
-import { TeamLogo } from '@/components/teams/TeamLogo';
-import { TeamTag } from '@/components/teams/TeamTag';
-import { Card } from '@/ui/Card';
-import { Group } from '@/ui/Group';
+import React, { ReactNode } from 'react';
+import { Glow } from '@/ui/Glow';
 import { Heading } from '@/ui/Heading';
-import { StatGrid } from '@/ui/StatGrid';
 import { Text } from '@/ui/Text';
+import { Stack } from '@/ui/Stack';
+import { Box } from '@/ui/Box';
 
-interface TeamHeroProps {
-  team: {
-    id: string;
-    name: string;
-    tag: string | null;
-    description?: string;
-    category?: string | null;
-    createdAt?: string;
-    foundedDateLabel?: string;
-    leagues: { id: string }[];
-  };
-  memberCount: number;
-  memberCountLabel?: string;
-  leagueCountLabel?: string;
-  onUpdate: () => void;
+export interface TeamHeroProps {
+  title: ReactNode;
+  description: string;
+  stats?: ReactNode;
+  actions?: ReactNode;
+  sideContent?: ReactNode;
 }
 
-export function TeamHero({ team, memberCount, memberCountLabel, leagueCountLabel, onUpdate }: TeamHeroProps) {
+export function TeamHero({ 
+  title, 
+  description, 
+  stats, 
+  actions,
+  sideContent 
+}: TeamHeroProps) {
   return (
-    <Card>
-      <Group align="start" justify="between" wrap gap={6}>
-        <Group align="start" gap={6} wrap fullWidth>
-          <TeamLogo teamId={team.id} alt={team.name} size={96} />
+    <Box 
+      position="relative" 
+      backgroundColor="var(--ui-color-bg-base)" 
+      paddingY={12} 
+      style={{ borderBottom: '1px solid var(--ui-color-border-default)', overflow: 'hidden' }}
+    >
+      <Glow color="purple" size="xl" opacity={0.05} position="top-right" />
+      
+      <Stack direction={{ base: 'col', lg: 'row' }} gap={12} align="start">
+        <Stack flex={1} gap={4}>
+          <Heading level={1} size="4xl" weight="bold">
+            {title}
+          </Heading>
+          <Text size="lg" variant="low" block leading="relaxed" marginBottom={4}>
+            {description}
+          </Text>
           
-          <Group direction="col" align="start" gap={2} fullWidth>
-            <Group gap={3}>
-              <Heading level={1}>{team.name}</Heading>
-              {team.tag && <TeamTag tag={team.tag} />}
-            </Group>
-
-            <Text variant="low" block marginBottom={4}>{team.description}</Text>
-
-            <StatGrid
-              columns={{ base: 2, md: 4 }}
-              variant="box"
-              stats={[
-                {
-                  label: 'Personnel',
-                  value: memberCountLabel || 'Unknown',
-                },
-                ...(team.category ? [{
-                  label: 'Category',
-                  value: team.category,
-                  intent: 'primary' as const,
-                }] : []),
-                ...(team.foundedDateLabel ? [{
-                  label: 'Founded',
-                  value: team.foundedDateLabel,
-                }] : []),
-                ...(team.leagues && team.leagues.length > 0 ? [{
-                  label: 'Activity',
-                  value: leagueCountLabel || 'Unknown',
-                }] : []),
-              ]}
-            />
-          </Group>
-        </Group>
-
-        <JoinTeamButton teamId={team.id} onUpdate={onUpdate} />
-      </Group>
-    </Card>
+          {stats && <Box marginBottom={4}>{stats}</Box>}
+          
+          {actions && (
+            <Stack direction="row" gap={4} wrap>
+              {actions}
+            </Stack>
+          )}
+        </Stack>
+        
+        {sideContent && (
+          <Box width={{ base: '100%', lg: '24rem' }} flexShrink={0}>
+            {sideContent}
+          </Box>
+        )}
+      </Stack>
+    </Box>
   );
 }

apps/website/components/teams/TeamHeroSectionWrapper.tsx

@@ -7,7 +7,7 @@ import { TeamHeroStats } from '@/components/teams/TeamHeroStats';
 import type { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
 import { Button } from '@/ui/Button';
 import { Icon } from '@/ui/Icon';
-import { TeamHero } from '@/ui/TeamHero';
+import { TeamHero } from '@/components/teams/TeamHero';
 import { Text } from '@/ui/Text';
 import { Stack } from '@/ui/Stack';
 import {

apps/website/components/teams/TeamsDirectoryHeader.tsx

@@ -3,7 +3,7 @@
 import React from 'react';
 import { Plus } from 'lucide-react';
 import { Button } from '@/ui/Button';
-import { TeamsHeader } from '@/ui/TeamsHeader';
+import { TeamsHeader } from './TeamsHeader';
 
 interface TeamsDirectoryHeaderProps {
   onCreateTeam: () => void;
@@ -12,7 +12,7 @@ interface TeamsDirectoryHeaderProps {
 export function TeamsDirectoryHeader({ onCreateTeam }: TeamsDirectoryHeaderProps) {
   return (
     <TeamsHeader 
-      title="Directory"
+      title="Teams"
       subtitle="Professional Racing Rosters"
       action={
         <Button 

apps/website/components/teams/TeamsHeader.tsx

@@ -0,0 +1,33 @@
+import React, { ReactNode } from 'react';
+import { Heading } from '@/ui/Heading';
+import { Text } from '@/ui/Text';
+
+interface TeamsHeaderProps {
+  title: string;
+  subtitle?: string;
+  action?: ReactNode;
+}
+
+export function TeamsHeader({ title, subtitle, action }: TeamsHeaderProps) {
+  return (
+    <div className="mb-12 flex flex-col md:flex-row md:items-end justify-between gap-6 border-b border-[var(--ui-color-border-muted)] pb-8">
+      <div className="space-y-2">
+        <div className="flex items-center gap-3">
+          <div className="w-1 h-8 bg-[var(--ui-color-intent-primary)]" />
+          <Heading level={1} weight="bold" uppercase>{title}</Heading>
+        </div>
+        {subtitle && (
+          <Text variant="low" size="lg" uppercase mono className="tracking-[0.2em]">
+            {subtitle}
+          </Text>
+        )}
+      </div>
+      
+      {action && (
+        <div className="flex items-center">
+          {action}
+        </div>
+      )}
+    </div>
+  );
+}