// One header pattern for every page: eyebrow + title, title matching the nav
// label so users always know where they are.
export function PageHeader({
  eyebrow,
  title,
  description,
}: {
  eyebrow: string;
  title: string;
  description?: string;
}) {
  return (
    <div>
      <p className="caption text-[10px] uppercase tracking-[0.2em] text-[#2663AC]">{eyebrow}</p>
      <h1 className="mt-0.5 text-2xl font-black tracking-tight text-slate-900">{title}</h1>
      {description ? <p className="mt-1 max-w-2xl text-sm text-slate-600">{description}</p> : null}
    </div>
  );
}