website refactor

apps/website/components/home/Hero.tsx

@@ -1,12 +1,6 @@
 'use client';
 
-import { Heading } from '@/ui/Heading';
-import { Text } from '@/ui/Text';
-import { Button } from '@/ui/Button';
-import { Section } from '@/ui/Section';
-import { ButtonGroup } from '@/ui/ButtonGroup';
-import { Stack } from '@/ui/Stack';
-import { Box } from '@/ui/Box';
+import { LandingHero } from '@/ui/LandingHero';
 
 /**
  * Hero - Refined with Dieter Rams principles.
@@ -15,51 +9,12 @@ import { Box } from '@/ui/Box';
  */
 export function Hero() {
   return (
-    <Section variant="default" py={32}>
-      <Box maxWidth="54rem">
-        <Box marginBottom={24}>
-          <Text 
-            variant="primary" 
-            weight="bold" 
-            uppercase 
-            size="xs" 
-            leading="none"
-            block
-            letterSpacing="0.2em"
-            marginBottom={10}
-          >
-            Sim Racing Infrastructure
-          </Text>
-          
-          <Heading level={1} weight="bold" size="4xl">
-            Professional League Management.<br />
-            Engineered for Control.
-          </Heading>
-        </Box>
-        
-        <Box marginBottom={24}>
-          <Text size="xl" variant="med" leading="relaxed" block maxWidth="42rem">
-            GridPilot eliminates the administrative overhead of running iRacing leagues. 
-            No spreadsheets. No manual points. No protest chaos. 
-            Just pure competition, structured for growth.
-          </Text>
-        </Box>
-
-        <ButtonGroup gap={10}>
-          <Button
-            variant="primary"
-            size="lg"
-          >
-            Create Your League
-          </Button>
-          <Button
-            variant="secondary"
-            size="lg"
-          >
-            View Demo
-          </Button>
-        </ButtonGroup>
-      </Box>
-    </Section>
+    <LandingHero
+      subtitle="Sim Racing Infrastructure"
+      title="Professional League Management. Engineered for Control."
+      description="GridPilot eliminates the administrative overhead of running iRacing leagues. No spreadsheets. No manual points. No protest chaos. Just pure competition, structured for growth."
+      primaryAction={{ label: 'Create Your League', href: '#' }}
+      secondaryAction={{ label: 'View Demo', href: '#' }}
+    />
   );
 }

apps/website/components/home/LeagueIdentityPreview.tsx

@@ -12,11 +12,22 @@ import { Box } from '@/ui/Box';
 import { StatusBadge } from '@/ui/StatusBadge';
 import { Trophy, Globe, Settings2, Palette, ShieldCheck, BarChart3 } from 'lucide-react';
 
+interface LeagueIdentityPreviewProps {
+  league?: {
+    id: string;
+    name: string;
+    description: string;
+  };
+}
+
 /**
  * LeagueIdentityPreview - Radically redesigned for "Modern Precision" and "Dieter Rams" style.
  * Focuses on the professional identity and deep customization options for admins.
  */
