69 lines
3.1 KiB
TypeScript
69 lines
3.1 KiB
TypeScript
import Button from '@/components/ui/Button';
|
|
import Container from '@/components/ui/Container';
|
|
import Heading from '@/components/ui/Heading';
|
|
|
|
export default function Hero() {
|
|
return (
|
|
<section className="relative overflow-hidden bg-deep-graphite px-6 py-24 sm:py-32 lg:px-8">
|
|
{/* Background image layer */}
|
|
<div
|
|
className="absolute inset-0 bg-cover bg-center"
|
|
style={{
|
|
backgroundImage: 'url(/images/porsche.jpeg)',
|
|
maskImage: 'radial-gradient(ellipse at center, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.08) 40%, transparent 70%)',
|
|
WebkitMaskImage: 'radial-gradient(ellipse at center, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.08) 40%, transparent 70%)'
|
|
}}
|
|
/>
|
|
|
|
{/* Subtle radial gradient overlay */}
|
|
<div className="absolute inset-0 bg-gradient-radial from-primary-blue/10 via-transparent to-transparent opacity-40 pointer-events-none" />
|
|
|
|
{/* Optional motorsport grid pattern */}
|
|
<div className="absolute inset-0 opacity-[0.015]" style={{
|
|
backgroundImage: `linear-gradient(rgba(255,255,255,0.5) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(255,255,255,0.5) 1px, transparent 1px)`,
|
|
backgroundSize: '40px 40px'
|
|
}} />
|
|
|
|
<Container size="sm" center className="relative z-10">
|
|
<Heading level={1} className="text-white leading-tight tracking-tight">
|
|
League racing is incredible. What's missing is everything around it.
|
|
</Heading>
|
|
<div className="mt-8 text-lg leading-relaxed text-slate-400 font-light">
|
|
<p>
|
|
If you've been in any league, you know the feeling:
|
|
</p>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3 mt-6 max-w-2xl mx-auto">
|
|
<div className="flex items-center gap-3">
|
|
<span className="text-primary-blue text-xl">•</span>
|
|
<span>Results scattered across Discord</span>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<span className="text-primary-blue text-xl">•</span>
|
|
<span>No long-term identity</span>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<span className="text-primary-blue text-xl">•</span>
|
|
<span>No career progression</span>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<span className="text-primary-blue text-xl">•</span>
|
|
<span>Forgotten after each season</span>
|
|
</div>
|
|
</div>
|
|
<p className="mt-8">
|
|
The ecosystem isn't built for this.
|
|
</p>
|
|
<p className="mt-4">
|
|
<strong className="text-white">GridPilot gives your league racing a real home.</strong>
|
|
</p>
|
|
</div>
|
|
<div className="mt-12 flex items-center justify-center">
|
|
<Button as="a" href="#early-access" className="shadow-glow hover:shadow-glow-strong transition-shadow duration-300">
|
|
Get Early Access
|
|
</Button>
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
);
|
|
} |