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

29
apps/website/components/home/CtaSection.tsx
View File

@@ -9,6 +9,7 @@ import { Group } from '@/ui/Group';
import { Box } from '@/ui/Box';
import { Panel } from '@/ui/Panel';
import { Stack } from '@/ui/Stack';
import { Icon } from '@/ui/Icon';
import { Trophy } from 'lucide-react';
/**
@@ -17,23 +18,23 @@ import { Trophy } from 'lucide-react';
*/
export function CtaSection() {
return (
<Section variant="default" py={32}>
<Section variant="default" padding="lg">
<Panel variant="muted" padding="xl">
<Stack gap={12} align="center" textAlign="center">
<Box>
<Box marginBottom={6} display="flex" justifyContent="center">
<Box width="3rem" height="3rem" bg="var(--ui-color-bg-surface)" rounded="full" border={true} display="flex" alignItems="center" justifyContent="center">
<Trophy size={24} className="text-[var(--ui-color-intent-primary)]" />
</Box>
<Stack gap={6} align="center">
<Box width="3rem" height="3rem" bg="var(--ui-color-bg-surface)" rounded="full" border={true} display="flex" alignItems="center" justifyContent="center">
<Icon icon={Trophy} size={6} intent="primary" />
</Box>
<Heading level={2} weight="bold" marginBottom={4}>
Ready to elevate your league?
</Heading>
<Text variant="med" size="lg" maxWidth="36rem" mx="auto">
Join the growing ecosystem of professional sim racing leagues.
Start for free and scale as your community grows.
</Text>
</Box>
<Stack gap={4}>
<Heading level={2} weight="bold">
Ready to elevate your league?
</Heading>
<Text variant="med" size="lg" maxWidth="36rem">
Join the growing ecosystem of professional sim racing leagues.
Start for free and scale as your community grows.
</Text>
</Stack>
</Stack>
<Group gap={6} justify="center">
<Button variant="primary" size="lg">

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>
);
}

9
apps/website/components/home/MigrationSection.tsx
View File

@@ -8,6 +8,7 @@ import { Button } from '@/ui/Button';
import { Stack } from '@/ui/Stack';
import { Group } from '@/ui/Group';
import { Panel } from '@/ui/Panel';
import { Icon } from '@/ui/Icon';
import { ArrowRight, Database } from 'lucide-react';
import { routes } from '@/lib/routing/RouteConfig';
@@ -16,13 +17,13 @@ import { routes } from '@/lib/routing/RouteConfig';
*/
export function MigrationSection() {
return (
<Section variant="default" py={32}>
<Section variant="default" padding="lg">
<Panel variant="bordered" padding="xl">
<Group justify="between" align="center" gap={12} wrap>
<Stack gap={6} flex={1} minWidth="20rem">
<Group gap={3}>
<Database size={20} className="text-[var(--ui-color-intent-primary)]" />
<Text variant="primary" weight="bold" uppercase size="xs" letterSpacing="0.1em">League Migration</Text>
<Icon icon={Database} size={5} intent="primary" />
<Text variant="primary" weight="bold" uppercase size="xs">League Migration</Text>
</Group>
<Heading level={2} weight="bold">Moving from Sheets or Discord?</Heading>
<Text variant="med" size="lg">
@@ -36,7 +37,7 @@ export function MigrationSection() {
href={routes.league.migration}
variant="primary"
size="lg"
icon={<ArrowRight size={18} />}
icon={<Icon icon={ArrowRight} size={4} />}
>
Start Migration
</Button>

23
apps/website/components/home/StewardingPreview.tsx
View File

@@ -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>
);
}

24
apps/website/components/home/ValuePillars.tsx
View File

@@ -31,19 +31,17 @@ export function ValuePillars() {
];
return (
<Section variant="default" py={32}>
<Box>
<FeatureGrid columns={{ base: 1, md: 3 }} gap={16}>
{pillars.map((pillar) => (
<FeatureItem
key={pillar.title}
title={pillar.title}
description={pillar.description}
icon={pillar.icon}
/>
))}
</FeatureGrid>
</Box>
<Section variant="default" padding="lg">
<FeatureGrid columns={{ base: 1, md: 3 }} gap={16}>
{pillars.map((pillar) => (
<FeatureItem
key={pillar.title}
title={pillar.title}
description={pillar.description}
icon={pillar.icon}
/>
))}
</FeatureGrid>
</Section>
);
}