docs: site layout and README improvements

- Add Gemini base URL setup instructions to README (both SDK versions)
- Add missing ANTHROPIC_API_KEY=mock-key to README env block
- Center orphan WebSocket APIs card in features grid
- Move Real-World Usage section to bottom of docs site
- Tighten section padding (6rem → 3rem)
- Remove inconsistent border-top on comparison section
- Match Real-World Usage heading and description style to other sections

Author: jpr5

README.md

@@ -117,9 +117,29 @@ OPENAI_API_KEY=mock-key
 
 # Or for Anthropic Claude:
 ANTHROPIC_BASE_URL=http://localhost:5555/v1
+ANTHROPIC_API_KEY=mock-key
 
-# Or for Google Gemini — point at the base URL:
-# http://localhost:5555/v1beta
+# Or for Google Gemini (set baseUrl in code — see below):
+GOOGLE_API_KEY=mock-key
+```
+
+For Google Gemini, the SDK doesn't support a base URL env var — pass it in code:
+
+```typescript
+// @google/genai (v1.x)
+import { GoogleGenAI } from "@google/genai";
+const ai = new GoogleGenAI({
+  apiKey: process.env.GOOGLE_API_KEY,
+  httpOptions: { baseUrl: "http://localhost:5555" },
+});
+
+// @google/generative-ai (v0.x)
+import { GoogleGenerativeAI } from "@google/generative-ai";
+const genAI = new GoogleGenerativeAI(process.env.GOOGLE_API_KEY!);
+const model = genAI.getGenerativeModel(
+  { model: "gemini-2.0-flash" },
+  { baseUrl: "http://localhost:5555" },
+);
 ```
 
 ### JSON Fixture Files

docs/index.html

@@ -433,7 +433,7 @@
 
       /* ─── Sections ───────────────────────────────────────────────── */
       section {
-        padding: 6rem 0;
+        padding: 3rem 0;
       }
 
       .section-label {
@@ -470,6 +470,10 @@
         margin-top: 3.5rem;
       }
 
+      .features-grid > .feature-card:last-child:nth-child(3n + 1) {
+        grid-column: 2;
+      }
+
       .feature-card {
         padding: 2rem;
         background: var(--bg-card);
@@ -635,10 +639,6 @@
       }
 
       /* ─── Comparison Table ───────────────────────────────────────── */
-      .comparison {
-        border-top: 1px solid var(--border);
-      }
-
       .comparison-table {
         width: 100%;
         margin-top: 3rem;
@@ -1352,28 +1352,6 @@ <h2 class="section-title">llmock vs MSW</h2>
       </div>
     </section>
 
-    <!-- ═══ Real-World Usage ═════════════════════════════════════════ -->
-    <section class="reveal">
-      <div class="container">
-        <h2>Real-World Usage</h2>
-        <p>
-          <a href="https://github.com/CopilotKit/CopilotKit" target="_blank">CopilotKit</a> uses
-          llmock across its test suite to verify AI agent behavior across multiple LLM providers
-          without hitting real APIs. The tests cover streaming text, tool calls, and multi-turn
-          conversations across both v1 and v2 runtimes.
-        </p>
-        <p>
-          See the
-          <a
-            href="https://github.com/CopilotKit/CopilotKit/search?q=llmock&amp;type=code"
-            target="_blank"
-            >CopilotKit test suite</a
-          >
-          for real-world examples of llmock in action.
-        </p>
-      </div>
-    </section>
-
     <!-- ═══ Claude Code Integration ═══════════════════════════════════ -->
     <section id="claude-code" class="reveal">
       <div class="container">
@@ -1435,6 +1413,25 @@ <h3>Copy to Project</h3>
       </div>
     </section>
 
+    <!-- ═══ Real-World Usage ═════════════════════════════════════════ -->
+    <section class="reveal">
+      <div class="container">
+        <h2 class="section-title">Real-World Usage</h2>
+        <p class="section-desc">
+          <a href="https://github.com/CopilotKit/CopilotKit" target="_blank">CopilotKit</a> uses
+          llmock across its test suite to verify AI agent behavior across multiple LLM providers
+          without hitting real APIs. The tests cover streaming text, tool calls, and multi-turn
+          conversations across both v1 and v2 runtimes. See the
+          <a
+            href="https://github.com/CopilotKit/CopilotKit/search?q=llmock&amp;type=code"
+            target="_blank"
+            >CopilotKit test suite</a
+          >
+          for real-world examples.
+        </p>
+      </div>
+    </section>
+
     <!-- ═══ Footer ═══════════════════════════════════════════════════ -->
     <footer>
       <div class="container">