feat: initialize IoT Standards Lab website project with MAM skills & onboarding guide

2026-07-29 23:43:59 +09:00
commit f3f53c1318
123 changed files with 19987 additions and 0 deletions
@@ -0,0 +1,62 @@
+import SectionLabel from "@/components/SectionLabel";
+import Reveal from "@/components/Reveal";
+
+/**
+ * Editorial page masthead. Korean serif headline + huge English display
+ * word, with magazine "NN / 05" spread numbering.
+ *
+ * CUSTOMIZATION HOOK — CONTENT: ko / en / display / description / index.
+ */
+export default function PageHeader({
+  ko,
+  en,
+  display,
+  description,
+  index,
+}: {
+  ko: string;
+  en: string;
+  display?: string;
+  description?: string;
+  index: number;
+}) {
+  return (
+    <section className="relative overflow-hidden border-b border-ink bg-ivory">
+      <div className="container-content pb-12 pt-14 sm:pb-16 sm:pt-20">
+        <Reveal>
+          <SectionLabel index={index} label={en} />
+        </Reveal>
+
+        <div className="mt-8 grid items-end gap-6 lg:grid-cols-12">
+          <Reveal className="lg:col-span-8" delay={80}>
+            <h1 className="headline-ko break-keep text-balance text-3xl leading-[1.05] text-ink sm:text-4xl lg:text-5xl">
+              {ko}
+            </h1>
+            {/* When a custom `display` word is provided, render it at the full
+                magazine scale. Otherwise fall back to `en` at the smaller
+                `display-sm` scale so long words like "Standardization" never
+                overflow the col-span-8 column. See LAYOUT_AUDIT #6 + #10. */}
+            <p
+              className={
+                display
+                  ? "display mt-2 break-keep text-vermillion"
+                  : "display-sm mt-2 break-keep text-vermillion"
+              }
+              aria-hidden
+            >
+              {display ?? en}
+            </p>
+          </Reveal>
+
+          {description && (
+            <Reveal className="lg:col-span-4" variant="right" delay={160}>
+              <p className="border-l-2 border-ink pl-5 text-sm leading-relaxed text-ink-soft">
+                {description}
+              </p>
+            </Reveal>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+}