website refactor

apps/website/templates/HomeTemplate.tsx

@@ -15,12 +15,8 @@ import { CompanionAutomationMockup } from '@/components/mockups/CompanionAutomat
 import { RaceHistoryMockup } from '@/components/mockups/RaceHistoryMockup';
 import { SimPlatformMockup } from '@/components/mockups/SimPlatformMockup';
 import { ModeGuard } from '@/components/shared/ModeGuard';
+import { DiscoverySection } from '@/ui/DiscoverySection';
 import { Box } from '@/ui/Box';
-import { Container } from '@/ui/Container';
-import { Heading } from '@/ui/Heading';
-import { Grid } from '@/ui/Grid';
-import { Section } from '@/ui/Section';
-import { Text } from '@/ui/Text';
 
 export interface HomeViewData {
   isAlpha: boolean;
@@ -53,7 +49,7 @@ interface HomeTemplateProps {
  */
 export function HomeTemplate({ viewData }: HomeTemplateProps) {
   return (
-    <Box color="text-white">
+    <Box as="main">
       {/* Hero Section */}
       <HomeHeader
         title="Modern Motorsport Infrastructure."
@@ -146,29 +142,15 @@ export function HomeTemplate({ viewData }: HomeTemplateProps) {
 
       {/* Discovery Grid */}
       <ModeGuard feature="alpha_discovery">
-        <Section py={24} variant="dark">
-          <Container>
-            <Box maxWidth="2xl" mb={16}>
-              <Box display="flex" alignItems="center" borderLeft borderStyle="solid" borderWidth="2px" borderColor="primary-accent" px={4} mb={4}>
-                <Text size="xs" weight="bold" uppercase letterSpacing="widest" color="text-primary-accent">
-                  Live Ecosystem
-                </Text>
-              </Box>
-              <Heading level={2} fontSize={{ base: '3xl', md: '4xl' }} weight="bold" letterSpacing="tight" color="text-white" mb={6}>
-                DISCOVER THE GRID
-              </Heading>
-              <Text size="lg" color="text-gray-400" leading="relaxed">
-                Explore leagues, teams, and races that make up the GridPilot ecosystem.
-              </Text>
-            </Box>
-
-            <Grid cols={1} lgCols={3} gap={8}>
-              <LeagueSummaryPanel leagues={viewData.topLeagues} />
-              <TeamSummaryPanel teams={viewData.teams} />
-              <RecentRacesPanel races={viewData.upcomingRaces} />
-            </Grid>
-          </Container>
-        </Section>
+        <DiscoverySection
+          title="DISCOVER THE GRID"
+          subtitle="Live Ecosystem"
+          description="Explore leagues, teams, and races that make up the GridPilot ecosystem."
+        >
+          <LeagueSummaryPanel leagues={viewData.topLeagues} />
+          <TeamSummaryPanel teams={viewData.teams} />
+          <RecentRacesPanel races={viewData.upcomingRaces} />
+        </DiscoverySection>
       </ModeGuard>
 
       {/* CTA & FAQ */}