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-19 18:01:30 +01:00
parent 6154d54435
commit 61b5cf3b64
120 changed files with 2226 additions and 2021 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -19,10 +19,11 @@ export function LandingHero() {
ref={sectionRef}
position="relative"
overflow="hidden"
bg="graphite-black"
bg="var(--ui-color-bg-base)"
pt={{ base: 24, md: 32, lg: 40 }}
pb={{ base: 16, md: 24, lg: 32 }}
className="border-b border-border-gray"
borderBottom
borderColor="var(--ui-color-border-low)"
>
{/* Background image layer with parallax */}
<Stack
@@ -54,8 +55,8 @@ export function LandingHero() {
<Container size="lg" position="relative" zIndex={10}>
<Stack gap={{ base: 8, md: 12 }}>
<Stack gap={6} maxWidth="3xl">
<Stack 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">
<Stack borderLeft borderStyle="solid" borderColor="var(--ui-color-intent-primary)" pl={4} mb={2} bg="rgba(25, 140, 255, 0.05)" py={1}>
<Text size="xs" weight="bold" variant="primary" uppercase letterSpacing="0.3em">
Precision Racing Infrastructure
</Text>
</Stack>
@@ -63,13 +64,13 @@ export function LandingHero() {
level={1}
fontSize={{ base: '4xl', sm: '5xl', md: '6xl', lg: '8xl' }}
weight="bold"
color="text-white"
color="var(--ui-color-text-high)"
lineHeight="0.95"
letterSpacing="tighter"
>
MODERN MOTORSPORT INFRASTRUCTURE.
</Heading>
<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}>
<Text size={{ base: 'lg', md: 'xl' }} variant="low" weight="normal" leading="relaxed" maxWidth="2xl" borderLeft borderStyle="solid" borderColor="var(--ui-color-border-low)" 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>
@@ -91,8 +92,8 @@ export function LandingHero() {
variant="secondary"
size="lg"
px={12}
borderColor="border-gray"
hoverBorderColor="primary-accent/50"
borderColor="var(--ui-color-border-low)"
hoverBorderColor="var(--ui-color-intent-primary)"
letterSpacing="0.2em"
fontSize="xs"
h="14"
@@ -110,24 +111,24 @@ export function LandingHero() {
mt={12}
borderTop
borderStyle="solid"
borderColor="border-gray"
borderColor="var(--ui-color-border-low)"
opacity={0.2}
pt={12}
>
{[
{ label: 'IDENTITY', text: 'Your racing career in one place', color: 'primary' },
{ label: 'AUTOMATION', text: 'No more manual session setup', color: 'aqua' },
{ label: 'PRECISION', text: 'Real-time results and standings', color: 'amber' },
{ label: 'COMMUNITY', text: 'Built for teams and leagues', color: 'green' }
{ label: 'IDENTITY', text: 'Your racing career in one place', color: 'var(--ui-color-intent-primary)' },
{ label: 'AUTOMATION', text: 'No more manual session setup', color: 'var(--ui-color-intent-telemetry)' },
{ label: 'PRECISION', text: 'Real-time results and standings', color: 'var(--ui-color-intent-warning)' },
{ label: 'COMMUNITY', text: 'Built for teams and leagues', color: 'var(--ui-color-intent-success)' }
].map((item) => (
<Stack key={item.label} gap={3} group cursor="default">
<Stack display="flex" alignItems="center" gap={3}>
<Stack 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>
<Stack w="1" h="3" bg={item.color} />
<Text size="xs" weight="bold" variant="low" uppercase letterSpacing="0.2em" groupHoverTextColor="var(--ui-color-text-high)" transition>
{item.label}
</Text>
</Stack>
<Text size="sm" color="text-gray-500" groupHoverTextColor="gray-300" transition leading="relaxed">
<Text size="sm" variant="low" groupHoverTextColor="var(--ui-color-text-med)" transition leading="relaxed">
{item.text}
</Text>
</Stack>