88 lines
3.0 KiB
TypeScript
88 lines
3.0 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Panel } from '@/ui/Panel';
|
|
import { Glow } from '@/ui/Glow';
|
|
import { Box } from '@/ui/Box';
|
|
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: 'primary-accent/40',
|
|
aqua: 'telemetry-aqua/40',
|
|
amber: '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>
|
|
<Box display="grid" gridCols={{ base: 1, lg: 2 }} gap={{ base: 12, lg: 20 }} 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} />
|
|
<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}>
|
|
{description}
|
|
</Box>
|
|
</Box>
|
|
|
|
{/* Mockup Panel */}
|
|
<Box 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">
|
|
{mockup}
|
|
</Box>
|
|
{/* 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} />
|
|
</Panel>
|
|
</Box>
|
|
</Box>
|
|
</Container>
|
|
</Section>
|
|
);
|
|
}
|