import Image from "next/image";
import { Reveal } from "./Reveal";
function Word({ children }: { children: string }) {
return (
{children}
);
}
function Arrow() {
return (
);
}
export function Divider() {
return (
{/* 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. */}
Klarheit
Fokus
Leichtigkeit
{/* 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. */}