website refactor
This commit is contained in:
@@ -1,23 +1,28 @@
|
||||
'use client';
|
||||
|
||||
import { AlternatingSection } from '@/components/landing/AlternatingSection';
|
||||
import React from 'react';
|
||||
import { HomeHeader } from '@/components/home/HomeHeader';
|
||||
import { HomeStatsStrip } from '@/components/home/HomeStatsStrip';
|
||||
import { QuickLinksPanel } from '@/components/home/QuickLinksPanel';
|
||||
import { HomeFeatureSection } from '@/components/home/HomeFeatureSection';
|
||||
import { RecentRacesPanel } from '@/components/home/RecentRacesPanel';
|
||||
import { LeagueSummaryPanel } from '@/components/home/LeagueSummaryPanel';
|
||||
import { TeamSummaryPanel } from '@/components/home/TeamSummaryPanel';
|
||||
import { HomeFeatureDescription } from '@/components/home/HomeFeatureDescription';
|
||||
import { FAQ } from '@/components/landing/FAQ';
|
||||
import { FeatureGrid } from '@/components/landing/FeatureGrid';
|
||||
import { LandingHero } from '@/components/landing/LandingHero';
|
||||
import { DiscoverySection } from '@/components/landing/DiscoverySection';
|
||||
import { FeatureItem, ResultItem, StepItem } from '@/ui/LandingItems';
|
||||
import { CareerProgressionMockup } from '@/components/mockups/CareerProgressionMockup';
|
||||
import { CompanionAutomationMockup } from '@/components/mockups/CompanionAutomationMockup';
|
||||
import { RaceHistoryMockup } from '@/components/mockups/RaceHistoryMockup';
|
||||
import { SimPlatformMockup } from '@/components/mockups/SimPlatformMockup';
|
||||
import { ModeGuard } from '@/components/shared/ModeGuard';
|
||||
import { Box } from '@/ui/Box';
|
||||
import { DiscordCTA } from '@/ui/DiscordCTA';
|
||||
import { HomeFooterCTA } from '@/components/home/HomeFooterCTA';
|
||||
import { Footer } from '@/ui/Footer';
|
||||
import { Stack } from '@/ui/Stack';
|
||||
import { ModeGuard } from '@/components/shared/ModeGuard';
|
||||
import { CareerProgressionMockup } from '@/components/mockups/CareerProgressionMockup';
|
||||
import { RaceHistoryMockup } from '@/components/mockups/RaceHistoryMockup';
|
||||
import { CompanionAutomationMockup } from '@/components/mockups/CompanionAutomationMockup';
|
||||
import { SimPlatformMockup } from '@/components/mockups/SimPlatformMockup';
|
||||
import { Box } from '@/ui/Box';
|
||||
import { Container } from '@/ui/Container';
|
||||
import { Heading } from '@/ui/Heading';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { TelemetryLine } from '@/ui/TelemetryLine';
|
||||
import { Glow } from '@/ui/Glow';
|
||||
import { Grid } from '@/ui/Grid';
|
||||
import { Section } from '@/ui/Section';
|
||||
|
||||
export interface HomeViewData {
|
||||
isAlpha: boolean;
|
||||
@@ -44,138 +49,135 @@ interface HomeTemplateProps {
|
||||
viewData: HomeViewData;
|
||||
}
|
||||
|
||||
/**
|
||||
* HomeTemplate - Redesigned for "Precision Racing Minimal" theme.
|
||||
* Composes semantic components instead of generic layout primitives.
|
||||
*/
|
||||
export function HomeTemplate({ viewData }: HomeTemplateProps) {
|
||||
return (
|
||||
<Box as="main" bg="graphite-black" position="relative" overflow="hidden">
|
||||
<Glow color="primary" size="xl" position="top-right" opacity={0.05} />
|
||||
|
||||
<LandingHero />
|
||||
|
||||
<TelemetryLine color="primary" height="1px" opacity={0.3} />
|
||||
<Box as="main" minHeight="screen" bg="graphite-black" color="text-white">
|
||||
{/* Hero Section */}
|
||||
<HomeHeader
|
||||
title="Modern Motorsport Infrastructure."
|
||||
subtitle="Precision Racing Infrastructure"
|
||||
description="GridPilot gives your league racing a real home. Results, standings, teams, and career progression — engineered for precision and control."
|
||||
primaryAction={{ label: 'Join the Grid', href: '#' }}
|
||||
secondaryAction={{ label: 'Explore Leagues', href: '#' }}
|
||||
/>
|
||||
|
||||
{/* Section 1: A Persistent Identity */}
|
||||
<Box position="relative" bg="graphite-black">
|
||||
<Glow color="aqua" size="lg" position="bottom-left" opacity={0.03} />
|
||||
<AlternatingSection
|
||||
heading="A Persistent Identity"
|
||||
backgroundVideo="/gameplay.mp4"
|
||||
description={
|
||||
<Stack gap={8}>
|
||||
<Text size="lg" color="text-gray-300" weight="medium" leading="relaxed">
|
||||
Your races, your seasons, your progress — finally in one place.
|
||||
</Text>
|
||||
<Box display="grid" gridCols={1} gap={3}>
|
||||
<FeatureItem text="Lifetime stats and season history across all your leagues" />
|
||||
<FeatureItem text="Track your performance, consistency, and team contributions" />
|
||||
<FeatureItem text="Your own rating that reflects real league competition" />
|
||||
</Box>
|
||||
<Box borderLeft borderStyle="solid" borderColor="primary-accent" pl={4} py={1} bg="primary-accent/5">
|
||||
<Text color="text-gray-500" font="mono" size="xs" uppercase letterSpacing="widest">
|
||||
iRacing gives you physics. GridPilot gives you a career.
|
||||
</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
}
|
||||
mockup={<CareerProgressionMockup />}
|
||||
layout="text-left"
|
||||
/>
|
||||
</Box>
|
||||
{/* Telemetry Status Strip */}
|
||||
<HomeStatsStrip />
|
||||
|
||||
<FeatureGrid />
|
||||
{/* Quick Actions Bar */}
|
||||
<QuickLinksPanel />
|
||||
|
||||
{/* Section 2: Results That Actually Stay */}
|
||||
<Box position="relative" bg="graphite-black">
|
||||
<Glow color="primary" size="lg" position="top-right" opacity={0.03} />
|
||||
<AlternatingSection
|
||||
heading="Results That Actually Stay"
|
||||
backgroundImage="/images/ff1600.jpeg"
|
||||
description={
|
||||
<Stack gap={8}>
|
||||
<Text size="lg" color="text-gray-300" weight="medium" leading="relaxed">
|
||||
Every race you run stays with you.
|
||||
</Text>
|
||||
<Box display="grid" gridCols={1} gap={3}>
|
||||
<ResultItem text="Your stats, your team, your story — all connected" color="#198CFF" />
|
||||
<ResultItem text="One race result updates your profile, team points, rating, and season history" color="#198CFF" />
|
||||
<ResultItem text="No more fragmented data across spreadsheets and forums" color="#198CFF" />
|
||||
</Box>
|
||||
<Box borderLeft borderStyle="solid" borderColor="telemetry-aqua" pl={4} py={1} bg="telemetry-aqua/5">
|
||||
<Text color="text-gray-500" font="mono" size="xs" uppercase letterSpacing="widest">
|
||||
Your racing career, finally in one place.
|
||||
</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
}
|
||||
mockup={<RaceHistoryMockup />}
|
||||
layout="text-right"
|
||||
/>
|
||||
</Box>
|
||||
{/* Feature Sections */}
|
||||
<HomeFeatureSection
|
||||
heading="A Persistent Identity"
|
||||
accentColor="primary"
|
||||
layout="text-left"
|
||||
description={
|
||||
<HomeFeatureDescription
|
||||
lead="Your races, your seasons, your progress — finally in one place."
|
||||
items={[
|
||||
'Lifetime stats and season history across all your leagues',
|
||||
'Track your performance, consistency, and team contributions',
|
||||
'Your own rating that reflects real league competition',
|
||||
]}
|
||||
quote="iRacing gives you physics. GridPilot gives you a career."
|
||||
accentColor="primary"
|
||||
/>
|
||||
}
|
||||
mockup={<CareerProgressionMockup />}
|
||||
/>
|
||||
|
||||
<TelemetryLine color="aqua" height="1px" opacity={0.2} />
|
||||
<HomeFeatureSection
|
||||
heading="Results That Actually Stay"
|
||||
accentColor="aqua"
|
||||
layout="text-right"
|
||||
description={
|
||||
<HomeFeatureDescription
|
||||
lead="Every race you run stays with you."
|
||||
items={[
|
||||
'Your stats, your team, your story — all connected',
|
||||
'One race result updates your profile, team points, rating, and season history',
|
||||
'No more fragmented data across spreadsheets and forums',
|
||||
]}
|
||||
quote="Your racing career, finally in one place."
|
||||
accentColor="aqua"
|
||||
/>
|
||||
}
|
||||
mockup={<RaceHistoryMockup />}
|
||||
/>
|
||||
|
||||
{/* Section 3: Automatic Session Creation */}
|
||||
<Box position="relative" bg="graphite-black">
|
||||
<Glow color="amber" size="lg" position="bottom-right" opacity={0.02} />
|
||||
<AlternatingSection
|
||||
heading="Automatic Session Creation"
|
||||
description={
|
||||
<Stack gap={8}>
|
||||
<Text size="lg" color="text-gray-300" weight="medium" leading="relaxed">
|
||||
Setting up league races used to mean clicking through iRacing's wizard 20 times.
|
||||
</Text>
|
||||
<Box display="grid" gridCols={1} gap={3}>
|
||||
<StepItem step={1} text="Our companion app syncs with your league schedule" />
|
||||
<StepItem step={2} text="When it's race time, it creates the iRacing session automatically" />
|
||||
<StepItem step={3} text="No clicking through wizards. No manual setup" />
|
||||
</Box>
|
||||
<Box borderLeft borderStyle="solid" borderColor="warning-amber" pl={4} py={1} bg="warning-amber/5">
|
||||
<Text color="text-gray-500" font="mono" size="xs" uppercase letterSpacing="widest">
|
||||
Automation instead of repetition.
|
||||
</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
}
|
||||
mockup={<CompanionAutomationMockup />}
|
||||
layout="text-left"
|
||||
/>
|
||||
</Box>
|
||||
<HomeFeatureSection
|
||||
heading="Automatic Session Creation"
|
||||
accentColor="amber"
|
||||
layout="text-left"
|
||||
description={
|
||||
<HomeFeatureDescription
|
||||
lead="Setting up league races used to mean clicking through iRacing's wizard 20 times."
|
||||
items={[
|
||||
'Our companion app syncs with your league schedule',
|
||||
'When it\'s race time, it creates the iRacing session automatically',
|
||||
'No clicking through wizards. No manual setup',
|
||||
]}
|
||||
quote="Automation instead of repetition."
|
||||
accentColor="amber"
|
||||
/>
|
||||
}
|
||||
mockup={<CompanionAutomationMockup />}
|
||||
/>
|
||||
|
||||
{/* Section 4: Game-Agnostic Platform */}
|
||||
<Box position="relative" bg="graphite-black">
|
||||
<Glow color="primary" size="xl" position="center" opacity={0.03} />
|
||||
<AlternatingSection
|
||||
heading="Built for iRacing. Ready for the future."
|
||||
backgroundImage="/images/lmp3.jpeg"
|
||||
description={
|
||||
<Stack gap={8}>
|
||||
<Text size="lg" color="text-gray-300" weight="medium" leading="relaxed">
|
||||
Right now, we're focused on making iRacing league racing better.
|
||||
</Text>
|
||||
<Text color="text-gray-400" leading="relaxed">
|
||||
But sims come and go. Your leagues, your teams, your rating — those stay.
|
||||
</Text>
|
||||
<Box borderLeft borderStyle="solid" borderColor="border-gray" pl={4} py={1} bg="white/5">
|
||||
<Text color="text-gray-500" font="mono" size="xs" uppercase letterSpacing="widest" leading="relaxed">
|
||||
GridPilot is built to outlast any single platform. When the next sim arrives, your competitive identity moves with you.
|
||||
</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
}
|
||||
mockup={<SimPlatformMockup />}
|
||||
layout="text-right"
|
||||
/>
|
||||
</Box>
|
||||
<HomeFeatureSection
|
||||
heading="Built for iRacing. Ready for the future."
|
||||
accentColor="primary"
|
||||
layout="text-right"
|
||||
description={
|
||||
<HomeFeatureDescription
|
||||
lead="Right now, we're focused on making iRacing league racing better."
|
||||
items={[
|
||||
'But sims come and go. Your leagues, your teams, your rating — those stay.',
|
||||
]}
|
||||
quote="GridPilot is built to outlast any single platform."
|
||||
accentColor="gray"
|
||||
/>
|
||||
}
|
||||
mockup={<SimPlatformMockup />}
|
||||
/>
|
||||
|
||||
{/* Alpha-only discovery section */}
|
||||
{/* Discovery Grid */}
|
||||
<ModeGuard feature="alpha_discovery">
|
||||
<Box bg="panel-gray/20" py={20} borderTop borderBottom borderColor="border-gray/50" position="relative">
|
||||
<Glow color="aqua" size="xl" position="center" opacity={0.02} />
|
||||
<DiscoverySection viewData={viewData} />
|
||||
</Box>
|
||||
<Section py={24} variant="dark">
|
||||
<Container>
|
||||
<Box maxWidth="2xl" mb={16}>
|
||||
<Box display="flex" alignItems="center" borderLeft borderStyle="solid" borderWidth="2px" borderColor="primary-accent" px={4} mb={4}>
|
||||
<Text size="xs" weight="bold" uppercase letterSpacing="widest" color="text-primary-accent">
|
||||
Live Ecosystem
|
||||
</Text>
|
||||
</Box>
|
||||
<Heading level={2} fontSize={{ base: '3xl', md: '4xl' }} weight="bold" letterSpacing="tight" color="text-white" mb={6}>
|
||||
DISCOVER THE GRID
|
||||
</Heading>
|
||||
<Text size="lg" color="text-gray-400" leading="relaxed">
|
||||
Explore leagues, teams, and races that make up the GridPilot ecosystem.
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<Grid cols={1} lgCols={3} gap={8}>
|
||||
<LeagueSummaryPanel leagues={viewData.topLeagues} />
|
||||
<TeamSummaryPanel teams={viewData.teams} />
|
||||
<RecentRacesPanel races={viewData.upcomingRaces} />
|
||||
</Grid>
|
||||
</Container>
|
||||
</Section>
|
||||
</ModeGuard>
|
||||
|
||||
<DiscordCTA />
|
||||
{/* CTA & FAQ */}
|
||||
<HomeFooterCTA />
|
||||
<FAQ />
|
||||
|
||||
{/* Footer */}
|
||||
<Footer />
|
||||
</Box>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user