-export function LeagueIdentityPreview() {
+export function LeagueIdentityPreview({ league }: LeagueIdentityPreviewProps) {
+  const leagueName = league?.name || 'Apex Racing League';
+  const subdomain = league ? `${league.name.toLowerCase().replace(/\s+/g, '')}.gridpilot.racing` : 'apex.gridpilot.racing';
+
   return (
     <Section variant="default" py={32}>
       <Box>
@@ -48,7 +59,7 @@ export function LeagueIdentityPreview() {
                       <Globe size={20} className="text-[var(--ui-color-text-low)]" />
                       <Stack gap={1}>
                         <Text weight="bold">Custom Subdomains</Text>
-                        <Text size="xs" variant="low">yourleague.gridpilot.racing</Text>
+                        <Text size="xs" variant="low">{subdomain}</Text>
                       </Stack>
                     </Group>
                   </Panel>
@@ -77,8 +88,8 @@ export function LeagueIdentityPreview() {
                         <Trophy size={20} className="text-[var(--ui-color-text-low)]" />
                       </Box>
                       <Stack gap={0}>
-                        <Text weight="bold" size="sm">Apex Racing League</Text>
-                        <Text size="xs" variant="low">apex.gridpilot.racing</Text>
+                        <Text weight="bold" size="sm">{leagueName}</Text>
+                        <Text size="xs" variant="low">{subdomain}</Text>
                       </Stack>
                     </Group>
                   </Panel>

apps/website/components/home/StewardingPreview.tsx

@@ -13,11 +13,30 @@ import { Grid } from '@/ui/Grid';
 import { Box } from '@/ui/Box';
 import { Gavel, Clock, User, MessageSquare } from 'lucide-react';
 
+interface StewardingPreviewProps {
+  race?: {
+    id: string;
+    track: string;
+    car: string;
+    formattedDate: string;
+  };
+  team?: {
+    id: string;
+    name: string;
+    description: string;
+  };
+}
+
 /**
  * StewardingPreview - Refined for "Modern Precision" and "Dieter Rams" style.
  * Thorough down to the last detail.
  */
-export function StewardingPreview() {
+export function StewardingPreview({ race, team }: StewardingPreviewProps) {
+  const incidentId = race ? `${race.id.slice(0, 3).toUpperCase()}-WG` : '402-WG';
+  const trackName = race?.track || 'Watkins Glen - Cup';
+  const carName = race?.car || 'Porsche 911 GT3 R';
+  const teamName = team?.name || 'Alex Miller';
+
   return (
     <Section variant="muted" py={32}>
       <Box>
@@ -36,9 +55,9 @@ export function StewardingPreview() {
                 <Group gap={2}>
                   <Text variant="low" size="xs" uppercase weight="bold" letterSpacing="0.1em">Incident Report</Text>
                   <Text variant="low" size="xs">•</Text>
-                  <Text variant="low" size="xs" uppercase weight="bold" letterSpacing="0.1em">ID: 402-WG</Text>
+                  <Text variant="low" size="xs" uppercase weight="bold" letterSpacing="0.1em">ID: {incidentId}</Text>
                 </Group>
-                <Heading level={3} weight="bold">Turn 1 Contact: Miller vs Chen</Heading>
+                <Heading level={3} weight="bold">Turn 1 Contact: {teamName} vs David Chen</Heading>
               </Stack>
               <StatusBadge variant="warning">UNDER REVIEW</StatusBadge>
             </Group>
@@ -50,8 +69,8 @@ export function StewardingPreview() {
                     <User size={14} className="text-[var(--ui-color-intent-primary)]" />
                     <Text size="xs" uppercase weight="bold" variant="low">Protestor</Text>
                   </Group>
-                  <Text weight="bold">Alex Miller</Text>
-                  <Text size="sm" variant="low">#42 - Porsche 911 GT3 R</Text>
+                  <Text weight="bold">{teamName}</Text>
+                  <Text size="sm" variant="low">#42 - {carName}</Text>
                 </Stack>
               </Panel>
               <Panel variant="bordered" padding="md">
@@ -71,7 +90,7 @@ export function StewardingPreview() {
                     <Text size="xs" uppercase weight="bold" variant="low">Session Info</Text>
                   </Group>
                   <Text weight="bold">Lap 1, 00:42.150</Text>
-                  <Text size="sm" variant="low">Watkins Glen - Cup</Text>
+                  <Text size="sm" variant="low">{trackName}</Text>
                 </Stack>
               </Panel>
             </Grid>

apps/website/components/home/TelemetryStrip.tsx

@@ -38,7 +38,7 @@ export function TelemetryStrip() {
   ];
 
   return (
-    <Section variant="default" py={16}>
+    <Section variant="default" padding="md">
       <StatsStrip stats={stats} />
     </Section>
   );