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

website refactor

Browse Source
This commit is contained in:
Marc Mintel
2026-01-17 02:32:34 +01:00
parent 6a49448e0a
commit 4d5ce9bfd6
43 changed files with 1642 additions and 2022 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -53,50 +53,64 @@ function FeatureCard({ feature, index }: { feature: typeof features[0], index: n
display="flex"
flexDirection="column"
gap={6}
group
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">
<Box position="absolute" inset="-0.5" bg="linear-gradient(to right, rgba(239, 68, 68, 0.2), rgba(59, 130, 246, 0.2), rgba(239, 68, 68, 0.2))" rounded="lg" opacity={0} groupHoverOpacity={1} transition blur="sm" />
<Box position="relative">
<MockupStack index={index}>
<feature.MockupComponent />
</MockupStack>
</Box>
<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={3}>
<Box display="flex" alignItems="center" gap={2}>
<Heading level={3} weight="medium" style={{ background: 'linear-gradient(to right, #dc2626, #ffffff, #2563eb)', backgroundClip: 'text', WebkitBackgroundClip: 'text', color: 'transparent', filter: 'drop-shadow(0 0 15px rgba(220,0,0,0.4))', WebkitTextStroke: '0.5px rgba(220,0,0,0.2)' }}>
<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={{ base: 'sm', sm: 'base' }} color="text-gray-400" weight="light" leading="relaxed">
<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 variant="default">
<Section className="bg-graphite-black border-b border-border-gray/50 py-24">
<Container position="relative" zIndex={10}>
<Container size="sm" center>
<Box>
<Heading level={2} weight="semibold" style={{ background: 'linear-gradient(to right, #dc2626, #ffffff, #2563eb)', backgroundClip: 'text', WebkitBackgroundClip: 'text', color: 'transparent', filter: 'drop-shadow(0 0 20px rgba(220,0,0,0.5))', WebkitTextStroke: '1px rgba(220,0,0,0.2)' }}>
<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={{ base: 'base', sm: 'lg' }} color="text-gray-400" block mt={{ base: 4, sm: 6 }}>
These features are in development. Join the community to help shape what gets built first
<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>
</Container>
<Box mx="auto" mt={{ base: 8, sm: 12, md: 16 }} display="grid" gridCols={{ base: 1, lg: 2, xl: 3 }} gap={{ base: 10, sm: 12, md: 16 }} maxWidth={{ base: '2xl', lg: 'none' }}>
{features.map((feature, index) => (
<FeatureCard key={feature.title} feature={feature} index={index} />
))}
</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>
);
}
}