feat(landing): add Code Demo + Dashboard mockup sections

Dashboard mockup is pure static (SVG chart + stats grid + log table).
No backend dependency. Reuses puro.css .log-table / .provider / .status-*
(scoped to .puro-page). Only adds component-local styles for .code-demo,
.dash-mock, .stat-row, .chart-card and friends.

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

frontend/src/views/landing/LandingView.vue

@@ -113,6 +113,74 @@
         </div>
       </div>
     </section>
+
+    <!-- ④ Code Demo -->
+    <section class="block container" id="code">
+      <div class="section-header">
+        <div class="section-kicker">快速接入</div>
+        <h2 class="section-title">把 base_url 一改，就能用</h2>
+        <p class="section-sub">兼容 OpenAI / Anthropic / Gemini SDK，<span class="text-puro-cyan">零代码改动</span></p>
+      </div>
+      <div class="code-demo">
+        <div class="code-block">
+          <div class="code-title mono">~/.codex/config.toml</div>
+          <pre class="mono"><code><span class="cm">[model_providers.OpenAI]</span>
+base_url = <span class="str">"https://ai.puro.im"</span>
+wire_api = <span class="str">"responses"</span>
+requires_openai_auth = <span class="kw">true</span></code></pre>
+        </div>
+        <div class="code-block">
+          <div class="code-title mono">curl</div>
+          <pre class="mono"><code><span class="cm">$</span> curl https://ai.puro.im/responses \
+  -H <span class="str">"Authorization: Bearer sk-xxx"</span> \
+  -d <span class="str">'{"model":"gpt-5.4","input":"hello"}'</span></code></pre>
+        </div>
+      </div>
+      <div class="code-foot">支持 OpenAI Responses API · Anthropic Messages API · Gemini generateContent · 流式 SSE &amp; WebSocket</div>
+    </section>
+
+    <!-- ⑤ Dashboard mockup -->
+    <section class="block container" id="dashboard">
+      <div class="section-header">
+        <div class="section-kicker">用量透明</div>
+        <h2 class="section-title">每条请求都看得见</h2>
+        <p class="section-sub">不像第三方 API 池子那种"扣了多少不告诉你"——扣哪个账号、跑哪个模型、用了多少 tokens、上游响应几秒，一目了然。</p>
+      </div>
+      <div class="dash-mock">
+        <div class="dash-header">
+          <span class="dash-title">Dashboard · 预览</span>
+          <div class="dash-dots"><span></span><span></span><span></span></div>
+        </div>
+        <div class="dash-body">
+          <div class="stat-row">
+            <div class="stat"><div class="stat-label">今日请求</div><div class="stat-value">1,842</div><div class="stat-delta">+12.3%</div></div>
+            <div class="stat"><div class="stat-label">输入 Tokens</div><div class="stat-value">2.1M</div><div class="stat-delta">+8.1%</div></div>
+            <div class="stat"><div class="stat-label">输出 Tokens</div><div class="stat-value">485K</div><div class="stat-delta">+15.6%</div></div>
+            <div class="stat"><div class="stat-label">今日费用</div><div class="stat-value">$1.23</div><div class="stat-delta down">-4.2%</div></div>
+          </div>
+          <div class="chart-card">
+            <div class="chart-title">近 30 天用量趋势</div>
+            <svg viewBox="0 0 600 120" class="chart-svg">
+              <polyline points="0,90 40,80 80,70 120,65 160,60 200,50 240,55 280,45 320,40 360,35 400,30 440,25 480,20 520,25 560,15 600,10"
+                fill="none" stroke="#22d3ee" stroke-width="2"/>
+              <polyline points="0,100 40,95 80,90 120,88 160,85 200,82 240,80 280,78 320,75 360,73 400,70 440,68 480,65 520,63 560,60 600,58"
+                fill="none" stroke="#a855f7" stroke-width="2" stroke-dasharray="4 4"/>
+            </svg>
+          </div>
+          <table class="log-table mono">
+            <thead>
+              <tr><th>时间</th><th>模型</th><th>上游</th><th>状态</th><th>用量</th></tr>
+            </thead>
+            <tbody>
+              <tr><td>12:34:07</td><td>gpt-5.4</td><td><span class="provider gpt"><span class="dot"></span>ChatGPT #1</span></td><td class="status-200">200</td><td>2,341</td></tr>
+              <tr><td>12:34:02</td><td>claude-opus-4-7</td><td><span class="provider claude"><span class="dot"></span>Claude #2</span></td><td class="status-200">200</td><td>5,102</td></tr>
+              <tr><td>12:33:58</td><td>gemini-2.5-pro</td><td><span class="provider gemini"><span class="dot"></span>Gemini #1</span></td><td class="status-200">200</td><td>843</td></tr>
+              <tr><td>12:33:41</td><td>gpt-5.4</td><td><span class="provider gpt"><span class="dot"></span>ChatGPT #2</span></td><td class="status-429">429</td><td>—</td></tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </section>
   </div>
 </template>
 
@@ -233,4 +301,84 @@
 .feature h3 { font-size: 18px; font-weight: 700; margin-bottom: 10px; }
 .feature p { color: var(--text-2); font-size: 14px; line-height: 1.6; }
 .feature code { color: var(--cyan); font-size: 13px; }
+
+/* code demo */
+.code-demo {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+}
+@media (max-width: 820px) { .code-demo { grid-template-columns: 1fr; } }
+.code-block {
+  border: 1px solid var(--border);
+  border-radius: var(--r-lg);
+  background: var(--bg-code);
+  overflow: hidden;
+}
+.code-title {
+  padding: 10px 16px;
+  background: var(--bg-1);
+  font-size: 11px;
+  color: var(--text-3);
+  border-bottom: 1px solid var(--border);
+}
+.code-block pre {
+  padding: 16px;
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--text-1);
+  overflow-x: auto;
+}
+.cm { color: var(--text-3); }
+.str { color: var(--cyan); }
+.kw { color: var(--amber); }
+.code-foot {
+  margin-top: 20px;
+  text-align: center;
+  font-size: 12px;
+  color: var(--text-3);
+  font-family: var(--font-mono);
+}
+
+/* dash mockup */
+.dash-mock {
+  border: 1px solid var(--border);
+  border-radius: var(--r-xl);
+  background: var(--bg-1);
+  overflow: hidden;
+  box-shadow: 0 40px 80px -40px rgba(0,0,0,0.8);
+}
+.dash-header {
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.dash-title { font-size: 12px; color: var(--text-2); font-family: var(--font-mono); }
+.dash-dots { display: flex; gap: 6px; }
+.dash-dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--border-2); }
+.dash-body { padding: 20px; }
+.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
+@media (max-width: 720px) { .stat-row { grid-template-columns: repeat(2, 1fr); } }
+.stat {
+  padding: 14px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-md);
+  background: rgba(15,23,42,0.6);
+}
+.stat-label { font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; }
+.stat-value { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; font-family: var(--font-mono); }
+.stat-delta { font-size: 11px; color: var(--green); margin-top: 4px; font-family: var(--font-mono); }
+.stat-delta.down { color: var(--red); }
+
+.chart-card {
+  border: 1px solid var(--border);
+  border-radius: var(--r-md);
+  background: rgba(15,23,42,0.6);
+  padding: 16px;
+  margin-bottom: 20px;
+}
+.chart-title { font-size: 12px; color: var(--text-2); margin-bottom: 12px; }
+.chart-svg { width: 100%; height: 120px; display: block; }
 </style>