Initial deploy

components/section-heading.tsx

@@ -0,0 +1,27 @@
+type SectionHeadingProps = {
+  eyebrow: string;
+  title: string;
+  description?: string;
+  align?: "left" | "center";
+};
+
+export function SectionHeading({
+  eyebrow,
+  title,
+  description,
+  align = "left",
+}: SectionHeadingProps) {
+  const alignment = align === "center" ? "mx-auto max-w-3xl text-center" : "max-w-3xl";
+
+  return (
+    <div className={alignment}>
+      <p className="section-kicker">{eyebrow}</p>
+      <h2 className="type-section-title mt-4 text-[var(--color-ink)]">
+        {title}
+      </h2>
+      {description ? (
+        <p className="type-body-responsive mt-5 text-[var(--color-muted)]">{description}</p>
+      ) : null}
+    </div>
+  );
+}