diff --git a/website/src/components/home/McpSection.tsx b/website/src/components/home/McpSection.tsx
deleted file mode 100644
index 0a357cf1..00000000
--- a/website/src/components/home/McpSection.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import Link from 'next/link';
-import { FadeIn } from '@/components/ui/FadeIn';
-import { TerminalMockup } from '@/components/ui/TerminalMockup';
-import { PROJECT } from '@/data/metrics';
-
-const tools = [
- 'parse_sql',
- 'format_sql',
- 'validate_sql',
- 'lint_sql',
- 'analyze_sql',
- 'detect_injection',
- 'list_dialects',
-];
-
-export function McpSection() {
- return (
-
-
-
-
- AI-Ready SQL Tools
-
-
- Connect {PROJECT.mcpToolCount} SQL tools to Claude, Cursor, or any MCP client — no installation, no API key.
-
-
-
-
-
-
- {tools.map((tool) => (
-
- {tool}
-
- ))}
-
-
-
-
-
-
-
- );
-}
diff --git a/website/src/components/home/PerformanceSection.tsx b/website/src/components/home/PerformanceSection.tsx
index 72a86d8e..20908eaa 100644
--- a/website/src/components/home/PerformanceSection.tsx
+++ b/website/src/components/home/PerformanceSection.tsx
@@ -1,25 +1,24 @@
import { GlassCard } from '@/components/ui/GlassCard';
import { FadeIn } from '@/components/ui/FadeIn';
-import { AnimatedCounter } from '@/components/ui/AnimatedCounter';
-import { BENCH_ENV, HEADLINE_OPS_PER_SEC, PARSE_BENCHMARKS, PROJECT, formatOps, opsPerSec } from '@/data/metrics';
+import { BENCH_ENV, HEADLINE_OPS_PER_SEC, PARSE_BENCHMARKS, formatOps, opsPerSec } from '@/data/metrics';
import { AnimatedBars } from './AnimatedBars';
+import { ReproduceSnippet } from './ReproduceSnippet';
interface Stat {
- /** Animated numeric value; omit when `text` is shown instead. */
- value?: number;
- /** Static text for figures that are ranges or estimates. */
- text?: string;
- suffix?: string;
+ /** Compact display string, short enough to fit a narrow card. */
+ display: string;
label: string;
- color: string;
- prefix?: string;
}
+const [simpleSelect] = PARSE_BENCHMARKS;
+const complexQuery = PARSE_BENCHMARKS.find((b) => b.name === 'Complex Query') ?? PARSE_BENCHMARKS[PARSE_BENCHMARKS.length - 1];
+
+/* Every figure is parse stage only (pre-tokenized input -> AST); hardware and Go version are in the caption. */
const stats: Stat[] = [
- { value: HEADLINE_OPS_PER_SEC, suffix: '', label: `parses/sec (simple SELECT, parse stage, ${BENCH_ENV.hardware})`, color: 'text-accent-warm', prefix: '~' },
- { value: PARSE_BENCHMARKS[0].nsPerOp, suffix: 'ns', label: 'parse latency (simple SELECT, parse stage)', color: 'text-accent' },
- { text: PROJECT.sql99, label: 'SQL-99 compliance (estimated)', color: 'text-brand' },
- { value: PROJECT.dialectCount, suffix: '', label: 'Dialects', color: 'text-accent' },
+ { display: `~${formatOps(HEADLINE_OPS_PER_SEC)}`, label: 'parses/sec, simple SELECT (parse stage)' },
+ { display: `${simpleSelect.nsPerOp.toLocaleString('en-US')}ns`, label: 'latency, simple SELECT (parse stage)' },
+ { display: `~${formatOps(opsPerSec(complexQuery.nsPerOp))}`, label: 'parses/sec, complex query (parse stage)' },
+ { display: `${complexQuery.nsPerOp.toLocaleString('en-US')}ns`, label: 'latency, complex query (parse stage)' },
];
const benchmarks = PARSE_BENCHMARKS.map((b) => ({
@@ -42,19 +41,12 @@ export function PerformanceSection() {
{/* Stat cards */}
-
+
{stats.map((stat, i) => (
-
-
-
- {stat.prefix && (
-
{stat.prefix}
- )}
- {stat.value !== undefined ? (
-
- ) : (
-
{stat.text}
- )}
+
+
+
+ {stat.display}
{stat.label}
@@ -68,8 +60,12 @@ export function PerformanceSection() {
Parse stage only (not tokenize or end-to-end), {BENCH_ENV.hardware}, {BENCH_ENV.goVersion}.
- Source: BenchmarkPerformanceBaseline, median of 10 runs.
+ Source: {BENCH_ENV.source}.
+
+
Reproduce
+
+ {glyph[name]}
+
+ );
+}
+
+/* ── Metric cards (every figure comes from @/data/metrics or the live API) ─ */
+
+interface Metric {
+ id: string;
+ icon: keyof typeof glyph;
+ value: string;
+ label: string;
+}
+
+const simpleSelect = PARSE_BENCHMARKS[0];
+
+const latencyCard: Metric = {
+ id: 'latency',
+ icon: 'bolt',
+ value: `~${(simpleSelect.nsPerOp / 1000).toFixed(2)} µs`,
+ label: `to parse a simple SELECT (${BENCH_ENV.stage}, ${BENCH_ENV.hardware}, ${BENCH_ENV.goVersion})`,
+};
+
+const testsCard: Metric = {
+ id: 'tests',
+ icon: 'check',
+ value: formatCount(PROJECT.testFunctions),
+ label: 'Go test functions, race-detector clean in CI',
+};
+
+const dialectsCard: Metric = {
+ id: 'dialects',
+ icon: 'globe',
+ value: String(PROJECT.dialectCount),
+ label: 'SQL dialects, one parser',
+};
+
+/** Shown in place of the stars card when the live count is unavailable, so the grid stays 4-up. */
+const raceCard: Metric = {
+ id: 'race',
+ icon: 'shield',
+ value: 'Zero',
+ label: 'race-detector failures in CI',
+};
+
+function buildMetrics(stars: number | null): Metric[] {
+ const first: Metric =
+ stars !== null
+ ? { id: 'stars', icon: 'star', value: formatStars(stars), label: 'GitHub stars' }
+ : raceCard;
+ return [first, testsCard, latencyCard, dialectsCard];
+}
+
+/* ── Integrations (plain names plus neutral glyphs: no third-party logos) ─ */
+
+interface Integration {
+ name: string;
+ detail: string;
+ href: string;
+ icon: keyof typeof glyph;
+}
+
+const integrations: Integration[] = [
+ { name: 'Claude', detail: 'MCP server', href: '/docs/mcp-guide/', icon: 'plug' },
+ { name: 'Cursor', detail: 'MCP server', href: '/docs/mcp-guide/', icon: 'plug' },
+ { name: 'VS Code', detail: 'Extension', href: '/vscode/', icon: 'editor' },
+ { name: 'Neovim', detail: 'Language server', href: '/docs/editors/neovim/', icon: 'editor' },
+ { name: 'JetBrains', detail: 'Language server', href: '/docs/editors/jetbrains/', icon: 'editor' },
+];
+
+/* ── Component ─────────────────────────────────────────────────────────── */
+
+export function ProofStrip({ stars }: { stars: number | null }) {
+ const metrics = buildMetrics(stars);
+
+ return (
+
+
+
+
+ Built for production
+
+
+
+ {/* Exactly four cards: 2x2 on small screens, 4x1 from lg, so no orphan at any breakpoint. */}
+
+ {metrics.map((m, i) => (
+
+
+
+ {m.value}
+ {m.label}
+
+
+
+ ))}
+
+
+ {/* Integration strip */}
+
+
+ Works with
+
+
+ {integrations.map((item) => (
+
+ {item.name}
+ {item.detail}
+
+
+ ))}
+
+
+
+ );
+}
diff --git a/website/src/components/home/ReproduceSnippet.tsx b/website/src/components/home/ReproduceSnippet.tsx
new file mode 100644
index 00000000..0a882949
--- /dev/null
+++ b/website/src/components/home/ReproduceSnippet.tsx
@@ -0,0 +1,56 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+
+type CopyState = 'idle' | 'copied' | 'failed';
+
+/** A shell command with an always-visible copy button (keyboard and touch friendly). */
+export function ReproduceSnippet({ command }: { command: string }) {
+ const [state, setState] = useState('idle');
+ const timer = useRef | null>(null);
+
+ useEffect(() => () => {
+ if (timer.current) clearTimeout(timer.current);
+ }, []);
+
+ const flash = (next: CopyState) => {
+ setState(next);
+ if (timer.current) clearTimeout(timer.current);
+ timer.current = setTimeout(() => setState('idle'), 2000);
+ };
+
+ const copy = () => {
+ if (!navigator.clipboard) {
+ flash('failed');
+ return;
+ }
+ navigator.clipboard.writeText(command).then(
+ () => flash('copied'),
+ () => flash('failed'),
+ );
+ };
+
+ const label = state === 'copied' ? 'Copied' : state === 'failed' ? 'Copy failed' : 'Copy';
+
+ return (
+
+
+
+ $
+ {command}
+
+
+
+ {label}
+ benchmark command
+
+
+ {state === 'copied' ? 'Command copied to clipboard' : state === 'failed' ? 'Copy failed, select the command and copy it manually' : ''}
+
+
-
- );
-}
-
-function CheckIcon() {
- return (
-
-
- );
-}
-
-function BoltIcon() {
- return (
-
-
- );
-}
-
-function LockIcon() {
- return (
-
-
- );
-}
-
-function PackageIcon() {
- return (
-
-
- );
-}
-
-/* ── Metric data ───────────────────────────────────────────────────────── */
-
-const metrics = [
- {
- id: 'stars',
- icon:
-
- {/* Heading */}
-
-
- Trusted by Developers
-
-
-
- {/* Metric cards */}
-
- {visible.map((m, i) => (
-
-
- {m.icon}
-
- {m.id === 'stars' && stars !== null ? formatStars(stars) : m.value}
-
- {m.label}
-
-
- ))}
-
-
- {/* Integrations */}
-
-
- Integrates with
-
-
-
-
- {integrations.map((item, i) => (
-
-
-
- {item.name}
-
-
- {item.detail}
-
-
-
- ))}
-
-
- );
-}
diff --git a/website/src/components/home/UseEverywhere.tsx b/website/src/components/home/UseEverywhere.tsx
new file mode 100644
index 00000000..8e1a5b1d
--- /dev/null
+++ b/website/src/components/home/UseEverywhere.tsx
@@ -0,0 +1,106 @@
+import Link from 'next/link';
+import { FadeIn } from '@/components/ui/FadeIn';
+import { TerminalMockup } from '@/components/ui/TerminalMockup';
+import { Button } from '@/components/ui/Button';
+import { PROJECT } from '@/data/metrics';
+
+const MCP_TOOLS = [
+ 'parse_sql',
+ 'format_sql',
+ 'validate_sql',
+ 'lint_sql',
+ 'analyze_sql',
+ 'detect_injection',
+ 'list_dialects',
+];
+
+const EDITORS = [
+ { name: 'Neovim', href: '/docs/editors/neovim/' },
+ { name: 'JetBrains', href: '/docs/editors/jetbrains/' },
+ { name: 'Any LSP editor', href: '/docs/lsp-guide/' },
+];
+
+/** "Use it everywhere": the MCP server for AI assistants and the language server for editors. */
+export function UseEverywhere() {
+ return (
+
+
+
+
+ Use it everywhere
+
+
+ The same parser powers your Go code, your AI assistant and your editor.
+
+
+
+
+ {/* AI assistants (MCP) */}
+
+
+
AI assistants
+
+ Connect {PROJECT.mcpToolCount} SQL tools to Claude, Cursor or any MCP client. No installation, no API key.
+
+
+
+ {MCP_TOOLS.map((tool) => (
+
+ {tool}
+
+ ))}
+
+
+ MCP guide
→
+
+
+
+ {/* Editors (LSP) */}
+
+
+
Editors
+
+ Real-time validation, formatting and linting as you type, across all {PROJECT.dialectCount} dialects,
+ through the built-in language server (gosqlx lsp).
+
+
+
+ Install for VS Code
+
+
+ Extension details
+
+
+
+ {EDITORS.map((e) => (
+
+ →
+
+
+ ))}
+
+
+
+
+ );
+}
diff --git a/website/src/components/home/VscodeSection.tsx b/website/src/components/home/VscodeSection.tsx
deleted file mode 100644
index 47f11850..00000000
--- a/website/src/components/home/VscodeSection.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-import { FadeIn } from '@/components/ui/FadeIn';
-import { GlassCard } from '@/components/ui/GlassCard';
-import { Button } from '@/components/ui/Button';
-
-export function VscodeSection() {
- return (
-
-
-
- {/* Left: Copy */}
-
-
-
- IDE Integration
-
-
- Real-time SQL validation, formatting, and linting in VS Code. Catch errors as you type with full multi-dialect support.
-
-
-
-
- Install Extension
-
-
-
-
- {/* Right: VS Code Mockup */}
-
-
-
- {/* Title bar */}
-
-
-
-
-
query.sql — GoSQLX
-
-
- 1
-
- SELECT
- u.id, u.name, u.email
-
-
-
- 2
-
- FROM
- users
- u
-
-
-
- 3
-
- JOIN
- orders
- o
- ON
- o.user_id = u.id
-
-
-
- 4
-
- WHERE
- u.active =
- true
-
-
-
- 5
-
- ORDER BY
- u.name
- ASC
- ;
-
-
-
-
-
-
-
- Valid SQL
-
-
|
-
PostgreSQL
-
-
0 issues
-
-
-
-
-
- );
-}
diff --git a/website/src/data/metrics.ts b/website/src/data/metrics.ts
index f7d8c611..951abb0d 100644
--- a/website/src/data/metrics.ts
+++ b/website/src/data/metrics.ts
@@ -48,6 +48,8 @@ export const BENCH_ENV = {
goVersion: 'Go 1.27',
stage: 'parse stage',
source: 'BenchmarkPerformanceBaseline, median of 10 runs, re-measured 2026-10-13',
+ /** Command that reproduces PARSE_BENCHMARKS from a repo checkout (summarise the 10 runs with benchstat). */
+ command: "go test -run='^$' -bench=BenchmarkPerformanceBaseline -benchmem -count=10 ./pkg/sql/parser/",
} as const;
export interface ParseBenchmark {