feat(website/home): home sections redesign (proof strip, integrations, dialect cards, performance)

[ajitpratap0]

Summary

Home sections redesign (plan item 2.5).

• Proof strip (TrustSection -> ProofStrip): renamed to "Built for production". Exactly four cards in a grid-cols-2 lg:grid-cols-4 grid (2x2, then 4x1), so no orphan at any breakpoint: GitHub stars (live; replaced by a "race-detector clean" card when the API is unavailable, so the count stays at 4), Go test functions, ~0.32 µs to parse a simple SELECT (parse stage, Apple M4, Go 1.27), and 8 dialects. Every figure comes from src/data/metrics.ts or the live stars API.
• Integration strip: no third-party logos (trademark terms are unclear, open question Q7). It uses plain names plus neutral glyphs instead: Claude and Cursor (MCP) link to /docs/mcp-guide/, VS Code links to /vscode/, and Neovim and JetBrains link to /docs/editors/.... Tap targets are at least 44px.
• Dialect cards: they use one neutral database glyph and the single accent colour, and show the dialect string. The only metric is QA corpus pass N/N (v1.14.0), shown where a corpus run exists (Snowflake 87/87, ClickHouse 69/83). The other dialects show "Coverage notes". The unsourced 95/85/80% figures and status badges are gone (Q12). Every card links to /docs/sql-compatibility/#supported-dialects.
• Performance: every stat is labelled parse stage. The stat row now shows simple and complex query throughput and latency; the SQL-99 estimate and the duplicate dialect count were removed from it. Values use one neutral colour, and the bars are solid bg-brand instead of a gradient. The chart's aria-label now lists the values. A new Reproduce snippet has an always-visible copy button and a status live region. The command is stored as BENCH_ENV.command in metrics.ts.
• Use it everywhere: McpSection and VscodeSection are merged into one two-column section (AI assistants, Editors).
• Home order: Hero, Proof strip, Performance, Features, Dialects, Code examples, Use it everywhere, CTA.
• The FeatureGrid h2 "Built for Production" was renamed to "Everything you need to work with SQL in Go" so the page does not have two identical headings.

CHANGELOG is not edited (the release is being prepared elsewhere). Suggested entry: "Website home: Built for production proof strip, sourced dialect metrics, reproducible benchmark command, merged MCP/editor section."

Test Plan

• cd website && npm ci && npm run typecheck passes
• npm run lint reports 0 errors (7 warnings, all already present in files this PR does not change, plus the existing AnimatedBars effect)
• npm run check:metrics passes
• npm run build passes
• go test -run='^$' -bench=BenchmarkPerformanceBaseline -benchmem -count=1 ./pkg/sql/parser/ runs on an Apple M4 (SimpleSelect 331 ns/op, ComplexQuery 1191 ns/op, consistent with metrics.ts)
• Checked visually in Chrome against next start: proof strip, performance, Reproduce snippet and Use it everywhere render, with no horizontal overflow at desktop width
• Lighthouse CI on this PR
• Vercel preview: check the 2x2 proof grid and the 2-column dialect grid at phone width

Breaking Changes

None. These are website-only component changes. TrustSection, McpSection and VscodeSection are removed; they were used only by the home page.

Closes #663
Part of #634

🤖 Generated with Claude Code

https://claude.ai/code/session_01RkzVu3JY9Y6BRWfjesWts9

[vercel]

Deployment failed for project gosqlx-website with the following error:

Resource is limited - try again in 1 day (more than 100, code: "api-deployments-free-per-day").

Learn More: https://vercel.com/coolajitpratapsingh0-9932s-projects?upgradeToPro=build-rate-limit

[github-actions]

Claude finished @ajitpratap0's task in 28s —— View job

---

Review of PR #716: home sections redesign

Overall this is a clean, well-scoped change. I found no blocking issues. I read the diff but did not run the build, typecheck or lint, so I'm relying on the PR's test plan for those.

What looks good

• Metrics: figures come from metrics.ts or the live stars API, and the unsourced 95/85/80% dialect figures are gone. BENCH_ENV.command keeps the benchmark command next to the data it reproduces.
• Proof strip: the stars-to-race-card fallback keeps the grid at exactly four cards, so grid-cols-2 lg:grid-cols-4 never leaves an orphan.
• Accessibility:
  • Sections use aria-labelledby.
  • Glyphs are aria-hidden.
  • Tap targets are min-h-11.
  • ReproduceSnippet has a live region, an sr-only label suffix and a navigator.clipboard guard.
  • The chart's aria-label now lists the values.
• ReproduceSnippet: the timer is cleaned up on unmount and reset on each flash.

Suggestions (non-blocking)

