Initial Commit

src/components/layout/SectionHeader.astro

@@ -0,0 +1,50 @@
+---
+/**
+ * SectionHeader.astro
+ * ---------------------------------------------------------------------------
+ * Reusable section title block: a mono "kicker" (e.g. "02"), an h2 heading, and
+ * an optional supporting line. Keeps section openers visually consistent.
+ *
+ * The kicker is rendered as a monospace number/label per the spec's "Accent/
+ * quotes: a monospace or display font sparingly for section numbers" guidance.
+ */
+import Icon from '@components/Icon.astro';
+
+interface Props {
+  /** Monospace kicker, e.g. "02" or "Experience". */
+  kicker?: string;
+  title: string;
+  /** Optional subtitle shown under the title. */
+  subtitle?: string;
+  /** Optional mdi icon shown beside the kicker. */
+  icon?: string;
+  class?: string;
+  align?: 'left' | 'center';
+}
+
+const { kicker, title, subtitle, icon, class: className = '', align = 'left' } = Astro.props;
+---
+
+<div
+  class:list={[
+    'flex flex-col gap-3',
+    align === 'center' && 'items-center text-center',
+    className,
+  ]}
+>
+  {kicker && (
+    <span
+      class="inline-flex items-center gap-2 font-mono text-xs uppercase tracking-[0.22em]"
+      style="color: var(--color-accent);"
+    >
+      {icon && <Icon name={icon} class="h-4 w-4" />}
+      {kicker}
+    </span>
+  )}
+  <h2>{title}</h2>
+  {subtitle && (
+    <p class="max-w-2xl text-base sm:text-lg" style="color: var(--color-text-muted);">
+      {subtitle}
+    </p>
+  )}
+</div>