mmintel/gridpilot.gg
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

website refactor

Browse Source
This commit is contained in:
Marc Mintel
2026-01-21 01:27:08 +01:00
parent 5f3712e5ab
commit d30a725fe7
44 changed files with 702 additions and 572 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
apps/website/components/home/LeagueIdentityPreview.tsx
View File

@@ -10,6 +10,7 @@ import { Stack } from '@/ui/Stack';
import { Grid } from '@/ui/Grid';
import { Box } from '@/ui/Box';
import { StatusBadge } from '@/ui/StatusBadge';
import { Icon } from '@/ui/Icon';
import { Trophy, Globe, Settings2, Palette, ShieldCheck, BarChart3 } from 'lucide-react';
interface LeagueIdentityPreviewProps {
@@ -29,15 +30,15 @@ export function LeagueIdentityPreview({ league }: LeagueIdentityPreviewProps) {
const subdomain = league ? `${league.name.toLowerCase().replace(/\s+/g, '')}.gridpilot.racing` : 'apex.gridpilot.racing';
return (
<Section variant="default" py={32}>
<Box>
<Box marginBottom={24} maxWidth="42rem">
<Heading level={2} weight="bold" marginBottom={8}>Your Brand. Your Rules.</Heading>
<Section variant="default" padding="lg">
<Stack gap={24}>
<Stack gap={8} maxWidth="42rem">
<Heading level={2} weight="bold">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>
</Stack>
<Grid cols={{ base: 1, md: 2 }} gap={20}>
{/* Your Brand - Visual Identity */}
@@ -46,8 +47,8 @@ export function LeagueIdentityPreview({ league }: LeagueIdentityPreviewProps) {
<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>
<Icon icon={Palette} size={4} intent="primary" />
<Text variant="primary" weight="bold" uppercase size="xs">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>
@@ -56,7 +57,7 @@ export function LeagueIdentityPreview({ league }: LeagueIdentityPreviewProps) {
<Stack gap={4}>
<Panel variant="bordered" padding="md">
<Group gap={4}>
<Globe size={20} className="text-[var(--ui-color-text-low)]" />
<Icon icon={Globe} size={5} intent="low" />
<Stack gap={1}>
<Text weight="bold">Custom Subdomains</Text>
<Text size="xs" variant="low">{subdomain}</Text>
@@ -65,7 +66,7 @@ export function LeagueIdentityPreview({ league }: LeagueIdentityPreviewProps) {
</Panel>
<Panel variant="bordered" padding="md">
<Group gap={4}>
<Trophy size={20} className="text-[var(--ui-color-text-low)]" />
<Icon icon={Trophy} size={5} intent="low" />
<Stack gap={1}>
<Text weight="bold">Live Standings</Text>
<Text size="xs" variant="low">Real-time updates across all car classes.</Text>
@@ -74,7 +75,7 @@ export function LeagueIdentityPreview({ league }: LeagueIdentityPreviewProps) {
</Panel>
<Panel variant="bordered" padding="md">
<Group gap={4}>
<BarChart3 size={20} className="text-[var(--ui-color-text-low)]" />
<Icon icon={BarChart3} size={5} intent="low" />
<Stack gap={1}>
<Text weight="bold">Driver Roster</Text>
<Text size="xs" variant="low">Detailed profiles with lifetime league stats.</Text>
@@ -85,7 +86,7 @@ export function LeagueIdentityPreview({ league }: LeagueIdentityPreviewProps) {
<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)]" />
<Icon icon={Trophy} size={5} intent="low" />
</Box>
<Stack gap={0}>
<Text weight="bold" size="sm">{leagueName}</Text>
@@ -104,8 +105,8 @@ export function LeagueIdentityPreview({ league }: LeagueIdentityPreviewProps) {
<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>
<Icon icon={Settings2} size={4} intent="primary" />
<Text variant="primary" weight="bold" uppercase size="xs">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>
@@ -114,7 +115,7 @@ export function LeagueIdentityPreview({ league }: LeagueIdentityPreviewProps) {
<Stack gap={4}>
<Panel variant="bordered" padding="md">
<Group gap={4}>
<ShieldCheck size={20} className="text-[var(--ui-color-text-low)]" />
<Icon icon={ShieldCheck} size={5} intent="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>
@@ -123,7 +124,7 @@ export function LeagueIdentityPreview({ league }: LeagueIdentityPreviewProps) {
</Panel>
<Panel variant="bordered" padding="md">
<Group gap={4}>
<Settings2 size={20} className="text-[var(--ui-color-text-low)]" />
<Icon icon={Settings2} size={5} intent="low" />
<Stack gap={1}>
<Text weight="bold">Drop Weeks & Playoffs</Text>
<Text size="xs" variant="low">Configure complex season structures with ease.</Text>
@@ -132,7 +133,7 @@ export function LeagueIdentityPreview({ league }: LeagueIdentityPreviewProps) {
</Panel>
<Panel variant="bordered" padding="md">
<Group gap={4}>
<Trophy size={20} className="text-[var(--ui-color-text-low)]" />
<Icon icon={Trophy} size={5} intent="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>
@@ -156,7 +157,7 @@ export function LeagueIdentityPreview({ league }: LeagueIdentityPreviewProps) {
</Panel>
</Box>
</Grid>
</Box>
</Stack>
</Section>
);
}