63 lines
1.9 KiB
TypeScript
63 lines
1.9 KiB
TypeScript
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>
|
|
);
|
|
}
|