Files
New-Optic/components/SectionHeader.tsx
2026-05-16 00:04:02 +01:00

14 lines
717 B
TypeScript

import { cn } from "@/lib/utils";
export default function SectionHeader({ eyebrow, title, body, tone = "light" }: { eyebrow: string; title: string; body?: string; tone?: "light" | "dark" }) {
const isDark = tone === "dark";
return (
<div className="mx-auto max-w-3xl text-center">
<p className={cn("mb-4 text-xs font-semibold uppercase tracking-[0.28em]", isDark ? "text-optical/90" : "text-optical/75")}>{eyebrow}</p>
<h2 className={cn("text-3xl font-semibold tracking-[-0.045em] sm:text-5xl", isDark ? "text-white" : "text-ink")}>{title}</h2>
{body ? <p className={cn("mt-5 text-base leading-8 sm:text-lg", isDark ? "text-white/72" : "text-ink/62")}>{body}</p> : null}
</div>
);
}