Marco
168 lines
8.9 KiB
TypeScript
168 lines
8.9 KiB
TypeScript
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import { PopIn, Reveal } from "./Reveal";
|
|
|
|
// Shared between the plain (below lg:) and Reveal-wrapped (lg:+) render —
|
|
// see the two call sites' own comment on why this needs two wrappers.
|
|
function HeroImage() {
|
|
return (
|
|
<Image
|
|
src="/hero.png"
|
|
alt=""
|
|
fill
|
|
priority
|
|
sizes="(min-width: 768px) 58vw, 100vw"
|
|
className="object-cover"
|
|
style={{
|
|
WebkitMaskImage:
|
|
"linear-gradient(to right, transparent 0%, black 14%), linear-gradient(to bottom, transparent 0%, black 10%)",
|
|
WebkitMaskComposite: "destination-in",
|
|
maskImage:
|
|
"linear-gradient(to right, transparent 0%, black 14%), linear-gradient(to bottom, transparent 0%, black 10%)",
|
|
maskComposite: "intersect",
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export function Hero() {
|
|
return (
|
|
<section className="bg-bg-base w-full overflow-hidden">
|
|
{/* Structural breakpoint is md: (768px) for the GRID only — the text
|
|
column stays ~283-320px wide through the whole 768-1023px Tablet
|
|
range regardless. Below, every piece of *content* inside the text
|
|
column (heading/subtitle/CTA/social-proof) keeps its smaller,
|
|
fixed-below-lg: sizing all the way through Tablet too, not just
|
|
true Mobile — reusing the full fluid-token sizes at md: (as a
|
|
first pass 2026-07-24 briefly did) put the original ~19-44px
|
|
fluid floors right back in that narrow column, recreating the
|
|
exact 3-line-wrap problem the old `lg:` structural exception
|
|
existed to avoid. Splitting "grid at md:" from "full-size content
|
|
at lg:" gets both: Tablet shows the real 5/7 grid, but with
|
|
content sized for its column's actual width, not the column
|
|
width `lg:` was designed for. */}
|
|
<div className="flex flex-col md:grid md:grid-cols-12 md:items-center gap-8 md:gap-[var(--layout-grid-gap)] pt-10 md:pt-0">
|
|
|
|
{/* Text content — first in DOM/visual order at every breakpoint so
|
|
the CTA stays above the fold on Mobile (deliberate exception to
|
|
the "keep DOM order" default, see Hero decision in the plan).
|
|
Reveal fires ~immediately since Hero is already in the initial
|
|
viewport — this doubles as the page's entrance animation. */}
|
|
<Reveal className="order-1 md:order-none md:col-span-5 flex flex-col gap-7 items-start pl-[var(--layout-padding-x)] pr-10 md:pr-0">
|
|
|
|
{/* Heading — smaller fixed-ish size below lg: (text-h1, still a
|
|
real paired font-size+line-height token, not an arbitrary
|
|
value) — text-display's own 44px floor wraps very heavily in
|
|
a ~283-320px Tablet column (even a single word can approach
|
|
that width). Forced break after "darf" only in the sm-md
|
|
tablet range (natural wrap there landed awkwardly); removed
|
|
at true mobile widths (below sm:) 2026-07-24 — narrower
|
|
still, natural wrap reads fine there, and the forced break
|
|
made "darf" the whole first line. Full text-display only
|
|
from lg: up, where the column has real room again. */}
|
|
<p
|
|
className="font-semibold leading-[0] shrink-0 text-[0px] text-text-primary"
|
|
style={{ fontFamily: "var(--font-playfair)" }}
|
|
>
|
|
<span className="text-h1 lg:text-display">
|
|
Verliere dich nicht<br className="hidden sm:inline md:hidden" /> im mehr. Finde heraus, was wichtig ist.
|
|
</span>
|
|
{/* Brand's signature orange dot (also in the logo/footer) —
|
|
bouncy pop-in once the heading scrolls into view, timed to
|
|
land just after the Reveal's own 0.6s fade-up so it reads
|
|
as a deliberate flourish, not simultaneous with the text.
|
|
One-shot, not a looping pulse — continuous motion next to
|
|
the primary CTA would be distracting rather than "cool".
|
|
Same text-h1 lg:text-display as the heading itself, so the
|
|
dot scales down to match below lg:. */}
|
|
<PopIn className="text-h1 lg:text-display text-brand inline-block" delay={0.5}>
|
|
.
|
|
</PopIn>
|
|
</p>
|
|
|
|
{/* Subheading — smaller fixed size below lg:, text-h-emphasis's
|
|
own 20px floor read too large next to the now-smaller CTA
|
|
text. leading shrinks to match, not just font-size. */}
|
|
<p className="font-semibold leading-[1.75rem] lg:leading-[2.375rem] min-w-full shrink-0 text-text-primary text-[1rem] lg:text-h-emphasis w-[min-content] [word-break:break-word] not-italic">
|
|
Ich helfe dir, zwischen Job, Familie und eigenen Projekten nicht unterzugehen
|
|
</p>
|
|
|
|
{/* CTA */}
|
|
<Link
|
|
href="/challenge"
|
|
className="flex gap-4 items-center justify-center overflow-clip px-6 py-3 rounded-sm shrink-0 max-w-full bg-brand hover:brightness-95 active:scale-[0.97] transition-all"
|
|
>
|
|
{/* Letting this wrap to two lines below lg: (tried 2026-07-24)
|
|
put the icon beside a two-line text block, which read as
|
|
broken rather than intentional. Smaller fixed size below
|
|
lg: instead, so the full phrase fits on one line within
|
|
the column's width — text-h3's own 19px floor was still
|
|
too wide for that, both on a 375px phone AND in the
|
|
~283-320px Tablet grid column. */}
|
|
<span className="font-semibold leading-[2.375rem] text-text-primary text-[0.8125rem] lg:text-h3 whitespace-nowrap not-italic">
|
|
Jetzt starten
|
|
</span>
|
|
{/* Scaled down to match the smaller CTA text (same ~0.76
|
|
aspect ratio as the lg: size), full size again from lg: up
|
|
alongside text-h3. */}
|
|
<div className="relative h-[0.8125rem] w-[1.0625rem] lg:h-[1.1875rem] lg:w-[1.5625rem] shrink-0">
|
|
<Image alt="" src="/icon-check.svg" fill sizes="(min-width: 1024px) 26px, 17px" />
|
|
</div>
|
|
</Link>
|
|
|
|
{/* Social proof — always avatars-then-text on two lines below
|
|
lg: (not just when it happens to overflow), single row again
|
|
from lg: up where the real column width fits it fine. */}
|
|
<div className="flex flex-col lg:flex-row gap-3 items-center justify-center overflow-clip shrink-0 w-full">
|
|
{/* Avatars — gap 2px, not overlapping */}
|
|
<div className="flex gap-[0.125rem] items-center shrink-0">
|
|
{["/avatar-1.jpg", "/avatar-2.jpg", "/avatar-3.jpg"].map((src, i) => (
|
|
<div
|
|
key={i}
|
|
className="relative rounded-full overflow-hidden shrink-0"
|
|
style={{ width: "var(--hero-avatar-size)", height: "var(--hero-avatar-size)" }}
|
|
>
|
|
<Image src={src} alt="" fill sizes="46px" className="object-cover" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
<p className="flex-[1_0_0] font-normal leading-[1.5rem] text-text-primary text-body text-center [word-break:break-word]">
|
|
1.120+ Menschen vertrauen <span className="whitespace-nowrap">einfach-produktiv</span>
|
|
</p>
|
|
</div>
|
|
</Reveal>
|
|
|
|
{/* Image — bleeds to the true edge at every breakpoint (never
|
|
padded). Below md: (stacked layout) the full 887:583 aspect
|
|
ratio at 100vw would make the image ~600-900px tall and
|
|
dominate the page, so height is capped and object-cover crops
|
|
it into a supporting banner instead; at md:+ (grid, image only
|
|
58% width) the full aspect ratio looks right again, so the cap
|
|
is lifted. No shadow: a plain box-shadow reads as a hard
|
|
rectangular edge against the existing corner/right/bottom
|
|
mask-gradient fade below, which looked worse than no shadow at
|
|
all — tried and reverted. */}
|
|
{/* No Reveal (fade-in-on-scroll) below md: — whileInView's -80px
|
|
viewport margin means the image doesn't fade in until scrolled
|
|
that much further into view; on a short mobile viewport this
|
|
image sits right at the initial fold, so it stayed at
|
|
opacity:0 (a white gap, matching the section's own bg-bg-base)
|
|
above the fold until the user scrolled (reported 2026-07-24).
|
|
Plain, always-visible image below md: instead; Reveal's fade
|
|
kept from md: up, where the image is beside the text with
|
|
plenty of room and this was never an issue. */}
|
|
<div className="order-2 md:hidden relative w-full aspect-[887/583] max-h-[16rem]">
|
|
<HeroImage />
|
|
</div>
|
|
<Reveal
|
|
className="hidden md:block md:col-span-7 relative w-full aspect-[887/583]"
|
|
delay={0.15}
|
|
>
|
|
<HeroImage />
|
|
</Reveal>
|
|
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|