website refactor

apps/website/templates/TeamsTemplate.tsx

@@ -8,9 +8,12 @@ import { TeamsDirectoryHeader } from '@/components/teams/TeamsDirectoryHeader';
 import { TeamGrid } from '@/components/teams/TeamGrid';
 import { TeamCard } from '@/components/teams/TeamCard';
 import { TeamSearchBar } from '@/components/teams/TeamSearchBar';
+import { PageHeader } from '@/ui/PageHeader';
+import { Button } from '@/ui/Button';
 import { EmptyState } from '@/ui/EmptyState';
 import { Container } from '@/ui/Container';
 import { Section } from '@/ui/Section';
+import { Stack } from '@/ui/Stack';
 import { Carousel } from '@/components/shared/Carousel';
 
 interface TeamsTemplateProps extends TemplateProps<TeamsViewData> {
@@ -63,21 +66,32 @@ export function TeamsTemplate({
   }, [teams, filteredTeams, searchQuery]);
 
   return (
-    <Section variant="default" padding="lg">
-      <TeamsDirectoryHeader onCreateTeam={onCreateTeam} />
-      
-      <Container size="full" padding="none" py={12}>
+    <Section variant="default" padding="md">
+      <PageHeader
+        title="Teams"
+        description="Professional racing organizations and community teams."
+        icon={Users}
+        action={
+          <Button 
+            variant="secondary" 
+            onClick={onViewFullLeaderboard}
+          >
+            Leaderboard
+          </Button>
+        }
+      />
+
+      <Stack gap={12}>
         <TeamSearchBar 
           searchQuery={searchQuery} 
           onSearchChange={onSearchChange} 
         />
-      </Container>
 
-      {clusters.length > 0 ? (
-        <Container size="full" padding="none">
-          {clusters.map((cluster, index) => (
-            <Container key={cluster.title} size="full" padding="none" py={index === 0 ? 0 : 10}>
+        {clusters.length > 0 ? (
+          <Stack gap={12}>
+            {clusters.map((cluster) => (
               <Carousel 
+                key={cluster.title}
                 title={cluster.title} 
                 count={cluster.teams.length}
               >
@@ -89,21 +103,21 @@ export function TeamsTemplate({
                   />
                 ))}
               </Carousel>
-            </Container>
-          ))}
-        </Container>
-      ) : (
-        <EmptyState
-          icon={Users}
-          title={searchQuery ? "No matching teams" : "No teams yet"}
-          description={searchQuery ? "Try adjusting your search filters" : "Get started by creating your first racing team"}
-          action={{
-            label: 'Create Team',
-            onClick: onCreateTeam,
-            variant: 'primary'
-          }}
-        />
-      )}
+            ))}
+          </Stack>
+        ) : (
+          <EmptyState
+            icon={Users}
+            title={searchQuery ? "No matching teams" : "No teams yet"}
+            description={searchQuery ? "Try adjusting your search filters" : "Get started by creating your first racing team"}
+            action={{
+              label: 'Create Team',
+              onClick: onCreateTeam,
+              variant: 'primary'
+            }}
+          />
+        )}
+      </Stack>
     </Section>
   );
 }