142 lines
5.1 KiB
TypeScript
142 lines
5.1 KiB
TypeScript
import { useParallax } from '@/hooks/useScrollProgress';
|
|
import { Button } from '@/ui/Button';
|
|
import { Container } from '@/ui/Container';
|
|
import { Glow } from '@/ui/Glow';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import { useRef } from 'react';
|
|
|
|
const discordUrl = process.env.NEXT_PUBLIC_DISCORD_URL || '#';
|
|
|
|
export function LandingHero() {
|
|
const sectionRef = useRef<HTMLElement>(null);
|
|
const bgParallax = useParallax(sectionRef, 0.2);
|
|
|
|
return (
|
|
<Stack
|
|
as="section"
|
|
ref={sectionRef}
|
|
position="relative"
|
|
overflow="hidden"
|
|
bg="var(--ui-color-bg-base)"
|
|
pt={{ base: 24, md: 32, lg: 40 }}
|
|
pb={{ base: 16, md: 24, lg: 32 }}
|
|
borderBottom
|
|
borderColor="var(--ui-color-border-low)"
|
|
>
|
|
{/* Background image layer with parallax */}
|
|
<Stack
|
|
position="absolute"
|
|
inset="0"
|
|
backgroundImage="url(/images/header.jpeg)"
|
|
backgroundSize="cover"
|
|
backgroundPosition="center"
|
|
opacity={0.2}
|
|
transform={`translateY(${bgParallax * 0.5}px)`}
|
|
/>
|
|
|
|
{/* Robust gradient overlay */}
|
|
<Stack
|
|
position="absolute"
|
|
inset="0"
|
|
bg="linear-gradient(to bottom, #0C0D0F 0%, transparent 50%, #0C0D0F 100%)"
|
|
/>
|
|
|
|
<Stack
|
|
position="absolute"
|
|
inset="0"
|
|
bg="radial-gradient(circle at center, transparent 0%, #0C0D0F 100%)"
|
|
opacity={0.8}
|
|
/>
|
|
|
|
<Glow color="primary" size="xl" position="center" opacity={0.15} />
|
|
|
|
<Container size="lg" position="relative" zIndex={10}>
|
|
<Stack gap={{ base: 8, md: 12 }}>
|
|
<Stack gap={6} maxWidth="3xl">
|
|
<Stack borderLeft borderStyle="solid" borderColor="var(--ui-color-intent-primary)" pl={4} mb={2} bg="rgba(25, 140, 255, 0.05)" py={1}>
|
|
<Text size="xs" weight="bold" variant="primary" uppercase letterSpacing="0.3em">
|
|
Precision Racing Infrastructure
|
|
</Text>
|
|
</Stack>
|
|
<Heading
|
|
level={1}
|
|
fontSize={{ base: '4xl', sm: '5xl', md: '6xl', lg: '8xl' }}
|
|
weight="bold"
|
|
color="var(--ui-color-text-high)"
|
|
lineHeight="0.95"
|
|
letterSpacing="tighter"
|
|
>
|
|
MODERN MOTORSPORT INFRASTRUCTURE.
|
|
</Heading>
|
|
<Text size={{ base: 'lg', md: 'xl' }} variant="low" weight="normal" leading="relaxed" maxWidth="2xl" borderLeft borderStyle="solid" borderColor="var(--ui-color-border-low)" pl={6} opacity={0.3}>
|
|
GridPilot gives your league racing a real home. Results, standings, teams, and career progression — engineered for precision and control.
|
|
</Text>
|
|
</Stack>
|
|
|
|
<Stack display="flex" flexDirection={{ base: 'column', sm: 'row' }} gap={4}>
|
|
<Button
|
|
as="a"
|
|
href={discordUrl}
|
|
variant="primary"
|
|
size="lg"
|
|
px={12}
|
|
letterSpacing="0.2em"
|
|
fontSize="xs"
|
|
h="14"
|
|
>
|
|
Join the Grid
|
|
</Button>
|
|
<Button
|
|
variant="secondary"
|
|
size="lg"
|
|
px={12}
|
|
borderColor="var(--ui-color-border-low)"
|
|
hoverBorderColor="var(--ui-color-intent-primary)"
|
|
letterSpacing="0.2em"
|
|
fontSize="xs"
|
|
h="14"
|
|
bg="transparent"
|
|
>
|
|
Explore Leagues
|
|
</Button>
|
|
</Stack>
|
|
|
|
{/* Problem list - more professional */}
|
|
<Stack
|
|
display="grid"
|
|
gridCols={{ base: 1, sm: 2, lg: 4 }}
|
|
gap={8}
|
|
mt={12}
|
|
borderTop
|
|
borderStyle="solid"
|
|
borderColor="var(--ui-color-border-low)"
|
|
opacity={0.2}
|
|
pt={12}
|
|
>
|
|
{[
|
|
{ label: 'IDENTITY', text: 'Your racing career in one place', color: 'var(--ui-color-intent-primary)' },
|
|
{ label: 'AUTOMATION', text: 'No more manual session setup', color: 'var(--ui-color-intent-telemetry)' },
|
|
{ label: 'PRECISION', text: 'Real-time results and standings', color: 'var(--ui-color-intent-warning)' },
|
|
{ label: 'COMMUNITY', text: 'Built for teams and leagues', color: 'var(--ui-color-intent-success)' }
|
|
].map((item) => (
|
|
<Stack key={item.label} gap={3} group cursor="default">
|
|
<Stack display="flex" alignItems="center" gap={3}>
|
|
<Stack w="1" h="3" bg={item.color} />
|
|
<Text size="xs" weight="bold" variant="low" uppercase letterSpacing="0.2em" groupHoverTextColor="var(--ui-color-text-high)" transition>
|
|
{item.label}
|
|
</Text>
|
|
</Stack>
|
|
<Text size="sm" variant="low" groupHoverTextColor="var(--ui-color-text-med)" transition leading="relaxed">
|
|
{item.text}
|
|
</Text>
|
|
</Stack>
|
|
))}
|
|
</Stack>
|
|
</Stack>
|
|
</Container>
|
|
</Stack>
|
|
);
|
|
}
|