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

39
apps/website/components/home/HomeFeatureSection.tsx
View File

@@ -3,7 +3,8 @@
import React from 'react';
import { Panel } from '@/ui/Panel';
import { Glow } from '@/ui/Glow';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Grid } from '@/ui/Grid';
import { Container } from '@/ui/Container';
import { Heading } from '@/ui/Heading';
import { Section } from '@/ui/Section';
@@ -28,9 +29,9 @@ export function HomeFeatureSection({
accentColor = 'primary',
}: HomeFeatureSectionProps) {
const accentBorderColor = {
primary: 'primary-accent/40',
aqua: 'telemetry-aqua/40',
amber: 'warning-amber/40',
primary: 'border-primary-accent/40',
aqua: 'border-telemetry-aqua/40',
amber: 'border-warning-amber/40',
}[accentColor];
const accentBgColor = {
@@ -55,32 +56,32 @@ export function HomeFeatureSection({
/>
<Container>
<Box display="grid" gridCols={{ base: 1, lg: 2 }} gap={{ base: 12, lg: 20 }} alignItems="center">
<Grid cols={1} lgCols={2} gap={12} alignItems="center">
{/* Text Content */}
<Box display="flex" flexDirection="col" gap={8} order={{ lg: layout === 'text-right' ? 2 : 1 }}>
<Box display="flex" flexDirection="col" gap={4}>
<Box w="12" h="1" bg={accentBgColor} />
<Stack gap={8} order={{ lg: layout === 'text-right' ? 2 : 1 }}>
<Stack gap={4}>
<Stack w="12" h="1" bg={accentBgColor}>{null}</Stack>
<Heading level={2} fontSize={{ base: '3xl', md: '5xl' }} weight="bold" letterSpacing="tighter" lineHeight="none" color="text-white">
{heading}
</Heading>
</Box>
<Box color="text-gray-500" borderLeft borderStyle="solid" borderColor="border-gray/20" pl={6}>
</Stack>
<Stack color="text-gray-500" borderLeft borderStyle="solid" borderColor="border-gray/20" pl={6}>
{description}
</Box>
</Box>
</Stack>
</Stack>
{/* Mockup Panel */}
<Box order={{ lg: layout === 'text-right' ? 1 : 2 }}>
<Stack order={{ lg: layout === 'text-right' ? 1 : 2 }}>
<Panel padding={1} variant="dark" border={true} position="relative" group overflow="hidden">
<Box bg="graphite-black" minHeight="300px" display="flex" alignItems="center" justifyContent="center">
<Stack bg="graphite-black" minHeight="300px" align="center" justify="center">
{mockup}
</Box>
</Stack>
{/* Decorative corner accents */}
<Box position="absolute" top="0" left="0" w="4" h="4" borderTop borderLeft borderColor={accentBorderColor} opacity={0.4} />
<Box position="absolute" bottom="0" right="0" w="4" h="4" borderBottom borderRight borderColor={accentBorderColor} opacity={0.4} />
<Stack position="absolute" top="0" left="0" w="4" h="4" borderTop borderLeft borderColor={accentBorderColor} opacity={0.4}>{null}</Stack>
<Stack position="absolute" bottom="0" right="0" w="4" h="4" borderBottom borderRight borderColor={accentBorderColor} opacity={0.4}>{null}</Stack>
</Panel>
</Box>
</Box>
</Stack>
</Grid>
</Container>
</Section>
);