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-18 16:18:18 +01:00
parent 0b301feb61
commit 13567d51af
329 changed files with 4701 additions and 4750 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
apps/website/components/home/HomeFeatureDescription.tsx
View File

@@ -1,7 +1,6 @@
'use client';
import React from 'react';
import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';
import { Stack } from '@/ui/Stack';
@@ -41,20 +40,20 @@ export function HomeFeatureDescription({
<Text size="lg" color="text-gray-400" weight="medium" leading="relaxed">
{lead}
</Text>
<Box as="ul" display="flex" flexDirection="col" gap={2}>
<Stack as="ul" gap={2}>
{items.map((item, index) => (
<Box as="li" key={index} display="flex" alignItems="start" gap={2}>
<Stack as="li" key={index} direction="row" align="start" gap={2}>
<Text color="text-primary-accent">•</Text>
<Text size="sm" color="text-gray-500">{item}</Text>
</Box>
</Stack>
))}
</Box>
</Stack>
{quote && (
<Box borderLeft borderStyle="solid" borderWidth="2px" borderColor={borderColor} pl={4} py={1} bg={bgColor}>
<Stack borderLeft borderStyle="solid" borderWidth="2px" borderColor={borderColor} pl={4} py={1} bg={bgColor}>
<Text color="text-gray-600" font="mono" size="xs" uppercase letterSpacing="widest" leading="relaxed">
{quote}
</Text>
</Box>
</Stack>
)}
</Stack>
);

39
apps/website/components/home/HomeFeatureSection.tsx
View File

@@ -3,7 +3,8 @@
import React from 'react';
import { Panel } from '@/ui/Panel';
import { Glow } from '@/ui/Glow';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Grid } from '@/ui/Grid';
import { Container } from '@/ui/Container';
import { Heading } from '@/ui/Heading';
import { Section } from '@/ui/Section';
@@ -28,9 +29,9 @@ export function HomeFeatureSection({
accentColor = 'primary',
}: HomeFeatureSectionProps) {
const accentBorderColor = {
primary: 'primary-accent/40',
aqua: 'telemetry-aqua/40',
amber: 'warning-amber/40',
primary: 'border-primary-accent/40',
aqua: 'border-telemetry-aqua/40',
amber: 'border-warning-amber/40',
}[accentColor];
const accentBgColor = {
@@ -55,32 +56,32 @@ export function HomeFeatureSection({
/>
<Container>
<Box display="grid" gridCols={{ base: 1, lg: 2 }} gap={{ base: 12, lg: 20 }} alignItems="center">
<Grid cols={1} lgCols={2} gap={12} alignItems="center">
{/* Text Content */}
<Box display="flex" flexDirection="col" gap={8} order={{ lg: layout === 'text-right' ? 2 : 1 }}>
<Box display="flex" flexDirection="col" gap={4}>
<Box w="12" h="1" bg={accentBgColor} />
<Stack gap={8} order={{ lg: layout === 'text-right' ? 2 : 1 }}>
<Stack gap={4}>
<Stack w="12" h="1" bg={accentBgColor}>{null}</Stack>
<Heading level={2} fontSize={{ base: '3xl', md: '5xl' }} weight="bold" letterSpacing="tighter" lineHeight="none" color="text-white">
{heading}
</Heading>
</Box>
<Box color="text-gray-500" borderLeft borderStyle="solid" borderColor="border-gray/20" pl={6}>
</Stack>
<Stack color="text-gray-500" borderLeft borderStyle="solid" borderColor="border-gray/20" pl={6}>
{description}
</Box>
</Box>
</Stack>
</Stack>
{/* Mockup Panel */}
<Box order={{ lg: layout === 'text-right' ? 1 : 2 }}>
<Stack order={{ lg: layout === 'text-right' ? 1 : 2 }}>
<Panel padding={1} variant="dark" border={true} position="relative" group overflow="hidden">
<Box bg="graphite-black" minHeight="300px" display="flex" alignItems="center" justifyContent="center">
<Stack bg="graphite-black" minHeight="300px" align="center" justify="center">
{mockup}
</Box>
</Stack>
{/* Decorative corner accents */}
<Box position="absolute" top="0" left="0" w="4" h="4" borderTop borderLeft borderColor={accentBorderColor} opacity={0.4} />
<Box position="absolute" bottom="0" right="0" w="4" h="4" borderBottom borderRight borderColor={accentBorderColor} opacity={0.4} />
<Stack position="absolute" top="0" left="0" w="4" h="4" borderTop borderLeft borderColor={accentBorderColor} opacity={0.4}>{null}</Stack>
<Stack position="absolute" bottom="0" right="0" w="4" h="4" borderBottom borderRight borderColor={accentBorderColor} opacity={0.4}>{null}</Stack>
</Panel>
</Box>
</Box>
</Stack>
</Grid>
</Container>
</Section>
);

46
apps/website/components/home/HomeFooterCTA.tsx
View File

@@ -6,13 +6,13 @@ import { Glow } from '@/ui/Glow';
import { Icon } from '@/ui/Icon';
import { DiscordIcon } from '@/ui/icons/DiscordIcon';
import { Code, Lightbulb, LucideIcon, MessageSquare, Users } from 'lucide-react';
import { Box } from '@/ui/Box';
import { Container } from '@/ui/Container';
import { Heading } from '@/ui/Heading';
import { Text } from '@/ui/Text';
import { Section } from '@/ui/Section';
import { Stack } from '@/ui/Stack';
import { Grid } from '@/ui/Grid';
import { Card } from '@/ui/Card';
import { Section } from '@/ui/Section';
import { Container } from '@/ui/Container';
export function HomeFooterCTA() {
const discordUrl = process.env.NEXT_PUBLIC_DISCORD_URL || '#';
@@ -22,41 +22,41 @@ export function HomeFooterCTA() {
<Glow color="primary" size="xl" position="center" opacity={0.05} />
<Container>
<Box position="relative" overflow="hidden" bg="panel-gray/40" border borderColor="border-gray" p={{ base: 8, md: 12 }}>
<Card position="relative" overflow="hidden" variant="outline" p={{ base: 8, md: 12 }} className="bg-panel-gray/40">
{/* Discord brand accent */}
<Box position="absolute" top={0} left={0} right={0} h="1" bg="primary-accent" />
<Stack position="absolute" top={0} left={0} right={0} h="1" bg="primary-accent">{null}</Stack>
<Stack align="center" gap={12} center>
{/* Header */}
<Stack align="center" gap={6}>
<Box position="relative" display="flex" alignItems="center" justifyContent="center" w={{ base: 16, md: 20 }} h={{ base: 16, md: 20 }} bg="primary-accent/10" border borderColor="primary-accent/30">
<Stack position="relative" align="center" justify="center" w={{ base: '16', md: '20' }} h={{ base: '16', md: '20' }} bg="primary-accent/10" border borderColor="primary-accent/30">
<DiscordIcon color="text-primary-accent" size={40} />
<Box position="absolute" top="-1px" left="-1px" w="2" h="2" borderTop borderLeft borderColor="primary-accent" />
<Box position="absolute" bottom="-1px" right="-1px" w="2" h="2" borderBottom borderRight borderColor="primary-accent" />
</Box>
<Stack position="absolute" top="-1px" left="-1px" w="2" h="2" borderTop borderLeft borderColor="primary-accent">{null}</Stack>
<Stack position="absolute" bottom="-1px" right="-1px" w="2" h="2" borderBottom borderRight borderColor="primary-accent">{null}</Stack>
</Stack>
<Stack gap={4} align="center">
<Heading level={2} weight="bold" color="text-white" fontSize={{ base: '2xl', md: '4xl' }} letterSpacing="tight">
Join the Grid on Discord
</Heading>
<Box w="16" h="1" bg="primary-accent" />
<Stack w="16" h="1" bg="primary-accent">{null}</Stack>
</Stack>
</Stack>
{/* Personal message */}
<Box maxWidth="2xl" mx="auto" textAlign="center">
<Stack maxWidth="2xl" mx="auto" align="center">
<Stack gap={6}>
<Text size="lg" color="text-gray-300" weight="medium" leading="relaxed">
<Text size="lg" color="text-gray-300" weight="medium" leading="relaxed" textAlign="center">
GridPilot is a <Text as="span" color="text-white" weight="bold">solo developer project</Text> built for the community.
</Text>
<Text size="base" color="text-gray-400" weight="normal" leading="relaxed">
<Text size="base" color="text-gray-400" weight="normal" leading="relaxed" textAlign="center">
We are in early alpha. Join us to help shape the future of motorsport infrastructure. Your feedback directly influences the roadmap.
</Text>
</Stack>
</Box>
</Stack>
{/* Benefits grid */}
<Box maxWidth="4xl" mx="auto" fullWidth>
<Stack maxWidth="4xl" mx="auto" fullWidth>
<Grid cols={1} mdCols={2} gap={6}>
<BenefitItem
icon={MessageSquare}
@@ -79,7 +79,7 @@ export function HomeFooterCTA() {
description="Test new features before they go public."
/>
</Grid>
</Box>
</Stack>
{/* CTA Button */}
<Stack gap={6} pt={4} align="center">
@@ -98,14 +98,14 @@ export function HomeFooterCTA() {
Join Discord
</Button>
<Box border borderStyle="dashed" borderColor="primary-accent/50" px={4} py={1}>
<Stack border borderStyle="dashed" borderColor="primary-accent/50" px={4} py={1}>
<Text size="xs" color="text-primary-accent" weight="bold" font="mono" uppercase letterSpacing="widest">
Early Alpha Access Available
</Text>
</Box>
</Stack>
</Stack>
</Stack>
</Box>
</Card>
</Container>
</Section>
);
@@ -113,14 +113,14 @@ export function HomeFooterCTA() {
function BenefitItem({ icon, title, description }: { icon: LucideIcon, title: string, description: string }) {
return (
<Box display="flex" alignItems="start" gap={5} p={6} bg="panel-gray/20" border borderColor="border-gray" hoverBorderColor="primary-accent/30" transition group>
<Box display="flex" alignItems="center" justifyContent="center" flexShrink={0} w="10" h="10" bg="primary-accent/5" border borderColor="border-gray/50" groupHoverBorderColor="primary-accent/30" transition>
<Stack direction="row" align="start" gap={5} p={6} bg="panel-gray/20" border borderColor="border-gray" className="transition-all hover:border-primary-accent/30 group">
<Stack align="center" justify="center" flexShrink={0} w="10" h="10" bg="primary-accent/5" border borderColor="border-gray/50" className="transition-all group-hover:border-primary-accent/30">
<Icon icon={icon} size={5} color="text-primary-accent" />
</Box>
</Stack>
<Stack gap={2}>
<Text size="base" weight="bold" color="text-white" letterSpacing="wide">{title}</Text>
<Text size="sm" color="text-gray-400" leading="relaxed">{description}</Text>
</Stack>
</Box>
</Stack>
);
}

22
apps/website/components/home/HomeHeader.tsx
View File

@@ -3,10 +3,10 @@
import React from 'react';
import { Button } from '@/ui/Button';
import { Glow } from '@/ui/Glow';
import { Box } from '@/ui/Box';
import { Container } from '@/ui/Container';
import { Heading } from '@/ui/Heading';
import { Text } from '@/ui/Text';
import { Stack } from '@/ui/Stack';
interface HomeHeaderProps {
title: string;
@@ -34,16 +34,16 @@ export function HomeHeader({
secondaryAction,
}: HomeHeaderProps) {
return (
<Box as="header" position="relative" overflow="hidden" bg="graphite-black" py={{ base: 24, lg: 32 }} borderBottom borderColor="border-gray">
<Stack as="header" position="relative" overflow="hidden" bg="graphite-black" py={{ base: 24, lg: 32 }} borderBottom borderColor="border-gray">
<Glow color="primary" size="xl" position="top-right" opacity={0.1} />
<Container>
<Box maxWidth="4xl">
<Box display="flex" alignItems="center" gap={3} borderLeft borderStyle="solid" borderWidth="2px" borderColor="primary-accent" bg="primary-accent/5" px={4} py={1} mb={8}>
<Stack maxWidth="4xl" fullWidth>
<Stack direction="row" align="center" gap={3} borderLeft borderStyle="solid" borderWidth="2px" borderColor="primary-accent" bg="primary-accent/5" px={4} py={1} mb={8}>
<Text size="xs" weight="bold" uppercase letterSpacing="0.3em" color="text-primary-accent">
{subtitle}
</Text>
</Box>
</Stack>
<Heading
level={1}
@@ -57,13 +57,13 @@ export function HomeHeader({
{title}
</Heading>
<Box borderLeft borderStyle="solid" borderColor="border-gray" pl={8} mb={12} maxWidth="2xl">
<Stack borderLeft borderStyle="solid" borderColor="border-gray" pl={8} mb={12} maxWidth="2xl">
<Text size="lg" color="text-gray-400" leading="relaxed" opacity={0.8}>
{description}
</Text>
</Box>
</Stack>
<Box display="flex" flexDirection={{ base: 'col', sm: 'row' }} gap={4}>
<Stack direction={{ base: 'col', md: 'row' }} gap={4}>
<Button
as="a"
href={primaryAction.href}
@@ -87,9 +87,9 @@ export function HomeHeader({
>
{secondaryAction.label}
</Button>
</Box>
</Box>
</Stack>
</Stack>
</Container>
</Box>
</Stack>
);
}

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

@@ -3,8 +3,9 @@
import React from 'react';
import { MetricCard } from '@/ui/MetricCard';
import { Activity, Users, Trophy, Calendar } from 'lucide-react';
import { Box } from '@/ui/Box';
import { Container } from '@/ui/Container';
import { Grid } from '@/ui/Grid';
import { Stack } from '@/ui/Stack';
/**
* HomeStatsStrip - A thin strip showing some status or quick info.
@@ -13,9 +14,9 @@ import { Container } from '@/ui/Container';
*/
export function HomeStatsStrip() {
return (
<Box bg="graphite-black" borderBottom borderTop borderColor="border-gray/30" py={0}>
<Stack bg="graphite-black" borderBottom borderTop borderColor="border-gray/30" py={0}>
<Container>
<Box display="grid" gridCols={{ base: 2, md: 4 }} gap={0} borderLeft borderRight borderColor="border-gray/30">
<Grid cols={2} mdCols={4} gap={0} borderLeft borderRight borderColor="border-gray/30">
<MetricCard
label="Active Drivers"
value="1,284"
@@ -24,7 +25,7 @@ export function HomeStatsStrip() {
border={false}
bg="transparent"
/>
<Box borderLeft borderColor="border-gray/30">
<Stack borderLeft borderColor="border-gray/30">
<MetricCard
label="Live Sessions"
value="42"
@@ -33,8 +34,8 @@ export function HomeStatsStrip() {
border={false}
bg="transparent"
/>
</Box>
<Box borderLeft borderColor="border-gray/30">
</Stack>
<Stack borderLeft borderColor="border-gray/30">
<MetricCard
label="Total Races"
value="15,402"
@@ -43,8 +44,8 @@ export function HomeStatsStrip() {
border={false}
bg="transparent"
/>
</Box>
<Box borderLeft borderColor="border-gray/30">
</Stack>
<Stack borderLeft borderColor="border-gray/30">
<MetricCard
label="Next Event"
value="14:00"
@@ -52,9 +53,9 @@ export function HomeStatsStrip() {
border={false}
bg="transparent"
/>
</Box>
</Box>
</Stack>
</Grid>
</Container>
</Box>
</Stack>
);
}

17
apps/website/components/home/QuickLinksPanel.tsx
View File

@@ -5,9 +5,9 @@ import { Button } from '@/ui/Button';
import { Icon } from '@/ui/Icon';
import { routes } from '@/lib/routing/RouteConfig';
import { Plus, Search, Shield, Users } from 'lucide-react';
import { Box } from '@/ui/Box';
import { Container } from '@/ui/Container';
import { Text } from '@/ui/Text';
import { Stack } from '@/ui/Stack';
/**
* QuickLinksPanel - Semantic quick actions bar.
@@ -22,24 +22,19 @@ export function QuickLinksPanel() {
];
return (
<Box as="nav" bg="panel-gray/50" py={8} borderBottom borderColor="border-gray/30">
<Stack as="nav" bg="panel-gray/50" py={8} borderBottom borderColor="border-gray/30">
<Container>
<Box display="flex" flexWrap="wrap" justifyContent="center" gap={4}>
<Stack direction="row" wrap justify="center" gap={4}>
{links.map((link) => (
<Button
key={link.label}
as="a"
href={link.href}
variant="secondary"
display="flex"
alignItems="center"
gap={3}
px={6}
bg="graphite-black"
borderColor="border-gray/50"
hoverBorderColor="primary-accent/50"
transition
group
className="flex items-center gap-3 transition-all hover:border-primary-accent/50 group"
>
<Icon
icon={link.icon}
@@ -53,8 +48,8 @@ export function QuickLinksPanel() {
</Text>
</Button>
))}
</Box>
</Stack>
</Container>
</Box>
</Stack>
);
}

27
apps/website/components/home/RecentRacesPanel.tsx
View File

@@ -3,7 +3,8 @@
import React from 'react';
import { UpcomingRaceItem } from '@/components/races/UpcomingRaceItem';
import { routes } from '@/lib/routing/RouteConfig';
import { Box } from '@/ui/Box';
import { Panel } from '@/ui/Panel';
import { Stack } from '@/ui/Stack';
import { Heading } from '@/ui/Heading';
import { Link } from '@/ui/Link';
import { Text } from '@/ui/Text';
@@ -24,8 +25,8 @@ interface RecentRacesPanelProps {
*/
export function RecentRacesPanel({ races }: RecentRacesPanelProps) {
return (
<Box as="section" bg="surface-charcoal" p={6} border borderColor="border-gray" rounded="none">
<Box display="flex" alignItems="center" justifyContent="between" mb={6}>
<Panel variant="dark" padding={6}>
<Stack direction="row" align="center" justify="between" mb={6}>
<Heading level={3} fontSize="xs" weight="bold" letterSpacing="widest" color="text-white">
UPCOMING RACES
</Heading>
@@ -40,15 +41,17 @@ export function RecentRacesPanel({ races }: RecentRacesPanelProps) {
>
FULL SCHEDULE →
</Link>
</Box>
</Stack>
<Box display="flex" flexDirection="col" gap={3}>
<Stack gap={3}>
{races.length === 0 ? (
<Box py={12} border borderStyle="dashed" borderColor="border-gray/30" bg="graphite-black/50" display="flex" alignItems="center" justifyContent="center">
<Text size="xs" font="mono" uppercase letterSpacing="widest" color="text-gray-600">
No races scheduled
</Text>
</Box>
<Panel variant="muted" padding={12} border>
<Stack center>
<Text size="xs" font="mono" uppercase letterSpacing="widest" color="text-gray-600">
No races scheduled
</Text>
</Stack>
</Panel>
) : (
races.slice(0, 3).map((race) => (
<UpcomingRaceItem
@@ -61,7 +64,7 @@ export function RecentRacesPanel({ races }: RecentRacesPanelProps) {
/>
))
)}
</Box>
</Box>
</Stack>
</Panel>
);
}