95 lines
2.6 KiB
TypeScript
95 lines
2.6 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/primitives/Stack';
|
|
|
|
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.
|
|
* Follows "Precision Racing Minimal" theme.
|
|
*/
|
|
export function HomeHeader({
|
|
title,
|
|
subtitle,
|
|
description,
|
|
primaryAction,
|
|
secondaryAction,
|
|
}: HomeHeaderProps) {
|
|
return (
|
|
<Stack as="header" position="relative" overflow="hidden" bg="graphite-black" py={{ base: 24, lg: 32 }} borderBottom borderColor="border-gray">
|
|
<Glow color="primary" size="xl" position="top-right" opacity={0.1} />
|
|
|
|
<Container>
|
|
<Stack maxWidth="4xl" fullWidth>
|
|
<Stack direction="row" align="center" gap={3} borderLeft borderStyle="solid" borderWidth="2px" borderColor="primary-accent" bg="primary-accent/5" px={4} py={1} mb={8}>
|
|
<Text size="xs" weight="bold" uppercase letterSpacing="0.3em" color="text-primary-accent">
|
|
{subtitle}
|
|
</Text>
|
|
</Stack>
|
|
|
|
<Heading
|
|
level={1}
|
|
fontSize={{ base: '5xl', md: '7xl', lg: '8xl' }}
|
|
weight="bold"
|
|
color="text-white"
|
|
letterSpacing="tighter"
|
|
lineHeight="0.9"
|
|
mb={8}
|
|
>
|
|
{title}
|
|
</Heading>
|
|
|
|
<Stack borderLeft borderStyle="solid" borderColor="border-gray" pl={8} mb={12} maxWidth="2xl">
|
|
<Text size="lg" color="text-gray-400" leading="relaxed" opacity={0.8}>
|
|
{description}
|
|
</Text>
|
|
</Stack>
|
|
|
|
<Stack direction={{ base: 'col', md: 'row' }} gap={4}>
|
|
<Button
|
|
as="a"
|
|
href={primaryAction.href}
|
|
variant="primary"
|
|
h="14"
|
|
px={12}
|
|
fontSize="xs"
|
|
>
|
|
{primaryAction.label}
|
|
</Button>
|
|
<Button
|
|
as="a"
|
|
href={secondaryAction.href}
|
|
variant="secondary"
|
|
h="14"
|
|
px={12}
|
|
fontSize="xs"
|
|
bg="transparent"
|
|
borderColor="border-gray"
|
|
hoverBorderColor="primary-accent/50"
|
|
>
|
|
{secondaryAction.label}
|
|
</Button>
|
|
</Stack>
|
|
</Stack>
|
|
</Container>
|
|
</Stack>
|
|
);
|
|
}
|