website refactor

apps/website/components/home/StewardingPreview.tsx

@@ -0,0 +1,101 @@
+'use client';
+
+import React from 'react';
+import { Section } from '@/ui/Section';
+import { Panel } from '@/ui/Panel';
+import { Text } from '@/ui/Text';
+import { Heading } from '@/ui/Heading';
+import { StatusBadge } from '@/ui/StatusBadge';
+import { Button } from '@/ui/Button';
+import { Group } from '@/ui/Group';
+import { Stack } from '@/ui/Stack';
+import { Grid } from '@/ui/Grid';
+import { Box } from '@/ui/Box';
+import { Gavel, Clock, User, MessageSquare } from 'lucide-react';
+
+/**
+ * StewardingPreview - Refined for "Modern Precision" and "Dieter Rams" style.
+ * Thorough down to the last detail.
+ */
+export function StewardingPreview() {
+  return (
+    <Section variant="muted" py={32}>
+      <Box>
+        <Box marginBottom={16} maxWidth="42rem">
+          <Heading level={2} weight="bold" marginBottom={6}>Structured Stewarding</Heading>
+          <Text variant="med" size="lg" leading="relaxed">
+            Protests are part of racing. Managing them shouldn't be a second job. 
+            GridPilot provides a dedicated workflow for drivers to report incidents and for you to resolve them with precision.
+          </Text>
+        </Box>
+
+        <Panel variant="elevated" padding="lg">
+          <Stack gap={8}>
+            <Group justify="between" align="center">
+              <Stack gap={1}>
+                <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>
+                </Group>
+                <Heading level={3} weight="bold">Turn 1 Contact: Miller vs Chen</Heading>
+              </Stack>
+              <StatusBadge variant="warning">UNDER REVIEW</StatusBadge>
+            </Group>
+
+            <Grid cols={{ base: 1, md: 3 }} gap={6}>
+              <Panel variant="bordered" padding="md">
+                <Stack gap={3}>
+                  <Group gap={2}>
+                    <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>
+                </Stack>
+              </Panel>
+              <Panel variant="bordered" padding="md">
+                <Stack gap={3}>
+                  <Group gap={2}>
+                    <User size={14} className="text-[var(--ui-color-intent-critical)]" />
+                    <Text size="xs" uppercase weight="bold" variant="low">Defendant</Text>
+                  </Group>
+                  <Text weight="bold">David Chen</Text>
+                  <Text size="sm" variant="low">#18 - BMW M4 GT3</Text>
+                </Stack>
+              </Panel>
+              <Panel variant="bordered" padding="md">
+                <Stack gap={3}>
+                  <Group gap={2}>
+                    <Clock size={14} className="text-[var(--ui-color-text-low)]" />
+                    <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>
+                </Stack>
+              </Panel>
+            </Grid>
+
+            <Stack gap={4}>
+              <Group gap={2}>
+                <MessageSquare size={14} className="text-[var(--ui-color-text-low)]" />
+                <Text size="xs" uppercase weight="bold" variant="low">Description</Text>
+              </Group>
+              <Panel variant="muted" padding="md">
+                <Text size="sm" variant="high" leading="relaxed">
+                  "David missed his braking point into T1 and hit my rear right corner. 
+                  I was forced into the grass and lost 4 positions. Replay attached shows he was never alongside."
+                </Text>
+              </Panel>
+            </Stack>
+
+            <Group gap={3} justify="end">
+              <Button variant="secondary" size="md">Dismiss</Button>
+              <Button variant="primary" size="md" icon={<Gavel size={16} />}>Apply Penalty</Button>
+            </Group>
+          </Stack>
+        </Panel>
+      </Box>
+    </Section>
+  );
+}