fix(website): comprehensive audit fixes — phase 2 & 3

Homepage:
- Fix invalid double <main> nesting (layout.tsx wraps in <div> now)
- StatsBar: grid layout prevents 3+1 orphan at tablet breakpoints
- StatsBar: unify performance stat to 1,380,000 (matches benchmarks page)
- Hero: improve hover contrast and mobile overflow handling
- McpSection: fix badge contrast (zinc-500→zinc-300), add MCP guide CTA

Playground:
- SqlEditor: CodeMirror fills container height via theme + h-full wrapper
- Playground: skeleton loading state mirrors real UI layout
- FormatTab: consistent overflow handling
- AnalyzeTab: C:0 H:0 M:0 L:0 severity format with hover tooltip

Benchmarks:
- Section heading, GoSQLX highlight row, CTA section
- Accessible aria-labels on ✓/✗ symbols
- Mobile swipe hint, improved dot contrast, last-updated label
- Updated page title with 1.38M ops/sec

Docs:
- TOC width: w-48 → w-56 (224px) for better readability

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: 2 people

website/src/app/benchmarks/BenchmarksContent.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import Link from 'next/link';
 import { FadeIn } from '@/components/ui/FadeIn';
 import { GlassCard } from '@/components/ui/GlassCard';
 
@@ -38,6 +39,9 @@ export function BenchmarksContent() {
             <p className="mt-4 text-lg text-zinc-400 max-w-2xl mx-auto">
               Real-world performance data from the GoSQLX parser, measured on production-grade hardware.
             </p>
+            <p className="mt-3 text-xs text-zinc-500">
+              Last updated: March 2026 &middot; Based on v1.12.1
+            </p>
           </FadeIn>
         </div>
       </section>
@@ -62,6 +66,7 @@ export function BenchmarksContent() {
       <section className="section-padding pb-16">
         <div className="container-width">
           <FadeIn>
+            <h2 className="text-xl font-semibold text-white mb-4">Parse Benchmarks</h2>
             <GlassCard className="p-0 overflow-hidden" hover={false}>
               <div className="overflow-x-auto">
                 <table className="w-full text-sm text-left">
@@ -89,6 +94,7 @@ export function BenchmarksContent() {
                 </table>
               </div>
             </GlassCard>
+            <p className="text-xs text-zinc-500 mt-2 md:hidden">&larr; Swipe to see all columns &rarr;</p>
           </FadeIn>
         </div>
       </section>
@@ -111,38 +117,52 @@ export function BenchmarksContent() {
                     </tr>
                   </thead>
                   <tbody>
-                    <tr className="border-b border-white/[0.04] hover:bg-white/[0.03] transition-colors">
-                      <td className="px-6 py-4 text-white font-medium">GoSQLX</td>
+                    <tr className="border-b border-white/[0.04] transition-colors bg-indigo-500/5 border-l-2 border-l-indigo-500">
+                      <td className="px-6 py-4 text-white font-medium">
+                        GoSQLX{' '}
+                        <span className="ml-2 inline-block rounded-full bg-indigo-500/20 px-2 py-0.5 text-xs font-medium text-indigo-300">
+                          This Library
+                        </span>
+                      </td>
                       <td className="px-6 py-4 text-zinc-400">Go</td>
                       <td className="px-6 py-4 text-zinc-300 font-mono">1.38M+</td>
                       <td className="px-6 py-4 text-zinc-300">Low</td>
-                      <td className="px-6 py-4 text-accent-green font-medium">✓</td>
+                      <td className="px-6 py-4 text-accent-green font-medium">
+                        <span aria-label="Yes">✓</span>
+                      </td>
                     </tr>
                     <tr className="border-b border-white/[0.04] hover:bg-white/[0.03] transition-colors">
                       <td className="px-6 py-4 text-zinc-300 font-medium">xwb1989/sqlparser</td>
                       <td className="px-6 py-4 text-zinc-400">Go</td>
                       <td className="px-6 py-4 text-zinc-400 font-mono">~380K</td>
                       <td className="px-6 py-4 text-zinc-400">Higher</td>
-                      <td className="px-6 py-4 text-zinc-500">✗</td>
+                      <td className="px-6 py-4 text-zinc-500">
+                        <span aria-label="No">✗</span>
+                      </td>
                     </tr>
                     <tr className="border-b border-white/[0.04] hover:bg-white/[0.03] transition-colors">
                       <td className="px-6 py-4 text-zinc-300 font-medium">pg_query_go</td>
                       <td className="px-6 py-4 text-zinc-400">Go</td>
                       <td className="px-6 py-4 text-zinc-400 font-mono">~220K</td>
                       <td className="px-6 py-4 text-zinc-400">Higher (CGo)</td>
-                      <td className="px-6 py-4 text-zinc-500">✗</td>
+                      <td className="px-6 py-4 text-zinc-500">
+                        <span aria-label="No">✗</span>
+                      </td>
                     </tr>
                     <tr className="border-b border-white/[0.04] hover:bg-white/[0.03] transition-colors">
                       <td className="px-6 py-4 text-zinc-300 font-medium">blastrain/sqlparser</td>
                       <td className="px-6 py-4 text-zinc-400">Go</td>
                       <td className="px-6 py-4 text-zinc-400 font-mono">~290K</td>
                       <td className="px-6 py-4 text-zinc-400">Medium</td>
-                      <td className="px-6 py-4 text-zinc-500">✗</td>
+                      <td className="px-6 py-4 text-zinc-500">
+                        <span aria-label="No">✗</span>
+                      </td>
                     </tr>
                   </tbody>
                 </table>
               </div>
             </GlassCard>
+            <p className="text-xs text-zinc-500 mt-2 md:hidden">&larr; Swipe to see all columns &rarr;</p>
           </FadeIn>
         </div>
       </section>
@@ -155,14 +175,39 @@ export function BenchmarksContent() {
             <ul className="space-y-3">
               {methodology.map((item) => (
                 <li key={item} className="flex items-start gap-3 text-sm text-zinc-400">
-                  <span className="mt-1.5 block h-1.5 w-1.5 rounded-full bg-zinc-600 shrink-0" />
+                  <span className="mt-1.5 block h-1.5 w-1.5 rounded-full bg-zinc-400 shrink-0" />
                   {item}
                 </li>
               ))}
             </ul>
           </FadeIn>
         </div>
       </section>
+
+      {/* CTA */}
+      <section className="section-padding pb-24">
+        <div className="container-width">
+          <FadeIn>
+            <div className="mt-16 text-center">
+              <p className="text-zinc-400 mb-4">Ready to use GoSQLX in your project?</p>
+              <div className="flex gap-3 justify-center">
+                <Link
+                  href="/docs/getting-started"
+                  className="inline-flex items-center rounded-lg bg-indigo-600 px-5 py-2.5 text-sm font-medium text-white hover:bg-indigo-500 transition-colors"
+                >
+                  Get Started
+                </Link>
+                <Link
+                  href="/playground"
+                  className="inline-flex items-center rounded-lg border border-white/10 bg-white/5 px-5 py-2.5 text-sm font-medium text-zinc-300 hover:bg-white/10 hover:text-white transition-colors"
+                >
+                  Try Playground
+                </Link>
+              </div>
+            </div>
+          </FadeIn>
+        </div>
+      </section>
     </main>
   );
 }

website/src/app/benchmarks/page.tsx

@@ -2,9 +2,9 @@ import type { Metadata } from 'next';
 import { BenchmarksContent } from './BenchmarksContent';
 
 export const metadata: Metadata = {
-  title: 'Benchmarks',
+  title: 'GoSQLX Performance Benchmarks — 1.38M+ ops/sec SQL Parsing for Go',
   description:
-    'GoSQLX performance benchmarks. 1.38M+ ops/sec sustained, 8M+ tokens/sec throughput, validated across 20K+ concurrent operations.',
+    'Detailed performance benchmarks for GoSQLX: 1.38M+ ops/sec sustained throughput, 8M+ tokens/sec, zero race conditions across 20K+ concurrent operations. Compare against xwb1989/sqlparser, pg_query_go, and blastrain/sqlparser.',
 };
 
 export default function BenchmarksPage() {

website/src/app/docs/[...slug]/page.tsx

@@ -152,7 +152,7 @@ export default async function DocPage({ params }: PageProps) {
       </main>
 
       {/* Table of Contents */}
-      <div className="hidden xl:block w-48 shrink-0 py-10 pr-6">
+      <div className="hidden xl:block w-56 shrink-0 py-10 pr-6">
         <Toc headings={headings} />
       </div>
       </div>

website/src/app/layout.tsx

@@ -83,7 +83,7 @@ export default function RootLayout({
           }}
         />
         <Navbar />
-        <main id="main-content" className="pt-16">{children}</main>
+        <div id="main-content" className="pt-16">{children}</div>
         <Footer />
         <ServiceWorkerRegister />
       </body>

website/src/components/home/Hero.tsx

@@ -47,7 +47,7 @@ const SAMPLE_AST = `{
 
 export function Hero() {
   return (
-    <section className="relative min-h-screen flex items-center justify-center">
+    <section className="relative min-h-screen flex items-center justify-center overflow-hidden">
       {/* Background gradient mesh */}
       <div className="absolute inset-0 pointer-events-none overflow-hidden" aria-hidden="true">
         {/* Top-right indigo glow */}
@@ -89,7 +89,7 @@ export function Hero() {
         {/* Headline */}
         <FadeIn delay={0.1}>
           <h1
-            className="text-3xl sm:text-5xl md:text-6xl lg:text-7xl font-bold mb-6 break-words hyphens-auto"
+            className="text-3xl sm:text-5xl md:text-6xl lg:text-7xl font-bold mb-6 break-words hyphens-auto w-full max-w-full px-4 sm:px-0"
             style={{ letterSpacing: '-0.03em' }}
           >
             <GradientText>Parse SQL at the speed of Go</GradientText>
@@ -165,7 +165,7 @@ export function Hero() {
           <div className="mt-6">
             <Link
               href="/playground"
-              className="text-sm text-zinc-300 hover:text-zinc-300 transition-colors inline-flex items-center gap-1.5"
+              className="text-sm text-zinc-300 hover:text-white transition-colors inline-flex items-center gap-1.5"
             >
               Open Full Playground
               <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">

website/src/components/home/McpSection.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import Link from 'next/link';
 import { FadeIn } from '@/components/ui/FadeIn';
 import { TerminalMockup } from '@/components/ui/TerminalMockup';
 
@@ -36,13 +37,23 @@ export function McpSection() {
             {tools.map((tool) => (
               <span
                 key={tool}
-                className="text-xs font-mono text-zinc-500 bg-white/[0.03] border border-white/[0.06] rounded-md px-2.5 py-1"
+                className="text-xs font-mono text-zinc-300 bg-white/[0.03] border border-white/[0.06] rounded-md px-2.5 py-1"
               >
                 {tool}
               </span>
             ))}
           </div>
         </FadeIn>
+        <FadeIn delay={0.35}>
+          <div className="mt-8">
+            <Link
+              href="/docs/mcp-guide"
+              className="text-sm text-accent-indigo hover:underline inline-flex items-center gap-1"
+            >
+              Learn more →
+            </Link>
+          </div>
+        </FadeIn>
       </div>
     </section>
   );

website/src/components/home/StatsBar.tsx

@@ -5,7 +5,7 @@ import { FadeIn } from '@/components/ui/FadeIn';
 import { AnimatedCounter } from '@/components/ui/AnimatedCounter';
 
 const stats = [
-  { value: 1250000, suffix: '+', label: 'ops/sec', color: 'text-accent-orange' },
+  { value: 1380000, suffix: '+', label: 'ops/sec', color: 'text-accent-orange' },
   { value: 1, suffix: 'μs', label: 'latency', color: 'text-accent-indigo', prefix: '<' },
   { value: 85, suffix: '%', label: 'SQL-99', color: 'text-accent-green' },
   { value: 6, suffix: '', label: 'Dialects', color: 'text-accent-purple' },
@@ -15,7 +15,7 @@ export function StatsBar() {
   return (
     <section className="py-20">
       <div className="max-w-6xl mx-auto px-4">
-        <div className="flex flex-wrap justify-center gap-4 md:gap-8">
+        <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 md:gap-8 justify-items-center">
           {stats.map((stat, i) => (
             <FadeIn key={stat.label} delay={i * 0.1}>
               <GlassCard className="p-6 text-center min-w-[140px]">

website/src/components/playground/AnalyzeTab.tsx

@@ -49,7 +49,7 @@ function scoreRing(score: number): string {
   return "ring-red-500/30";
 }
 
-function ScoreCard({ title, score, subtitle }: { title: string; score: number | string; subtitle?: string }) {
+function ScoreCard({ title, score, subtitle, subtitleTitle }: { title: string; score: number | string; subtitle?: string; subtitleTitle?: string }) {
   const numScore = typeof score === "number" ? score : NaN;
   const displayScore = typeof score === "string" ? score : String(score);
   const isNumeric = !isNaN(numScore);
@@ -62,7 +62,7 @@ function ScoreCard({ title, score, subtitle }: { title: string; score: number |
       >
         {displayScore}
       </div>
-      {subtitle && <div className="text-xs text-slate-400 mt-1">{subtitle}</div>}
+      {subtitle && <div className="text-xs text-slate-400 mt-1" title={subtitleTitle}>{subtitle}</div>}
     </div>
   );
 }
@@ -126,7 +126,8 @@ export default function AnalyzeTab({ data }: AnalyzeTabProps) {
         <ScoreCard
           title="Security"
           score={securityScore}
-          subtitle={`${critical}C ${high}H ${medium}M ${low}L`}
+          subtitle={`C:${critical} H:${high} M:${medium} L:${low}`}
+          subtitleTitle="Critical / High / Medium / Low severity findings"
         />
         <ScoreCard
           title="Optimization"
@@ -136,7 +137,7 @@ export default function AnalyzeTab({ data }: AnalyzeTabProps) {
         <ScoreCard
           title="Complexity"
           score={complexityLevel}
-          subtitle="Query complexity"
+          subtitle="simple → moderate → complex"
         />
       </div>
 

website/src/components/playground/FormatTab.tsx

@@ -33,12 +33,12 @@ export default function FormatTab({ data }: FormatTabProps) {
   const formatted = typeof data === "string" ? data : data.result || data.formatted || JSON.stringify(data, null, 2);
 
   return (
-    <div className="p-4 h-full overflow-auto">
+    <div className="p-2 h-full overflow-hidden">
       <SqlEditor
         value={formatted}
         onChange={() => {}}
         readOnly={true}
-        minHeight="300px"
+        minHeight="200px"
         placeholder="Formatted SQL will appear here..."
       />
     </div>

website/src/components/playground/Playground.tsx

@@ -110,25 +110,59 @@ export default function Playground() {
 
   if (loading) {
     return (
-      <div className="flex items-center justify-center h-full bg-[#09090b]">
-        <div className="text-center space-y-4 max-w-xs">
-          <div className="inline-block w-8 h-8 border-2 border-blue-500 border-t-transparent rounded-full animate-spin" role="status" aria-label="Loading SQL parser" />
-          <p className="text-slate-400 text-sm">
+      <div className="flex flex-col h-full bg-[#09090b]" aria-busy="true" aria-label="Loading SQL parser">
+        {/* Skeleton toolbar */}
+        <div className="flex items-center justify-between px-4 py-2 border-b border-slate-800 bg-slate-900/50">
+          <div className="flex items-center gap-3">
+            <div className="animate-pulse bg-zinc-800 rounded h-4 w-28" />
+            <div className="h-4 w-px bg-slate-700" />
+            <div className="animate-pulse bg-zinc-800 rounded h-6 w-36" />
+          </div>
+          <div className="animate-pulse bg-zinc-800 rounded h-4 w-20" />
+        </div>
+        {/* Skeleton panels */}
+        <div className="flex flex-col lg:flex-row flex-1 min-h-0">
+          {/* Left: editor skeleton */}
+          <div className="w-full lg:w-1/2 border-r border-slate-800 flex flex-col min-h-0 p-4 gap-3">
+            <div className="animate-pulse bg-zinc-800 rounded h-3 w-3/4" />
+            <div className="animate-pulse bg-zinc-800 rounded h-3 w-full" />
+            <div className="animate-pulse bg-zinc-800 rounded h-3 w-5/6" />
+            <div className="animate-pulse bg-zinc-800 rounded h-3 w-2/3" />
+            <div className="animate-pulse bg-zinc-800 rounded h-3 w-4/5" />
+          </div>
+          {/* Right: tab + content skeleton */}
+          <div className="w-full lg:w-1/2 flex flex-col min-h-0">
+            <div className="flex border-b border-slate-800 bg-slate-900/30 gap-2 px-2 py-1">
+              {[80, 72, 60, 88].map((w, i) => (
+                <div key={i} className={`animate-pulse bg-zinc-800 rounded h-6`} style={{ width: w }} />
+              ))}
+            </div>
+            <div className="flex-1 p-4 flex flex-col gap-3">
+              <div className="animate-pulse bg-zinc-800 rounded h-3 w-1/2" />
+              <div className="animate-pulse bg-zinc-800 rounded h-3 w-3/4" />
+              <div className="animate-pulse bg-zinc-800 rounded h-3 w-2/3" />
+            </div>
+          </div>
+        </div>
+        {/* Progress overlay at bottom */}
+        <div className="px-4 py-2 border-t border-slate-800 bg-slate-900/50 flex items-center gap-3">
+          <div className="inline-block w-4 h-4 border-2 border-blue-500 border-t-transparent rounded-full animate-spin flex-shrink-0" role="status" />
+          <p className="text-slate-400 text-xs">
             {progress < 1
-              ? `Downloading SQL parser... ${Math.round(progress * 100)}%`
-              : "Initializing..."}
+              ? `Downloading SQL parser… ${Math.round(progress * 100)}%`
+              : "Initializing…"}
           </p>
           {progress > 0 && progress < 1 && (
             <div
-              className="w-full bg-slate-700 rounded-full h-1.5"
+              className="flex-1 bg-slate-700 rounded-full h-1"
               role="progressbar"
               aria-valuenow={Math.round(progress * 100)}
               aria-valuemin={0}
               aria-valuemax={100}
               aria-label="Download progress"
             >
               <div
-                className="bg-blue-500 h-1.5 rounded-full transition-all duration-300"
+                className="bg-blue-500 h-1 rounded-full transition-all duration-300"
                 style={{ width: `${progress * 100}%` }}
               />
             </div>
@@ -190,12 +224,12 @@ export default function Playground() {
           <div className="px-4 py-2 border-b border-slate-800 bg-slate-900/30">
             <span className="text-xs text-slate-400 uppercase tracking-wider font-medium">Input</span>
           </div>
-          <div className="flex-1 overflow-auto p-2">
+          <div className="flex-1 overflow-hidden p-2">
             <SqlEditor
               value={sql}
               onChange={handleSqlChange}
               placeholder="Enter your SQL query here..."
-              minHeight="100%"
+              minHeight="200px"
             />
           </div>
         </div>