76 lines
1.7 KiB
TypeScript
76 lines
1.7 KiB
TypeScript
import React from 'react';
|
|
import { Section } from './Section';
|
|
import { Container } from './Container';
|
|
import { Stack } from './Stack';
|
|
import { Glow } from './Glow';
|
|
import { Heading } from './Heading';
|
|
import { Text } from './Text';
|
|
import { ButtonGroup } from './ButtonGroup';
|
|
import { Button } from './Button';
|
|
|
|
interface LandingHeroProps {
|
|
title: string;
|
|
subtitle: string;
|
|
description: string;
|
|
primaryAction: {
|
|
label: string;
|
|
href: string;
|
|
};
|
|
secondaryAction: {
|
|
label: string;
|
|
href: string;
|
|
};
|
|
}
|
|
|
|
/**
|
|
* LandingHero - A semantic hero section for landing pages.
|
|
*/
|
|
export function LandingHero({
|
|
title,
|
|
subtitle,
|
|
description,
|
|
primaryAction,
|
|
secondaryAction,
|
|
}: LandingHeroProps) {
|
|
return (
|
|
<Section variant="dark" padding="lg">
|
|
<Glow color="primary" size="xl" position="top-right" opacity={0.1} />
|
|
|
|
<Container>
|
|
<Stack gap={8} maxWidth="3xl">
|
|
<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>
|
|
);
|
|
}
|