feat(website/home): hero redesign with solid headline, formatted-SQL demo and proof line

website/scripts/gen-sample-ast/main.go

@@ -1,5 +1,6 @@
-// Command gen-sample-ast writes the real GoSQLX AST JSON for the homepage
-// demo's sample query (the same encoding/json output wasm/main.go returns).
+// Command gen-sample-ast writes the real GoSQLX AST JSON and formatted SQL for
+// the homepage demo's sample query (the same encoding/json and formatter output
+// wasm/main.go returns), so the demo renders real output before WASM loads.
 //
 // Usage: go run ./website/scripts/gen-sample-ast <sql-file> <out-json>
 package main
@@ -10,6 +11,7 @@ import (
 	"os"
 	"strings"
 
+	"github.com/ajitpratap0/GoSQLX/pkg/formatter"
 	"github.com/ajitpratap0/GoSQLX/pkg/gosqlx"
 )
 
@@ -30,11 +32,17 @@ func run() error {
 	if err != nil {
 		return fmt.Errorf("marshal ast: %w", err)
 	}
-	// Emit the query alongside its AST so the UI has one source for both.
+	formatted, err := formatter.FormatString(sql)
+	if err != nil {
+		return fmt.Errorf("format: %w", err)
+	}
+	// Emit the query alongside its AST and formatted form so the UI has one
+	// source for all three.
 	b, err := json.MarshalIndent(struct {
-		SQL string          `json:"sql"`
-		AST json.RawMessage `json:"ast"`
-	}{SQL: sql, AST: astJSON}, "", "  ")
+		SQL       string          `json:"sql"`
+		Formatted string          `json:"formatted"`
+		AST       json.RawMessage `json:"ast"`
+	}{SQL: sql, Formatted: formatted, AST: astJSON}, "", "  ")
 	if err != nil {
 		return fmt.Errorf("marshal: %w", err)
 	}

website/src/components/home/Hero.tsx

@@ -1,4 +1,11 @@
-import { PROJECT } from '@/data/metrics';
+import Link from 'next/link';
+import {
+  PROJECT,
+  HEADLINE_OPS_PER_SEC,
+  HEADLINE_CAPTION,
+  formatOps,
+  formatCount,
+} from '@/data/metrics';
 import { GlassCard } from '@/components/ui/GlassCard';
 import { GradientText } from '@/components/ui/GradientText';
 import { VersionBadge } from '@/components/ui/VersionBadge';
@@ -8,7 +15,9 @@ import { MiniPlayground } from '@/components/home/MiniPlayground';
 
 export function Hero({ stars }: { stars: number | null }) {
   return (
-    <section className="relative min-h-screen flex items-center justify-center overflow-clip">
+    // Fill the viewport below the fixed 4rem navbar, but top-align content so
+    // the live demo starts above the fold instead of being centred below it.
+    <section className="relative min-h-[calc(100svh-4rem)] overflow-clip">
       {/* Background gradient mesh */}
       <div className="absolute inset-0 pointer-events-none overflow-hidden" aria-hidden="true">
         {/* Glows: single gradient background, no blur filter */}
@@ -30,27 +39,27 @@ export function Hero({ stars }: { stars: number | null }) {
       </div>
 
       {/* Content */}
-      <div className="relative z-10 max-w-5xl mx-auto px-6 py-24 text-center">
+      <div className="relative z-10 max-w-5xl mx-auto px-4 sm:px-6 pt-10 sm:pt-14 pb-16 text-center">
         {/* Version badge */}
-        <div className="mb-6">
+        <div className="mb-5">
           <VersionBadge version={`${PROJECT.version} - Multi-Dialect SQL Parser`} />
         </div>
 
-        {/* Headline */}
+        {/* Headline: solid text, brand gradient only on the key phrase */}
         <h1
-          className="text-display font-bold mb-6 break-words hyphens-auto w-full max-w-full px-4 sm:px-0"
+          className="text-display font-bold mb-5 text-fg text-balance break-words w-full max-w-full px-4 sm:px-0"
           style={{ letterSpacing: '-0.03em' }}
         >
-          <GradientText>Parse SQL at the speed of Go</GradientText>
+          Parse SQL at the <GradientText>speed of Go</GradientText>
         </h1>
 
         {/* Subtitle */}
-        <p className="text-base sm:text-lg md:text-xl max-w-2xl mx-auto mb-10 text-zinc-300">
+        <p className="text-base sm:text-lg md:text-xl max-w-2xl mx-auto mb-7 text-fg-muted text-pretty">
           Production-ready SQL parsing with zero-copy tokenization, object pooling, and multi-dialect support
         </p>
 
         {/* Buttons */}
-        <div className="flex flex-wrap items-center justify-center gap-3 mb-14">
+        <div className="flex flex-wrap items-center justify-center gap-3 mb-5">
           <Button variant="primary" href="/docs/getting-started">
             Get Started
           </Button>
@@ -60,11 +69,33 @@ export function Hero({ stars }: { stars: number | null }) {
           <GitHubStarButton stars={stars} />
         </div>
 
+        {/* Proof line: every figure comes from src/data/metrics.ts */}
+        <ul
+          aria-label="Project facts"
+          className="flex flex-wrap items-center justify-center gap-x-3 gap-y-1 text-xs sm:text-sm text-fg-subtle mb-8 sm:mb-10"
+        >
+          <li>
+            <Link href="/benchmarks" className="hover:text-fg underline-offset-4 hover:underline">
+              <span className="font-mono text-fg-muted">{formatOps(HEADLINE_OPS_PER_SEC)} ops/sec</span>{' '}
+              ({HEADLINE_CAPTION})
+            </Link>
+          </li>
+          {[
+            `${PROJECT.dialectCount} dialects`,
+            `${PROJECT.lintRuleCount} lint rules`,
+            `${formatCount(PROJECT.testFunctions)} tests`,
+          ].map((fact) => (
+            <li key={fact} className="flex items-center gap-x-3">
+              <span aria-hidden="true" className="hidden sm:inline">&middot;</span>
+              {fact}
+            </li>
+          ))}
+        </ul>
+
         {/* Live mini playground */}
         <GlassCard hover={false} className="p-0 overflow-hidden shadow-2xl shadow-indigo-500/5">
           <MiniPlayground />
         </GlassCard>
-
       </div>
     </section>
   );