update home page

components/shared/SectionHeading.tsx

@@ -0,0 +1,72 @@
+import { type ReactNode } from "react";
+
+interface SectionHeadingProps {
+  /** Small tag label — e.g. "team", "get in touch" */
+  tag?: string;
+  /** Main heading text */
+  title: string | ReactNode;
+  /** Optional description paragraph below the heading */
+  description?: string;
+  /** HTML heading level */
+  titleAs?: "h1" | "h2" | "h3" | "h4";
+  /** Wrapper className */
+  className?: string;
+  /** Title className override */
+  titleClassName?: string;
+  /** Description className override */
+  descriptionClassName?: string;
+  /** Tag className override */
+  tagClassName?: string;
+}
+
+/**
+ * SectionHeading — page-level section header.
+ *
+ * Pattern: [tag] + heading + optional description.
+ * Used for top-level section titles across all pages.
+ *
+ * For card-internal headings, use `CardHeading` instead.
+ */
+export function SectionHeading({
+  tag,
+  title,
+  description,
+  titleAs: Tag = "h2",
+  className = "",
+  titleClassName = "",
+  descriptionClassName = "",
+  tagClassName = "",
+}: SectionHeadingProps) {
+  return (
+    <div className={className}>
+      {tag && (
+        <span
+          className={`aiero-subheading mb-4 text-aiero-teal ${tagClassName}`}
+          style={{ fontFamily: "var(--font-sora)" }}
+        >
+          {tag}
+        </span>
+      )}
+
+      <Tag
+        className={`tracking-[-0.03em] ${titleClassName}`}
+        style={{
+          fontFamily: "var(--font-dm-sans)",
+          fontSize: "clamp(32px, 4vw, 56px)",
+          fontWeight: 500,
+          lineHeight: 1.1,
+        }}
+      >
+        {title}
+      </Tag>
+
+      {description && (
+        <p
+          className={`mt-6 text-base leading-relaxed text-aiero-text-muted ${descriptionClassName}`}
+        >
+          {description}
+        </p>
+      )}
+    </div>
+  );
+}