30 lines
1.1 KiB
TypeScript
30 lines
1.1 KiB
TypeScript
import { HeroMotionBackdrop } from "@/components/layout/hero-motion-backdrop";
|
|
|
|
type PageHeroProps = {
|
|
title: string;
|
|
description?: string;
|
|
};
|
|
|
|
export function PageHero({ title, description }: PageHeroProps) {
|
|
return (
|
|
<section className="hero-surface hero-page relative isolate flex min-h-[42vh] items-end overflow-hidden">
|
|
<HeroMotionBackdrop compact />
|
|
<div className="relative z-10 mx-auto w-full max-w-[72rem] px-4 pb-10 pt-24 sm:px-6 lg:px-8 lg:pb-12 lg:pt-28">
|
|
<div className="mx-auto max-w-[42rem] text-center">
|
|
<p className="text-sm font-medium tracking-[-0.02em] text-foreground/58">
|
|
{title}
|
|
</p>
|
|
<h1 className="mt-4 text-balance text-4xl font-semibold leading-[0.9] tracking-[-0.07em] text-foreground sm:text-5xl lg:text-[4.5rem]">
|
|
{title}
|
|
</h1>
|
|
{description ? (
|
|
<p className="mx-auto mt-5 max-w-[32rem] text-sm leading-6 text-foreground/64 sm:text-base">
|
|
{description}
|
|
</p>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|