46 lines
1.4 KiB
TypeScript
46 lines
1.4 KiB
TypeScript
import SectionEyebrow from "./SectionEyebrow";
|
|
import NetworkGraphic from "./NetworkGraphic";
|
|
|
|
interface PageHeroProps {
|
|
eyebrow: string;
|
|
title: string;
|
|
highlight?: string;
|
|
subtitle: string;
|
|
accent?: "blue" | "green";
|
|
children?: React.ReactNode;
|
|
}
|
|
|
|
export default function PageHero({
|
|
eyebrow,
|
|
title,
|
|
highlight,
|
|
subtitle,
|
|
accent = "blue",
|
|
children,
|
|
}: PageHeroProps) {
|
|
return (
|
|
<section className="relative overflow-hidden border-b border-white/[0.06] px-6 pb-16 pt-32 sm:pb-20 sm:pt-40">
|
|
<div className="pointer-events-none absolute right-0 top-0 w-[420px] max-w-[60%] opacity-70 sm:opacity-100">
|
|
<NetworkGraphic accent={accent} className="w-full" />
|
|
</div>
|
|
<div className="mx-auto max-w-3xl">
|
|
<SectionEyebrow accent={accent}>{eyebrow}</SectionEyebrow>
|
|
<h1 className="text-balance font-display text-4xl font-medium leading-[1.1] sm:text-5xl">
|
|
{title}{" "}
|
|
{highlight && (
|
|
<span
|
|
className={accent === "green" ? "text-gradient-green" : "text-gradient-blue"}
|
|
>
|
|
{highlight}
|
|
</span>
|
|
)}
|
|
</h1>
|
|
<p className="mt-5 max-w-xl text-lg leading-relaxed text-ink-500">
|
|
{subtitle}
|
|
</p>
|
|
{children && <div className="mt-8 flex flex-wrap gap-3">{children}</div>}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|