Skip to content

Design audit 4/4: Landing - #136

Merged
Programcode merged 12 commits into
mainfrom
design-audit/landing-v2
Oct 11, 2026
Merged

Programcode merged 12 commits into
mainfrom
design-audit/landing-v2

Conversation

@Programcode

Copy link
Copy Markdown
Owner

Last of four stacked PRs for the 2026-10-09 design audit. Base: #128 (AI tools). This one finishes the plan and marks it Shipped.

What changed

Nothing loops at rest. The aurora (14s), the two orbs (8s and 10s), the full-bleed grid drift (20s) and the CTA shimmer (3s) are gone. The backgrounds are the same gradients, just static. Before: 14 infinite animations running on / with nobody touching it. After: 0.

One reveal, and hovers that work again. A single Reveal component replaces the per-section framer setups:

  • a 12px fade-up in 350ms with ease-out-strong, once per element;
  • full transform strings instead of the x/y shorthands;
  • delays capped at 200ms, so long lists don't trail in;
  • the hero animates on load, everything else on scroll;
  • under reduced motion it renders a plain div.

Hover now lives on an inner element, so framer's inline transform: none no longer cancels it. Before, 22 cards carried framer's inline transform: none, which cancelled their lift. After: none, and hovering a feature card changes its border and shadow.

Press and navigation

  • The gradient and outline CTAs are Links, so .motion-press never reached them. They now scale to 0.97 on :active.
  • Footer links are router Links and no longer reload the SPA.
  • The navbar is static, gets its edge only once the page scrolls, has a 44px menu toggle on touch, and opens its menu in 180ms.
  • Cards are solid, with no nested blur over moving backgrounds.

Type

  • Inter variable is self-hosted through @fontsource-variable/inter, with an Arial fallback scaled to Inter's metrics (size-adjust 107.4%), so the swap doesn't shift layout.
  • The three render-blocking Google Fonts imports are gone, along with Lora (no uses) and Space Mono; mono is the system stack.
  • One .section-heading for every section h2.
  • The hero h1 is clamp(2.25rem, 1.2rem + 4.5vw, 4.5rem) with leading-[1.05] tracking-[-0.03em].
  • The 132-character Spanish announcement sits in a rounded-2xl box instead of a pill.

Copy

  • SocialProof ("2 Plans / 1 Unified Workspace" styled as metrics) is removed, as is the "What's New" pill that repeated its h2.
  • Spanish and Hungarian are in sentence case across the app catalogs, not just the landing: about 400 strings. Proper nouns, product and page names, abbreviations and the debate convention "Esta Casa" keep their capitals. Specs that named the old Hungarian labels follow.
  • DeepDive's near-white text-accent on a light card (about 2.5:1) is text-foreground.

The plan. Every action row is ticked with the PR that did it, the one deliberate skip (the dark logo tile, PR2) has its reason in the row, and the plan is listed as Shipped in plans/README.md.

Changes from the audit's literal After

  • Press timing. The release is the row's 160ms with the fluid curve. The press-in is 100ms, the same token every app button uses since PR1, so pressing feels the same everywhere.
  • The CSP still lists Google Fonts. vercel.json keeps fonts.googleapis.com and fonts.gstatic.com. Nothing loads from them any more, so tightening the policy is a safe follow-up. I left it out because a header change ships with the frontend and isn't part of the audit.

Verification

