Implement the GratiText Figma designs across marketing, auth, recipients, and settings

[kentcdodds]

Faithful implementation of the GratiText Figma designs (light, dark, and mobile frames).

• Foundations: Fraunces + Poppins fonts, full light/dark color token set, type scale, pill inputs/buttons, select chevron, OTP slots, password show/hide field.
• App chrome: new header (wordmark, upgrade CTA, user menu, theme toggle), footer, and mobile bottom-sheet menu with focus trapping.
• Landing page: hero illustration, wave-edged feature section with flower stickers, "How it works" dashed path, pricing cards with smileys, CTA banner. Illustrations extracted from the Figma renders into public/images.
• Auth: login, signup (country code + phone), verify (OTP), onboarding, forgot/reset password on a shared FormPage.
• Recipients: list table with queue counts and trial banner, new/edit recipient form (country code, time zone, weekly day/time schedule with cron fallback, basic-plan reserved days), chat-style recipient thread with sent/scheduled bubbles, message action menu, autosizing composer, and sidebar.
• Account settings: "Hi {name}!" overview with inline name/phone editing (?edit=), settings link list, and dialog-style sub-pages (DialogPage) for password, 2FA, and subscription that float over the inert overview on desktop and render as full pages with a back link on phones.

Landing page follow-up

• Re-extracted the paper plane and CTA leaves/flower assets so they no longer carry fragments of neighbouring layers (dashed trail, input field edge, flower petal).
• The plane now lives inside the trail SVG and the dashed path is traced from the design, so the tail connects and loops like the original.
• Green band: true sine waves on both edges, no white gap above (the wave rises into the hero's cream), bottom wave no longer hidden behind the next section, stickers centred on the wave lines; straight bottom edge on phones as in the mobile frame.
• "How it works", pricing and CTA re-measured against the frames (type scale, spacing, illustration placement, full-bleed CTA on phones, cream featured plan card in dark mode); footer sits on the cream band on the landing page.

Review follow-up

• Bugbot: the landing CTA form sent phoneNumber to /signup, which ignored it. Signup now reads the query param to prefill the country code and number; logged-in visitors get a "Go to your recipients" link instead of the form.
• Bugbot: the login field is labelled "Username or Phone Number" but still used UsernameSchema, which rejects +, spaces and dashes. It now uses a looser identifier schema (login() already matches phone numbers).
• Bugbot: DialogPage set role="dialog"/aria-modal unconditionally and read the breakpoint once. A useMediaQuery hook now drives the role, aria-modal and the focus trap, so phones get a plain page and resizes stay in sync.

Test Plan

• bun run typecheck, bun run lint, bun run test pass.
• bunx playwright test (14 e2e tests) passes serially; settings-profile and 2fa tests updated for the inline edit / dialog flows.
• Manual QA against the Figma frames at 1440 (light + dark) and 390 (mobile) for landing, auth, recipients, recipient thread, and settings.

Checklist

• Tests updated
• Docs updated

Screenshots

Figma frame on the left, implementation on the right.

  

[cursor]

Stale Bugbot comment from a previous run.

[kentcdodds]

bugbot run

[cursor]

Stale Bugbot comment from a previous run.

[kentcdodds]

bugbot run

[cursor]

✅ Bugbot reviewed your changes and found no new issues!

Comment @cursor review or bugbot run to trigger another review on this PR

^{Reviewed by Cursor Bugbot for commit d7c8cfd. Configure here.}