website refactor
This commit is contained in:
@@ -11,6 +11,7 @@ import { Group } from '@/ui/Group';
|
||||
import { Stack } from '@/ui/Stack';
|
||||
import { Grid } from '@/ui/Grid';
|
||||
import { Box } from '@/ui/Box';
|
||||
import { Icon } from '@/ui/Icon';
|
||||
import { Gavel, Clock, User, MessageSquare } from 'lucide-react';
|
||||
|
||||
interface StewardingPreviewProps {
|
||||
@@ -38,15 +39,15 @@ export function StewardingPreview({ race, team }: StewardingPreviewProps) {
|
||||
const teamName = team?.name || 'Alex Miller';
|
||||
|
||||
return (
|
||||
<Section variant="muted" py={32}>
|
||||
<Box>
|
||||
<Box marginBottom={16} maxWidth="42rem">
|
||||
<Heading level={2} weight="bold" marginBottom={6}>Structured Stewarding</Heading>
|
||||
<Section variant="muted" padding="lg">
|
||||
<Stack gap={16}>
|
||||
<Stack gap={6} maxWidth="42rem">
|
||||
<Heading level={2} weight="bold">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>
|
||||
</Stack>
|
||||
|
||||
<Panel variant="elevated" padding="lg">
|
||||
<Stack gap={8}>
|
||||
@@ -66,7 +67,7 @@ export function StewardingPreview({ race, team }: StewardingPreviewProps) {
|
||||
<Panel variant="bordered" padding="md">
|
||||
<Stack gap={3}>
|
||||
<Group gap={2}>
|
||||
<User size={14} className="text-[var(--ui-color-intent-primary)]" />
|
||||
<Icon icon={User} size={4} intent="primary" />
|
||||
<Text size="xs" uppercase weight="bold" variant="low">Protestor</Text>
|
||||
</Group>
|
||||
<Text weight="bold">{teamName}</Text>
|
||||
@@ -76,7 +77,7 @@ export function StewardingPreview({ race, team }: StewardingPreviewProps) {
|
||||
<Panel variant="bordered" padding="md">
|
||||
<Stack gap={3}>
|
||||
<Group gap={2}>
|
||||
<User size={14} className="text-[var(--ui-color-intent-critical)]" />
|
||||
<Icon icon={User} size={4} intent="critical" />
|
||||
<Text size="xs" uppercase weight="bold" variant="low">Defendant</Text>
|
||||
</Group>
|
||||
<Text weight="bold">David Chen</Text>
|
||||
@@ -86,7 +87,7 @@ export function StewardingPreview({ race, team }: StewardingPreviewProps) {
|
||||
<Panel variant="bordered" padding="md">
|
||||
<Stack gap={3}>
|
||||
<Group gap={2}>
|
||||
<Clock size={14} className="text-[var(--ui-color-text-low)]" />
|
||||
<Icon icon={Clock} size={4} intent="low" />
|
||||
<Text size="xs" uppercase weight="bold" variant="low">Session Info</Text>
|
||||
</Group>
|
||||
<Text weight="bold">Lap 1, 00:42.150</Text>
|
||||
@@ -97,7 +98,7 @@ export function StewardingPreview({ race, team }: StewardingPreviewProps) {
|
||||
|
||||
<Stack gap={4}>
|
||||
<Group gap={2}>
|
||||
<MessageSquare size={14} className="text-[var(--ui-color-text-low)]" />
|
||||
<Icon icon={MessageSquare} size={4} intent="low" />
|
||||
<Text size="xs" uppercase weight="bold" variant="low">Description</Text>
|
||||
</Group>
|
||||
<Panel variant="muted" padding="md">
|
||||
@@ -110,11 +111,11 @@ export function StewardingPreview({ race, team }: StewardingPreviewProps) {
|
||||
|
||||
<Group gap={3} justify="end">
|
||||
<Button variant="secondary" size="md">Dismiss</Button>
|
||||
<Button variant="primary" size="md" icon={<Gavel size={16} />}>Apply Penalty</Button>
|
||||
<Button variant="primary" size="md" icon={<Icon icon={Gavel} size={4} />}>Apply Penalty</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Panel>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Section>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user