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>
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>
Cream card (bg-[#f8f3ec], rounded-xl) inside section padding of 80px.
Left copy column has fixed w-[38.25rem] (612px) with icon (-rotate-4)
and Lora heading; right form column is flex-1 with email input +
orange submit button side by side, privacy note below. Input and button
share items-stretch so they align to equal height.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Two-column layout: left column stacks serif statement above a row of
Caveat quote (flex-1) + 2px golden divider + author bio (shrink-0).
Signature image is absolute-positioned just below the three Caveat lines
(top: 6.44rem = 3 × 32px line-height). Right column is a full-height
overflow-hidden container with object-cover author photo.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Fine 1px #d9d9d9 border with rounded-xl on all cards. Featured card
uses overflow-hidden to clip thumbnail flush left; secondary cards give
each thumbnail its own rounded-xl so it sits neatly inside the py-2
padded wrapper. Arrow uses standard → instead of unsupported U+1F816.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Marco