Files
haiyushuke-website/src/components/page-hero.tsx
2026-06-16 14:34:09 +08:00

36 lines
921 B
TypeScript

import Link from "next/link";
type PageHeroProps = {
eyebrow: string;
title: string;
lead: string;
backHref?: string;
backLabel?: string;
};
export function PageHero({
eyebrow,
title,
lead,
backHref = "/",
backLabel = "返回首页",
}: PageHeroProps) {
return (
<header className="page-hero band-light band-section">
<div className="container-site section-stack gap-6">
<Link
href={backHref}
className="page-hero__back type-caption-strong text-body no-underline hover:no-underline w-fit"
>
{backLabel}
</Link>
<div className="page-hero__copy">
<p className="section-eyebrow page-hero__eyebrow">{eyebrow}</p>
<h1 className="page-hero__title type-display-lg text-ink">{title}</h1>
<p className="page-hero__lead type-lead text-body">{lead}</p>
</div>
</div>
</header>
);
}