feat: refine BossAI website product story
This commit is contained in:
boos
+246
-5
@@ -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;
|
||||
|
||||
+118
-1
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user