revert website high contrast redesign

website/app/page.tsx

@@ -2,70 +2,69 @@ import Image from "next/image";
 import Link from "next/link";
 import { BossAiMotion } from "./BossAiMotion";
 
-const navLinks = [
-  { href: "#glance", label: "At a Glance" },
-  { href: "#core", label: "Core Features" },
-  { href: "#api", label: "API Surface" },
-  { href: "#workflow", label: "Workflow" },
-  { href: "#deploy", label: "Deploy" },
-];
-
-const bootLines = [
-  "booting BossAI control plane",
-  "loading /v1, /v1/messages, images, video",
-  "mounting workflow ui adapters",
-  "syncing model routes and billing ledger",
+const platformItems = [
+  {
+    title: "统一 API 网关",
+    eyebrow: "Gateway",
+    body: "OpenAI、Claude Messages、Gemini、方舟、图像、视频和语音接口统一到一套入口。",
+    metric: "/v1",
+  },
+  {
+    title: "智能模型路由",
+    eyebrow: "Routing",
+    body: "按站点、账号、令牌、模型能力和失败冷却自动调度，保留真实日志与计费口径。",
+    metric: "Auto",
+  },
+  {
+    title: "Comfy 工作流",
+    eyebrow: "Workflow",
+    body: "保留完整版 ComfyUI 前端习惯，接入 Cloud、RunningHub、External 或 BoosAPI 执行器。",
+    metric: "Canvas",
+  },
+  {
+    title: "创作应用生产",
+    eyebrow: "Studio",
+    body: "生图助手、视频助手、数字人、短视频工厂和工作空间复用同一套模型资产。",
+    metric: "Media",
+  },
 ];
 
 const heroStats = [
-  { value: "/v1", label: "OpenAI compatible" },
+  { value: "/v1", label: "OpenAI 兼容入口" },
   { value: "/v1/messages", label: "Claude Messages" },
-  { value: "Cloud / RH", label: "Comfy backends" },
+  { value: "Cloud / RH", label: "Comfy API 后端" },
 ];
 
-const routeRows = [
-  { label: "CHAT", model: "gpt-5.5", status: "ready", hot: true },
-  { label: "IMAGE", model: "gpt-image-2", status: "queued", hot: true },
-  { label: "CLAUDE", model: "messages transformer", status: "stream" },
-  { label: "VIDEO", model: "comfy cloud / runninghub", status: "proxy" },
-  { label: "VOICE", model: "tts + digital human", status: "archive" },
+const routes = [
+  { type: "GPT", model: "gpt-5.5", state: "深度推理", tone: "hot", featured: true },
+  { type: "Image", model: "gpt-image-2", state: "图像生成", tone: "lime", featured: true },
+  { type: "Claude", model: "claude-opus-4-8", state: "Messages", tone: "white" },
+  { type: "Gemini", model: "gemini-3-pro-preview", state: "多模态", tone: "cyan" },
+  { type: "Video", model: "doubao-seedance-2-0-260128", state: "视频队列", tone: "blue" },
 ];
 
-const glanceItems = [
-  { k: "01", title: "One Gateway", value: "/v1", text: "把 OpenAI、Claude、图像、视频、语音和上游中转站收进统一入口。" },
-  { k: "02", title: "Route Engine", value: "AUTO", text: "按模型能力、失败冷却、成本、账号和下游密钥自动选择通道。" },
-  { k: "03", title: "Workflow UI", value: "COMFY", text: "保留完整 ComfyUI 前端习惯，后端切换 Cloud、RunningHub、External 或 BoosAPI。" },
-  { k: "04", title: "Creative OS", value: "MEDIA", text: "生图、视频、数字人、短视频工厂和工作空间共用同一套资产与计费。" },
+const consoleMetrics = [
+  { label: "日志写入", value: "stream" },
+  { label: "计费口径", value: "token + media" },
+  { label: "失败冷却", value: "auto reroute" },
 ];
 
-const coreFeatures = [
+const studioFlow = [
   {
-    index: "001",
-    title: "模型供应聚合",
-    body: "站点、账号、OAuth、API Key 和模型广场统一接入，管理员可以用一个后台维护上游能力池。",
+    step: "01",
+    title: "接入模型",
+    body: "把多个中转站、官方 API、Comfy Cloud、RunningHub 或外部 ComfyUI 接成统一能力池。",
   },
   {
-    index: "002",
-    title: "多模态创作链路",
-    body: "Picture Agent、Video Agent、Digital Human、MoneyPrinter 和 Workflow 都走本地 BoosAPI 路由。",
+    step: "02",
+    title: "编排生产",
+    body: "在对话、生图、视频、数字人和短视频工厂里复用模型、模板、提示词和工作流。",
   },
   {
-    index: "003",
-    title: "可运营的使用日志",
-    body: "每次模型调用进入日志、延迟、状态、用户、密钥和计费口径，方便排障和商业化结算。",
+    step: "03",
+    title: "归档计费",
+    body: "每次调用进入日志、成本、用户隔离和工作空间，只保留真正可交付的最终产出。",
   },
-  {
-    index: "004",
-    title: "用户隔离工作空间",
-    body: "普通用户只看到自己的最终产出；管理员可以按用户过滤资产、任务和成本。",
-  },
-];
-
-const apiRows = [
-  ["POST", "/v1/chat/completions", "OpenAI compatible chat, agents, streaming"],
-  ["POST", "/v1/messages", "Claude Messages request / response / stream transform"],
-  ["POST", "/v1/images/generations", "Image generation with routing, billing, workspace archive"],
-  ["POST", "/workflow-ui/api/prompt", "Comfy prompt proxy for Cloud, RunningHub, External, BoosAPI"],
 ];
 
 const workflowModes = [
@@ -75,103 +74,157 @@ const workflowModes = [
   ["boosapi", "Rust API-native 执行器"],
 ];
 
-const productionSteps = [
+const endpointItems = [
   {
-    id: "01",
-    title: "Connect",
-    body: "接入上游站点、官方 API、Comfy Cloud、RunningHub 或外部 ComfyUI。",
+    method: "POST",
+    path: "/v1/chat/completions",
+    title: "对话与 Agent",
+    body: "对接 OpenAI 兼容客户端，统一进入模型路由、日志和计费。",
   },
   {
-    id: "02",
-    title: "Compose",
-    body: "在工作流、助手和短视频工厂里编排提示词、图片、视频、音频和模板。",
+    method: "POST",
+    path: "/v1/messages",
+    title: "Claude Messages",
+    body: "支持 Claude 格式请求、响应和流式事件转换。",
   },
   {
-    id: "03",
-    title: "Operate",
-    body: "按用户、模型、密钥、日志、费用和最终产出形成完整运营闭环。",
+    method: "POST",
+    path: "/v1/images/generations",
+    title: "图像生成",
+    body: "生图助手、工作流节点和下游 API 共享同一条模型调用链路。",
+  },
+  {
+    method: "POST",
+    path: "/workflow-ui/api/prompt",
+    title: "Comfy 工作流",
+    body: "代理 Cloud、RunningHub、External 或 BoosAPI 执行器，保留前端操作习惯。",
   },
 ];
 
-function SignalGraph() {
+const operations = [
+  {
+    eyebrow: "Identity",
+    title: "管理员与普通用户隔离",
+    body: "普通用户只看到自己的工作空间、任务、产出和用量；管理员可以按用户、站点和模型做运营管理。",
+  },
+  {
+    eyebrow: "Routing",
+    title: "站点、账号、密钥自动路由",
+    body: "下游密钥绑定可用模型后自动建立路由，失败、冷却、重试和成本记录进入统一日志。",
+  },
+  {
+    eyebrow: "Workspace",
+    title: "只归档最终产出",
+    body: "Workflow 上传素材和模板引用不会污染工作空间，图片、视频、音频等最终结果才进入资产库。",
+  },
+];
+
+const productionModules = [
+  "模型广场",
+  "使用日志",
+  "工作空间",
+  "数字人",
+  "短视频工厂",
+  "站点公告",
+  "下游密钥",
+  "PostgreSQL",
+];
+
+const controlSignals = [
+  "模型路由",
+  "Claude Messages",
+  "图像生成",
+  "视频生成",
+  "数字人口播",
+  "工作空间归档",
+];
+
+function FlowGlyph() {
   return (
-    <svg className="signal-graph" viewBox="0 0 560 360" aria-hidden="true">
+    <svg className="flow-glyph" viewBox="0 0 520 360" aria-hidden="true">
       <defs>
-        <linearGradient id="boss-red-line" x1="0" x2="1" y1="0" y2="1">
-          <stop offset="0%" stopColor="#ffffff" />
-          <stop offset="48%" stopColor="#ff2a2a" />
-          <stop offset="100%" stopColor="#ffffff" />
+        <linearGradient id="lineGradient" x1="0" x2="1" y1="0" y2="1">
+          <stop offset="0%" stopColor="#D7FF4D" />
+          <stop offset="55%" stopColor="#8BF6FF" />
+          <stop offset="100%" stopColor="#FFFFFF" />
         </linearGradient>
+        <filter id="softGlow" x="-30%" y="-30%" width="160%" height="160%">
+          <feGaussianBlur stdDeviation="6" result="blur" />
+          <feMerge>
+            <feMergeNode in="blur" />
+            <feMergeNode in="SourceGraphic" />
+          </feMerge>
+        </filter>
       </defs>
-      <path className="signal-line signal-line-a" d="M34 92 C122 42 180 52 250 106 S382 240 526 104" />
-      <path className="signal-line signal-line-b" d="M42 248 C116 196 184 186 260 220 S394 306 508 238" />
-      <path className="signal-line signal-line-c" d="M96 168 C184 146 250 162 322 150 S432 106 500 172" />
-      <circle className="status-node status-node-a" cx="34" cy="92" r="6" />
-      <circle className="status-node status-node-b" cx="250" cy="106" r="8" />
-      <circle className="status-node status-node-c" cx="526" cy="104" r="6" />
-      <circle className="status-node status-node-d" cx="260" cy="220" r="7" />
-      <rect className="graph-node graph-node-a" x="82" y="42" width="126" height="58" rx="4" />
-      <rect className="graph-node graph-node-b" x="276" y="124" width="144" height="66" rx="4" />
-      <rect className="graph-node graph-node-c" x="356" y="238" width="118" height="56" rx="4" />
+      <path
+        className="flow-line flow-line-a"
+        data-motion-line
+        d="M32 110 C138 42 218 86 294 152 S414 238 496 132"
+      />
+      <path
+        className="flow-line flow-line-b"
+        data-motion-line
+        d="M78 238 C170 314 248 256 314 196 S402 92 486 84"
+      />
+      <path
+        className="flow-line flow-line-c"
+        data-motion-line
+        d="M92 170 C180 194 226 190 292 160 S382 150 452 236"
+      />
+      <g filter="url(#softGlow)">
+        <circle className="flow-dot dot-a" data-motion-dot cx="32" cy="110" r="6" />
+        <circle className="flow-dot dot-b" data-motion-dot cx="294" cy="152" r="8" />
+        <circle className="flow-dot dot-c" data-motion-dot cx="496" cy="132" r="6" />
+      </g>
+      <rect className="node node-a" data-motion="node" x="96" y="44" width="120" height="56" rx="16" />
+      <rect className="node node-b" data-motion="node" x="278" y="128" width="132" height="64" rx="18" />
+      <rect className="node node-c" data-motion="node" x="352" y="236" width="112" height="54" rx="16" />
     </svg>
   );
 }
 
-function BootScreen() {
+function HeroConsole() {
   return (
-    <div className="boot-screen" aria-hidden="true">
-      <div className="boot-frame">
-        <div className="boot-brand">
-          <span />
-          <strong>BossAI</strong>
-        </div>
-        <div className="boot-lines">
-          {bootLines.map((line) => (
-            <p key={line}>
-              <span>&gt;</span>
-              {line}
-            </p>
-          ))}
-        </div>
+    <div className="hero-console" data-motion="hero-console" aria-label="BossAI 路由状态预览">
+      <div className="console-orbit" data-motion-orbit />
+      <div className="console-bar">
+        <span>Model Router</span>
+        <strong>GPT-5.5 + Image 2 Ready</strong>
       </div>
-    </div>
-  );
-}
-
-function HeroTerminal() {
-  return (
-    <div className="hero-terminal" data-motion="hero-terminal" aria-label="BossAI route terminal">
-      <div className="terminal-top">
-        <span>CONTROL PLANE</span>
-        <strong>ONLINE</strong>
-      </div>
-      <div className="terminal-feed">
-        {routeRows.map((row) => (
-          <div className="terminal-row" data-hot={row.hot ? "true" : undefined} data-motion="route-row" key={row.label}>
-            <span>{row.label}</span>
-            <strong>{row.model}</strong>
-            <em>{row.status}</em>
+      <div className="route-list">
+        {routes.map((route) => (
+          <div
+            className="route-row"
+            data-featured={route.featured ? "true" : undefined}
+            data-motion="route-row"
+            data-tone={route.tone}
+            key={route.type}
+          >
+            <span>{route.type}</span>
+            <strong>{route.model}</strong>
+            <em>{route.state}</em>
           </div>
         ))}
       </div>
-      <div className="terminal-metrics">
-        {heroStats.map((stat) => (
-          <div className="hero-stat" data-motion="card" key={stat.label}>
-            <strong>{stat.value}</strong>
-            <span>{stat.label}</span>
+      <div className="console-metrics">
+        {consoleMetrics.map((metric) => (
+          <div data-motion="card" key={metric.label}>
+            <span>{metric.label}</span>
+            <strong>{metric.value}</strong>
           </div>
         ))}
       </div>
-      <SignalGraph />
-    </div>
-  );
-}
-
-function SectionLabel({ index, label }: { index: string; label: string }) {
-  return (
-    <div className="section-label">
-      <span>{index}</span>
-      <strong>{label}</strong>
+      <div className="mini-grid">
+        <div>
+          <span>Workspace</span>
+          <strong>只归档产出</strong>
+        </div>
+        <div>
+          <span>Billing</span>
+          <strong>日志计费</strong>
+        </div>
+      </div>
+      <FlowGlyph />
     </div>
   );
 }
@@ -180,19 +233,18 @@ export default function Home() {
   return (
     <BossAiMotion>
       <main className="site-shell">
-        <BootScreen />
-        <div className="site-grid" aria-hidden="true" />
+        <div className="site-noise" aria-hidden="true" />
         <header className="site-nav" data-motion="nav">
           <Link className="brand-mark" href="/" aria-label="BossAI 首页">
-            <Image src="/logo.png" width={42} height={42} alt="" priority />
+            <Image src="/logo.png" width={38} height={38} alt="" priority />
             <span>BossAI</span>
           </Link>
           <nav className="nav-links" aria-label="官网导航">
-            {navLinks.map((link) => (
-              <a href={link.href} key={link.href}>
-                {link.label}
-              </a>
-            ))}
+            <a href="#platform">平台能力</a>
+            <a href="#api">API</a>
+            <a href="#workflow">工作流</a>
+            <a href="#operations">运营</a>
+            <a href="#deploy">部署</a>
           </nav>
           <div className="nav-actions">
             <Link className="ghost-link" href="/user/login">
@@ -207,190 +259,229 @@ export default function Home() {
         <section className="hero-section">
           <div className="hero-copy" data-motion="hero-copy">
             <div className="section-kicker">
-              <span />
-              AI APPLICATION CONTROL PLANE
+              <span className="pulse-dot" />
+              多模型 · 多模态 · 工作流
             </div>
-            <h1 className="hero-title">
-              聚合多模型
-              <span>多模态应用生产</span>
+            <h1>
+              多模型多模态
+              <span>AI 应用生产平台</span>
             </h1>
-            <p className="hero-lede">
-              BossAI 把 API 网关、模型路由、Comfy 工作流、数字人、短视频工厂和工作空间放进一个可运营的平台。团队用一套入口完成接入、生产、计费和交付。
+            <p>
+              BossAI 把 API 网关、智能路由、Comfy 工作流、数字人和短视频工厂收进一个清晰的运营后台，让团队用一套系统完成接入、生产、计费和交付。
             </p>
             <div className="hero-actions">
               <Link className="primary-cta" href="/user/register">
-                START BUILDING
+                开始使用
               </Link>
               <Link className="secondary-cta" href="#workflow">
-                VIEW WORKFLOW
+                查看工作流
               </Link>
             </div>
-          </div>
-          <HeroTerminal />
-        </section>
-
-        <div className="ticker" aria-hidden="true">
-          <div className="ticker-track">
-            <span>OPENAI COMPATIBLE</span>
-            <span>CLAUDE MESSAGES</span>
-            <span>IMAGE GENERATION</span>
-            <span>COMFY CLOUD</span>
-            <span>RUNNINGHUB</span>
-            <span>DIGITAL HUMAN</span>
-            <span>WORKSPACE ARCHIVE</span>
-            <span>POSTGRESQL READY</span>
-          </div>
-        </div>
-
-        <section id="glance" className="glance-section content-section" data-motion="section">
-          <SectionLabel index="01" label="AT A GLANCE" />
-          <div className="section-heading">
-            <h2>一个入口，连接模型、工作流和创作应用。</h2>
-            <p>
-              信息层级直接、状态感强、滚动节奏明确。BossAI 的核心不是展示概念，而是把真实 API 调用和生产流程管起来。
-            </p>
-          </div>
-          <div className="glance-grid">
-            {glanceItems.map((item) => (
-              <article className="glance-card" data-motion="card" key={item.k}>
-                <div>
-                  <span>{item.k}</span>
-                  <strong>{item.value}</strong>
-                </div>
-                <h3>{item.title}</h3>
-                <p>{item.text}</p>
-              </article>
-            ))}
-          </div>
-        </section>
-
-        <section id="core" className="core-section content-section" data-motion="section">
-          <SectionLabel index="02" label="CORE FEATURES" />
-          <div className="split-heading">
-            <h2>从上游供应，到用户交付，全部进入控制面。</h2>
-            <p>
-              BossAI 适合自建 AI 中转站、团队模型管理、多模态创作平台和商业化用户面板。
-            </p>
-          </div>
-          <div className="feature-list">
-            {coreFeatures.map((feature) => (
-              <article className="feature-row" data-motion="card" key={feature.index}>
-                <span>{feature.index}</span>
-                <h3>{feature.title}</h3>
-                <p>{feature.body}</p>
-              </article>
-            ))}
-          </div>
-        </section>
-
-        <section id="api" className="api-section content-section" data-motion="section">
-          <SectionLabel index="03" label="DEVELOPER SURFACE" />
-          <div className="terminal-panel">
-            <div className="terminal-panel-head">
-              <span>API MAP</span>
-              <strong>compatible routes</strong>
-            </div>
-            <div className="api-table">
-              {apiRows.map(([method, path, body]) => (
-                <div className="api-row" data-motion="card" key={path}>
-                  <span>{method}</span>
-                  <code>{path}</code>
-                  <p>{body}</p>
+            <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="workflow" className="workflow-section content-section" data-motion="section">
-          <SectionLabel index="04" label="WORKFLOW UX" />
-          <div className="workflow-grid">
-            <div className="workflow-copy">
-              <h2>保留完整 ComfyUI 前端习惯，后端按项目切换。</h2>
-              <p>
-                用户继续使用熟悉的节点画布。BossAI 负责鉴权、代理、模板、上传、任务状态、使用日志和最终产出归档。
-              </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 className="node-board" aria-label="工作流节点示意">
-              <div className="node-card 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>Digital Human</span>
-                <strong>口播生成</strong>
-              </div>
-              <div className="node-card" data-motion="card">
-                <span>Archive</span>
-                <strong>工作空间</strong>
-              </div>
-            </div>
+        <section id="platform" className="platform-section" data-motion="section">
+          <div className="section-heading">
+            <span>Platform</span>
+            <h2>一套后台，接住模型接入、创作生产和商业运营</h2>
           </div>
-        </section>
-
-        <section className="production-section content-section" data-motion="section">
-          <SectionLabel index="05" label="PRODUCTION LOOP" />
-          <div className="production-grid">
-            {productionSteps.map((step) => (
-              <article className="production-step" data-motion="card" key={step.id}>
-                <em>{step.id}</em>
-                <h3>{step.title}</h3>
-                <p>{step.body}</p>
+          <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="deploy" className="deploy-section content-section" data-motion="section">
-          <SectionLabel index="06" label="DEPLOY" />
-          <div className="deploy-panel">
-            <h2>远程模型优先，本机不必有 GPU。</h2>
+        <section className="studio-section" data-motion="section">
+          <div className="studio-copy">
+            <span>Operating System</span>
+            <h2>从模型供应到内容产出，形成一条能运营的生产线</h2>
+            <p>
+              BossAI 不只是转发请求。它把模型、用户、模板、工作流、任务队列、产出文件和成本记录串成一个可观察、可复用、可商业化的闭环。
+            </p>
+          </div>
+          <div className="studio-flow">
+            {studioFlow.map((item) => (
+              <article data-motion="card" key={item.step}>
+                <em>{item.step}</em>
+                <strong>{item.title}</strong>
+                <p>{item.body}</p>
+              </article>
+            ))}
+          </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="workflow" className="workflow-section" data-motion="section">
+          <div className="workflow-panel">
+            <div className="section-heading">
+              <span>Workflow</span>
+              <h2>使用完整版 ComfyUI 前端，后端按你的模式切换</h2>
+            </div>
+            <p>
+              Workflow 保留用户熟悉的 ComfyUI 前端体验。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 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 id="operations" className="ops-section" data-motion="section">
+          <div className="ops-copy">
+            <span>Operations</span>
+            <h2>运营后台负责成本、权限、路由和产出归档</h2>
+            <p>
+              管理员看站点、账号、模型、失败率和成本；普通用户看自己的模型、任务、日志和工作空间。每个角色都有清晰边界。
+            </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>
+              生图助手、视频助手、数字人和短视频工厂共享 BossAI 模型路由。产出文件自动归档，用户之间隔离，管理员可查看团队级用量与成本。
+            </p>
+          </div>
+          <div className="module-strip">
+            {productionModules.map((module) => (
+              <span data-motion="card" key={module}>
+                {module}
+              </span>
+            ))}
+          </div>
+        </section>
+
+        <section className="control-section" data-motion="section">
+          <div className="control-panel">
+            <span>Control Plane</span>
+            <h2>让每一次模型调用都能被追踪、解释和计费</h2>
+          </div>
+          <div className="control-grid">
+            {controlSignals.map((item) => (
+              <div data-motion="card" key={item}>
+                <span />
+                <strong>{item}</strong>
+              </div>
+            ))}
+          </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 className="deploy-stack">
-              <div data-motion="card">
-                <small>Backend</small>
-                <strong>Rust binary</strong>
-              </div>
-              <div data-motion="card">
-                <small>Database</small>
-                <strong>SQLite / PostgreSQL</strong>
-              </div>
-              <div data-motion="card">
-                <small>Frontend</small>
-                <strong>Next.js website + embedded web console</strong>
-              </div>
+          </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">
-          <span>READY</span>
-          <h2>把模型、工作流和创作应用收进一个可运营的平台。</h2>
-          <p>适合 AI API 聚合、多模型多模态平台、数字人商品讲解、短视频工厂和团队级创作后台。</p>
+          <h2>把模型、工作流和创作应用收进一个可运营的平台</h2>
+          <p>适合自建 AI 中转、团队模型管理、多模态内容生产、数字人商品讲解和商业化用户面板。</p>
           <div className="hero-actions">
             <Link className="primary-cta" href="/user/register">
-              START BUILDING
+              开始使用
             </Link>
             <Link className="secondary-cta" href="/boos">
-              OPEN CONSOLE
+              进入后台
             </Link>
           </div>
         </section>