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 23:24:30 +01:00
parent aeaa43f4d3
commit 182056a57b
487 changed files with 1783 additions and 2170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,7 @@
'use client';
import { Text } from '@/ui/Text';
import { Stack } from '@/ui/primitives/Stack';
import { Stack } from '@/ui/Stack';
interface HomeFeatureDescriptionProps {
lead: string;

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

@@ -3,8 +3,8 @@
import React from 'react';
import { Panel } from '@/ui/Panel';
import { Glow } from '@/ui/Glow';
import { Stack } from '@/ui/primitives/Stack';
import { Grid } from '@/ui/primitives/Grid';
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';
@@ -19,7 +19,6 @@ interface HomeFeatureSectionProps {
/**
* HomeFeatureSection - A semantic section highlighting a feature.
* Refactored to use semantic HTML and Tailwind.
*/
export function HomeFeatureSection({
heading,
@@ -28,18 +27,6 @@ export function HomeFeatureSection({
layout,
accentColor = 'primary',
}: HomeFeatureSectionProps) {
const accentBorderColor = {
primary: 'border-primary-accent/40',
aqua: 'border-telemetry-aqua/40',
amber: 'border-warning-amber/40',
}[accentColor];
const accentBgColor = {
primary: 'primary-accent',
aqua: 'telemetry-aqua',
amber: 'warning-amber',
}[accentColor];
const glowColor = ({
primary: 'primary',
aqua: 'aqua',
@@ -47,7 +34,7 @@ export function HomeFeatureSection({
}[accentColor] || 'primary') as 'primary' | 'aqua' | 'amber' | 'purple';
return (
<Section variant="dark" py={24} borderBottom borderColor="border-gray" overflow="hidden" position="relative">
<Section variant="dark" padding="lg">
<Glow
color={glowColor}
size="lg"
@@ -56,31 +43,25 @@ export function HomeFeatureSection({
/>
<Container>
<Grid cols={1} lgCols={2} gap={12} alignItems="center">
<Grid cols={{ base: 1, lg: 2 }} gap={12}>
{/* Text Content */}
<Stack gap={8} order={{ lg: layout === 'text-right' ? 2 : 1 }}>
<Stack gap={8}>
<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 level={2} weight="bold">
{heading}
</Heading>
</Stack>
<Stack color="text-gray-500" borderLeft borderStyle="solid" borderColor="border-gray/20" pl={6}>
<Stack>
{description}
</Stack>
</Stack>
{/* Mockup Panel */}
<Stack order={{ lg: layout === 'text-right' ? 1 : 2 }}>
<Panel padding={1} variant="dark" border={true} position="relative" group overflow="hidden">
<Stack bg="graphite-black" minHeight="300px" align="center" justify="center">
{mockup}
</Stack>
{/* Decorative corner accents */}
<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>
</Stack>
<Panel variant="dark">
<Stack align="center" justify="center">
{mockup}
</Stack>
</Panel>
</Grid>
</Container>
</Section>

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

@@ -8,8 +8,8 @@ import { DiscordIcon } from '@/ui/icons/DiscordIcon';
import { Code, Lightbulb, LucideIcon, MessageSquare, Users } from 'lucide-react';
import { Heading } from '@/ui/Heading';
import { Text } from '@/ui/Text';
import { Stack } from '@/ui/primitives/Stack';
import { Grid } from '@/ui/primitives/Grid';
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';
@@ -18,71 +18,59 @@ export function HomeFooterCTA() {
const discordUrl = process.env.NEXT_PUBLIC_DISCORD_URL || '#';
return (
<Section variant="dark" py={32} borderBottom borderColor="border-gray/50" overflow="hidden" position="relative">
<Section variant="dark" padding="lg">
<Glow color="primary" size="xl" position="center" opacity={0.05} />
<Container>
<Card position="relative" overflow="hidden" variant="outline" p={{ base: 8, md: 12 }} className="bg-panel-gray/40">
{/* Discord brand accent */}
<Stack position="absolute" top={0} left={0} right={0} h="1" bg="primary-accent">{null}</Stack>
<Stack align="center" gap={12} center>
<Card variant="outline">
<Stack align="center" gap={12}>
{/* Header */}
<Stack align="center" gap={6}>
<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} />
<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>
<DiscordIcon size={40} />
<Stack gap={4} align="center">
<Heading level={2} weight="bold" color="text-white" fontSize={{ base: '2xl', md: '4xl' }} letterSpacing="tight">
<Heading level={2} weight="bold" align="center">
Join the Grid on Discord
</Heading>
<Stack w="16" h="1" bg="primary-accent">{null}</Stack>
</Stack>
</Stack>
{/* Personal message */}
<Stack maxWidth="2xl" mx="auto" align="center">
<Stack gap={6}>
<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" 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>
<Stack align="center" gap={6}>
<Text size="lg" variant="high" weight="medium" align="center">
GridPilot is a <Text as="span" variant="high" weight="bold">solo developer project</Text> built for the community.
</Text>
<Text size="base" variant="low" align="center">
We are in early alpha. Join us to help shape the future of motorsport infrastructure. Your feedback directly influences the roadmap.
</Text>
</Stack>
{/* Benefits grid */}
<Stack maxWidth="4xl" mx="auto" fullWidth>
<Grid cols={1} mdCols={2} gap={6}>
<BenefitItem
icon={MessageSquare}
title="Share your pain points"
description="Tell us what frustrates you about league racing today."
/>
<BenefitItem
icon={Lightbulb}
title="Shape the product"
description="Your ideas directly influence our roadmap."
/>
<BenefitItem
icon={Users}
title="Connect with racers"
description="Join a community of like-minded competitive drivers."
/>
<BenefitItem
icon={Code}
title="Early Access"
description="Test new features before they go public."
/>
</Grid>
</Stack>
<Grid cols={{ base: 1, md: 2 }} gap={6}>
<BenefitItem
icon={MessageSquare}
title="Share your pain points"
description="Tell us what frustrates you about league racing today."
/>
<BenefitItem
icon={Lightbulb}
title="Shape the product"
description="Your ideas directly influence our roadmap."
/>
<BenefitItem
icon={Users}
title="Connect with racers"
description="Join a community of like-minded competitive drivers."
/>
<BenefitItem
icon={Code}
title="Early Access"
description="Test new features before they go public."
/>
</Grid>
{/* CTA Button */}
<Stack gap={6} pt={4} align="center">
<Stack gap={6} align="center">
<Button
as="a"
href={discordUrl}
@@ -90,19 +78,14 @@ export function HomeFooterCTA() {
rel="noopener noreferrer"
variant="primary"
size="lg"
px={16}
py={4}
h="auto"
icon={<DiscordIcon size={24} />}
>
Join Discord
</Button>
<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>
</Stack>
<Text size="xs" variant="primary" weight="bold" font="mono" uppercase>
Early Alpha Access Available
</Text>
</Stack>
</Stack>
</Card>
@@ -113,14 +96,14 @@ export function HomeFooterCTA() {
function BenefitItem({ icon, title, description }: { icon: LucideIcon, title: string, description: string }) {
return (
<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" />
<Card variant="dark">
<Stack align="start" gap={5}>
<Icon icon={icon} size={5} intent="primary" />
<Stack gap={2}>
<Text size="base" weight="bold" variant="high">{title}</Text>
<Text size="sm" variant="low">{description}</Text>
</Stack>
</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>
</Stack>
</Card>
);
}

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

@@ -5,7 +5,9 @@ import { Container } from '@/ui/Container';
import { Glow } from '@/ui/Glow';
import { Heading } from '@/ui/Heading';
import { Text } from '@/ui/Text';
import { Stack } from '@/ui/primitives/Stack';
import { Stack } from '@/ui/Stack';
import { Section } from '@/ui/Section';
import { ButtonGroup } from '@/ui/ButtonGroup';
interface HomeHeaderProps {
title: string;
@@ -23,7 +25,6 @@ interface HomeHeaderProps {
/**
* HomeHeader - Semantic hero section for the landing page.
* Follows "Precision Racing Minimal" theme.
*/
export function HomeHeader({
title,
@@ -33,43 +34,29 @@ export function HomeHeader({
secondaryAction,
}: HomeHeaderProps) {
return (
<Stack as="header" position="relative" overflow="hidden" bg="graphite-black" py={{ base: 24, lg: 32 }} borderBottom borderColor="border-gray">
<Section variant="dark" padding="lg">
<Glow color="primary" size="xl" position="top-right" opacity={0.1} />
<Container>
<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>
</Stack>
<Stack gap={8}>
<Text size="xs" weight="bold" uppercase variant="primary">
{subtitle}
</Text>
<Heading
level={1}
fontSize={{ base: '5xl', md: '7xl', lg: '8xl' }}
weight="bold"
color="text-white"
letterSpacing="tighter"
lineHeight="0.9"
mb={8}
>
<Heading level={1} weight="bold">
{title}
</Heading>
<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>
</Stack>
<Text size="lg" variant="low">
{description}
</Text>
<Stack direction={{ base: 'col', md: 'row' }} gap={4}>
<ButtonGroup gap={4}>
<Button
as="a"
href={primaryAction.href}
variant="primary"
h="14"
px={12}
fontSize="xs"
size="lg"
>
{primaryAction.label}
</Button>
@@ -77,18 +64,13 @@ export function HomeHeader({
as="a"
href={secondaryAction.href}
variant="secondary"
h="14"
px={12}
fontSize="xs"
bg="transparent"
borderColor="border-gray"
hoverBorderColor="primary-accent/50"
size="lg"
>
{secondaryAction.label}
</Button>
</Stack>
</ButtonGroup>
</Stack>
</Container>
</Stack>
</Section>
);
}

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

@@ -4,58 +4,40 @@ import React from 'react';
import { MetricCard } from '@/ui/MetricCard';
import { Activity, Users, Trophy, Calendar } from 'lucide-react';
import { Container } from '@/ui/Container';
import { Grid } from '@/ui/primitives/Grid';
import { Stack } from '@/ui/primitives/Stack';
import { Grid } from '@/ui/Grid';
/**
* HomeStatsStrip - A thin strip showing some status or quick info.
* Part of the "Telemetry-workspace" feel.
* Refactored to use semantic HTML and Tailwind.
*/
export function HomeStatsStrip() {
return (
<Stack bg="graphite-black" borderBottom borderTop borderColor="border-gray/30" py={0}>
<Container>
<Grid cols={2} mdCols={4} gap={0} borderLeft borderRight borderColor="border-gray/30">
<MetricCard
label="Active Drivers"
value="1,284"
icon={Users}
trend={{ value: 12, isPositive: true }}
border={false}
bg="transparent"
/>
<Stack borderLeft borderColor="border-gray/30">
<MetricCard
label="Live Sessions"
value="42"
icon={Activity}
color="text-telemetry-aqua"
border={false}
bg="transparent"
/>
</Stack>
<Stack borderLeft borderColor="border-gray/30">
<MetricCard
label="Total Races"
value="15,402"
icon={Trophy}
color="text-warning-amber"
border={false}
bg="transparent"
/>
</Stack>
<Stack borderLeft borderColor="border-gray/30">
<MetricCard
label="Next Event"
value="14:00"
icon={Calendar}
border={false}
bg="transparent"
/>
</Stack>
</Grid>
</Container>
</Stack>
<Container>
<Grid cols={{ base: 2, md: 4 }} gap={4}>
<MetricCard
label="Active Drivers"
value="1,284"
icon={Users}
trend={{ value: 12, isPositive: true }}
/>
<MetricCard
label="Live Sessions"
value="42"
icon={Activity}
intent="telemetry"
/>
<MetricCard
label="Total Races"
value="15,402"
icon={Trophy}
intent="warning"
/>
<MetricCard
label="Next Event"
value="14:00"
icon={Calendar}
/>
</Grid>
</Container>
);
}

2
apps/website/components/home/LeagueSummaryPanel.tsx
View File

@@ -2,9 +2,9 @@
import { LeagueCard } from '@/components/leagues/LeagueCard';
import { routes } from '@/lib/routing/RouteConfig';
import { Box } from '@/ui/Box';
import { Heading } from '@/ui/Heading';
import { Link } from '@/ui/Link';
import { Box } from '@/ui/primitives/Box';
interface League {
id: string;

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

@@ -4,13 +4,11 @@ import { routes } from '@/lib/routing/RouteConfig';
import { Button } from '@/ui/Button';
import { Container } from '@/ui/Container';
import { Icon } from '@/ui/Icon';
import { Text } from '@/ui/Text';
import { Stack } from '@/ui/primitives/Stack';
import { ButtonGroup } from '@/ui/ButtonGroup';
import { Plus, Search, Shield, Users } from 'lucide-react';
/**
* QuickLinksPanel - Semantic quick actions bar.
* Replaces HomeQuickActions with a more semantic implementation.
*/
export function QuickLinksPanel() {
const links = [
@@ -21,34 +19,20 @@ export function QuickLinksPanel() {
];
return (
<Stack as="nav" bg="panel-gray/50" py={8} borderBottom borderColor="border-gray/30">
<Container>
<Stack direction="row" wrap justify="center" gap={4}>
{links.map((link) => (
<Button
key={link.label}
as="a"
href={link.href}
variant="secondary"
px={6}
bg="graphite-black"
borderColor="border-gray/50"
className="flex items-center gap-3 transition-all hover:border-primary-accent/50 group"
>
<Icon
icon={link.icon}
size={4}
color="text-gray-500"
groupHoverTextColor="primary-accent"
transition
/>
<Text size="xs" weight="bold" uppercase letterSpacing="widest">
{link.label}
</Text>
</Button>
))}
</Stack>
</Container>
</Stack>
<Container>
<ButtonGroup alignment="center" gap={4} marginTop={8}>
{links.map((link) => (
<Button
key={link.label}
as="a"
href={link.href}
variant="secondary"
icon={<Icon icon={link.icon} size={4} intent="low" />}
>
{link.label}
</Button>
))}
</ButtonGroup>
</Container>
);
}

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

@@ -5,7 +5,7 @@ import { routes } from '@/lib/routing/RouteConfig';
import { Heading } from '@/ui/Heading';
import { Link } from '@/ui/Link';
import { Panel } from '@/ui/Panel';
import { Stack } from '@/ui/primitives/Stack';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
interface Race {

2
apps/website/components/home/TeamSummaryPanel.tsx
View File

@@ -2,9 +2,9 @@
import { TeamCard } from '@/components/teams/TeamCard';
import { routes } from '@/lib/routing/RouteConfig';
import { Box } from '@/ui/Box';
import { Heading } from '@/ui/Heading';
import { Link } from '@/ui/Link';
import { Box } from '@/ui/primitives/Box';
interface Team {
id: string;