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

website landing page

Browse Source
This commit is contained in:
Marc Mintel
2025-12-02 19:44:18 +01:00
parent fd3b4171aa
commit 895318ac40
33 changed files with 2226 additions and 842 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
apps/website/components/landing/FeatureGrid.tsx
View File

@@ -1,3 +1,6 @@
'use client';
import { useRef, useState, useEffect } from 'react';
import Section from '@/components/ui/Section';
import Container from '@/components/ui/Container';
import Heading from '@/components/ui/Heading';
@@ -8,6 +11,7 @@ import TeamCompetitionMockup from '@/components/mockups/TeamCompetitionMockup';
import ProtestWorkflowMockup from '@/components/mockups/ProtestWorkflowMockup';
import LeagueDiscoveryMockup from '@/components/mockups/LeagueDiscoveryMockup';
import DriverProfileMockup from '@/components/mockups/DriverProfileMockup';
import { useScrollProgress } from '@/hooks/useScrollProgress';
const features = [
{
@@ -42,35 +46,59 @@ const features = [
}
];
function FeatureCard({ feature, index }: { feature: typeof features[0], index: number }) {
return (
<div
className="flex flex-col gap-6 sm:gap-6 group"
style={{
opacity: 1,
transform: 'translateY(0) scale(1)'
}}
>
<div className="aspect-video w-full relative">
<div className="absolute -inset-0.5 bg-gradient-to-r from-racing-red/20 via-primary-blue/20 to-racing-red/20 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-500 blur-sm" />
<div className="relative">
<MockupStack index={index}>
<feature.MockupComponent />
</MockupStack>
</div>
</div>
<div className="space-y-3">
<div className="flex items-center gap-2">
<Heading level={3} className="bg-gradient-to-r from-red-600 via-white to-blue-600 bg-clip-text text-transparent font-medium drop-shadow-[0_0_15px_rgba(220,0,0,0.4)] static-racing-gradient" style={{ WebkitTextStroke: '0.5px rgba(220,0,0,0.2)' }}>
{feature.title}
</Heading>
</div>
<p className="text-sm sm:text-base leading-7 sm:leading-7 text-gray-400 font-light">
{feature.description}
</p>
</div>
</div>
);
}
export default function FeatureGrid() {
return (
<Section variant="default">
<Container>
<Container className="relative z-10">
<Container size="sm" center>
<Heading level={2} className="text-white">
Built for League Racing
</Heading>
<p className="mt-4 text-lg text-gray-400">
Everything you need to run a professional iRacing league, nothing you don&apos;t
</p>
<div
style={{
opacity: 1,
transform: 'translateY(0)'
}}
>
<Heading level={2} className="bg-gradient-to-r from-red-600 via-white to-blue-600 bg-clip-text text-transparent font-semibold drop-shadow-[0_0_20px_rgba(220,0,0,0.5)] static-racing-gradient" style={{ WebkitTextStroke: '1px rgba(220,0,0,0.2)' }}>
Building for League Racing
</Heading>
<p className="mt-4 sm:mt-6 text-base sm:text-lg text-gray-400">
These features are in development. Join the community to help shape what gets built first
</p>
</div>
</Container>
<div className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-16 sm:mt-20 lg:max-w-none lg:grid-cols-2 xl:grid-cols-3">
<div className="mx-auto mt-8 sm:mt-12 md:mt-16 grid max-w-2xl grid-cols-1 gap-10 sm:gap-12 md:gap-16 lg:max-w-none lg:grid-cols-2 xl:grid-cols-3">
{features.map((feature, index) => (
<div key={feature.title} className="flex flex-col gap-6">
<div className="aspect-video w-full">
<MockupStack index={index}>
<feature.MockupComponent />
</MockupStack>
</div>
<div>
<Heading level={3} className="text-white">
{feature.title}
</Heading>
<p className="mt-2 text-base leading-7 text-gray-400">
{feature.description}
</p>
</div>
</div>
<FeatureCard key={feature.title} feature={feature} index={index} />
))}
</div>
</Container>