Marco
55de9b3e29
- Hero CTA: whitespace-nowrap forced the button as wide as the full 32-char phrase, overflowing the stacked mobile column. Now wraps to two lines below lg:, single line from lg: up where there's room. - Navbar: the account/cart icons are 44px touch targets with the glyph centered inside, so the outer gap-2 read as too much space on top of that padding. Grouped them with no gap between just the two. - Divider: "Klarheit -> Fokus -> Entlastung" plus its connector icons needs ~550px to fit one row even at the site's 768px fluid floor, far more than a phone's ~310px content width. Added a component-scoped --divider-word-size (independent from --text-h2) plus a <640px override that shrinks the words/icons/gaps together.
78 lines
2.7 KiB
TypeScript
78 lines
2.7 KiB
TypeScript
import Image from "next/image";
|
|
import { Reveal } from "./Reveal";
|
|
|
|
function Word({ children }: { children: string }) {
|
|
return (
|
|
<p
|
|
className="font-bold leading-normal text-text-primary text-[length:var(--divider-word-size)] whitespace-nowrap"
|
|
style={{ fontFamily: "var(--font-caveat)" }}
|
|
>
|
|
{children}
|
|
</p>
|
|
);
|
|
}
|
|
|
|
function Arrow() {
|
|
return (
|
|
<div className="flex items-center justify-center shrink-0">
|
|
<div className="-scale-y-100 rotate-180">
|
|
<div className="relative" style={{ height: "var(--divider-arrow-h)", width: "var(--divider-arrow-w)" }}>
|
|
<Image alt="" src="/icon-separator.svg" fill sizes="48px" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function Divider() {
|
|
return (
|
|
<Reveal
|
|
delay={0.3}
|
|
className="flex items-center justify-center flex-wrap gap-x-3 sm:gap-x-8 gap-y-3 pb-5 pt-12 px-[var(--layout-padding-x)] w-full bg-bg-base text-center"
|
|
>
|
|
|
|
{/* Word + its trailing icon are grouped into one shrink-0 flex unit
|
|
so flex-wrap only ever breaks BETWEEN pairs, never leaving an
|
|
arrow stranded alone on its own line — the arrows are always
|
|
visible now (previously hidden below md: entirely to sidestep
|
|
that exact problem), this fixes the root cause instead.
|
|
gap-3/sm:gap-8 (not a flat gap-8): below 640px the words and
|
|
icons already shrink via --divider-word-size/--divider-arrow-*
|
|
(see globals.css), tightening the gaps too is what gets the
|
|
whole phrase close to fitting on one row instead of each pair
|
|
wrapping to its own line. */}
|
|
<div className="flex items-center gap-3 sm:gap-8 shrink-0">
|
|
<Word>Klarheit</Word>
|
|
<Arrow />
|
|
</div>
|
|
|
|
<div className="flex items-center gap-3 sm:gap-8 shrink-0">
|
|
<Word>Fokus</Word>
|
|
<Arrow />
|
|
</div>
|
|
|
|
<div className="flex items-center gap-3 sm:gap-8 shrink-0">
|
|
<Word>Entlastung</Word>
|
|
|
|
{/* Sparkle icon — sizes now fluid (--divider-sparkle-*) to match
|
|
the text-h2 words next to it, previously hard rem values that
|
|
stayed visually static while the words scaled. */}
|
|
<div
|
|
className="flex items-center justify-center"
|
|
style={{ height: "var(--divider-sparkle-h)", width: "var(--divider-sparkle-w)" }}
|
|
>
|
|
<div style={{ rotate: "4.6deg" }}>
|
|
<div
|
|
className="relative"
|
|
style={{ height: "var(--divider-sparkle-inner-h)", width: "var(--divider-sparkle-inner-w)" }}
|
|
>
|
|
<Image alt="" src="/icon-separator-right.svg" fill sizes="48px" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</Reveal>
|
|
);
|
|
}
|