77 lines
1.7 KiB
TypeScript
77 lines
1.7 KiB
TypeScript
'use client';
|
|
|
|
import { Button } from '@/ui/Button';
|
|
import { Container } from '@/ui/Container';
|
|
import { Glow } from '@/ui/Glow';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Text } from '@/ui/Text';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Section } from '@/ui/Section';
|
|
import { ButtonGroup } from '@/ui/ButtonGroup';
|
|
|
|
interface HomeHeaderProps {
|
|
title: string;
|
|
subtitle: string;
|
|
description: string;
|
|
primaryAction: {
|
|
label: string;
|
|
href: string;
|
|
};
|
|
secondaryAction: {
|
|
label: string;
|
|
href: string;
|
|
};
|
|
}
|
|
|
|
/**
|
|
* HomeHeader - Semantic hero section for the landing page.
|
|
*/
|
|
export function HomeHeader({
|
|
title,
|
|
subtitle,
|
|
description,
|
|
primaryAction,
|
|
secondaryAction,
|
|
}: HomeHeaderProps) {
|
|
return (
|
|
<Section variant="dark" padding="lg">
|
|
<Glow color="primary" size="xl" position="top-right" opacity={0.1} />
|
|
|
|
<Container>
|
|
<Stack gap={8}>
|
|
<Text size="xs" weight="bold" uppercase variant="primary">
|
|
{subtitle}
|
|
</Text>
|
|
|
|
<Heading level={1} weight="bold">
|
|
{title}
|
|
</Heading>
|
|
|
|
<Text size="lg" variant="low">
|
|
{description}
|
|
</Text>
|
|
|
|
<ButtonGroup gap={4}>
|
|
<Button
|
|
as="a"
|
|
href={primaryAction.href}
|
|
variant="primary"
|
|
size="lg"
|
|
>
|
|
{primaryAction.label}
|
|
</Button>
|
|
<Button
|
|
as="a"
|
|
href={secondaryAction.href}
|
|
variant="secondary"
|
|
size="lg"
|
|
>
|
|
{secondaryAction.label}
|
|
</Button>
|
|
</ButtonGroup>
|
|
</Stack>
|
|
</Container>
|
|
</Section>
|
|
);
|
|
}
|