All runs are local. GitHub Actions is out of minutes: every job fails in about 2 seconds with "recent account payments have failed".

  • npm run lint, typecheck, npm test (278), build and docs:check all pass at 5c196d0.

  • e2e specs for the landing page and the translated copy, on desktop-chromium and mobile-chromium: 82 passed. The specs were first-run, hungarian-parity, public-pages, animation-polish, navigation-performance and loading-performance. The first run caught three spec issues, and all three are fixed:

    • the Hungarian tour string was still in Title Case;
    • after the AI tools PR, the flowchart title is an h1;
    • the tool pages' title row is a second <header>, so the shell header is now found by its banner role.

    WebKit did not run: the browser isn't installed on this machine.

  • Before and after on production builds, main at 56a94d7 against this branch, served side by side. Probe scripts are in .verify/audit/landing.mjs and landing-lang.mjs.

    • Infinite animations at rest on /: 14 before (aurora, grid, orbs, shimmer), 0 after.
    • Google Fonts requests: 9 before, 0 after. Fonts loaded: Inter and Space Mono before; Inter Variable after.
    • LCP on localhost: 1456ms before, 60ms after. Most of that was the render-blocking font CSS. CLS was 0 both times.
    • Blurred layers: 28 before, 1 after.
    • Pressing the hero CTA: no transform before; scale(0.97) after.
    • Footer link to Terms: a full page reload before; in-app navigation after.
    • Reduced motion: 45 below-the-fold elements stayed at opacity 0 before; none after.
    • prefers-contrast: more on the nav: translucent with blur(24px) before; solid with no blur after.
    • Spanish and Hungarian at 360px with a touch pointer: before, 8 targets under 44px and 3 clipped CTA labels in each language; after, 0 and 0. The h1 is in sentence case in both.
    • At 1440px and 375px in light and dark: no horizontal overflow, and no clipped labels after (3–4 before).
  • The probe also caught a measurement trap: a full-page screenshot in Chromium drops touch emulation, so earlier touch counts in our audit scripts came out too high. The scripts now measure before taking the screenshot.

  • Still running when this PR opened: verify.sh drive all and the agentic suite on this head. Results go in a comment.

Not verified: real touch hardware, WebKit and Safari, staging and production.

🤖 Generated with Claude Code

Copilot AI balanced review requested due to automatic review settings October 9, 2026 17:23
@vercel

vercel Bot commented Oct 9, 2026 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
debate-navigator Ready Ready Preview Oct 11, 2026 12:21pm UTC
debatelab-staging Ready Ready Preview Oct 11, 2026 12:21pm UTC

@coderabbitai

coderabbitai Bot commented Oct 9, 2026 •

Copy link
Copy Markdown

Warning

Review limit reached

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

Next included review available in 59 minutes.

Check out review usage here.

View limit details

Limit details: You’ve used the included review currently available.

Learn how review limits work.

Review configuration:

⚙️ Run configuration
  • Configuration used: Repository YAML (base), Organization UI (inherited)
  • Review profile: CHILL
  • Plan: Free
  • Run ID: 8d1b319d-0d09-4601-9a9b-b4cd4a489ea9

📥 Commits

Reviewing files that changed from the base of the PR and between 287ac36 and b9e64c4.


⛔ Files ignored due to path filters (1)
  • package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (30)
  • agentic/replay/32ddc883c4362b19704486dd14d5fe76f672e02d9bd0633ed5a4d9f36794f5b2.json
  • agentic/replay/67db0f98d129349c3fc659ab0da340448eafbee4174149a9cd7c2643da67f437.json
  • agentic/replay/d15dccac4ac18fdabdb7d4c086d281513bd8832a317f7d3d65ac987fec417dc4.json
  • e2e/first-run.spec.ts
  • e2e/full-stack/first-run.spec.ts
  • e2e/hungarian-parity.spec.ts
  • package.json
  • plans/2026-10-09-design-audit.md
  • plans/README.md
  • src/App.tsx
  • src/components/landing/DeepDive.tsx
  • src/components/landing/FAQ.tsx
  • src/components/landing/Features.tsx
  • src/components/landing/FinalCTA.tsx
  • src/components/landing/Footer.tsx
  • src/components/landing/Hero.tsx
  • src/components/landing/HowItWorks.tsx
  • src/components/landing/Navbar.tsx
  • src/components/landing/Pricing.tsx
  • src/components/landing/Reveal.tsx
  • src/components/landing/SocialProof.tsx
  • src/components/landing/UseCases.tsx
  • src/components/landing/WhatsNew.tsx
  • src/index.css
  • src/locales/en.json
  • src/locales/es.json
  • src/locales/hu.json
  • src/main.tsx
  • src/pages/LandingPage.tsx
  • tailwind.config.ts

  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Note

🎁 Summarized by CodeRabbit Free

Your organization is on the Free plan. CodeRabbit will generate a high-level summary and a walkthrough for each pull request. For a comprehensive line-by-line review, please upgrade your subscription to CodeRabbit Essentials by visiting https://app.coderabbit.ai/settings/billing.


Comment @coderabbitai help to get the list of available commands.

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

@Programcode

Copy link
Copy Markdown
Owner Author

Final run on 5c196d0, local (GitHub Actions is out of minutes):

  • verify.sh drive all: 30 passed and 2 skipped on desktop-chromium; 30 passed and 2 skipped on mobile-chromium. The skips are workspace-autosave, which needs --collab.
  • verify.sh e2e run (agentic): 180 of 180 passed. That includes every public and student page in en, es and hu. Re-recorded replays are committed in 4f700cd.

