perf(web): server-only StaticCodeBlock for above-the-fold marketing

PageSpeed Insights mobile reported LCP element render delay of 2.3s
on the hero — the largest visible element is the build.log <pre> with
"> Generating spec... OK ..." text. TTFB is 0ms (CF cache hit), so the
delay was pure client-side: Lighthouse waited for the JS bundle to
parse and the 'use client' CodeBlock boundary to hydrate before it
considered the element "rendered."

CodeBlock pulls in lucide-react (Copy/Check icons) plus a useState
boundary just for the copy button. Above the fold on marketing, none
of that is needed — the user just needs to see the snippet.

Split:
- New `static-code-block.tsx`: server component, no 'use client',
  no icons, no copy button. Pure SSR markup that paints with the HTML.
- Marketing landing now uses StaticCodeBlock for all three hero
  snippets (prompt.txt / build.log / claude_desktop_config.json).
- Interactive CodeBlock stays in use for dashboard pages where users
  actually want to copy snippets.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

apps/web/app/(marketing)/page.tsx

@@ -1,5 +1,5 @@
-import { CodeBlock } from '@/components/code-block';
 import { JsonLd } from '@/components/json-ld';
+import { StaticCodeBlock } from '@/components/static-code-block';
 import { FAQ, faqJsonLd } from '@/lib/seo';
 import Link from 'next/link';
 
@@ -134,9 +134,9 @@ export default function Landing() {
           <div className="relative min-w-0">
             <div className="absolute -inset-px rounded-lg border border-[--color-border-strong]" />
             <div className="space-y-3">
-              <CodeBlock label="prompt.txt" code={PROMPT_EXAMPLE} />
-              <CodeBlock label="build.log" code={OUTPUT_EXAMPLE} />
-              <CodeBlock label="claude_desktop_config.json" code={INSTALL_SNIPPET} />
+              <StaticCodeBlock label="prompt.txt" code={PROMPT_EXAMPLE} />
+              <StaticCodeBlock label="build.log" code={OUTPUT_EXAMPLE} />
+              <StaticCodeBlock label="claude_desktop_config.json" code={INSTALL_SNIPPET} />
             </div>
           </div>
         </div>

apps/web/components/static-code-block.tsx

@@ -0,0 +1,37 @@
+import { cn } from '@/lib/cn';
+
+export interface StaticCodeBlockProps {
+  code: string;
+  language?: string;
+  label?: string;
+  className?: string;
+}
+
+/**
+ * Server-only variant of CodeBlock — no copy button, no client hydration.
+ *
+ * Use this for above-the-fold marketing content where every kilobyte of
+ * JS hurts LCP. The interactive CodeBlock pulls in lucide-react icons and
+ * a useState boundary that forces an entire client chunk to load before
+ * Lighthouse considers the element "rendered". This static variant is
+ * pure SSR markup and lets the browser paint as soon as the HTML arrives.
+ *
+ * CodeBlock (with copy button) stays in use for dashboard pages where
+ * users actually want to copy snippets.
+ */
+export function StaticCodeBlock({ code, language, label, className }: StaticCodeBlockProps) {
+  return (
+    <div className={cn('panel-subtle relative overflow-hidden', className)}>
+      {(label || language) && (
+        <div className="flex items-center justify-between border-b border-[--color-border] px-3 py-2">
+          <span className="mono text-[11px] uppercase tracking-wider text-[--color-fg-subtle]">
+            {label ?? language}
+          </span>
+        </div>
+      )}
+      <pre className="mono overflow-x-auto px-3 py-3 text-[12.5px] leading-relaxed text-[--color-fg]">
+        <code>{code}</code>
+      </pre>
+    </div>
+  );
+}