Marco
e4f0c66d7b
New /todo-cards page (Hero, How-it-works, Focus, Testimonials, Pricing) built with the fluid clamp() token system (app/lib/fluid.ts) and scroll-reveal animations (app/components/Reveal.tsx), matching styling consistency with /challenge's testimonial section. Navbar: page-aware active state and anchor-link navigation from any route (not just "/"), fixed logo click to actually navigate instead of silently rewriting the URL, fluid nav text size, custom hash-scroll handling for cross-page anchor links. Hero: responsive breakpoint fix for the text/image split at Tablet widths, entrance animation for the brand's orange dot, removed a red dot artifact from hero.png. Also includes prior uncommitted work on About/Blog/Newsletter/Footer and the cart lib (app/lib/cart.ts). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
69 lines
2.3 KiB
TypeScript
69 lines
2.3 KiB
TypeScript
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)" }}>
|
|
<img alt="" src="/icon-separator.svg" className="absolute inset-0 w-full h-full" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function Divider() {
|
|
return (
|
|
<Reveal 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)" }}
|
|
>
|
|
<img alt="" src="/icon-separator-right.svg" className="absolute inset-0 w-full h-full" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</Reveal>
|
|
);
|
|
}
|