website refactor

apps/website/components/landing/DiscoverySection.tsx

@@ -0,0 +1,123 @@
+'use client';
+
+import { routes } from '@/lib/routing/RouteConfig';
+import { Box } from '@/ui/Box';
+import { Button } from '@/ui/Button';
+import { Container } from '@/ui/Container';
+import { Grid } from '@/ui/Grid';
+import { Heading } from '@/ui/Heading';
+import { Link } from '@/ui/Link';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { LeagueCard } from '@/ui/LeagueCard';
+import { TeamCard } from '@/ui/TeamCard';
+import { UpcomingRaceItem } from '@/ui/UpcomingRaceItem';
+import { HomeViewData } from '@/templates/HomeTemplate';
+
+interface DiscoverySectionProps {
+  viewData: HomeViewData;
+}
+
+export function DiscoverySection({ viewData }: DiscoverySectionProps) {
+  return (
+    <Box py={{ base: 20, md: 32 }} bg="graphite-black" borderBottom borderColor="border-gray/50">
+      <Container size="lg">
+        <Stack gap={16}>
+          <Box maxWidth="2xl">
+            <Box borderLeft borderStyle="solid" borderColor="primary-accent" pl={4} mb={4}>
+              <Text size="xs" weight="bold" color="text-primary-accent" className="uppercase tracking-[0.2em]">
+                Live Ecosystem
+              </Text>
+            </Box>
+            <Heading level={2} weight="bold" fontSize={{ base: '3xl', md: '4xl' }} className="tracking-tight">
+              Discover the Grid
+            </Heading>
+            <Text size="lg" color="text-gray-400" block mt={6} leading="relaxed">
+              Explore leagues, teams, and races that make up the GridPilot ecosystem.
+            </Text>
+          </Box>
+
+          <Grid cols={1} lgCols={3} gap={12}>
+            {/* Top leagues */}
+            <Stack gap={8}>
+              <Stack direction="row" align="center" justify="between" className="border-b border-border-gray/30 pb-4">
+                <Heading level={5} color="text-gray-400" weight="bold" className="tracking-widest">FEATURED LEAGUES</Heading>
+                <Link href={routes.public.leagues}>
+                  <Text size="xs" weight="bold" color="text-primary-accent" className="uppercase tracking-widest hover:text-white transition-colors">View all</Text>
+                </Link>
+              </Stack>
+              <Stack gap={4}>
+                {viewData.topLeagues.slice(0, 2).map((league) => (
+                  <LeagueCard
+                    key={league.id}
+                    name={league.name}
+                    description={league.description}
+                    coverUrl="/images/ff1600.jpeg"
+                    slotLabel="Drivers"
+                    usedSlots={18}
+                    maxSlots={24}
+                    fillPercentage={75}
+                    hasOpenSlots={true}
+                    openSlotsCount={6}
+                  />
+                ))}
+              </Stack>
+            </Stack>
+
+            {/* Teams */}
+            <Stack gap={8}>
+              <Stack direction="row" align="center" justify="between" className="border-b border-border-gray/30 pb-4">
+                <Heading level={5} color="text-gray-400" weight="bold" className="tracking-widest">TEAMS ON THE GRID</Heading>
+                <Link href={routes.public.teams}>
+                  <Text size="xs" weight="bold" color="text-primary-accent" className="uppercase tracking-widest hover:text-white transition-colors">Browse</Text>
+                </Link>
+              </Stack>
+              <Stack gap={4}>
+                {viewData.teams.slice(0, 2).map(team => (
+                  <TeamCard
+                    key={team.id}
+                    name={team.name}
+                    description={team.description}
+                    logo={team.logoUrl}
+                    memberCount={12}
+                    isRecruiting={true}
+                  />
+                ))}
+              </Stack>
+            </Stack>
+
+            {/* Upcoming races */}
+            <Stack gap={8}>
+              <Stack direction="row" align="center" justify="between" className="border-b border-border-gray/30 pb-4">
+                <Heading level={5} color="text-gray-400" weight="bold" className="tracking-widest">UPCOMING RACES</Heading>
+                <Link href={routes.public.races}>
+                  <Text size="xs" weight="bold" color="text-primary-accent" className="uppercase tracking-widest hover:text-white transition-colors">Schedule</Text>
+                </Link>
+              </Stack>
+              {viewData.upcomingRaces.length === 0 ? (
+                <Box p={12} border borderStyle="dashed" borderColor="border-gray/30" rounded="none" center bg="panel-gray/10">
+                  <Text size="sm" color="text-gray-600" font="mono" uppercase letterSpacing="widest">
+                    No races scheduled.
+                  </Text>
+                </Box>
+              ) : (
+                <Stack gap={3}>
+                  {viewData.upcomingRaces.map(race => (
+                    <UpcomingRaceItem
+                      key={race.id}
+                      track={race.track}
+                      car={race.car}
+                      formattedDate={race.formattedDate}
+                      formattedTime="20:00 GMT"
+                      isMyLeague={false}
+                    />
+                  ))}
+                </Stack>
+              )}
+            </Stack>
+          </Grid>
+        </Stack>
+      </Container>
+    </Box>
+  );
+}