Marco
1cc3e30987
Two-column layout: left column stacks serif statement above a row of Caveat quote (flex-1) + 2px golden divider + author bio (shrink-0). Signature image is absolute-positioned just below the three Caveat lines (top: 6.44rem = 3 × 32px line-height). Right column is a full-height overflow-hidden container with object-cover author photo. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
72 lines
2.6 KiB
TypeScript
72 lines
2.6 KiB
TypeScript
export function About() {
|
||
return (
|
||
<section className="bg-[#111] flex items-stretch w-full">
|
||
|
||
{/* Left: text content */}
|
||
<div className="flex-1 flex flex-col gap-4 justify-center px-[5rem] py-8 min-w-0">
|
||
|
||
{/* Large serif statement — width-constrained as per design */}
|
||
<p
|
||
className="font-semibold text-white text-[1.75rem] leading-normal w-[17.625rem]"
|
||
style={{ fontFamily: "var(--font-lora)" }}
|
||
>
|
||
Ich glaube nicht, dass Menschen mehr Disziplin brauchen.
|
||
</p>
|
||
|
||
{/* Quote row: script quote + golden divider + author bio */}
|
||
<div className="flex items-start justify-between w-full">
|
||
|
||
{/* Caveat script text with signature positioned below */}
|
||
<div className="relative flex-1" style={{ minHeight: "8rem" }}>
|
||
<div
|
||
className="font-normal text-[#f6a701] text-[2.25rem]"
|
||
style={{ fontFamily: "var(--font-caveat)", lineHeight: "2rem" }}
|
||
>
|
||
<p>Ich glaube,</p>
|
||
<p>sie brauchen </p>
|
||
<p>weniger Reibung.</p>
|
||
</div>
|
||
{/* Signature — absolute, sits just below the three Caveat lines (3 × 32px = 96px) */}
|
||
<div
|
||
className="absolute overflow-hidden pointer-events-none"
|
||
style={{ top: "6.44rem", left: "1.5rem", width: "9.375rem", height: "1.375rem" }}
|
||
>
|
||
<img
|
||
alt=""
|
||
src="/about-signature.png"
|
||
className="absolute max-w-none"
|
||
style={{ width: "101.25%", height: "118.18%", left: "-0.62%", top: "-17.72%" }}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Golden vertical divider + author lines */}
|
||
<div className="flex gap-6 items-start shrink-0">
|
||
<div className="bg-[#f6a701] w-[2px] h-24 shrink-0" />
|
||
<div
|
||
className="text-white font-normal whitespace-nowrap"
|
||
style={{ fontSize: "1rem", lineHeight: "1.5rem" }}
|
||
>
|
||
<p>Björn.</p>
|
||
<p>Führungskraft.</p>
|
||
<p>Familienmensch.</p>
|
||
<p>Gründer von einfach-produktiv.</p>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
{/* Right: author photo fills full column height */}
|
||
<div className="flex-1 relative overflow-hidden" style={{ minHeight: "14rem" }}>
|
||
<img
|
||
alt="Björn"
|
||
src="/about-author.jpg"
|
||
className="absolute inset-0 w-full h-full object-cover object-center pointer-events-none"
|
||
/>
|
||
</div>
|
||
|
||
</section>
|
||
);
|
||
}
|