feat: refine BossAI website product story

website/app/globals.css

@@ -4,6 +4,7 @@
   --ink: #07110f;
   --ink-soft: #101d19;
   --panel: rgba(13, 25, 22, 0.82);
+  --panel-strong: rgba(18, 34, 29, 0.9);
   --line: rgba(231, 255, 219, 0.16);
   --line-strong: rgba(215, 255, 77, 0.38);
   --text: #f8fff4;
@@ -13,6 +14,7 @@
   --acid-2: #a5ff5f;
   --ice: #e9f7ff;
   --blue: #8bf6ff;
+  --amber: #ffec99;
   --radius: 24px;
 }
 
@@ -97,7 +99,9 @@ a {
 .site-nav,
 .hero-section,
 .platform-section,
+.api-section,
 .workflow-section,
+.ops-section,
 .factory-section,
 .deploy-section,
 .final-section {
@@ -143,13 +147,34 @@ a {
 }
 
 .nav-links a {
+  position: relative;
   transition: color 180ms ease;
 }
 
-.nav-links a:hover {
+.nav-links a::after {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -8px;
+  height: 1px;
+  content: "";
+  background: var(--acid);
+  opacity: 0;
+  transform: scaleX(0.4);
+  transition: opacity 180ms ease, transform 180ms ease;
+}
+
+.nav-links a:hover,
+.nav-links a:focus-visible {
   color: var(--text);
 }
 
+.nav-links a:hover::after,
+.nav-links a:focus-visible::after {
+  opacity: 0.8;
+  transform: scaleX(1);
+}
+
 .nav-actions {
   gap: 10px;
 }
@@ -188,12 +213,18 @@ a {
 .ghost-link:hover,
 .solid-link:hover,
 .primary-cta:hover,
-.secondary-cta:hover {
+.secondary-cta:hover,
+.ghost-link:focus-visible,
+.solid-link:focus-visible,
+.primary-cta:focus-visible,
+.secondary-cta:focus-visible {
   transform: translateY(-2px);
 }
 
 .ghost-link:hover,
-.secondary-cta:hover {
+.secondary-cta:hover,
+.ghost-link:focus-visible,
+.secondary-cta:focus-visible {
   border-color: var(--line-strong);
   color: var(--text);
 }
@@ -258,6 +289,37 @@ a {
   line-height: 1.85;
 }
 
+.hero-proof {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+  width: min(100%, 620px);
+  padding-top: 8px;
+}
+
+.hero-proof > div {
+  min-height: 78px;
+  display: grid;
+  align-content: center;
+  gap: 7px;
+  border: 1px solid var(--line);
+  border-radius: 18px;
+  background: rgba(255, 255, 255, 0.03);
+  padding: 14px;
+}
+
+.hero-proof strong {
+  color: var(--text);
+  font-family: var(--font-geist-mono), monospace;
+  font-size: 14px;
+  letter-spacing: -0.02em;
+}
+
+.hero-proof span {
+  color: var(--faint);
+  font-size: 12px;
+}
+
 .hero-actions {
   gap: 12px;
   padding-top: 4px;
@@ -311,6 +373,10 @@ a {
 
 .console-bar,
 .route-row,
+.console-metrics > div,
+.hero-proof > div,
+.endpoint-card,
+.ops-card,
 .mini-grid > div,
 .node-card,
 .deploy-stack > div {
@@ -332,9 +398,12 @@ a {
 
 .console-bar span,
 .route-row em,
+.console-metrics span,
 .mini-grid span,
 .node-card span,
-.deploy-stack small {
+.deploy-stack small,
+.endpoint-line span,
+.ops-card > span {
   color: var(--faint);
   font-size: 12px;
   font-style: normal;
@@ -377,6 +446,7 @@ a {
 }
 
 .route-row strong,
+.console-metrics strong,
 .mini-grid strong,
 .node-card strong,
 .deploy-stack strong {
@@ -384,6 +454,30 @@ a {
   letter-spacing: -0.02em;
 }
 
+.console-metrics {
+  position: relative;
+  z-index: 2;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px;
+  margin-top: 12px;
+}
+
+.console-metrics > div {
+  min-height: 70px;
+  display: grid;
+  align-content: center;
+  gap: 7px;
+  border-radius: 16px;
+  padding: 12px;
+}
+
+.console-metrics strong {
+  color: var(--acid);
+  font-family: var(--font-geist-mono), monospace;
+  font-size: 12px;
+}
+
 .mini-grid {
   position: relative;
   z-index: 2;
@@ -441,7 +535,9 @@ a {
 }
 
 .platform-section,
+.api-section,
 .workflow-section,
+.ops-section,
 .factory-section,
 .deploy-section,
 .final-section {
@@ -454,7 +550,14 @@ a {
   margin-bottom: 28px;
 }
 
+.section-heading.split {
+  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.54fr);
+  align-items: end;
+  gap: 32px;
+}
+
 .section-heading span,
+.ops-copy span,
 .factory-copy span,
 .deploy-section > div:first-child > span {
   color: var(--acid);
@@ -467,6 +570,7 @@ a {
 
 .section-heading h2,
 .workflow-panel h2,
+.ops-copy h2,
 .factory-copy h2,
 .deploy-section h2,
 .final-section h2 {
@@ -523,7 +627,11 @@ a {
 }
 
 .capability-card p,
+.section-heading.split p,
+.endpoint-card p,
 .workflow-panel p,
+.ops-copy p,
+.ops-card p,
 .factory-copy p,
 .deploy-section p,
 .final-section p {
@@ -532,6 +640,78 @@ a {
   line-height: 1.8;
 }
 
+.capability-card,
+.endpoint-card,
+.ops-card,
+.module-strip span {
+  transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease;
+}
+
+.capability-card:hover,
+.endpoint-card:hover,
+.ops-card:hover,
+.module-strip span:hover {
+  transform: translateY(-3px);
+  border-color: var(--line-strong);
+  background-color: rgba(255, 255, 255, 0.045);
+}
+
+.api-section {
+  border-top: 1px solid var(--line);
+  border-bottom: 1px solid var(--line);
+}
+
+.endpoint-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.endpoint-card {
+  min-height: 220px;
+  display: grid;
+  align-content: space-between;
+  gap: 22px;
+  border-radius: 24px;
+  padding: 20px;
+  background:
+    linear-gradient(135deg, rgba(215, 255, 77, 0.08), transparent 34%),
+    rgba(255, 255, 255, 0.026);
+}
+
+.endpoint-line {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.endpoint-line span {
+  border: 1px solid rgba(215, 255, 77, 0.22);
+  border-radius: 999px;
+  color: var(--acid);
+  padding: 5px 8px;
+  font-family: var(--font-geist-mono), monospace;
+  font-weight: 800;
+}
+
+.endpoint-line code {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--ice);
+  font-family: var(--font-geist-mono), monospace;
+  font-size: 13px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.endpoint-card h3,
+.ops-card h3 {
+  margin: 0 0 10px;
+  font-size: 23px;
+  letter-spacing: -0.045em;
+}
+
 .workflow-section {
   display: grid;
   grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
@@ -605,6 +785,51 @@ a {
     rgba(255, 255, 255, 0.04);
 }
 
+.ops-section {
+  display: grid;
+  grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
+  gap: 18px;
+  align-items: stretch;
+}
+
+.ops-copy,
+.ops-grid {
+  border: 1px solid var(--line);
+  border-radius: 32px;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)),
+    rgba(255, 255, 255, 0.025);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
+}
+
+.ops-copy {
+  display: grid;
+  align-content: end;
+  gap: 18px;
+  padding: 34px;
+}
+
+.ops-grid {
+  display: grid;
+  gap: 12px;
+  padding: 18px;
+}
+
+.ops-card {
+  min-height: 136px;
+  display: grid;
+  align-content: center;
+  border-radius: 22px;
+  padding: 18px;
+}
+
+.ops-card > span {
+  margin-bottom: 16px;
+  color: var(--acid);
+  font-family: var(--font-geist-mono), monospace;
+  text-transform: uppercase;
+}
+
 .factory-section {
   display: grid;
   grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
@@ -675,7 +900,9 @@ a {
   }
 
   .hero-section,
+  .api-section,
   .workflow-section,
+  .ops-section,
   .factory-section,
   .deploy-section {
     grid-template-columns: 1fr;
@@ -689,13 +916,20 @@ a {
   .capability-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
+
+  .section-heading.split,
+  .endpoint-grid {
+    grid-template-columns: 1fr;
+  }
 }
 
 @media (max-width: 640px) {
   .site-nav,
   .hero-section,
   .platform-section,
+  .api-section,
   .workflow-section,
+  .ops-section,
   .factory-section,
   .deploy-section,
   .final-section {
@@ -729,8 +963,13 @@ a {
     flex-direction: column;
   }
 
+  .hero-proof,
+  .console-metrics {
+    grid-template-columns: 1fr;
+  }
+
   .hero-console {
-    min-height: 390px;
+    min-height: 520px;
     border-radius: 26px;
     padding: 14px;
   }
@@ -760,6 +999,8 @@ a {
   }
 
   .workflow-panel,
+  .ops-copy,
+  .ops-grid,
   .factory-section,
   .deploy-section {
     padding: 22px;

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,6 +243,14 @@ 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>
@@ -205,6 +279,30 @@ export default function Home() {
           </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">
@@ -247,6 +345,25 @@ export default function Home() {
           </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>