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-18 16:18:18 +01:00
parent 0b301feb61
commit 13567d51af
329 changed files with 4701 additions and 4750 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,9 +1,8 @@
import { useParallax } from "@/hooks/useScrollProgress";
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
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 {
@@ -27,7 +26,7 @@ export function AlternatingSection({
const bgParallax = useParallax(sectionRef, 0.1);
return (
<Box
<Stack
as="section"
ref={sectionRef}
position="relative"
@@ -37,14 +36,14 @@ export function AlternatingSection({
className="border-b border-border-gray"
>
{backgroundVideo && (
<Box
<Stack
position="absolute"
inset="0"
fullWidth
fullHeight
overflow="hidden"
>
<Box
<Stack
as="video"
autoPlay
loop
@@ -55,21 +54,21 @@ export function AlternatingSection({
objectFit="cover"
opacity={0.1}
>
<Box as="source" src={backgroundVideo} type="video/mp4" />
</Box>
<Stack as="source" src={backgroundVideo} type="video/mp4" />
</Stack>
{/* Dark overlay to ensure readability */}
<Box position="absolute" inset="0" bg="linear-gradient(to bottom, #0C0D0F, transparent, #0C0D0F)" />
</Box>
<Stack position="absolute" inset="0" bg="linear-gradient(to bottom, #0C0D0F, transparent, #0C0D0F)" />
</Stack>
)}
{backgroundImage && !backgroundVideo && (
<Box
<Stack
position="absolute"
inset="0"
fullWidth
fullHeight
overflow="hidden"
>
<Box
<Stack
position="absolute"
inset="0"
bg={`url(${backgroundImage})`}
@@ -79,53 +78,53 @@ export function AlternatingSection({
style={{ transform: `translateY(${bgParallax * 0.3}px)` }}
/>
{/* Dark overlay to ensure readability */}
<Box position="absolute" inset="0" bg="linear-gradient(to bottom, #0C0D0F, transparent, #0C0D0F)" />
</Box>
<Stack position="absolute" inset="0" bg="linear-gradient(to bottom, #0C0D0F, transparent, #0C0D0F)" />
</Stack>
)}
<Container size="lg" position="relative" zIndex={10}>
<Box display="grid" gridCols={{ base: 1, lg: 2 }} gap={{ base: 12, lg: 24 }} alignItems="center">
<Stack display="grid" gridCols={{ base: 1, lg: 2 }} gap={{ base: 12, lg: 24 }} alignItems="center">
{/* Text Content */}
<Box
<Stack
display="flex"
flexDirection="column"
gap={8}
order={{ lg: layout === 'text-right' ? 2 : 1 }}
>
<Stack gap={4}>
<Box w="8" h="1" bg="primary-accent" />
<Stack 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-500 border-l border-border-gray/20 pl-6">
<Stack className="text-gray-500 border-l border-border-gray/20 pl-6">
{typeof description === 'string' ? (
<Text size="lg" leading="relaxed" weight="normal">{description}</Text>
) : (
description
)}
</Box>
</Box>
</Stack>
</Stack>
{/* Mockup */}
<Box
<Stack
position="relative"
order={{ lg: layout === 'text-right' ? 1 : 2 }}
className="bg-panel-gray/20 border border-border-gray/30 rounded-none p-1 shadow-2xl group"
>
<Box
<Stack
fullWidth
minHeight={{ base: '240px', md: '380px' }}
className="overflow-hidden rounded-none border border-border-gray/20 bg-graphite-black"
>
{mockup}
</Box>
</Stack>
{/* Decorative corner accents */}
<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>
<Stack position="absolute" top="-1px" left="-1px" w="3" h="3" borderTop borderLeft borderColor="primary-accent/40" />
<Stack position="absolute" bottom="-1px" right="-1px" w="3" h="3" borderBottom borderRight borderColor="primary-accent/40" />
</Stack>
</Stack>
</Container>
</Box>
</Stack>
);
}