117 lines
4.8 KiB
TypeScript
117 lines
4.8 KiB
TypeScript
'use client';
|
|
|
|
import { Section } from '@/ui/Section';
|
|
import { Container } from '@/ui/Container';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { MockupStack } from '@/components/mockups/MockupStack';
|
|
import { Box } from '@/ui/Box';
|
|
import { Text } from '@/ui/Text';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { LeagueHomeMockup } from '@/components/mockups/LeagueHomeMockup';
|
|
import { StandingsTableMockup } from '@/components/mockups/StandingsTableMockup';
|
|
import { TeamCompetitionMockup } from '@/components/mockups/TeamCompetitionMockup';
|
|
import { ProtestWorkflowMockup } from '@/components/mockups/ProtestWorkflowMockup';
|
|
import { LeagueDiscoveryMockup } from '@/components/mockups/LeagueDiscoveryMockup';
|
|
import { DriverProfileMockup } from '@/components/mockups/DriverProfileMockup';
|
|
|
|
const features = [
|
|
{
|
|
title: "A Real Home for Your League",
|
|
description: "Stop juggling Discord, spreadsheets, and iRacing admin panels. GridPilot brings everything into one dedicated platform built specifically for league racing.",
|
|
MockupComponent: LeagueHomeMockup
|
|
},
|
|
{
|
|
title: "Automatic Results & Standings",
|
|
description: "Race happens. Results appear. Standings update. No manual data entry, no spreadsheet formulas, no waiting for someone to publish.",
|
|
MockupComponent: StandingsTableMockup
|
|
},
|
|
{
|
|
title: "Real Team Racing",
|
|
description: "Constructors' championships that actually matter. Driver lineups. Team strategies. Multi-class racing done right.",
|
|
MockupComponent: TeamCompetitionMockup
|
|
},
|
|
{
|
|
title: "Clean Protests & Penalties",
|
|
description: "Structured incident reporting with video clip references. Steward review workflows. Transparent penalty application. Professional race control.",
|
|
MockupComponent: ProtestWorkflowMockup
|
|
},
|
|
{
|
|
title: "Find Your Perfect League",
|
|
description: "Search and discover leagues by game, region, and skill level. Browse featured competitions, check driver counts, and join communities that match your racing style.",
|
|
MockupComponent: LeagueDiscoveryMockup
|
|
},
|
|
{
|
|
title: "Your Racing Identity",
|
|
description: "Cross-league driver profiles with career stats, achievements, and racing history. Build your reputation across multiple championships and showcase your progression.",
|
|
MockupComponent: DriverProfileMockup
|
|
}
|
|
];
|
|
|
|
function FeatureCard({ feature, index }: { feature: typeof features[0], index: number }) {
|
|
return (
|
|
<Box
|
|
display="flex"
|
|
flexDirection="column"
|
|
gap={6}
|
|
className="p-8 bg-panel-gray/40 border border-border-gray/50 rounded-none hover:border-primary-accent/30 transition-all duration-300 ease-smooth group relative overflow-hidden"
|
|
>
|
|
<Box aspectRatio="video" fullWidth position="relative" className="bg-graphite-black rounded-none overflow-hidden border border-border-gray/30">
|
|
<MockupStack index={index}>
|
|
<feature.MockupComponent />
|
|
</MockupStack>
|
|
</Box>
|
|
<Stack gap={4}>
|
|
<Box display="flex" alignItems="center" gap={3}>
|
|
<Box w="1" h="4" bg="primary-accent" />
|
|
<Heading level={3} weight="bold" fontSize="xl" className="tracking-tight">
|
|
{feature.title}
|
|
</Heading>
|
|
</Box>
|
|
<Text size="sm" color="text-gray-400" leading="relaxed" weight="normal">
|
|
{feature.description}
|
|
</Text>
|
|
</Stack>
|
|
{/* Subtle hover effect */}
|
|
<Box
|
|
position="absolute"
|
|
bottom="0"
|
|
left="0"
|
|
w="full"
|
|
h="1"
|
|
bg="primary-accent"
|
|
className="scale-x-0 group-hover:scale-x-100 transition-transform duration-500 origin-left"
|
|
/>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
export function FeatureGrid() {
|
|
return (
|
|
<Section className="bg-graphite-black border-b border-border-gray/50 py-24">
|
|
<Container position="relative" zIndex={10}>
|
|
<Stack gap={16}>
|
|
<Box maxWidth="2xl">
|
|
<Box borderLeft borderStyle="solid" borderColor="primary-accent" pl={4} mb={4}>
|
|
<Text size="xs" weight="bold" color="text-primary-accent" className="uppercase tracking-[0.2em]">
|
|
Engineered for Competition
|
|
</Text>
|
|
</Box>
|
|
<Heading level={2} weight="bold" fontSize={{ base: '3xl', md: '4xl' }} className="tracking-tight">
|
|
Building for League Racing
|
|
</Heading>
|
|
<Text size="lg" color="text-gray-400" block mt={6} leading="relaxed">
|
|
Every feature is designed to reduce friction and increase immersion. Join our Discord to help shape the future of the platform.
|
|
</Text>
|
|
</Box>
|
|
|
|
<Box display="grid" gridCols={{ base: 1, md: 2, lg: 3 }} gap={8}>
|
|
{features.map((feature, index) => (
|
|
<FeatureCard key={feature.title} feature={feature} index={index} />
|
|
))}
|
|
</Box>
|
|
</Stack>
|
|
</Container>
|
|
</Section>
|
|
);
|
|
}
|