Marco
cc935420ec
Tablet layout (768-1023px) hit the md: grid switch exactly where the fluid clamp() tokens were already at their floor, leaving no room to shrink. Moves the fluid floor and structural breakpoint down together to sm: (640px) so real tablets always get the fluid, desktop-like structure; consolidates the ad-hoc md:+lg: patchwork in Hero/About/ Newsletter/Footer/Tools back onto one line, leaving documented lg: exceptions where content genuinely doesn't fit yet. Also shortens the Hero heading to a single sentence with no trailing period (the brand's orange dot already renders one, animated).
111 lines
5.2 KiB
TypeScript
111 lines
5.2 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 sm:flex-row sm:items-stretch w-full">
|
||
|
||
{/* Text content — relative + z-10 so it renders above the overlapping
|
||
photo from sm+. Comes first in DOM at every breakpoint (no
|
||
reorder here — unlike Hero, there's no conversion CTA at stake).
|
||
Used to be md:flex-[1.4_0_0] lg:flex-[1_0_0]: a two-step ratio
|
||
where Tablet got a wider, non-overlap-ready share and only
|
||
reverted to the real 1:1.4 Desktop ratio at lg: — that in-between
|
||
step existed purely to compensate for the grid arriving (at the
|
||
old md: 768px) before the fluid tokens had room to shrink.
|
||
Now the grid itself starts at sm: (640px), aligned with the
|
||
fluid floor, so the single real ratio applies from sm: up
|
||
directly — no intermediate step needed. */}
|
||
<Reveal className="flex flex-col gap-4 justify-center px-[var(--layout-padding-x)] py-8 sm: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
|
||
only from lg: (1024px), a deliberate exception to the site's
|
||
sm: (640px) structural consolidation: quote + divider + the
|
||
whitespace-nowrap bio ("Gründer von einfach-produktiv.")
|
||
together need more room than the sm:-anchored text column has
|
||
through the whole 640-1023px range, independent of the outer
|
||
text/image ratio above. Stacked with a horizontal divider
|
||
through that whole range instead, side-by-side (vertical
|
||
divider) only once there's real room at lg:. */}
|
||
<div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-6 lg: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 lg:, vertical
|
||
gold line beside the author bio from lg: */}
|
||
<div className="bg-brand w-full h-px lg:w-[2px] lg:h-24 lg:mx-6 shrink-0" />
|
||
|
||
<div
|
||
className="text-bg-white font-normal whitespace-nowrap lg: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 sm+ now
|
||
(moved down together with the ratio collapse above — the overlap
|
||
trick and the 1:1.4 share are the same Desktop-style treatment,
|
||
previously gated behind the extra lg: step for the same reason
|
||
the ratio was, so both move together); plain full-width photo
|
||
below the text on true Mobile only. */}
|
||
<Reveal
|
||
className="relative overflow-hidden w-full sm:flex-[1.4_0_0] sm:-ml-48"
|
||
style={{ minHeight: "14rem" }}
|
||
delay={0.15}
|
||
>
|
||
<Image
|
||
alt="Björn"
|
||
src="/about-author.jpg"
|
||
fill
|
||
sizes="(min-width: 640px) 58vw, 100vw"
|
||
className="object-cover object-center pointer-events-none"
|
||
/>
|
||
{/* Left gradient: wide enough to cover the text-column overlap — moved to sm+ with the overlap itself */}
|
||
<div className="hidden sm:block absolute inset-y-0 left-0 w-72 bg-gradient-to-r from-bg-dark to-transparent pointer-events-none" />
|
||
</Reveal>
|
||
|
||
</section>
|
||
);
|
||
}
|