Marco
9c9f0b02c0
Clears every remaining @next/next/no-img-element warning — automatic responsive srcset, lazy-loading, and format optimization instead of always loading the original file at full size. Fixed-size icons got explicit width/height; dynamic-aspect photos got fill inside a relative wrapper.
93 lines
3.9 KiB
TypeScript
93 lines
3.9 KiB
TypeScript
import Image from "next/image";
|
||
import { Reveal } from "./Reveal";
|
||
|
||
export function About() {
|
||
return (
|
||
<section id="ueber-bjoern" className="bg-bg-dark flex flex-col md:flex-row md:items-stretch w-full">
|
||
|
||
{/* Text content — relative + z-10 so it renders above the overlapping
|
||
photo at md+. Comes first in DOM at every breakpoint (no reorder
|
||
here — unlike Hero, there's no conversion CTA at stake). */}
|
||
<Reveal className="flex flex-col gap-4 justify-center px-[var(--layout-padding-x)] py-8 md:flex-[1_0_0] min-w-0 relative z-10">
|
||
|
||
{/* Large serif statement — width-constrained as per design */}
|
||
<p
|
||
className="font-semibold text-bg-white text-h-section leading-normal w-[17.625rem]"
|
||
style={{ fontFamily: "var(--font-lora)" }}
|
||
>
|
||
Ich glaube nicht, dass Menschen mehr Disziplin brauchen.
|
||
</p>
|
||
|
||
{/* Quote row: script quote / divider / author bio — side-by-side
|
||
from md+, stacked with a horizontal divider below md */}
|
||
<div className="flex flex-col md:flex-row md:items-start md:justify-between gap-6 md:gap-0 w-full">
|
||
|
||
{/* Caveat script text with signature positioned below */}
|
||
<div className="relative flex-1" style={{ minHeight: "8rem" }}>
|
||
<div
|
||
className="font-normal text-brand text-[2.25rem]"
|
||
style={{ fontFamily: "var(--font-caveat)", lineHeight: "2rem" }}
|
||
>
|
||
<p>Ich glaube,</p>
|
||
<p>sie brauchen </p>
|
||
<p>weniger Reibung.</p>
|
||
</div>
|
||
{/* Signature underline — hand-drawn organic stroke, sits just below the three Caveat lines (3 × 32px = 96px) */}
|
||
<div
|
||
className="absolute pointer-events-none"
|
||
style={{ top: "6.44rem", left: "1.5rem", width: "9.375rem", height: "1.375rem" }}
|
||
>
|
||
<svg viewBox="0 0 150 22" fill="none" className="w-full h-full text-brand" aria-hidden="true">
|
||
{/* Thin, near-constant-width ease-out sweep, traced from the actual
|
||
Figma signature-image raster (node 4175:150, page-home) — a single
|
||
smooth concave rise, no waviness/taper, ending ~88% across. */}
|
||
<path
|
||
d="M3,10 C20,8.3 35,6.7 50,5.4 C70,3.7 85,2.2 100,1.1 C112,0.5 122,0.3 131,0.1"
|
||
stroke="currentColor"
|
||
strokeWidth="1.3"
|
||
strokeLinecap="round"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Divider — horizontal full-width line below md, vertical
|
||
gold line beside the author bio from md+ */}
|
||
<div className="bg-brand w-full h-px md:w-[2px] md:h-24 md:mx-6 shrink-0" />
|
||
|
||
<div
|
||
className="text-bg-white font-normal whitespace-nowrap md:shrink-0"
|
||
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>
|
||
</Reveal>
|
||
|
||
{/* Author photo — overlaps the text column via -ml-48 from md+ only
|
||
(that overlap trick has nothing to blend into once stacked);
|
||
plain full-width photo below the text on Mobile. */}
|
||
<Reveal
|
||
className="relative overflow-hidden w-full md:flex-[1.4_0_0] md:-ml-48"
|
||
style={{ minHeight: "14rem" }}
|
||
delay={0.15}
|
||
>
|
||
<Image
|
||
alt="Björn"
|
||
src="/about-author.jpg"
|
||
fill
|
||
sizes="(min-width: 768px) 58vw, 100vw"
|
||
className="object-cover object-center pointer-events-none"
|
||
/>
|
||
{/* Left gradient: wide enough to cover the text-column overlap — md+ only */}
|
||
<div className="hidden md:block absolute inset-y-0 left-0 w-72 bg-gradient-to-r from-bg-dark to-transparent pointer-events-none" />
|
||
</Reveal>
|
||
|
||
</section>
|
||
);
|
||
}
|