89 lines
2.9 KiB
TypeScript
89 lines
2.9 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Panel } from '@/ui/Panel';
|
|
import { Glow } from '@/ui/Glow';
|
|
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';
|
|
|
|
interface HomeFeatureSectionProps {
|
|
heading: string;
|
|
description: React.ReactNode;
|
|
mockup: React.ReactNode;
|
|
layout: 'text-left' | 'text-right';
|
|
accentColor?: 'primary' | 'aqua' | 'amber';
|
|
}
|
|
|
|
/**
|
|
* HomeFeatureSection - A semantic section highlighting a feature.
|
|
* Refactored to use semantic HTML and Tailwind.
|
|
*/
|
|
export function HomeFeatureSection({
|
|
heading,
|
|
description,
|
|
mockup,
|
|
layout,
|
|
accentColor = 'primary',
|
|
}: HomeFeatureSectionProps) {
|
|
const accentBorderColor = {
|
|
primary: 'border-primary-accent/40',
|
|
aqua: 'border-telemetry-aqua/40',
|
|
amber: 'border-warning-amber/40',
|
|
}[accentColor];
|
|
|
|
const accentBgColor = {
|
|
primary: 'primary-accent',
|
|
aqua: 'telemetry-aqua',
|
|
amber: 'warning-amber',
|
|
}[accentColor];
|
|
|
|
const glowColor = ({
|
|
primary: 'primary',
|
|
aqua: 'aqua',
|
|
amber: 'amber',
|
|
}[accentColor] || 'primary') as 'primary' | 'aqua' | 'amber' | 'purple';
|
|
|
|
return (
|
|
<Section variant="dark" py={24} borderBottom borderColor="border-gray" overflow="hidden" position="relative">
|
|
<Glow
|
|
color={glowColor}
|
|
size="lg"
|
|
position={layout === 'text-left' ? 'bottom-left' : 'top-right'}
|
|
opacity={0.02}
|
|
/>
|
|
|
|
<Container>
|
|
<Grid cols={1} lgCols={2} gap={12} alignItems="center">
|
|
{/* Text Content */}
|
|
<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>
|
|
</Stack>
|
|
<Stack color="text-gray-500" borderLeft borderStyle="solid" borderColor="border-gray/20" pl={6}>
|
|
{description}
|
|
</Stack>
|
|
</Stack>
|
|
|
|
{/* Mockup Panel */}
|
|
<Stack order={{ lg: layout === 'text-right' ? 1 : 2 }}>
|
|
<Panel padding={1} variant="dark" border={true} position="relative" group overflow="hidden">
|
|
<Stack bg="graphite-black" minHeight="300px" align="center" justify="center">
|
|
{mockup}
|
|
</Stack>
|
|
{/* Decorative corner accents */}
|
|
<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>
|
|
</Stack>
|
|
</Grid>
|
|
</Container>
|
|
</Section>
|
|
);
|
|
}
|