feat(web): cut the register page down to what moves a sign-up

Merged
RI
3d ago
+255-211

Before / after

Before (live capgo.app/register)After
Desktop
Mobile

The before shots show "Verifying…" because production renders Turnstile. Locally there's no site key, so the after shots show no widget. In production it's now interaction-only, so most visitors won't see it either.

Why

The form card had nine stacked blocks before the button: title, sign-in line, two pills, a price line, five password rules, the captcha, then terms, a "Need help?" divider and a full-width support button. The side column was a rotating carousel. Nothing told the eye where to go first.

Scan order now

Form card: headline (30px bold) → one value line (15px) → Email → Password → Sign up → small print (12px: starting price, terms) → footer row (Sign in, Contact support).

  • Trial and no-card pills → one value line. Direct-offer visitors still get the guarantee version.
  • Password rules hidden until the password is wrong: they appear when the visitor leaves the field with missing rules, types 6+ characters that still miss a rule, or submits. They then tick live and hide when every rule is met. The weak-password toast is gone; only the 72-byte limit, which the list doesn't cover, still toasts.
  • Turnstile data-appearance="interaction-only": Cloudflare analytics show about 99% of challenges solve without interaction, so the widget is usually invisible. The error and retry handling from #1318 is unchanged.
  • Starting price (live currency, from #1320) moves into the small print under the button.
  • Sign in and Contact support share one footer row, replacing the "Need help?" divider and the big support button.

Side column (this also supersedes #1322): headline (30px) → three numbered steps (16px titles, 14px one-line bodies, plus the npx @capgo/cli@latest init command) → six customer app icons with "Trusted by 9,400+ teams shipping to 90M+ devices" → one review (Sergiu, drivolino: "days to minutes"). The carousel, rating summary, eight-card app grid and second review are gone.

Checks

  • bun test src/scripts/register.test.ts: 8 pass, including 2 new tests for when the password rules show.
  • astro check: 0 errors.
  • In the browser: rules hidden on load and while typing "abc", shown after leaving the field, hidden once "Abcdef1!" meets every rule, shown at 6+ characters with a missing rule and on a weak submit, with no toast. The price renders as €7/mo for this location.
  • Checked at 1440px and 390px.

Screenshots live on the pr-assets/register-hierarchy branch, which only holds the four PNGs. Delete it after merge.

🤖 Generated with Claude Code


View with [code]smith Autofix with [code]smith
Need help on this PR? Tag @codesmith-bot with what you need.