feat: refine website gateway os hero

website/app/BossAiMotion.tsx

@@ -39,7 +39,33 @@ export function BossAiMotion({ children }: BossAiMotionProps) {
         gsap.set(".boot-screen", { display: "none" });
       });
 
-      matchMedia.add("(prefers-reduced-motion: no-preference)", () => {
+      matchMedia.add("(prefers-reduced-motion: no-preference) and (max-width: 640px)", () => {
+        gsap.set("[data-motion], [data-motion-dot], [data-motion-orbit], [data-motion-line]", {
+          autoAlpha: 1,
+          clearProps: "transform",
+        });
+        gsap.set(".boot-screen", { display: "none" });
+
+        gsap.to("[data-motion-dot]", {
+          scale: 1.14,
+          autoAlpha: 0.76,
+          duration: 1.4,
+          ease: "sine.inOut",
+          repeat: -1,
+          yoyo: true,
+          stagger: 0.2,
+        });
+
+        gsap.to("[data-motion-line]", {
+          strokeDashoffset: -120,
+          duration: 6,
+          ease: "none",
+          repeat: -1,
+          stagger: 0.24,
+        });
+      });
+
+      matchMedia.add("(prefers-reduced-motion: no-preference) and (min-width: 641px)", () => {
         const heroTitle = root.querySelector<HTMLElement>(".hero-copy h1");
         const splitTitle = heroTitle
           ? SplitText.create(heroTitle, {
@@ -73,9 +99,11 @@ export function BossAiMotion({ children }: BossAiMotionProps) {
             "-=0.28",
           )
           .from(".hero-copy p", { y: 18, duration: 0.7 }, "-=0.5")
+          .from("[data-motion='signal']", { y: 10, duration: 0.42, stagger: 0.06 }, "-=0.42")
           .from(".hero-actions > *", { y: 12, duration: 0.46, stagger: 0.08 }, "-=0.42")
           .from(".hero-proof > div", { y: 12, duration: 0.5, stagger: 0.07 }, "-=0.28")
           .from("[data-motion='hero-console']", { y: 26, rotateX: 4, duration: 0.9 }, "-=0.78")
+          .from("[data-motion='exchange-step']", { y: 12, duration: 0.48, stagger: 0.06 }, "-=0.58")
           .from("[data-motion='route-row']", { x: 14, duration: 0.55, stagger: 0.08 }, "-=0.48")
           .from("[data-motion='node']", { scale: 0.96, duration: 0.45, stagger: 0.08 }, "-=0.3");
 
@@ -107,6 +135,7 @@ export function BossAiMotion({ children }: BossAiMotionProps) {
         const heroSection = root.querySelector<HTMLElement>(".hero-section");
         const heroConsole = root.querySelector<HTMLElement>(".hero-console");
         const routeRows = gsap.utils.toArray<HTMLElement>(".route-row", root);
+        const exchangeSteps = gsap.utils.toArray<HTMLElement>(".exchange-step", root);
         const consoleTiles = gsap.utils.toArray<HTMLElement>(".console-metrics > div, .mini-grid > div", root);
 
         if (heroSection && heroConsole) {
@@ -155,6 +184,19 @@ export function BossAiMotion({ children }: BossAiMotionProps) {
             },
           });
 
+          gsap.to(exchangeSteps, {
+            y: (index) => -5 + index * 1.4,
+            autoAlpha: (index) => 0.98 - index * 0.02,
+            ease: "none",
+            stagger: { each: 0.035, from: "start" },
+            scrollTrigger: {
+              trigger: heroConsole,
+              start: "top 80%",
+              end: "center 18%",
+              scrub: true,
+            },
+          });
+
           gsap.to(consoleTiles, {
             y: -12,
             autoAlpha: 0.9,

website/app/globals.css

@@ -606,6 +606,54 @@ a {
   font-size: 12px;
 }
 
+.hero-system-strip {
+  width: min(100%, 640px);
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.hero-system-strip > div {
+  min-height: 44px;
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: 8px;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  background: var(--surface);
+  padding: 0 12px;
+  box-shadow: inset 0 1px 0 var(--surface-highlight);
+}
+
+.hero-system-strip span,
+.card-signal span {
+  width: 7px;
+  height: 7px;
+  border-radius: 999px;
+  background: var(--acid);
+  box-shadow: 0 0 18px rgba(215, 255, 77, 0.48);
+}
+
+.hero-system-strip strong {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--text);
+  font-family: var(--font-geist-mono), monospace;
+  font-size: 11px;
+  font-weight: 780;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.hero-system-strip em {
+  color: var(--faint);
+  font-family: var(--font-geist-mono), monospace;
+  font-size: 10px;
+  font-style: normal;
+  white-space: nowrap;
+}
+
 .hero-actions {
   gap: 12px;
   padding-top: 4px;
@@ -734,6 +782,8 @@ a {
 }
 
 .console-bar span,
+.exchange-step small,
+.exchange-step span,
 .route-row em,
 .console-metrics span,
 .mini-grid span,
@@ -746,6 +796,74 @@ a {
   font-style: normal;
 }
 
+.exchange-chain {
+  position: relative;
+  z-index: 4;
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 8px;
+  margin-top: 12px;
+}
+
+.exchange-chain::before {
+  position: absolute;
+  left: 7%;
+  right: 7%;
+  top: 50%;
+  z-index: 0;
+  height: 1px;
+  content: "";
+  background: linear-gradient(90deg, transparent, rgba(183, 237, 42, 0.38), rgba(24, 185, 199, 0.28), transparent);
+}
+
+.exchange-step {
+  position: relative;
+  z-index: 1;
+  min-height: 74px;
+  display: grid;
+  align-content: center;
+  gap: 6px;
+  border: 1px solid var(--line);
+  border-radius: 18px;
+  background: var(--surface);
+  padding: 12px;
+  box-shadow: inset 0 1px 0 var(--surface-highlight);
+}
+
+.exchange-step::after {
+  position: absolute;
+  top: 50%;
+  right: -9px;
+  width: 9px;
+  height: 9px;
+  border-top: 1px solid rgba(183, 237, 42, 0.5);
+  border-right: 1px solid rgba(183, 237, 42, 0.5);
+  content: "";
+  transform: translateY(-50%) rotate(45deg);
+}
+
+.exchange-step:last-child::after {
+  display: none;
+}
+
+.exchange-step small {
+  font-family: var(--font-geist-mono), monospace;
+}
+
+.exchange-step strong {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--text);
+  font-size: 12px;
+  letter-spacing: -0.02em;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.exchange-step span {
+  font-family: var(--font-geist-mono), monospace;
+}
+
 .route-list {
   position: relative;
   z-index: 4;
@@ -1040,6 +1158,7 @@ a {
 }
 
 .capability-card {
+  position: relative;
   min-height: 260px;
   display: grid;
   align-content: space-between;
@@ -1048,6 +1167,28 @@ a {
   border-radius: var(--radius);
   background: var(--card-gradient);
   padding: 20px;
+  overflow: hidden;
+}
+
+.capability-card::before {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  content: "";
+  background:
+    linear-gradient(120deg, transparent 0 42%, rgba(183, 237, 42, 0.14) 48%, transparent 56%),
+    radial-gradient(circle at 80% 16%, rgba(24, 185, 199, 0.14), transparent 34%);
+  opacity: 0;
+  transition: opacity 180ms ease;
+}
+
+.capability-card:hover::before {
+  opacity: 1;
+}
+
+.capability-card > * {
+  position: relative;
+  z-index: 1;
 }
 
 .card-top {
@@ -1069,12 +1210,37 @@ a {
   font-size: 13px;
 }
 
+.card-signal {
+  width: fit-content;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  border: 1px solid rgba(183, 237, 42, 0.22);
+  border-radius: 999px;
+  background: var(--surface-muted);
+  color: var(--muted);
+  padding: 7px 10px;
+  font-family: var(--font-geist-mono), monospace;
+  font-size: 11px;
+}
+
 .capability-card h3 {
   margin: 0 0 12px;
   font-size: 22px;
   letter-spacing: -0.04em;
 }
 
+.card-port {
+  border-top: 1px solid var(--line);
+  padding-top: 14px;
+}
+
+.card-port code {
+  color: var(--faint);
+  font-family: var(--font-geist-mono), monospace;
+  font-size: 11px;
+}
+
 .capability-card p,
 .section-heading.split p,
 .endpoint-card p,
@@ -1478,6 +1644,15 @@ a {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
+  .exchange-chain {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .exchange-chain::before,
+  .exchange-step::after {
+    display: none;
+  }
+
   .section-heading.split,
   .endpoint-grid {
     grid-template-columns: 1fr;
@@ -1535,16 +1710,21 @@ a {
   }
 
   .hero-proof,
+  .hero-system-strip,
   .console-metrics {
     grid-template-columns: 1fr;
   }
 
   .hero-console {
-    min-height: 520px;
+    min-height: 680px;
     border-radius: 26px;
     padding: 14px;
   }
 
+  .exchange-chain {
+    grid-template-columns: 1fr;
+  }
+
   .route-row {
     grid-template-columns: 1fr;
     align-items: start;

website/app/page.tsx

@@ -8,24 +8,32 @@ const platformItems = [
     eyebrow: "Gateway",
     body: "OpenAI、Claude Messages、Gemini、方舟、图像、视频和语音接口统一到一套入口。",
     metric: "/v1",
+    signal: "Ingress",
+    port: "chat · messages · media",
   },
   {
     title: "智能模型路由",
     eyebrow: "Routing",
     body: "按站点、账号、令牌、模型能力和失败冷却自动调度，保留真实日志与计费口径。",
     metric: "Auto",
+    signal: "Routing",
+    port: "site · account · token",
   },
   {
     title: "Comfy 工作流",
     eyebrow: "Workflow",
     body: "保留完整版 ComfyUI 前端习惯，接入 Cloud、RunningHub、External 或 BoosAPI 执行器。",
     metric: "Canvas",
+    signal: "Studio",
+    port: "cloud · rh · external",
   },
   {
     title: "创作应用生产",
     eyebrow: "Studio",
     body: "生图助手、视频助手、数字人、短视频工厂和工作空间复用同一套模型资产。",
     metric: "Media",
+    signal: "Archive",
+    port: "image · video · voice",
   },
 ];
 
@@ -43,6 +51,19 @@ const routes = [
   { type: "Video", model: "doubao-seedance-2-0-260128", state: "视频队列", tone: "blue" },
 ];
 
+const systemSignals = [
+  { label: "Gateway", value: "online" },
+  { label: "Workflow", value: "synced" },
+  { label: "Ledger", value: "recording" },
+];
+
+const exchangeSteps = [
+  { label: "API Ingress", value: "/v1/*" },
+  { label: "Model Router", value: "auto" },
+  { label: "Creative Apps", value: "studio" },
+  { label: "Workspace", value: "archive" },
+];
+
 const consoleMetrics = [
   { label: "日志写入", value: "stream" },
   { label: "计费口径", value: "token + media" },
@@ -171,6 +192,20 @@ function BootScreen() {
   );
 }
 
+function HeroSystemStrip() {
+  return (
+    <div className="hero-system-strip" aria-label="BossAI 系统状态">
+      {systemSignals.map((signal) => (
+        <div data-motion="signal" key={signal.label}>
+          <span />
+          <strong>{signal.label}</strong>
+          <em>{signal.value}</em>
+        </div>
+      ))}
+    </div>
+  );
+}
+
 function FlowGlyph() {
   return (
     <svg className="flow-glyph" viewBox="0 0 520 360" aria-hidden="true">
@@ -223,6 +258,15 @@ function HeroConsole() {
         <span>Model Router</span>
         <strong>GPT-5.5 + Image 2 Ready</strong>
       </div>
+      <div className="exchange-chain" aria-label="BossAI 模型交换链路">
+        {exchangeSteps.map((step, index) => (
+          <div className="exchange-step" data-motion="exchange-step" key={step.label}>
+            <small>{String(index + 1).padStart(2, "0")}</small>
+            <strong>{step.label}</strong>
+            <span>{step.value}</span>
+          </div>
+        ))}
+      </div>
       <div className="route-list">
         {routes.map((route) => (
           <div
@@ -302,6 +346,7 @@ export default function Home() {
             <p>
               BossAI 把 API 网关、智能路由、Comfy 工作流、数字人和短视频工厂收进一个清晰的运营后台，让团队用一套系统完成接入、生产、计费和交付。
             </p>
+            <HeroSystemStrip />
             <div className="hero-actions">
               <Link className="primary-cta" href="/user/register">
                 开始使用
@@ -339,8 +384,15 @@ export default function Home() {
                   <span>{item.eyebrow}</span>
                   <strong>{item.metric}</strong>
                 </div>
+                <div className="card-signal" aria-hidden="true">
+                  <span />
+                  {item.signal}
+                </div>
                 <h3>{item.title}</h3>
                 <p>{item.body}</p>
+                <div className="card-port">
+                  <code>{item.port}</code>
+                </div>
               </article>
             ))}
           </div>