website refactor

apps/website/components/home/EcosystemGrid.tsx

@@ -0,0 +1,96 @@
+'use client';
+
+import React from 'react';
+import { Section } from '@/ui/Section';
+import { Heading } from '@/ui/Heading';
+import { Text } from '@/ui/Text';
+import { Card } from '@/ui/Card';
+import { Button } from '@/ui/Button';
+import { FeatureGrid } from '@/ui/FeatureGrid';
+import { Stack } from '@/ui/Stack';
+import { Trophy, Users, Flag } from 'lucide-react';
+
+interface EcosystemGridProps {
+  leagues: Array<{ id: string; name: string; description: string }>;
+  teams: Array<{ id: string; name: string; description: string }>;
+  races: Array<{ id: string; track: string; car: string; formattedDate: string }>;
+}
+
+/**
+ * EcosystemGrid - Discovery section for the live ecosystem.
+ * Designed with a "grid" layout and precision details.
+ * Uses ONLY UI components.
+ */
+export function EcosystemGrid({ leagues, teams, races }: EcosystemGridProps) {
+  return (
+    <Section variant="muted" padding="lg">
+      <Stack direction="col" gap={16}>
+        <Stack direction={{ base: 'col', md: 'row' }} align="end" justify="between" gap={8}>
+          <Stack direction="col" gap={4} maxWidth="42rem">
+            <Text variant="primary" weight="bold" uppercase size="xs">
+              Live Ecosystem
+            </Text>
+            <Heading level={2} weight="bold">
+              THE GRID
+            </Heading>
+            <Text size="lg" variant="med" block>
+              Explore the leagues, teams, and races that define the GridPilot ecosystem.
+            </Text>
+          </Stack>
+          <Button variant="secondary" size="md">
+            VIEW ALL DATA
+          </Button>
+        </Stack>
+
+        <FeatureGrid columns={{ base: 1, lg: 3 }} gap={8}>
+          {/* Leagues Column */}
+          <Stack direction="col" gap={6}>
+            <Stack direction="row" align="center" gap={2} px={2}>
+              <Trophy className="w-4 h-4 text-[var(--ui-color-text-low)]" />
+              <Text size="sm" weight="bold" uppercase variant="low">Top Leagues</Text>
+            </Stack>
+            {leagues.slice(0, 3).map((league) => (
+              <Card key={league.id} variant="default" padding="md">
+                <Heading level={5} weight="bold">{league.name}</Heading>
+                <Text size="sm" variant="low" leading="snug" block mt={2}>{league.description}</Text>
+              </Card>
+            ))}
+          </Stack>
+
+          {/* Teams Column */}
+          <Stack direction="col" gap={6}>
+            <Stack direction="row" align="center" gap={2} px={2}>
+              <Users className="w-4 h-4 text-[var(--ui-color-text-low)]" />
+              <Text size="sm" weight="bold" uppercase variant="low">Active Teams</Text>
+            </Stack>
+            {teams.slice(0, 3).map((team) => (
+              <Card key={team.id} variant="default" padding="md">
+                <Heading level={5} weight="bold">{team.name}</Heading>
+                <Text size="sm" variant="low" leading="snug" block mt={2}>{team.description}</Text>
+              </Card>
+            ))}
+          </Stack>
+
+          {/* Races Column */}
+          <Stack direction="col" gap={6}>
+            <Stack direction="row" align="center" gap={2} px={2}>
+              <Flag className="w-4 h-4 text-[var(--ui-color-text-low)]" />
+              <Text size="sm" weight="bold" uppercase variant="low">Upcoming Races</Text>
+            </Stack>
+            {races.slice(0, 3).map((race) => (
+              <Card key={race.id} variant="default" padding="md">
+                <Stack direction="row" justify="between" align="start">
+                  <Stack direction="col" gap={1}>
+                    <Heading level={5} weight="bold">{race.track}</Heading>
+                    <Text size="xs" variant="primary" weight="bold" uppercase>{race.car}</Text>
+                  </Stack>
+                  <Text size="xs" variant="low" mono>{race.formattedDate}</Text>
+                </Stack>
+              </Card>
+            ))}
+          </Stack>
+        </FeatureGrid>
+      </Stack>
+    </Section>
+  );
+}