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

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

@@ -1,10 +1,9 @@
import { useParallax } from "@/hooks/useScrollProgress";
import { Box } from '@/ui/Box';
import { Container } from '@/ui/Container';
import { Heading } from '@/ui/Heading';
import { Text } from '@/ui/Text';
import { Stack } from '@/ui/Stack';
import { useRef } from 'react';
interface AlternatingSectionProps {
@@ -25,8 +24,7 @@ export function AlternatingSection({
backgroundVideo
}: AlternatingSectionProps) {
const sectionRef = useRef<HTMLElement>(null);
const bgParallax = useParallax(sectionRef, 0.2);
const bgParallax = useParallax(sectionRef, 0.1);
return (
<Box
@@ -34,96 +32,100 @@ export function AlternatingSection({
ref={sectionRef}
position="relative"
overflow="hidden"
bg="bg-deep-graphite"
px={{ base: 'calc(1rem+var(--sal))', lg: 8 }}
py={{ base: 20, sm: 24, md: 32 }}
bg="graphite-black"
py={{ base: 20, md: 32 }}
className="border-b border-border-gray"
>
{backgroundVideo && (
<>
<Box
position="absolute"
inset="0"
fullWidth
fullHeight
overflow="hidden"
>
<Box
as="video"
autoPlay
loop
muted
playsInline
position="absolute"
inset="0"
fullWidth
fullHeight
objectFit="cover"
opacity={0.2}
maskImage="radial-gradient(ellipse at center, black 0%, rgba(0,0,0,0.8) 40%, transparent 70%)"
webkitMaskImage="radial-gradient(ellipse at center, black 0%, rgba(0,0,0,0.8) 40%, transparent 70%)"
opacity={0.1}
>
<Box as="source" src={backgroundVideo} type="video/mp4" />
</Box>
{/* Racing red accent for sections with background videos */}
<Box position="absolute" top="0" left="0" right="0" h="px" bg="linear-gradient(to right, transparent, rgba(239, 68, 68, 0.3), transparent)" />
</>
{/* Dark overlay to ensure readability */}
<Box position="absolute" inset="0" bg="linear-gradient(to bottom, #0C0D0F, transparent, #0C0D0F)" />
</Box>
)}
{backgroundImage && !backgroundVideo && (
<>
<Box
position="absolute"
inset="0"
fullWidth
fullHeight
overflow="hidden"
>
<Box
position="absolute"
inset="0"
bg={`url(${backgroundImage})`}
backgroundSize="cover"
backgroundPosition="center"
maskImage="radial-gradient(ellipse at center, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.1) 40%, transparent 70%)"
webkitMaskImage="radial-gradient(ellipse at center, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.1) 40%, transparent 70%)"
transform={`translateY(${bgParallax * 0.3}px)`}
opacity={0.1}
style={{ transform: `translateY(${bgParallax * 0.3}px)` }}
/>
{/* Racing red accent for sections with background images */}
<Box position="absolute" top="0" left="0" right="0" h="px" bg="linear-gradient(to right, transparent, rgba(239, 68, 68, 0.3), transparent)" />
</>
{/* Dark overlay to ensure readability */}
<Box position="absolute" inset="0" bg="linear-gradient(to bottom, #0C0D0F, transparent, #0C0D0F)" />
</Box>
)}
{/* Carbon fiber texture on sections without images or videos */}
{!backgroundImage && !backgroundVideo && (
<Box position="absolute" inset="0" opacity={0.3} bg="carbon-fiber" />
)}
{/* Checkered pattern accent */}
<Box position="absolute" inset="0" opacity={0.1} bg="checkered-pattern" />
<Container size="lg" position="relative" zIndex={10}>
<Box display="grid" gridCols={{ base: 1, lg: 2 }} gap={{ base: 8, md: 12, lg: 16 }} alignItems="center">
{/* Text Content - Always first on mobile, respects layout on desktop */}
<Box display="grid" gridCols={{ base: 1, lg: 2 }} gap={{ base: 12, lg: 24 }} alignItems="center">
{/* Text Content */}
<Box
display="flex"
flexDirection="column"
gap={{ base: 4, md: 6, lg: 8 }}
gap={8}
order={{ lg: layout === 'text-right' ? 2 : 1 }}
>
<Heading level={2} fontSize={{ base: 'xl', md: '2xl', lg: '3xl', xl: '4xl' }} 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)' }}>
{heading}
</Heading>
<Box display="flex" flexDirection="column" gap={{ base: 3, md: 5 }}>
<Text size={{ base: 'sm', md: 'base', lg: 'lg' }} color="text-slate-400" weight="light" leading="relaxed">
{description}
</Text>
<Stack gap={4}>
<Box w="12" h="1" bg="primary-accent" />
<Heading level={2} fontSize={{ base: '3xl', md: '4xl' }} weight="bold" className="tracking-tight">
{heading}
</Heading>
</Stack>
<Box className="text-gray-400">
{typeof description === 'string' ? (
<Text size="lg" leading="relaxed" weight="normal">{description}</Text>
) : (
description
)}
</Box>
</Box>
{/* Mockup - Always second on mobile, respects layout on desktop */}
{/* Mockup */}
<Box
position="relative"
order={{ lg: layout === 'text-right' ? 1 : 2 }}
group
className="bg-panel-gray/30 border border-border-gray/50 rounded-none p-2 shadow-2xl group"
>
<Box
fullWidth
minHeight={{ base: '240px', md: '380px', lg: '440px' }}
transition
hoverScale
maskImage={`linear-gradient(to ${layout === 'text-left' ? 'right' : 'left'}, white 50%, rgba(255,255,255,0.8) 70%, rgba(255,255,255,0.4) 85%, transparent 100%)`}
webkitMaskImage={`linear-gradient(to ${layout === 'text-left' ? 'right' : 'left'}, white 50%, rgba(255,255,255,0.8) 70%, rgba(255,255,255,0.4) 85%, transparent 100%)`}
minHeight={{ base: '240px', md: '380px' }}
className="overflow-hidden rounded-none border border-border-gray/30 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>
</Box>
</Container>
</Box>
);
}
}