31 lines
1005 B
TypeScript
31 lines
1005 B
TypeScript
import Link from "next/link";
|
|
import type { HeroBlockValue } from "@/types/wagtail";
|
|
|
|
export default function Hero({ value }: { value: HeroBlockValue }) {
|
|
return (
|
|
<section className="relative overflow-hidden bg-gradient-to-b from-slate-50 to-white py-32">
|
|
<div className="mx-auto flex max-w-5xl flex-col items-center px-6 text-center">
|
|
<h1 className="mb-6 text-5xl font-bold leading-tight text-slate-900">
|
|
{value.title}
|
|
</h1>
|
|
{value.subtitle && (
|
|
<p className="mb-10 max-w-2xl text-lg leading-8 text-slate-600">
|
|
{value.subtitle}
|
|
</p>
|
|
)}
|
|
<div className="flex gap-4">
|
|
{value.buttons?.map((button, index) => (
|
|
<Link
|
|
key={`${button.link}-${index}`}
|
|
href={button.link}
|
|
className="rounded-2xl bg-primary px-8 py-4 text-white"
|
|
>
|
|
{button.text}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|