Build New Optic website

components/SectionHeader.tsx

@@ -0,0 +1,13 @@
+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>
+  );
+}