65 lines
1.9 KiB
TypeScript
65 lines
1.9 KiB
TypeScript
import Link from "next/link";
|
|
import Image from "next/image";
|
|
|
|
type PageHeroProps = {
|
|
eyebrow: string;
|
|
title: string;
|
|
intro: string;
|
|
imageSrc: string;
|
|
imageAlt: string;
|
|
primaryCta?: { label: string; href: string };
|
|
secondaryCta?: { label: string; href: string };
|
|
};
|
|
|
|
export function PageHero({
|
|
eyebrow,
|
|
title,
|
|
intro,
|
|
imageSrc,
|
|
imageAlt,
|
|
primaryCta,
|
|
secondaryCta
|
|
}: PageHeroProps) {
|
|
return (
|
|
<section className="section-block pt-12 md:pt-16">
|
|
<div className="container-shell grid items-center gap-8 lg:grid-cols-[1.05fr_0.95fr]">
|
|
<div className="space-y-6">
|
|
<p className="eyebrow">{eyebrow}</p>
|
|
<h1 className="text-balance text-4xl font-semibold leading-tight text-alpine-900 sm:text-5xl">
|
|
{title}
|
|
</h1>
|
|
<p className="max-w-2xl text-lg leading-relaxed text-alpine-700">{intro}</p>
|
|
{(primaryCta || secondaryCta) && (
|
|
<div className="flex flex-wrap gap-3">
|
|
{primaryCta ? (
|
|
<Link className="btn-primary" href={primaryCta.href}>
|
|
{primaryCta.label}
|
|
</Link>
|
|
) : null}
|
|
{secondaryCta ? (
|
|
<Link className="btn-secondary" href={secondaryCta.href}>
|
|
{secondaryCta.label}
|
|
</Link>
|
|
) : null}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="relative overflow-hidden rounded-3xl border border-alpine-200 bg-white shadow-soft">
|
|
<div className="relative h-[300px] w-full sm:h-[360px]">
|
|
<Image
|
|
alt={imageAlt}
|
|
className="object-cover"
|
|
fill
|
|
priority
|
|
sizes="(min-width: 1024px) 42vw, 100vw"
|
|
src={imageSrc}
|
|
/>
|
|
</div>
|
|
<div className="absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-alpine-900/55 to-transparent" />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|