152 lines
6.9 KiB
TypeScript
152 lines
6.9 KiB
TypeScript
'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 { Group } from '@/ui/Group';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Grid } from '@/ui/Grid';
|
|
import { Box } from '@/ui/Box';
|
|
import { StatusBadge } from '@/ui/StatusBadge';
|
|
import { Trophy, Globe, Settings2, Palette, ShieldCheck, BarChart3 } from 'lucide-react';
|
|
|
|
/**
|
|
* LeagueIdentityPreview - Radically redesigned for "Modern Precision" and "Dieter Rams" style.
|
|
* Focuses on the professional identity and deep customization options for admins.
|
|
*/
|
|
export function LeagueIdentityPreview() {
|
|
return (
|
|
<Section variant="default" py={32}>
|
|
<Box>
|
|
<Box marginBottom={24} maxWidth="42rem">
|
|
<Heading level={2} weight="bold" marginBottom={8}>Your Brand. Your Rules.</Heading>
|
|
<Text variant="med" size="lg" leading="relaxed">
|
|
GridPilot is designed to be invisible where it matters, letting your league's identity take center stage.
|
|
Professional tools that respect your community's unique culture.
|
|
</Text>
|
|
</Box>
|
|
|
|
<Grid cols={{ base: 1, md: 2 }} gap={20}>
|
|
{/* Your Brand - Visual Identity */}
|
|
<Box>
|
|
<Panel variant="muted" padding="lg">
|
|
<Stack gap={8}>
|
|
<Stack gap={2}>
|
|
<Group gap={2}>
|
|
<Palette size={16} className="text-[var(--ui-color-intent-primary)]" />
|
|
<Text variant="primary" weight="bold" uppercase size="xs" letterSpacing="0.1em">Your Brand</Text>
|
|
</Group>
|
|
<Heading level={3} weight="bold">Professional Presence</Heading>
|
|
<Text variant="low" size="sm">Build prestige with a dedicated home for your competition.</Text>
|
|
</Stack>
|
|
|
|
<Stack gap={4}>
|
|
<Panel variant="bordered" padding="md">
|
|
<Group gap={4}>
|
|
<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>
|
|
</Stack>
|
|
</Group>
|
|
</Panel>
|
|
<Panel variant="bordered" padding="md">
|
|
<Group gap={4}>
|
|
<Trophy size={20} className="text-[var(--ui-color-text-low)]" />
|
|
<Stack gap={1}>
|
|
<Text weight="bold">Live Standings</Text>
|
|
<Text size="xs" variant="low">Real-time updates across all car classes.</Text>
|
|
</Stack>
|
|
</Group>
|
|
</Panel>
|
|
<Panel variant="bordered" padding="md">
|
|
<Group gap={4}>
|
|
<BarChart3 size={20} className="text-[var(--ui-color-text-low)]" />
|
|
<Stack gap={1}>
|
|
<Text weight="bold">Driver Roster</Text>
|
|
<Text size="xs" variant="low">Detailed profiles with lifetime league stats.</Text>
|
|
</Stack>
|
|
</Group>
|
|
</Panel>
|
|
|
|
<Panel variant="elevated" padding="sm">
|
|
<Group gap={3}>
|
|
<Box width="2.5rem" height="2.5rem" bg="var(--ui-color-bg-surface)" rounded="sm" border={true} display="flex" alignItems="center" justifyContent="center">
|
|
<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>
|
|
</Stack>
|
|
</Group>
|
|
</Panel>
|
|
</Stack>
|
|
</Stack>
|
|
</Panel>
|
|
</Box>
|
|
|
|
{/* Your Rules - Deep Customization */}
|
|
<Box>
|
|
<Panel variant="muted" padding="lg">
|
|
<Stack gap={8}>
|
|
<Stack gap={2}>
|
|
<Group gap={2}>
|
|
<Settings2 size={16} className="text-[var(--ui-color-intent-primary)]" />
|
|
<Text variant="primary" weight="bold" uppercase size="xs" letterSpacing="0.1em">Your Rules</Text>
|
|
</Group>
|
|
<Heading level={3} weight="bold">Absolute Control</Heading>
|
|
<Text variant="low" size="sm">The platform adapts to your league, not the other way around.</Text>
|
|
</Stack>
|
|
|
|
<Stack gap={4}>
|
|
<Panel variant="bordered" padding="md">
|
|
<Group gap={4}>
|
|
<ShieldCheck size={20} className="text-[var(--ui-color-text-low)]" />
|
|
<Stack gap={1}>
|
|
<Text weight="bold">Flexible Points Systems</Text>
|
|
<Text size="xs" variant="low">Custom points for positions, fastest laps, and incidents.</Text>
|
|
</Stack>
|
|
</Group>
|
|
</Panel>
|
|
<Panel variant="bordered" padding="md">
|
|
<Group gap={4}>
|
|
<Settings2 size={20} className="text-[var(--ui-color-text-low)]" />
|
|
<Stack gap={1}>
|
|
<Text weight="bold">Drop Weeks & Playoffs</Text>
|
|
<Text size="xs" variant="low">Configure complex season structures with ease.</Text>
|
|
</Stack>
|
|
</Group>
|
|
</Panel>
|
|
<Panel variant="bordered" padding="md">
|
|
<Group gap={4}>
|
|
<Trophy size={20} className="text-[var(--ui-color-text-low)]" />
|
|
<Stack gap={1}>
|
|
<Text weight="bold">Multi-Class Support</Text>
|
|
<Text size="xs" variant="low">Manage GT3, GTP, and more in a single season.</Text>
|
|
</Stack>
|
|
</Group>
|
|
</Panel>
|
|
|
|
<Panel variant="elevated" padding="sm">
|
|
<Stack gap={2}>
|
|
<Text size="xs" uppercase weight="bold" variant="low">Points Configuration</Text>
|
|
<Group gap={2} wrap>
|
|
<StatusBadge variant="info">P1: 25pts</StatusBadge>
|
|
<StatusBadge variant="info">P2: 18pts</StatusBadge>
|
|
<StatusBadge variant="info">P3: 15pts</StatusBadge>
|
|
<StatusBadge variant="warning">INC: -1pt</StatusBadge>
|
|
</Group>
|
|
</Stack>
|
|
</Panel>
|
|
</Stack>
|
|
</Stack>
|
|
</Panel>
|
|
</Box>
|
|
</Grid>
|
|
</Box>
|
|
</Section>
|
|
);
|
|
}
|