29 lines
959 B
TypeScript
29 lines
959 B
TypeScript
import { GlassBox } from "@/components/GlassBox";
|
|
import { Placeholder } from "@/components/Placeholder";
|
|
import { Container } from "@/components/Container";
|
|
|
|
export function PageHero({
|
|
kicker,
|
|
title,
|
|
image,
|
|
}: {
|
|
kicker: string;
|
|
title: string;
|
|
image: string;
|
|
}) {
|
|
return (
|
|
<section className="relative h-[42vh] min-h-[280px] overflow-hidden bg-ink">
|
|
<Placeholder src={image} alt="" className="absolute inset-0 h-full w-full object-cover" />
|
|
<div className="absolute inset-0 bg-gradient-to-t from-black/40 to-black/10" />
|
|
<div className="absolute inset-x-0 bottom-0">
|
|
<Container className="px-4 sm:px-6">
|
|
<GlassBox frostSrc={image} className="relative mb-6 inline-block max-w-lg px-8 py-7">
|
|
<p className="section-kicker">{kicker}</p>
|
|
<h1 className="mt-2 text-3xl font-extrabold sm:text-5xl">{title}</h1>
|
|
</GlassBox>
|
|
</Container>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|