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 15:46:55 +01:00
parent 4d5ce9bfd6
commit 72a626ce71
346 changed files with 19308 additions and 8605 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
apps/website/components/landing/AlternatingSection.tsx
View File

@@ -93,12 +93,12 @@ export function AlternatingSection({
order={{ lg: layout === 'text-right' ? 2 : 1 }}
>
<Stack gap={4}>
<Box w="12" h="1" bg="primary-accent" />
<Heading level={2} fontSize={{ base: '3xl', md: '4xl' }} weight="bold" className="tracking-tight">
<Box w="8" h="1" bg="primary-accent" />
<Heading level={2} fontSize={{ base: '3xl', md: '5xl' }} weight="bold" className="tracking-tighter uppercase leading-none">
{heading}
</Heading>
</Stack>
<Box className="text-gray-400">
<Box className="text-gray-500 border-l border-border-gray/20 pl-6">
{typeof description === 'string' ? (
<Text size="lg" leading="relaxed" weight="normal">{description}</Text>
) : (
@@ -111,18 +111,18 @@ export function AlternatingSection({
<Box
position="relative"
order={{ lg: layout === 'text-right' ? 1 : 2 }}
className="bg-panel-gray/30 border border-border-gray/50 rounded-none p-2 shadow-2xl group"
className="bg-panel-gray/20 border border-border-gray/30 rounded-none p-1 shadow-2xl group"
>
<Box
fullWidth
minHeight={{ base: '240px', md: '380px' }}
className="overflow-hidden rounded-none border border-border-gray/30 bg-graphite-black"
className="overflow-hidden rounded-none border border-border-gray/20 bg-graphite-black"
>
{mockup}
</Box>
{/* Decorative corner accents */}
<Box position="absolute" top="-1px" left="-1px" w="4" h="4" borderTop borderLeft borderColor="primary-accent/50" />
<Box position="absolute" bottom="-1px" right="-1px" w="4" h="4" borderBottom borderRight borderColor="primary-accent/50" />
<Box position="absolute" top="-1px" left="-1px" w="3" h="3" borderTop borderLeft borderColor="primary-accent/40" />
<Box position="absolute" bottom="-1px" right="-1px" w="3" h="3" borderBottom borderRight borderColor="primary-accent/40" />
</Box>
</Box>
</Container>

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

@@ -53,21 +53,21 @@ function FeatureCard({ feature, index }: { feature: typeof features[0], index: n
display="flex"
flexDirection="column"
gap={6}
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"
className="p-8 bg-panel-gray/20 border border-border-gray/20 rounded-none hover:border-primary-accent/20 transition-all duration-300 ease-smooth group relative overflow-hidden"
>
<Box aspectRatio="video" fullWidth position="relative" className="bg-graphite-black rounded-none overflow-hidden border border-border-gray/30">
<Box aspectRatio="video" fullWidth position="relative" className="bg-graphite-black rounded-none overflow-hidden border border-border-gray/20">
<MockupStack index={index}>
<feature.MockupComponent />
</MockupStack>
</Box>
<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">
<Box w="1" h="3" bg="primary-accent" />
<Heading level={3} weight="bold" fontSize="lg" className="tracking-tighter uppercase">
{feature.title}
</Heading>
</Box>
<Text size="sm" color="text-gray-400" leading="relaxed" weight="normal">
<Text size="sm" color="text-gray-500" leading="relaxed" weight="normal" className="group-hover:text-gray-400 transition-colors">
{feature.description}
</Text>
</Stack>
@@ -77,7 +77,7 @@ function FeatureCard({ feature, index }: { feature: typeof features[0], index: n
bottom="0"
left="0"
w="full"
h="1"
h="0.5"
bg="primary-accent"
className="scale-x-0 group-hover:scale-x-100 transition-transform duration-500 origin-left"
/>
@@ -87,24 +87,24 @@ function FeatureCard({ feature, index }: { feature: typeof features[0], index: n
export function FeatureGrid() {
return (
<Section className="bg-graphite-black border-b border-border-gray/50 py-24">
<Section className="bg-graphite-black border-b border-border-gray/20 py-32">
<Container position="relative" zIndex={10}>
<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]">
<Box borderLeft borderStyle="solid" borderColor="primary-accent" pl={4} mb={4} bg="primary-accent/5" py={1}>
<Text size="xs" weight="bold" color="text-primary-accent" className="uppercase tracking-[0.3em]">
Engineered for Competition
</Text>
</Box>
<Heading level={2} weight="bold" fontSize={{ base: '3xl', md: '4xl' }} className="tracking-tight">
<Heading level={2} weight="bold" fontSize={{ base: '3xl', md: '5xl' }} className="tracking-tighter uppercase leading-none">
Building for League Racing
</Heading>
<Text size="lg" color="text-gray-400" block mt={6} leading="relaxed">
<Text size="lg" color="text-gray-500" block mt={6} leading="relaxed" className="border-l border-border-gray/20 pl-6">
Every feature is designed to reduce friction and increase immersion. Join our Discord to help shape the future of the platform.
</Text>
</Box>
<Box display="grid" gridCols={{ base: 1, md: 2, lg: 3 }} gap={8}>
<Box display="grid" gridCols={{ base: 1, md: 2, lg: 3 }} gap={6}>
{features.map((feature, index) => (
<FeatureCard key={feature.title} feature={feature} index={index} />
))}

52
apps/website/components/landing/LandingHero.tsx
View File

@@ -29,11 +29,11 @@ export function LandingHero() {
<Box
position="absolute"
inset="0"
bg="url(/images/header.jpeg)"
backgroundImage="url(/images/header.jpeg)"
backgroundSize="cover"
backgroundPosition="center"
opacity={0.2}
style={{ transform: `translateY(${bgParallax * 0.5}px)` }}
transform={`translateY(${bgParallax * 0.5}px)`}
/>
{/* Robust gradient overlay */}
@@ -47,29 +47,30 @@ export function LandingHero() {
position="absolute"
inset="0"
bg="radial-gradient(circle at center, transparent 0%, #0C0D0F 100%)"
opacity={0.6}
opacity={0.8}
/>
<Glow color="primary" size="xl" position="center" opacity={0.1} />
<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">
<Box borderLeft borderStyle="solid" borderColor="primary-accent" pl={4} mb={2}>
<Text size="xs" weight="bold" color="text-primary-accent" className="uppercase tracking-[0.2em]">
<Box borderLeft borderStyle="solid" borderColor="primary-accent" pl={4} mb={2} bg="primary-accent/5" py={1}>
<Text size="xs" weight="bold" color="text-primary-accent" uppercase letterSpacing="0.3em">
Precision Racing Infrastructure
</Text>
</Box>
<Heading
level={1}
fontSize={{ base: '3xl', sm: '4xl', md: '5xl', lg: '7xl' }}
fontSize={{ base: '4xl', sm: '5xl', md: '6xl', lg: '8xl' }}
weight="bold"
className="text-white leading-[1.1] tracking-tight"
color="text-white"
lineHeight="0.95"
letterSpacing="tighter"
>
Modern Motorsport <br />
<span className="text-primary-accent">Infrastructure.</span>
MODERN MOTORSPORT INFRASTRUCTURE.
</Heading>
<Text size={{ base: 'lg', md: 'xl' }} color="text-gray-400" weight="normal" leading="relaxed" className="max-w-2xl">
<Text size={{ base: 'lg', md: 'xl' }} color="text-gray-400" weight="normal" leading="relaxed" maxWidth="2xl" borderLeft borderStyle="solid" borderColor="border-gray" 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>
@@ -80,14 +81,23 @@ export function LandingHero() {
href={discordUrl}
variant="primary"
size="lg"
className="px-10 rounded-none uppercase tracking-widest text-xs font-bold"
px={12}
letterSpacing="0.2em"
fontSize="xs"
h="14"
>
Join the Grid
</Button>
<Button
variant="secondary"
size="lg"
className="px-10 rounded-none border-border-gray hover:border-primary-accent/50 uppercase tracking-widest text-xs font-bold"
px={12}
borderColor="border-gray"
hoverBorderColor="primary-accent/50"
letterSpacing="0.2em"
fontSize="xs"
h="14"
bg="transparent"
>
Explore Leagues
</Button>
@@ -99,7 +109,11 @@ export function LandingHero() {
gridCols={{ base: 1, sm: 2, lg: 4 }}
gap={8}
mt={12}
className="border-t border-border-gray/30 pt-12"
borderTop
borderStyle="solid"
borderColor="border-gray"
opacity={0.2}
pt={12}
>
{[
{ label: 'IDENTITY', text: 'Your racing career in one place', color: 'primary' },
@@ -107,14 +121,14 @@ export function LandingHero() {
{ label: 'PRECISION', text: 'Real-time results and standings', color: 'amber' },
{ label: 'COMMUNITY', text: 'Built for teams and leagues', color: 'green' }
].map((item) => (
<Stack key={item.label} gap={3} className="group">
<Box display="flex" alignItems="center" gap={2}>
<Box w="2" h="2" rounded="full" className={`bg-${item.color === 'primary' ? 'primary-accent' : item.color === 'aqua' ? 'telemetry-aqua' : item.color === 'amber' ? 'warning-amber' : 'success-green'}`} />
<Text size="xs" weight="bold" color="text-gray-500" className="uppercase tracking-[0.2em] group-hover:text-white transition-colors">
<Stack key={item.label} gap={3} group cursor="default">
<Box display="flex" alignItems="center" gap={3}>
<Box w="1" h="3" bg={item.color === 'primary' ? 'primary-accent' : item.color === 'aqua' ? 'telemetry-aqua' : item.color === 'amber' ? 'warning-amber' : 'success-green'} />
<Text size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="0.2em" groupHoverTextColor="white" transition>
{item.label}
</Text>
</Box>
<Text size="sm" color="text-gray-400" className="group-hover:text-gray-200 transition-colors">
<Text size="sm" color="text-gray-500" groupHoverTextColor="gray-300" transition leading="relaxed">
{item.text}
</Text>
</Stack>