mmintel/gridpilot.gg
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

website poc

Browse Source
This commit is contained in:
Marc Mintel
2025-12-02 01:31:31 +01:00
parent 747a77cb39
commit fd3b4171aa
15 changed files with 939 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
apps/website/components/landing/Hero.tsx
View File

@@ -5,8 +5,18 @@ 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" />
<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={{
@@ -15,14 +25,39 @@ export default function Hero() {
backgroundSize: '40px 40px'
}} />
<Container size="sm" center>
<Container size="sm" center className="relative z-10">
<Heading level={1} className="text-white leading-tight tracking-tight">
Where iRacing League Racing Finally Comes Together
League racing is incredible. What's missing is everything around it.
</Heading>
<p className="mt-8 text-lg leading-relaxed text-slate-400 font-light">
No more Discord chaos. No more spreadsheets. No more manual standings.
GridPilot is the dedicated home for serious iRacing leagues that want structure over chaos.
</p>
<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