Marco
54 lines
1.9 KiB
TypeScript
54 lines
1.9 KiB
TypeScript
export function Tagline() {
|
|
const textClass =
|
|
"font-light text-black uppercase leading-[0.84] tracking-[-0.08em] " +
|
|
"text-[clamp(40px,6.67vw,96px)]";
|
|
|
|
return (
|
|
<section className="bg-white px-4 md:px-8 py-[120px]">
|
|
{/* Top: label + divider */}
|
|
<div className="flex flex-col gap-3 items-end mb-6">
|
|
<span className="font-mono text-sm text-[#1f1f1f] uppercase leading-[1.1]">
|
|
[ 8+ years in industry ]
|
|
</span>
|
|
<hr className="w-full border-t border-[#1f1f1f]" />
|
|
</div>
|
|
|
|
{/* Staggered text block */}
|
|
<div className="flex flex-col gap-2">
|
|
{/* Line 1: "A CREATIVE DIRECTOR /" + "001" */}
|
|
<div className="flex items-start gap-3">
|
|
<span className={textClass}>A creative director /</span>
|
|
<span className="font-mono text-sm text-[#1f1f1f] mt-1 shrink-0">001</span>
|
|
</div>
|
|
|
|
{/* Line 2: "PHOTOGRAPHER" — indented */}
|
|
<div className="md:pl-[214px]">
|
|
<span className={textClass}>Photographer</span>
|
|
</div>
|
|
|
|
{/* Line 3: "BORN & RAISED" — indented further */}
|
|
<div className="md:pl-[610px]">
|
|
<span className={textClass}>
|
|
Born{" "}
|
|
<em style={{ fontFamily: "var(--font-playfair)" }}>&</em>{" "}
|
|
raised
|
|
</span>
|
|
</div>
|
|
|
|
{/* Line 4: "ON THE SOUTH SIDE" — no indent */}
|
|
<div>
|
|
<span className={textClass}>on the south side</span>
|
|
</div>
|
|
|
|
{/* Line 5: "OF CHICAGO." + "[ creative freelancer ]" label */}
|
|
<div className="flex items-start gap-4 md:pl-[606px]">
|
|
<span className={textClass}>of chicago.</span>
|
|
<span className="hidden md:block font-mono text-sm text-[#1f1f1f] shrink-0 translate-y-[26px]">
|
|
[ creative freelancer ]
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|