feat: polish website and console dashboards

website/app/page.tsx

@@ -140,6 +140,24 @@ const operations = [
   },
 ];
 
+const consolePreviewStats = [
+  ["Admin", "站点健康、RPM、TPM、失败冷却"],
+  ["User", "模型广场、使用日志、工作空间"],
+  ["Billing", "Token + Media 成本口径"],
+];
+
+const adminPreviewRows = [
+  ["boos-gpt", "99.8%", "42ms", "online"],
+  ["火山方舟", "97.4%", "231ms", "cooldown"],
+  ["RunningHub", "96.9%", "384ms", "queue"],
+];
+
+const userPreviewRows = [
+  ["工作流任务", "视频生成", "执行中"],
+  ["生图助手", "gpt-image-2", "已归档"],
+  ["数字人", "口播视频", "待确认"],
+];
+
 const productionModules = [
   "模型广场",
   "使用日志",
@@ -502,6 +520,67 @@ export default function Home() {
           </div>
         </section>
 
+        <section className="console-preview-section" data-motion="section">
+          <div className="console-preview-copy">
+            <span>Console UX</span>
+            <h2>管理员看运营风险，普通用户看下一步创作动作</h2>
+            <p>
+              BossAI 的后台不是一张堆满数字的表。管理员首屏回答健康、吞吐、成本和异常；用户首屏回答密钥、用量、创作入口和产出归档。
+            </p>
+            <div className="console-preview-stats">
+              {consolePreviewStats.map(([label, value]) => (
+                <div data-motion="card" key={label}>
+                  <strong>{label}</strong>
+                  <span>{value}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+          <div className="console-preview-board" aria-label="BossAI 后台预览">
+            <div className="preview-window admin-window" data-motion="card">
+              <div className="preview-title">
+                <span>管理员控制台</span>
+                <strong>Operational</strong>
+              </div>
+              <div className="preview-metrics">
+                <div><span>24h 请求</span><strong>128K</strong></div>
+                <div><span>成功率</span><strong>99.2%</strong></div>
+                <div><span>站点</span><strong>8/9</strong></div>
+              </div>
+              <div className="preview-list">
+                {adminPreviewRows.map(([site, health, latency, state]) => (
+                  <div key={site}>
+                    <strong>{site}</strong>
+                    <span>{health}</span>
+                    <em>{latency}</em>
+                    <i>{state}</i>
+                  </div>
+                ))}
+              </div>
+            </div>
+            <div className="preview-window user-window" data-motion="card">
+              <div className="preview-title">
+                <span>用户工作台</span>
+                <strong>Creation</strong>
+              </div>
+              <div className="preview-actions">
+                <span>工作流</span>
+                <span>生图</span>
+                <span>数字人</span>
+              </div>
+              <div className="preview-list">
+                {userPreviewRows.map(([name, model, state]) => (
+                  <div key={name}>
+                    <strong>{name}</strong>
+                    <span>{model}</span>
+                    <i>{state}</i>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </section>
+
         <section id="factory" className="factory-section" data-motion="section">
           <div className="factory-copy">
             <span>Creation OS</span>