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>
Strategy: one layout breakpoint at lg (1024px), clamp() for fluid type.
Navbar: hamburger menu (animated ✕) with max-h dropdown, resize-close,
h-20 mobile / h-[6.25rem] desktop, blur triggers on scroll or menu-open.
Hero: flex-col→lg:flex-row, clamp(2rem,5vw,4rem) heading, background-image
scales responsively, gradient mask via .hero-mask only at lg+ in CSS.
Divider: flex-wrap + gap-y for smaller screens.
Tools: grid-cols-1→md:2→lg:3, removed fixed height and per-card paddingRight.
Blog: featured flex-col→lg:flex-row, secondary flex-col→md:flex-row,
excerpt hidden on mobile secondary cards to save space.
About: flex-col→lg:flex-row, clamp on quote size, min-h-[18rem] for photo.
Newsletter: flex-col→lg:flex-row, input+button stack on xs / row on sm+.
Footer: flex-col→lg:flex-row, flex-wrap on legal links.
globals.css: scroll-padding-top 5rem mobile / 6.25rem desktop.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
PNG has hard alpha cutoff edges — adds left (0%→14%) and top (0%→10%)
linear-gradient masks via mask-composite:intersect so both edges fade
simultaneously into the cream background, matching Figma's seamless look.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Figma exports the hero image as a PNG with alpha channel — the background
is already transparent. Switched from <img mix-blend-multiply> to a
background-image div (background-size: contain, right center) so the
transparent PNG blends seamlessly into the cream section background with
no visible edge. Background-image also scales better for responsive.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
White/light areas of the photo dissolve into #f5f0e8 without needing
a PNG with alpha transparency.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Marco