website poc

apps/website/components/landing/FeatureGrid.tsx

@@ -0,0 +1,79 @@
+import Section from '@/components/ui/Section';
+import Container from '@/components/ui/Container';
+import Heading from '@/components/ui/Heading';
+import MockupStack from '@/components/ui/MockupStack';
+import LeagueHomeMockup from '@/components/mockups/LeagueHomeMockup';
+import StandingsTableMockup from '@/components/mockups/StandingsTableMockup';
+import TeamCompetitionMockup from '@/components/mockups/TeamCompetitionMockup';
+import ProtestWorkflowMockup from '@/components/mockups/ProtestWorkflowMockup';
+import LeagueDiscoveryMockup from '@/components/mockups/LeagueDiscoveryMockup';
+import DriverProfileMockup from '@/components/mockups/DriverProfileMockup';
+
+const features = [
+  {
+    title: "A Real Home for Your League",
+    description: "Stop juggling Discord, spreadsheets, and iRacing admin panels. GridPilot brings everything into one dedicated platform built specifically for league racing.",
+    MockupComponent: LeagueHomeMockup
+  },
+  {
+    title: "Automatic Results & Standings",
+    description: "Race happens. Results appear. Standings update. No manual data entry, no spreadsheet formulas, no waiting for someone to publish.",
+    MockupComponent: StandingsTableMockup
+  },
+  {
+    title: "Real Team Racing",
+    description: "Constructors' championships that actually matter. Driver lineups. Team strategies. Multi-class racing done right.",
+    MockupComponent: TeamCompetitionMockup
+  },
+  {
+    title: "Clean Protests & Penalties",
+    description: "Structured incident reporting with video clip references. Steward review workflows. Transparent penalty application. Professional race control.",
+    MockupComponent: ProtestWorkflowMockup
+  },
+  {
+    title: "Find Your Perfect League",
+    description: "Search and discover leagues by game, region, and skill level. Browse featured competitions, check driver counts, and join communities that match your racing style.",
+    MockupComponent: LeagueDiscoveryMockup
+  },
+  {
+    title: "Your Racing Identity",
+    description: "Cross-league driver profiles with career stats, achievements, and racing history. Build your reputation across multiple championships and showcase your progression.",
+    MockupComponent: DriverProfileMockup
+  }
+];
+
+export default function FeatureGrid() {
+  return (
+    <Section variant="default">
+      <Container>
+        <Container size="sm" center>
+          <Heading level={2} className="text-white">
+            Built for League Racing
+          </Heading>
+          <p className="mt-4 text-lg text-gray-400">
+            Everything you need to run a professional iRacing league, nothing you don&apos;t
+          </p>
+        </Container>
+        <div className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-16 sm:mt-20 lg:max-w-none lg:grid-cols-2 xl:grid-cols-3">
+          {features.map((feature, index) => (
+            <div key={feature.title} className="flex flex-col gap-6">
+              <div className="aspect-video w-full">
+                <MockupStack index={index}>
+                  <feature.MockupComponent />
+                </MockupStack>
+              </div>
+              <div>
+                <Heading level={3} className="text-white">
+                  {feature.title}
+                </Heading>
+                <p className="mt-2 text-base leading-7 text-gray-400">
+                  {feature.description}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </Container>
+    </Section>
+  );
+}