Marco
2505a87717
Strategy: one layout breakpoint at lg (1024px), clamp() for fluid type. Navbar: hamburger menu (animated ✕) with max-h dropdown, resize-close, h-20 mobile / h-[6.25rem] desktop, blur triggers on scroll or menu-open. Hero: flex-col→lg:flex-row, clamp(2rem,5vw,4rem) heading, background-image scales responsively, gradient mask via .hero-mask only at lg+ in CSS. Divider: flex-wrap + gap-y for smaller screens. Tools: grid-cols-1→md:2→lg:3, removed fixed height and per-card paddingRight. Blog: featured flex-col→lg:flex-row, secondary flex-col→md:flex-row, excerpt hidden on mobile secondary cards to save space. About: flex-col→lg:flex-row, clamp on quote size, min-h-[18rem] for photo. Newsletter: flex-col→lg:flex-row, input+button stack on xs / row on sm+. Footer: flex-col→lg:flex-row, flex-wrap on legal links. globals.css: scroll-padding-top 5rem mobile / 6.25rem desktop. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
71 lines
2.6 KiB
TypeScript
71 lines
2.6 KiB
TypeScript
export function About() {
|
|
return (
|
|
<section id="ueber-bjoern" className="bg-[#111] flex flex-col lg:flex-row items-stretch w-full">
|
|
|
|
{/* Left: text content */}
|
|
<div className="flex-[1_0_0] flex flex-col gap-4 justify-center px-4 md:px-8 lg:px-[5rem] py-10 lg:py-8 min-w-0">
|
|
|
|
{/* Large serif statement */}
|
|
<p
|
|
className="font-semibold text-white leading-normal"
|
|
style={{ fontFamily: "var(--font-lora)", fontSize: "clamp(1.375rem, 2.5vw, 1.75rem)", maxWidth: "17.625rem" }}
|
|
>
|
|
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 gap-4">
|
|
|
|
{/* Caveat script text with signature */}
|
|
<div className="relative flex-1" style={{ minHeight: "8rem" }}>
|
|
<div
|
|
className="font-normal text-[#f6a701]"
|
|
style={{ fontFamily: "var(--font-caveat)", fontSize: "clamp(1.75rem, 3vw, 2.25rem)", lineHeight: "2rem" }}
|
|
>
|
|
<p>Ich glaube,</p>
|
|
<p>sie brauchen </p>
|
|
<p>weniger Reibung.</p>
|
|
</div>
|
|
<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 divider + author */}
|
|
<div className="flex gap-4 lg: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: "clamp(0.875rem, 1.5vw, 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 */}
|
|
<div className="flex-[1_0_0] relative overflow-hidden" style={{ minHeight: "18rem" }}>
|
|
<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>
|
|
);
|
|
}
|