70 lines
1.7 KiB
TypeScript
70 lines
1.7 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.
|
|
*/
|
|
export function HomeFeatureSection({
|
|
heading,
|
|
description,
|
|
mockup,
|
|
layout,
|
|
accentColor = 'primary',
|
|
}: HomeFeatureSectionProps) {
|
|
const glowColor = ({
|
|
primary: 'primary',
|
|
aqua: 'aqua',
|
|
amber: 'amber',
|
|
}[accentColor] || 'primary') as 'primary' | 'aqua' | 'amber' | 'purple';
|
|
|
|
return (
|
|
<Section variant="dark" padding="lg">
|
|
<Glow
|
|
color={glowColor}
|
|
size="lg"
|
|
position={layout === 'text-left' ? 'bottom-left' : 'top-right'}
|
|
opacity={0.02}
|
|
/>
|
|
|
|
<Container>
|
|
<Grid cols={{ base: 1, lg: 2 }} gap={12}>
|
|
{/* Text Content */}
|
|
<Stack gap={8}>
|
|
<Stack gap={4}>
|
|
<Heading level={2} weight="bold">
|
|
{heading}
|
|
</Heading>
|
|
</Stack>
|
|
<Stack>
|
|
{description}
|
|
</Stack>
|
|
</Stack>
|
|
|
|
{/* Mockup Panel */}
|
|
<Panel variant="dark">
|
|
<Stack align="center" justify="center">
|
|
{mockup}
|
|
</Stack>
|
|
</Panel>
|
|
</Grid>
|
|
</Container>
|
|
</Section>
|
|
);
|
|
}
|