63 lines
1.7 KiB
TypeScript
63 lines
1.7 KiB
TypeScript
import * as React from "react"
|
|
|
|
import { cn } from "@/lib/utils"
|
|
import { Container } from "@/components/gebos/section"
|
|
|
|
/**
|
|
* Split hero: copy left (breadcrumb/eyebrow, H1, lead, CTAs, extra),
|
|
* visual right, soft radial glow behind.
|
|
*/
|
|
function PageHero({
|
|
breadcrumb,
|
|
title,
|
|
lead,
|
|
actions,
|
|
extra,
|
|
visual,
|
|
className,
|
|
}: {
|
|
breadcrumb?: React.ReactNode
|
|
title: React.ReactNode
|
|
lead?: React.ReactNode
|
|
actions?: React.ReactNode
|
|
/** slot below the actions (e.g. hint pill) */
|
|
extra?: React.ReactNode
|
|
visual?: React.ReactNode
|
|
className?: string
|
|
}) {
|
|
return (
|
|
<div className={cn("bg-hero-glow", className)}>
|
|
{breadcrumb ? (
|
|
<Container className="pt-6 lg:pt-8">{breadcrumb}</Container>
|
|
) : null}
|
|
<Container
|
|
className={cn(
|
|
"grid items-center gap-10 pb-14 sm:pb-16 lg:grid-cols-[1.05fr_0.95fr] lg:gap-6 lg:pb-20",
|
|
/* breadcrumb already provides the top offset */
|
|
breadcrumb ? "pt-5" : "pt-14 sm:pt-16 lg:pt-20"
|
|
)}
|
|
>
|
|
<div className={cn("max-w-xl", breadcrumb && "lg:self-start")}>
|
|
<h1 className="text-4xl font-extrabold tracking-tight text-balance text-navy sm:text-5xl">
|
|
{title}
|
|
</h1>
|
|
{lead ? (
|
|
<p className="mt-4 max-w-lg text-base leading-relaxed text-pretty text-muted-foreground sm:text-lg">
|
|
{lead}
|
|
</p>
|
|
) : null}
|
|
{actions ? (
|
|
<div className="mt-7 flex flex-wrap items-center gap-3">
|
|
{actions}
|
|
</div>
|
|
) : null}
|
|
{extra ? <div className="mt-6">{extra}</div> : null}
|
|
</div>
|
|
{visual ? <div className="relative w-full">{visual}</div> : null}
|
|
</Container>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export { PageHero }
|