1. Claim vs. data: ProofStrip.tsx says "race-detector clean in CI" and "Zero race-detector failures in CI". Neither comes from metrics.ts, which conflicts with the PR's "every figure is sourced" claim. A PROJECT.raceClean flag, or wording tied to the CI badge or workflow, would keep it consistent.
2. Duplicate links: Claude and Cursor both link to /docs/mcp-guide/. That's fine, but a #cursor anchor or a Cursor-specific note would help if the guide has one.
3. Anchor check: please check that /docs/sql-compatibility/#supported-dialects resolves to a real heading id. The doc has a "Supported Dialects" section, but the docs pipeline decides the final slug. All eight dialect cards depend on it.
4. Dialect list semantics: each dialect card is a Link whose accessible name is the whole card text. Eight identical destinations are mildly noisy for screen-reader users. Consider one "Compatibility matrix →" link, or aria-labels like "PostgreSQL dialect coverage".
5. Number format: the proof strip shows latency as ~0.32 µs, while the performance section shows 331 ns. These agree, but the two units may look inconsistent. Consider noting ~331 ns in both places.
6. Complex query lookup: in PerformanceSection.tsx, the find(... 'Complex Query') ?? last fallback can silently show a different benchmark if the name is renamed. Prefer a typed key in metrics.ts, or fail loudly in check:metrics.
7. Copy button label: {label} plus the sr-only " benchmark command" reads as "Copied benchmark command", which is slightly odd. "Copy benchmark command" and "Copied" as a separate status would read better, though the live region already covers it.
8. Test coverage: there are no component tests, which seems to match the rest of the website. The check:metrics script is the main guard, so it may be worth extending it to cover BENCH_ENV.command, for example checking that the benchmark name still exists in the Go sources.

Security and performance

• There are no security concerns. There is no dangerouslySetInnerHTML, no user input, and the external link goes through the Button external prop. I didn't open Button to confirm it adds rel="noopener", so that's worth confirming.
• Performance is neutral to positive. The removed sections are replaced by server components. Only ReproduceSnippet, AnimatedBars and the counters are client-side.

Still open from the PR's test plan: Lighthouse CI and the phone-width check on the Vercel preview.

[ajitpratap0]

Fixed the stat card clipping (pushed to feat/home-sections). Values now use formatOps (~3.14M, ~858K) with ns latencies as-is, the grid stays 2 columns until lg (4 at lg+), and the font scales text-2xl / sm:text-3xl / xl:text-4xl with whitespace-nowrap. Measured in headless Chrome against next start at 320, 375, 640, 768, 900, 1023, 1024 and 1280px: scrollWidth equals clientWidth for all four figures at every width, so nothing clips. typecheck, lint and build pass.

🤖 Generated with Claude Code

https://claude.ai/code/session_01RkzVu3JY9Y6BRWfjesWts9

[vercel]

Deployment failed for project gosqlx-website with the following error:

Resource is limited - try again in 24 hours (more than 100, code: "api-deployments-free-per-day").

Learn More: https://vercel.com/coolajitpratapsingh0-9932s-projects?upgradeToPro=build-rate-limit

[github-actions]

Claude finished @ajitpratap0's task in 19s —— View job

---

Review of PR #716 (re-review after the stat-card clipping fix)

I read the diff and the ProofStrip and ReproduceSnippet code. I did not run the build, typecheck or lint, so I'm relying on your test plan for those. I found no blocking issues.

Good

• The proof strip always renders exactly four cards. The stars card falls back to the race card, so grid-cols-2 lg:grid-cols-4 never leaves an orphan.
• Accessibility looks solid:
  • Sections use aria-labelledby.
  • Glyphs are aria-hidden.
  • Tap targets are min-h-11.
  • ReproduceSnippet has a role="status" live region and a navigator.clipboard guard.
  • Its timer is cleared on unmount and reset on each flash.
• The integration strip uses plain names and neutral glyphs, with no third-party logos.

Suggestions (non-blocking)

1. Unsourced claims (ProofStrip.tsx, the testsCard and raceCard labels): "race-detector clean in CI" and "Zero race-detector failures in CI" don't come from metrics.ts, which conflicts with the "every figure is sourced" claim. A PROJECT.raceClean flag, or wording tied to the CI workflow, would keep it consistent. "Zero" is also a hard claim in a fallback card that nothing verifies.
2. Dialect card links: eight cards all link to /docs/sql-compatibility/#supported-dialects. The source doc has a ### Supported Dialects heading at docs/SQL_COMPATIBILITY.md:577, which should slug to supported-dialects. Please confirm the rendered docs page has that id, because all eight cards depend on it. Giving each link an aria-label such as "PostgreSQL dialect coverage" would also reduce screen-reader noise from eight near-identical links.
3. Copy button label (ReproduceSnippet.tsx): the visible text plus the sr-only suffix reads as "Copied benchmark command". Keep the label static as "Copy benchmark command" and leave the state change to the live region, which already announces it.
4. Complex query lookup (PerformanceSection.tsx): the find(... 'Complex Query') ?? last fallback can silently show a different benchmark if the name changes. Consider a typed key in metrics.ts, or have check:metrics fail on it.
5. Reproduce command check: extending check:metrics to confirm that BENCH_ENV.command names a benchmark that exists in the Go sources would stop it drifting.
6. Units: the proof strip shows ~0.32 µs and the performance section shows 331 ns. They agree, but using one unit in both places would look more consistent.
7. Duplicate link: Claude and Cursor both link to /docs/mcp-guide/. That's fine, but a #cursor anchor would help if the guide has one.
8. External link: I didn't open Button to confirm that its external prop adds rel="noopener".

Security and performance: there are no concerns. The diff has no dangerouslySetInnerHTML and no user input. Only ReproduceSnippet, AnimatedBars and the counters are client components.

Still open from your test plan: Lighthouse CI and the phone-width check on the Vercel preview. The Vercel deploy hit the free-tier rate limit, so the preview may not be available yet.