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.
73 lines
2.3 KiB
TypeScript
73 lines
2.3 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-h2 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-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. */}
|
|
<div className="flex items-center gap-8 shrink-0">
|
|
<Word>Klarheit</Word>
|
|
<Arrow />
|
|
</div>
|
|
|
|
<div className="flex items-center gap-8 shrink-0">
|
|
<Word>Fokus</Word>
|
|
<Arrow />
|
|
</div>
|
|
|
|
<div className="flex items-center 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>
|
|
);
|
|
}
|