website refactor

apps/website/templates/TeamsTemplate.tsx

@@ -2,17 +2,15 @@
 
 import React from 'react';
 import { Users } from 'lucide-react';
-import { TeamLeaderboardPreview } from '@/components/teams/TeamLeaderboardPreviewWrapper';
-import { Button } from '@/ui/Button';
 import { Box } from '@/ui/Box';
 import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
-import { Heading } from '@/ui/Heading';
 import { Container } from '@/ui/Container';
-import { Grid } from '@/ui/Grid';
-import { TeamCard } from '@/ui/TeamCardWrapper';
 import { EmptyState } from '@/components/shared/state/EmptyState';
-import type { TeamSummaryData, TeamsViewData } from '@/lib/view-data/TeamsViewData';
+import { TeamsDirectoryHeader } from '@/components/teams/TeamsDirectoryHeader';
+import { TeamGrid } from '@/components/teams/TeamGrid';
+import { TeamLeaderboardPreview } from '@/components/teams/TeamLeaderboardPreviewWrapper';
+import type { TeamsViewData } from '@/lib/view-data/TeamsViewData';
 
 interface TeamsTemplateProps {
   viewData: TeamsViewData;
@@ -25,50 +23,39 @@ export function TeamsTemplate({ viewData, onTeamClick, onViewFullLeaderboard, on
   const { teams } = viewData;
 
   return (
-    <Box as="main">
-      <Container size="lg" py={8}>
-        <Stack gap={8}>
-          {/* Header */}
-          <Stack direction="row" align="center" justify="between" wrap gap={4}>
-            <Box>
-              <Heading level={1}>Teams</Heading>
-              <Text color="text-gray-400">Browse and manage your racing teams</Text>
-            </Box>
-            <Box>
-              <Button variant="primary" onClick={onCreateTeam}>Create Team</Button>
-            </Box>
-          </Stack>
+    <Box as="main" bg="base-black" minH="screen">
+      <Container size="lg" py={12}>
+        <Stack gap={10}>
+          <TeamsDirectoryHeader onCreateTeam={onCreateTeam} />
 
-          {/* Teams Grid */}
-          {teams.length > 0 ? (
-            <Grid cols={3} gap={6}>
-              {teams.map((team: TeamSummaryData) => (
-                <TeamCard 
-                  key={team.teamId} 
-                  id={team.teamId}
-                  name={team.teamName}
-                  logo={team.logoUrl}
-                  memberCount={team.memberCount}
-                  leagues={[team.leagueName]}
-                  onClick={() => onTeamClick?.(team.teamId)}
-                />
-              ))}
-            </Grid>
-          ) : (
-            <EmptyState
-              icon={Users}
-              title="No teams yet"
-              description="Get started by creating your first racing team"
-              action={{
-                label: 'Create Team',
-                onClick: onCreateTeam,
-                variant: 'primary'
-              }}
-            />
-          )}
+          <Box>
+            <Stack direction="row" align="center" gap={2} mb={6}>
+              <Box w="2" h="2" bg="primary-accent" />
+              <Text size="xs" weight="bold" color="text-gray-400" uppercase>Active Rosters</Text>
+            </Stack>
+            
+            {teams.length > 0 ? (
+              <TeamGrid teams={teams} onTeamClick={onTeamClick} />
+            ) : (
+              <EmptyState
+                icon={Users}
+                title="No teams yet"
+                description="Get started by creating your first racing team"
+                action={{
+                  label: 'Create Team',
+                  onClick: onCreateTeam,
+                  variant: 'primary'
+                }}
+              />
+            )}
+          </Box>
 
           {/* Team Leaderboard Preview */}
-          <Box mt={12}>
+          <Box pt={10} borderTop borderColor="outline-steel" borderOpacity={0.3}>
+            <Stack direction="row" align="center" gap={2} mb={6}>
+              <Box w="2" h="2" bg="telemetry-aqua" />
+              <Text size="xs" weight="bold" color="text-gray-400" uppercase>Global Standings</Text>
+            </Stack>
             <TeamLeaderboardPreview 
               topTeams={[]} 
               onTeamClick={(id) => onTeamClick?.(id)}