Since 5c196d0 this branch has only been rebased onto the PR3 flowchart-delete fixes, and those fixes are covered on #128.

Programcode and others added 7 commits October 10, 2026 15:27
- Remove the infinite aurora, orb, grid and CTA shimmer loops; backgrounds are static.
- One Reveal component: full transform strings, 350ms ease-out-strong, delays capped at
  200ms, once per element. Hover lives on inner elements, so card hovers render again.
- Gradient and outline CTAs scale on :active; footer links are router Links.
- Navbar is static with a border on scroll and a 44px menu toggle; solid cards, no
  nested blur.
- Inter variable is self-hosted with a metric-matched Arial fallback; Lora, Space Mono
  and the render-blocking Google Fonts imports are gone.
- One .section-heading; the hero h1 uses a clamp with size-specific tracking.
- Remove the SocialProof pseudo-metrics and the duplicate What's New pill.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
English Title Case had been carried into es and hu, which reads as machine-translated.
Proper nouns, product names, page names and abbreviations keep their capitals. Specs that
named the old Hungarian labels follow. Also drops the unused socialProof keys.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Router links keep the window's scroll position, so the landing footer opened Terms and
Privacy at their bottom. Forward navigations now scroll to the top; Back and Forward
keep the browser's restoration, and #anchor links scroll themselves.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@Programcode

Copy link
Copy Markdown
Owner Author

Codex round 1 (on 4f700cd) found one issue. Footer links had become in-app navigation, which kept the window's scroll position, so Terms and Privacy opened at their bottom. Nothing in the app reset scroll on navigation, and the old full-page reloads had hidden that. Fixed in 808c8be with a router-level reset: forward navigations open at the top. Back and Forward keep the browser's restoration, and #anchor links scroll themselves.

Checked at 808c8be:

  • lint, typecheck, npm test (278) and build all pass.
  • Browser, on a production build: from the bottom of the landing page (scrollY 6223), the footer's Terms link opens at scrollY 0. Back returns near the old spot (5050; the page's height changes as sections reveal). The navbar's #pricing link still lands on the pricing section, 80px from the top, just under the navbar.

This branch is also rebased onto the latest AI tools fix (0770b94). Codex round 2 is reviewing 808c8be.

History's tab lives in ?tab= and updates with REPLACE; a change in navigation type
alone reran the reset and jumped the page to the top.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@Programcode

Copy link
Copy Markdown
Owner Author

Codex round 2 (on 808c8be) confirmed the footer fix and found one gap. Changing History's tab, which only updates ?tab= with REPLACE, could jump the page to the top, because the reset also reran when only the navigation type changed. Fixed in 547d279: the reset now runs only when the path or hash actually changes.

Checked at 547d279:

  • lint, typecheck, npm test (278) and build all pass.
  • In the real app: from the bottom of the landing page, the footer's Terms link opens at scrollY 0. On History, reached by in-app navigation and scrolled to 120, switching to the Chats tab (?tab=chats) keeps the page at 120.

Codex round 3 is reviewing 547d279, and the full recipe and agentic suites are rerunning on this head.

@Programcode

Copy link
Copy Markdown
Owner Author

Codex round 3 (on 547d279): no findings. All review findings on this PR are resolved.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@Programcode

Copy link
Copy Markdown
Owner Author

Final local run on 547d279:

  • verify.sh drive all: 30 passed and 2 skipped on desktop-chromium; 30 passed and 2 skipped on mobile-chromium. The skips are workspace-autosave, which needs --collab.
  • verify.sh e2e run (agentic): 180 of 180 passed, covering every public and student page in en, es and hu.

That run recorded one agentic replay again, and it's committed in 1552103. No code changed since 547d279.

@Programcode
Programcode changed the base branch from design-audit/ai-tools to main October 11, 2026 13:08
@Programcode
Programcode merged commit 5af8a46 into main Oct 11, 2026
8 of 16 checks passed
@Programcode
Programcode deleted the design-audit/landing-v2 branch October 11, 2026 13:12

This branch was successfully deployed

2 active deployments
Preview – debate-navigator — b9e64c45 Deployed Oct 11, 2026 by vercel[bot]
Preview – debatelab-staging — b9e64c45 Deployed Oct 11, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants