website refactor
This commit is contained in:
151
apps/website/components/home/LeagueIdentityPreview.tsx
Normal file
151
apps/website/components/home/LeagueIdentityPreview.tsx
Normal file
@@ -0,0 +1,151 @@
|
||||
'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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user