feat: refine BossAI website product story

website/app/page.tsx

@@ -29,6 +29,12 @@ const platformItems = [
   },
 ];
 
+const heroStats = [
+  { value: "/v1", label: "OpenAI 兼容入口" },
+  { value: "/v1/messages", label: "Claude Messages" },
+  { value: "Cloud / RH", label: "Comfy API 后端" },
+];
+
 const routes = [
   { type: "Chat", model: "gpt-5.4", state: "已路由", tone: "hot" },
   { type: "Image", model: "gpt-image-2", state: "生成中", tone: "lime" },
@@ -36,6 +42,12 @@ const routes = [
   { type: "Claude", model: "/v1/messages", state: "流式", tone: "white" },
 ];
 
+const consoleMetrics = [
+  { label: "日志写入", value: "real-time" },
+  { label: "计费口径", value: "token + image" },
+  { label: "失败冷却", value: "auto" },
+];
+
 const workflowModes = [
   ["cloud", "Comfy Cloud API 后端"],
   ["runninghub", "RunningHub API 后端"],
@@ -43,6 +55,51 @@ const workflowModes = [
   ["boosapi", "Rust API-native 执行器"],
 ];
 
+const endpointItems = [
+  {
+    method: "POST",
+    path: "/v1/chat/completions",
+    title: "对话与 Agent",
+    body: "对接 OpenAI 兼容客户端，统一进入模型路由、日志和计费。",
+  },
+  {
+    method: "POST",
+    path: "/v1/messages",
+    title: "Claude Messages",
+    body: "支持 Claude 格式请求、响应和流式事件转换。",
+  },
+  {
+    method: "POST",
+    path: "/v1/images/generations",
+    title: "图像生成",
+    body: "生图助手、工作流节点和下游 API 共享同一条模型调用链路。",
+  },
+  {
+    method: "POST",
+    path: "/workflow-ui/api/prompt",
+    title: "Comfy 工作流",
+    body: "代理 Cloud、RunningHub、External 或 BoosAPI 执行器，保留前端操作习惯。",
+  },
+];
+
+const operations = [
+  {
+    eyebrow: "Identity",
+    title: "管理员与普通用户隔离",
+    body: "普通用户只看到自己的工作空间、任务、产出和用量；管理员可以按用户、站点和模型做运营管理。",
+  },
+  {
+    eyebrow: "Routing",
+    title: "站点、账号、密钥自动路由",
+    body: "下游密钥绑定可用模型后自动建立路由，失败、冷却、重试和成本记录进入统一日志。",
+  },
+  {
+    eyebrow: "Workspace",
+    title: "只归档最终产出",
+    body: "Workflow 上传素材和模板引用不会污染工作空间，图片、视频、音频等最终结果才进入资产库。",
+  },
+];
+
 const productionModules = [
   "模型广场",
   "使用日志",
@@ -115,6 +172,14 @@ function HeroConsole() {
           </div>
         ))}
       </div>
+      <div className="console-metrics">
+        {consoleMetrics.map((metric) => (
+          <div data-motion="card" key={metric.label}>
+            <span>{metric.label}</span>
+            <strong>{metric.value}</strong>
+          </div>
+        ))}
+      </div>
       <div className="mini-grid">
         <div>
           <span>Workspace</span>
@@ -142,8 +207,9 @@ export default function Home() {
           </Link>
           <nav className="nav-links" aria-label="官网导航">
             <a href="#platform">平台能力</a>
+            <a href="#api">API</a>
             <a href="#workflow">工作流</a>
-            <a href="#factory">短视频工厂</a>
+            <a href="#operations">运营</a>
             <a href="#deploy">部署</a>
           </nav>
           <div className="nav-actions">
@@ -177,129 +243,180 @@ export default function Home() {
                 查看工作流
               </Link>
             </div>
+            <div className="hero-proof" aria-label="BossAI 兼容能力">
+              {heroStats.map((stat) => (
+                <div data-motion="card" key={stat.label}>
+                  <strong>{stat.value}</strong>
+                  <span>{stat.label}</span>
+                </div>
+              ))}
+            </div>
           </div>
           <HeroConsole />
         </section>
 
-      <section id="platform" className="platform-section" data-motion="section">
-        <div className="section-heading">
-          <span>Platform</span>
-          <h2>一套后台，接住 API、工作流和创作应用</h2>
-        </div>
-        <div className="capability-grid">
-          {platformItems.map((item, index) => (
-            <article
-              className="capability-card"
-              data-motion="card"
-              key={item.title}
-              style={{ ["--index" as string]: index }}
-            >
-              <div className="card-top">
-                <span>{item.eyebrow}</span>
-                <strong>{item.metric}</strong>
-              </div>
-              <h3>{item.title}</h3>
-              <p>{item.body}</p>
-            </article>
-          ))}
-        </div>
-      </section>
-
-      <section id="workflow" className="workflow-section" data-motion="section">
-        <div className="workflow-panel">
+        <section id="platform" className="platform-section" data-motion="section">
           <div className="section-heading">
-            <span>Workflow</span>
-            <h2>使用完整版 ComfyUI 前端，后端按你的模式切换</h2>
+            <span>Platform</span>
+            <h2>一套后台，接住 API、工作流和创作应用</h2>
           </div>
-          <p>
-            官网和管理台隔离后，Workflow 继续作为产品内能力维护。BossAI 可以代理官方 Cloud、RunningHub、外部 ComfyUI，也能执行 API-native 节点。
-          </p>
-          <div className="mode-list">
-            {workflowModes.map(([key, label]) => (
-              <div data-motion="card" key={key}>
-                <code>{key}</code>
-                <span>{label}</span>
-              </div>
+          <div className="capability-grid">
+            {platformItems.map((item, index) => (
+              <article
+                className="capability-card"
+                data-motion="card"
+                key={item.title}
+                style={{ ["--index" as string]: index }}
+              >
+                <div className="card-top">
+                  <span>{item.eyebrow}</span>
+                  <strong>{item.metric}</strong>
+                </div>
+                <h3>{item.title}</h3>
+                <p>{item.body}</p>
+              </article>
             ))}
           </div>
-        </div>
-        <div className="node-board" aria-label="工作流节点预览">
-          <div className="node-card wide" data-motion="card">
-            <span>Prompt</span>
-            <strong>文案、角色、镜头、商品信息</strong>
-          </div>
-          <div className="node-card" data-motion="card">
-            <span>Image</span>
-            <strong>生图</strong>
-          </div>
-          <div className="node-card" data-motion="card">
-            <span>Video</span>
-            <strong>视频</strong>
-          </div>
-          <div className="node-card" data-motion="card">
-            <span>Voice</span>
-            <strong>TTS</strong>
-          </div>
-          <div className="node-card" data-motion="card">
-            <span>Archive</span>
-            <strong>工作空间</strong>
-          </div>
-        </div>
-      </section>
+        </section>
 
-      <section id="factory" className="factory-section" data-motion="section">
-        <div className="factory-copy">
-          <span>Creation OS</span>
-          <h2>从提示词到短视频，从素材到数字人</h2>
-          <p>
-            生图助手、视频助手和短视频工厂共享 BoosAPI 模型路由。产出文件自动归档，用户之间隔离，管理员可查看团队级用量与成本。
-          </p>
-        </div>
-        <div className="module-strip">
-          {productionModules.map((module) => (
-            <span data-motion="card" key={module}>
-              {module}
-            </span>
-          ))}
-        </div>
-      </section>
+        <section id="api" className="api-section" data-motion="section">
+          <div className="section-heading split">
+            <div>
+              <span>API Surface</span>
+              <h2>协议兼容不是旁路，而是整个平台的入口</h2>
+            </div>
+            <p>
+              对话、生图、视频和 Claude Messages 都从同一个网关进入路由、日志、计费和用户隔离。前端应用、工作流节点和外部客户端使用同一套模型资产。
+            </p>
+          </div>
+          <div className="endpoint-grid">
+            {endpointItems.map((endpoint) => (
+              <article className="endpoint-card" data-motion="card" key={endpoint.path}>
+                <div className="endpoint-line">
+                  <span>{endpoint.method}</span>
+                  <code>{endpoint.path}</code>
+                </div>
+                <h3>{endpoint.title}</h3>
+                <p>{endpoint.body}</p>
+              </article>
+            ))}
+          </div>
+        </section>
 
-      <section id="deploy" className="deploy-section" data-motion="section">
-        <div>
-          <span>Deploy</span>
-          <h2>远程模型优先，本机不必有 GPU</h2>
-          <p>
-            当图像、视频、语音走上游 API、Comfy Cloud 或 RunningHub 时，BossAI 服务器只负责网关、鉴权、数据库、日志和 Workflow UI 代理。
-          </p>
-        </div>
-        <div className="deploy-stack">
-          <div data-motion="card">
-            <small>Backend</small>
-            <strong>Rust 二进制</strong>
+        <section id="workflow" className="workflow-section" data-motion="section">
+          <div className="workflow-panel">
+            <div className="section-heading">
+              <span>Workflow</span>
+              <h2>使用完整版 ComfyUI 前端，后端按你的模式切换</h2>
+            </div>
+            <p>
+              官网和管理台隔离后，Workflow 继续作为产品内能力维护。BossAI 可以代理官方 Cloud、RunningHub、外部 ComfyUI，也能执行 API-native 节点。
+            </p>
+            <div className="mode-list">
+              {workflowModes.map(([key, label]) => (
+                <div data-motion="card" key={key}>
+                  <code>{key}</code>
+                  <span>{label}</span>
+                </div>
+              ))}
+            </div>
           </div>
-          <div data-motion="card">
-            <small>Database</small>
-            <strong>SQLite / PostgreSQL</strong>
+          <div className="node-board" aria-label="工作流节点预览">
+            <div className="node-card wide" data-motion="card">
+              <span>Prompt</span>
+              <strong>文案、角色、镜头、商品信息</strong>
+            </div>
+            <div className="node-card" data-motion="card">
+              <span>Image</span>
+              <strong>生图</strong>
+            </div>
+            <div className="node-card" data-motion="card">
+              <span>Video</span>
+              <strong>视频</strong>
+            </div>
+            <div className="node-card" data-motion="card">
+              <span>Voice</span>
+              <strong>TTS</strong>
+            </div>
+            <div className="node-card" data-motion="card">
+              <span>Archive</span>
+              <strong>工作空间</strong>
+            </div>
           </div>
-          <div data-motion="card">
-            <small>Website</small>
-            <strong>Next.js 独立部署</strong>
-          </div>
-        </div>
-      </section>
+        </section>
 
-      <section className="final-section" data-motion="section">
-        <h2>把模型、工作流和创作应用收进一个平台</h2>
-        <p>适合自建 AI 中转、团队模型管理、多模态创作和商业化用户面板。</p>
-        <div className="hero-actions">
-          <Link className="primary-cta" href="/user/register">
-            开始使用
-          </Link>
-          <Link className="secondary-cta" href="/boos">
-            进入后台
-          </Link>
-        </div>
-      </section>
+        <section id="operations" className="ops-section" data-motion="section">
+          <div className="ops-copy">
+            <span>Operations</span>
+            <h2>运营后台负责成本、权限、路由和产出归档</h2>
+            <p>
+              BossAI 不是只把 API 转发出去。它把管理员视角、用户视角、模型市场、使用日志和工作空间放进同一套产品闭环。
+            </p>
+          </div>
+          <div className="ops-grid">
+            {operations.map((item) => (
+              <article className="ops-card" data-motion="card" key={item.title}>
+                <span>{item.eyebrow}</span>
+                <h3>{item.title}</h3>
+                <p>{item.body}</p>
+              </article>
+            ))}
+          </div>
+        </section>
+
+        <section id="factory" className="factory-section" data-motion="section">
+          <div className="factory-copy">
+            <span>Creation OS</span>
+            <h2>从提示词到短视频，从素材到数字人</h2>
+            <p>
+              生图助手、视频助手和短视频工厂共享 BoosAPI 模型路由。产出文件自动归档，用户之间隔离，管理员可查看团队级用量与成本。
+            </p>
+          </div>
+          <div className="module-strip">
+            {productionModules.map((module) => (
+              <span data-motion="card" key={module}>
+                {module}
+              </span>
+            ))}
+          </div>
+        </section>
+
+        <section id="deploy" className="deploy-section" data-motion="section">
+          <div>
+            <span>Deploy</span>
+            <h2>远程模型优先，本机不必有 GPU</h2>
+            <p>
+              当图像、视频、语音走上游 API、Comfy Cloud 或 RunningHub 时，BossAI 服务器只负责网关、鉴权、数据库、日志和 Workflow UI 代理。
+            </p>
+          </div>
+          <div className="deploy-stack">
+            <div data-motion="card">
+              <small>Backend</small>
+              <strong>Rust 二进制</strong>
+            </div>
+            <div data-motion="card">
+              <small>Database</small>
+              <strong>SQLite / PostgreSQL</strong>
+            </div>
+            <div data-motion="card">
+              <small>Website</small>
+              <strong>Next.js 独立部署</strong>
+            </div>
+          </div>
+        </section>
+
+        <section className="final-section" data-motion="section">
+          <h2>把模型、工作流和创作应用收进一个平台</h2>
+          <p>适合自建 AI 中转、团队模型管理、多模态创作和商业化用户面板。</p>
+          <div className="hero-actions">
+            <Link className="primary-cta" href="/user/register">
+              开始使用
+            </Link>
+            <Link className="secondary-cta" href="/boos">
+              进入后台
+            </Link>
+          </div>
+        </section>
       </main>
     </BossAiMotion>
   );