website refactor

apps/website/templates/TeamsTemplate.tsx

@@ -10,9 +10,7 @@ import { TeamCard } from '@/components/teams/TeamCard';
 import { TeamSearchBar } from '@/components/teams/TeamSearchBar';
 import { EmptyState } from '@/ui/EmptyState';
 import { Container } from '@/ui/Container';
-import { Heading } from '@/ui/Heading';
-import { Text } from '@/ui/Text';
-import { Box } from '@/ui/Box';
+import { Section } from '@/ui/Section';
 import { Carousel } from '@/components/shared/Carousel';
 
 interface TeamsTemplateProps extends TemplateProps<TeamsViewData> {
@@ -65,22 +63,21 @@ export function TeamsTemplate({
   }, [teams, filteredTeams, searchQuery]);
 
   return (
-    <div className="min-h-screen bg-[var(--ui-color-bg-base)] py-12">
-      <Container size="xl">
-        <TeamsDirectoryHeader onCreateTeam={onCreateTeam} />
-        
-        <Box marginBottom={12}>
-          <TeamSearchBar 
-            searchQuery={searchQuery} 
-            onSearchChange={onSearchChange} 
-          />
-        </Box>
+    <Section variant="default" padding="lg">
+      <TeamsDirectoryHeader onCreateTeam={onCreateTeam} />
+      
+      <Container size="full" padding="none" py={12}>
+        <TeamSearchBar 
+          searchQuery={searchQuery} 
+          onSearchChange={onSearchChange} 
+        />
+      </Container>
 
-        {clusters.length > 0 ? (
-          <div className="space-y-20">
-            {clusters.map((cluster) => (
+      {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}>
               <Carousel 
-                key={cluster.title} 
                 title={cluster.title} 
                 count={cluster.teams.length}
               >
@@ -92,23 +89,21 @@ export function TeamsTemplate({
                   />
                 ))}
               </Carousel>
-            ))}
-          </div>
-        ) : (
-          <div className="py-20 border border-dashed border-[var(--ui-color-border-muted)] flex flex-col items-center justify-center text-center">
-            <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'
-              }}
-            />
-          </div>
-        )}
-      </Container>
-    </div>
+            </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'
+          }}
+        />
+      )}
+    </Section>
   );
 }