components/ui/section-heading.tsx

@@ -0,0 +1,52 @@
+import type { ReactNode } from "react";
+import { cn } from "@/lib/utils";
+
+/**
+ * 区块标题：DESIGN.md 中反复出现的「大写微标签 + 标题 + 描述」结构。
+ * 微标签使用 {typography.micro-uppercase}（11px / 600 / +0.5px 字距）。
+ */
+export interface SectionHeadingProps {
+	/** 标签上方的大写微标签 */
+	eyebrow?: string;
+	title: ReactNode;
+	description?: ReactNode;
+	className?: string;
+	/** 对齐方式，默认居中（营销区块）；文档面可用 left */
+	align?: "center" | "left";
+	as?: "h1" | "h2" | "h3";
+}
+
+export function SectionHeading({
+	eyebrow,
+	title,
+	description,
+	className,
+	align = "center",
+	as: Heading = "h2",
+}: SectionHeadingProps) {
+	return (
+		<div
+			className={cn(
+				"flex flex-col gap-sm",
+				align === "center" ? "items-center text-center" : "items-start text-left",
+				className,
+			)}
+		>
+			{eyebrow ? (
+				<p className="text-micro-uppercase font-semibold uppercase tracking-[0.5px] text-steel">
+					{eyebrow}
+				</p>
+			) : null}
+
+			<Heading className="text-heading-2 font-semibold text-ink text-balance-pretty">
+				{title}
+			</Heading>
+
+			{description ? (
+				<p className="max-w-[640px] text-subtitle text-steel text-balance-pretty">
+					{description}
+				</p>
+			) : null}
+		</div>
+	);
+}