From 00f8c080efd2c4dafcfaa5007e91e3f6a06c403e Mon Sep 17 00:00:00 2001
From: shaun <beingswu@gmail.com>
Date: Fri, 10 Apr 2026 15:03:41 +0800
Subject: [PATCH] Split cloud page content from homepage

---
 src/components/CloudPageBrandBreak/index.tsx  | 110 +++
 .../CloudPageBrandBreak/styles.module.scss    | 170 ++++
 .../CloudPageDeveloperBenefits/index.tsx      | 121 +++
 .../styles.module.scss                        | 429 ++++++++++
 src/components/CloudPageFirstScreen/index.tsx | 135 +++
 .../CloudPageFirstScreen/styles.module.scss   | 454 ++++++++++
 src/components/CloudPageIntro/index.tsx       |  16 +
 src/components/CloudPageLinearFlow/index.tsx  | 457 ++++++++++
 .../CloudPageLinearFlow/styles.module.scss    | 788 ++++++++++++++++++
 src/components/CloudPagePainPoints/index.tsx  | 110 +++
 .../CloudPagePainPoints/styles.module.scss    | 224 +++++
 src/components/DownloadButton/index.tsx       |  75 +-
 src/components/GetStartedPrompt/index.tsx     |   5 +-
 .../HomePagePricing/style.module.scss         |   6 +-
 src/components/HomepageBrandBreak/index.tsx   |  53 +-
 .../HomepageBrandBreak/styles.module.scss     |  16 +-
 src/components/HomepageCodexBlocks/index.tsx  |   9 +-
 .../HomepageCodexBlocks/styles.module.scss    |   9 +-
 .../HomepageDownloads/styles.module.scss      |   6 +-
 .../HomepageLifecycle/styles.module.scss      |  13 +-
 .../HomepageLinearFlow/styles.module.scss     |   8 +-
 .../HomepagePainPoints/styles.module.scss     |  12 +-
 .../styles.module.scss                        |  21 +-
 .../StudioDetailContent/styles.module.scss    |   3 +-
 .../StudioPdfCraftCase/styles.module.scss     |   5 +-
 src/pages/app/index.tsx                       |  31 +-
 src/pages/app/styles.module.scss              |   1 -
 src/pages/cloud/index.tsx                     | 239 +-----
 src/pages/cloud/styles.module.scss            | 433 ----------
 src/pages/contact-us/styles.module.scss       |   6 +-
 src/pages/downloads/index.tsx                 |   4 +-
 src/pages/hub/styles.module.scss              |   8 +-
 src/pages/studio/styles.module.scss           |   3 +-
 src/theme/Navbar/index.tsx                    |   9 +-
 34 files changed, 3231 insertions(+), 758 deletions(-)
 create mode 100644 src/components/CloudPageBrandBreak/index.tsx
 create mode 100644 src/components/CloudPageBrandBreak/styles.module.scss
 create mode 100644 src/components/CloudPageDeveloperBenefits/index.tsx
 create mode 100644 src/components/CloudPageDeveloperBenefits/styles.module.scss
 create mode 100644 src/components/CloudPageFirstScreen/index.tsx
 create mode 100644 src/components/CloudPageFirstScreen/styles.module.scss
 create mode 100644 src/components/CloudPageIntro/index.tsx
 create mode 100644 src/components/CloudPageLinearFlow/index.tsx
 create mode 100644 src/components/CloudPageLinearFlow/styles.module.scss
 create mode 100644 src/components/CloudPagePainPoints/index.tsx
 create mode 100644 src/components/CloudPagePainPoints/styles.module.scss
 delete mode 100644 src/pages/cloud/styles.module.scss

diff --git a/src/components/CloudPageBrandBreak/index.tsx b/src/components/CloudPageBrandBreak/index.tsx
new file mode 100644
index 0000000..7fb6d3a
--- /dev/null
+++ b/src/components/CloudPageBrandBreak/index.tsx
@@ -0,0 +1,110 @@
+import styles from "./styles.module.scss";
+
+import type { DocusaurusContext } from "@docusaurus/types";
+
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import React from "react";
+
+export default function CloudPageBrandBreak() {
+  const { i18n } = useDocusaurusContext() as unknown as DocusaurusContext & {
+    i18n: { currentLocale: string };
+  };
+  const isZh = i18n.currentLocale === "zh-CN";
+
+  return (
+    <section className={styles.section}>
+      <div className={styles.inner}>
+        <h2 className={styles.headline}>
+          {isZh ? "一次构建\n持续交付" : "Build once\nDeliver continuously"}
+        </h2>
+        <p className={styles.subline}>
+          {isZh
+            ? "从 Skill 创建到云端运行，一条完整的路径。"
+            : "From skill creation to cloud runtime — one complete path."}
+        </p>
+        <div className={styles.showcaseRow}>
+          <div className={styles.showcaseCard}>
+            <div className={styles.showcaseCardIcon}>
+              <svg
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <polyline points="16 18 22 12 16 6" />
+                <polyline points="8 6 2 12 8 18" />
+              </svg>
+            </div>
+            <span className={styles.showcaseCardLabel}>
+              {isZh ? "Studio 创建" : "Create in Studio"}
+            </span>
+          </div>
+          <div className={styles.showcaseArrow} aria-hidden="true">
+            <svg
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <line x1="5" y1="12" x2="19" y2="12" />
+              <polyline points="12 5 19 12 12 19" />
+            </svg>
+          </div>
+          <div className={styles.showcaseCard}>
+            <div className={styles.showcaseCardIcon}>
+              <svg
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
+              </svg>
+            </div>
+            <span className={styles.showcaseCardLabel}>
+              {isZh ? "Cloud 运行" : "Run on Cloud"}
+            </span>
+          </div>
+          <div className={styles.showcaseArrow} aria-hidden="true">
+            <svg
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <line x1="5" y1="12" x2="19" y2="12" />
+              <polyline points="12 5 19 12 12 19" />
+            </svg>
+          </div>
+          <div className={styles.showcaseCard}>
+            <div className={styles.showcaseCardIcon}>
+              <i
+                className={`${styles.showcaseGlyph} i-lucide-bot`}
+                aria-hidden="true"
+              />
+            </div>
+            <span className={styles.showcaseCardLabel}>
+              {isZh ? "oo-cli 使用" : "Use via oo-cli"}
+            </span>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/CloudPageBrandBreak/styles.module.scss b/src/components/CloudPageBrandBreak/styles.module.scss
new file mode 100644
index 0000000..20f0453
--- /dev/null
+++ b/src/components/CloudPageBrandBreak/styles.module.scss
@@ -0,0 +1,170 @@
+@use "../../css/custom.scss" as *;
+
+.section {
+  padding: clamp(4.5rem, 8vw, 7rem) 0;
+  background:
+    radial-gradient(
+      ellipse 60% 50% at 20% 20%,
+      rgba(255, 255, 255, 0.06) 0%,
+      transparent 60%
+    ),
+    linear-gradient(
+      135deg,
+      color-mix(in srgb, var(--oomol-primary) 92%, black 8%) 0%,
+      color-mix(in srgb, var(--oomol-primary-active) 88%, black 12%) 100%
+    );
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background:
+      linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
+    background-size: 6rem 6rem;
+    mask-image: radial-gradient(
+      ellipse 70% 70% at 50% 50%,
+      rgba(0, 0, 0, 0.5),
+      transparent 70%
+    );
+    pointer-events: none;
+  }
+}
+
+.inner {
+  position: relative;
+  width: min(1260px, calc(100% - 48px));
+  margin: 0 auto;
+  display: grid;
+  gap: 1.5rem;
+  justify-items: center;
+  text-align: center;
+}
+
+.headline {
+  margin: 0;
+  font-family: var(--oomol-font-display);
+  font-size: clamp(2.8rem, 5vw, 4.5rem);
+  line-height: 1;
+  font-weight: 700;
+  letter-spacing: -0.05em;
+  color: rgba(255, 255, 255, 0.97);
+  white-space: pre-line;
+}
+
+.subline {
+  margin: 0;
+  max-width: 36rem;
+  font-size: 1.1rem;
+  line-height: 1.65;
+  color: rgba(255, 255, 255, 0.72);
+}
+
+.showcaseRow {
+  display: flex;
+  align-items: center;
+  gap: clamp(0.8rem, 2vw, 1.5rem);
+  margin-top: 1rem;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.showcaseCard {
+  display: grid;
+  gap: 0.65rem;
+  justify-items: center;
+  padding: 1.25rem 1.5rem;
+  border-radius: 1.25rem;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  background: rgba(255, 255, 255, 0.06);
+  backdrop-filter: blur(8px);
+  min-width: 9rem;
+  transition: background 0.2s ease;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.1);
+  }
+}
+
+.showcaseCardIcon {
+  width: 2.5rem;
+  height: 2.5rem;
+  display: grid;
+  place-items: center;
+  border-radius: 0.75rem;
+  background: rgba(255, 255, 255, 0.12);
+  color: rgba(255, 255, 255, 0.92);
+}
+
+.showcaseGlyph {
+  font-size: 1.35rem;
+  line-height: 1;
+}
+
+.showcaseCardLabel {
+  font-size: 0.92rem;
+  font-weight: 700;
+  letter-spacing: 0.01em;
+  color: rgba(255, 255, 255, 0.88);
+}
+
+.showcaseArrow {
+  color: rgba(255, 255, 255, 0.36);
+  flex-shrink: 0;
+}
+
+/* ── Mobile ── */
+
+@media (max-width: 768px) {
+  .section {
+    padding: clamp(3rem, 6vw, 4.5rem) 0;
+  }
+
+  .inner {
+    width: min(100%, calc(100% - 40px));
+    gap: 1.2rem;
+  }
+
+  .headline {
+    font-size: clamp(2.2rem, 8vw, 3rem);
+  }
+
+  .showcaseRow {
+    gap: 0.6rem;
+  }
+
+  .showcaseCard {
+    padding: 1rem 1.15rem;
+    min-width: 7rem;
+  }
+
+  .showcaseArrow {
+    display: none;
+  }
+}
+
+/* ── Dark mode ── */
+
+[data-theme="dark"] {
+  .section {
+    background:
+      radial-gradient(
+        ellipse 60% 50% at 20% 20%,
+        rgba(255, 255, 255, 0.04) 0%,
+        transparent 60%
+      ),
+      linear-gradient(
+        135deg,
+        color-mix(in srgb, var(--oomol-primary) 72%, var(--oomol-bg-base) 28%)
+          0%,
+        color-mix(
+            in srgb,
+            var(--oomol-primary-active) 68%,
+            var(--oomol-bg-base) 32%
+          )
+          100%
+      );
+  }
+}
diff --git a/src/components/CloudPageDeveloperBenefits/index.tsx b/src/components/CloudPageDeveloperBenefits/index.tsx
new file mode 100644
index 0000000..24270de
--- /dev/null
+++ b/src/components/CloudPageDeveloperBenefits/index.tsx
@@ -0,0 +1,121 @@
+import styles from "./styles.module.scss";
+
+import type { DocusaurusContext } from "@docusaurus/types";
+
+import Link from "@docusaurus/Link";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import React from "react";
+
+const zhCopy = {
+  badge: "开发者免费方案",
+  title: "零成本起步，先把产品跑起来",
+  subtitle:
+    "不用先付费。接入自有模型 + 每月 200 分钟免费 Cloud Task，足够你从 Studio 走到第一次线上交付。",
+  benefits: [
+    {
+      tag: "当前推荐",
+      value: "GLM-5",
+      valueCaption: "支持接入自有模型",
+      eyebrow: "Studio 免费",
+      title: "接入自有模型，先把 Studio 跑起来",
+      description: "已有模型额度就直接接入，不用再额外买服务。推荐先用 GLM-5。",
+      note: "按教程配好后，通常就能完成本地验证。",
+      cta: "查看配置教程",
+      href: "/docs/get-started/use-your-own-model",
+    },
+    {
+      tag: "每月赠送",
+      value: "200 分钟",
+      valueCaption: "Cloud Task 免费时长",
+      eyebrow: "Cloud 免费",
+      title: "每月送 200 分钟，轻量任务先跑起来",
+      description:
+        "200 分钟免费 Cloud Task，通常够你先跑定时任务、轻量自动化和交付验证。",
+      note: "先用免费额度跑一遍，再决定是否继续投入。",
+      cta: "查看 Cloud 交付",
+      href: "/docs/cloud-services/cloud-function",
+    },
+  ],
+};
+
+const enCopy = {
+  badge: "Free for Developers",
+  title: "Start at zero cost, get the full loop running",
+  subtitle:
+    "No upfront payment. Bring your own model plus 200 free Cloud Task minutes each month — enough to complete your first Studio-to-production delivery cycle.",
+  benefits: [
+    {
+      tag: "Recommended",
+      value: "GLM-5",
+      valueCaption: "Use your own model",
+      eyebrow: "Studio Free",
+      title: "Bring Your Own Model and Get Studio Running",
+      description:
+        "If you already have model quota, connect it directly instead of paying for another service. We recommend starting with GLM-5.",
+      note: "Follow the guide and you can usually finish local validation first.",
+      cta: "View Setup Guide",
+      href: "/docs/get-started/use-your-own-model",
+    },
+    {
+      tag: "Monthly Included",
+      value: "200 Minutes",
+      valueCaption: "Free Cloud Task time",
+      eyebrow: "Cloud Free",
+      title: "200 Free Minutes Each Month for Lightweight Jobs",
+      description:
+        "The free Cloud Task quota is often enough for scheduled jobs, lightweight automation, and delivery validation.",
+      note: "Use the free quota to validate the flow before you spend more.",
+      cta: "Explore OOMOL Cloud",
+      href: "/docs/cloud-services/cloud-function",
+    },
+  ],
+};
+
+export default function CloudPageDeveloperBenefits() {
+  const { i18n } = useDocusaurusContext() as unknown as DocusaurusContext & {
+    i18n: { currentLocale: string };
+  };
+  const copy = i18n.currentLocale === "zh-CN" ? zhCopy : enCopy;
+
+  return (
+    <section className={styles.section}>
+      <div className={styles.container}>
+        <div className={styles.header}>
+          <div className={styles.badge}>{copy.badge}</div>
+          <h2 className={styles.title}>{copy.title}</h2>
+          <p className={styles.subtitle}>{copy.subtitle}</p>
+        </div>
+
+        <div className={styles.grid}>
+          {copy.benefits.map((benefit, index) => (
+            <article
+              key={benefit.title}
+              className={`${styles.card} ${
+                index === 0 ? styles.modelCard : styles.cloudCard
+              }`}
+            >
+              <div className={styles.cardTop}>
+                <div className={styles.eyebrow}>{benefit.eyebrow}</div>
+                <div className={styles.tag}>{benefit.tag}</div>
+              </div>
+              <div className={styles.valueBox}>
+                <div className={styles.value}>{benefit.value}</div>
+                <div className={styles.valueCaption}>
+                  {benefit.valueCaption}
+                </div>
+              </div>
+              <h3 className={styles.cardTitle}>{benefit.title}</h3>
+              <p className={styles.cardDescription}>{benefit.description}</p>
+              <p className={styles.cardNote}>{benefit.note}</p>
+              <div className={styles.cardFooter}>
+                <Link to={benefit.href} className={styles.cta}>
+                  {benefit.cta}
+                </Link>
+              </div>
+            </article>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/CloudPageDeveloperBenefits/styles.module.scss b/src/components/CloudPageDeveloperBenefits/styles.module.scss
new file mode 100644
index 0000000..79d6af1
--- /dev/null
+++ b/src/components/CloudPageDeveloperBenefits/styles.module.scss
@@ -0,0 +1,429 @@
+.section {
+  padding: clamp(4rem, 8vw, 6rem) 0 clamp(2rem, 4vw, 3rem);
+  position: relative;
+
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0 0 auto;
+    height: 12rem;
+    background: radial-gradient(
+      circle at 8% 0%,
+      rgba(132, 138, 208, 0.1) 0%,
+      rgba(132, 138, 208, 0) 46%
+    );
+    pointer-events: none;
+  }
+}
+
+.container {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 0 24px;
+  display: grid;
+  grid-template-columns: minmax(0, 0.68fr) minmax(0, 1.32fr);
+  gap: clamp(1.6rem, 4vw, 3rem);
+  align-items: start;
+}
+
+.header {
+  display: grid;
+  gap: 0.8rem;
+  text-align: left;
+  padding-top: 0.25rem;
+  max-width: 30rem;
+}
+
+.badge,
+.eyebrow,
+.tag {
+  display: inline-flex;
+  width: fit-content;
+  align-items: center;
+  gap: 0.55rem;
+  font-size: 0.74rem;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--oomol-text-secondary);
+}
+
+.badge::before,
+.eyebrow::before {
+  content: "";
+  width: 0.75rem;
+  height: 1px;
+  background: var(--oomol-primary);
+}
+
+.title {
+  margin: 0;
+  max-width: 12ch;
+  font-family: var(--oomol-font-display);
+  font-size: clamp(2.35rem, 3.9vw, 3.45rem);
+  line-height: 1.06;
+  letter-spacing: -0.035em;
+  color: var(--oomol-text-primary);
+  text-wrap: pretty;
+}
+
+.subtitle {
+  margin: 0;
+  max-width: 28rem;
+  font-size: 0.96rem;
+  line-height: 1.72;
+  color: var(--oomol-text-secondary);
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1rem;
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  gap: 1.1rem;
+  min-height: 100%;
+  padding: 1.35rem 1.4rem 1.45rem;
+  border: 1px solid var(--oomol-divider);
+  border-radius: 1.7rem;
+  background: var(--oomol-surface-float);
+  box-shadow: var(--oomol-shadow-sm);
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 1.4rem;
+    right: 1.4rem;
+    height: 2px;
+    border-radius: 999px;
+  }
+}
+
+.modelCard {
+  &::before {
+    background: linear-gradient(
+      90deg,
+      color-mix(in srgb, var(--oomol-primary) 82%, white) 0%,
+      rgba(132, 138, 208, 0.18) 100%
+    );
+  }
+}
+
+.cloudCard {
+  &::before {
+    background: linear-gradient(
+      90deg,
+      rgba(111, 118, 191, 0.92) 0%,
+      rgba(111, 118, 191, 0.16) 100%
+    );
+  }
+}
+
+.cardTop {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  align-items: flex-start;
+  padding-bottom: 0.35rem;
+}
+
+.tag {
+  padding: 0.32rem 0.7rem;
+  border-radius: 999px;
+  border: 1px solid var(--oomol-divider);
+  background: var(--oomol-surface-panel);
+}
+
+.valueBox {
+  display: grid;
+  gap: 0.4rem;
+  padding: 0.15rem 0 0.85rem;
+  border-bottom: 1px solid var(--oomol-divider-subtle);
+}
+
+.value {
+  margin: 0;
+  font-family: var(--oomol-font-display);
+  font-size: clamp(3rem, 4vw, 4.75rem);
+  line-height: 0.92;
+  letter-spacing: -0.06em;
+  color: var(--oomol-text-primary);
+}
+
+.valueCaption {
+  font-size: 0.88rem;
+  line-height: 1.5;
+  color: var(--oomol-text-secondary);
+}
+
+.cardTitle {
+  margin: 0;
+  font-size: 1.55rem;
+  line-height: 1.24;
+  font-weight: 650;
+  color: var(--oomol-text-primary);
+}
+
+.cardDescription,
+.cardNote {
+  margin: 0;
+  font-size: 1rem;
+  line-height: 1.75;
+  color: var(--oomol-text-secondary);
+}
+
+.cardDescription {
+  max-width: 38ch;
+}
+
+.cardNote {
+  padding-left: 0.9rem;
+  border-left: 2px solid var(--oomol-divider);
+  color: var(--oomol-text-tertiary);
+  font-size: 0.95rem;
+}
+
+.cardFooter {
+  margin-top: auto;
+  padding-top: 0.5rem;
+}
+
+.cta {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  width: fit-content;
+  min-height: 2.5rem;
+  padding: 0 0.85rem;
+  border-radius: 999px;
+  background: color-mix(
+    in srgb,
+    var(--oomol-primary-bg) 70%,
+    var(--oomol-bg-elevated) 30%
+  );
+  font-size: 0.96rem;
+  font-weight: 650;
+  color: var(--oomol-primary-text);
+  text-decoration: none;
+
+  &::after {
+    content: "→";
+    transition: transform 0.18s ease;
+  }
+
+  &:hover {
+    text-decoration: none;
+    background: color-mix(
+      in srgb,
+      var(--oomol-primary-bg-hover) 76%,
+      var(--oomol-bg-elevated) 24%
+    );
+
+    &::after {
+      transform: translateX(2px);
+    }
+  }
+}
+
+[data-theme="dark"] {
+  .section {
+    background: linear-gradient(
+      180deg,
+      color-mix(
+          in srgb,
+          var(--oomol-bg-base) 88%,
+          var(--oomol-bg-container) 12%
+        )
+        0%,
+      color-mix(in srgb, var(--oomol-bg-base) 95%, black 5%) 100%
+    );
+    box-shadow:
+      inset 0 1px 0 var(--oomol-divider-subtle),
+      inset 0 -1px 0 var(--oomol-divider-subtle);
+  }
+
+  .card {
+    border-color: color-mix(
+      in srgb,
+      var(--oomol-border-default) 72%,
+      var(--oomol-divider)
+    );
+    background: linear-gradient(
+      180deg,
+      color-mix(
+          in srgb,
+          var(--oomol-bg-container) 84%,
+          var(--oomol-bg-elevated) 16%
+        )
+        0%,
+      color-mix(in srgb, var(--oomol-bg-elevated) 88%, black 12%) 100%
+    );
+    box-shadow: var(--oomol-shadow-md);
+  }
+
+  .tag {
+    border-color: color-mix(
+      in srgb,
+      var(--oomol-border-default) 68%,
+      var(--oomol-divider)
+    );
+    background: color-mix(
+      in srgb,
+      var(--oomol-fill-secondary) 74%,
+      var(--oomol-bg-elevated) 26%
+    );
+  }
+
+  .cardNote {
+    border-left-color: color-mix(
+      in srgb,
+      var(--oomol-divider) 84%,
+      var(--oomol-primary-border) 16%
+    );
+  }
+
+  .cta {
+    background: color-mix(
+      in srgb,
+      var(--oomol-primary-bg) 78%,
+      var(--oomol-bg-elevated) 22%
+    );
+  }
+}
+
+:global(html[lang="en"]) .container {
+  grid-template-columns: 1fr;
+  gap: 1.6rem;
+}
+
+:global(html[lang="en"]) .header {
+  max-width: 42rem;
+}
+
+:global(html[lang="en"]) .title {
+  max-width: 14ch;
+  font-size: clamp(2.35rem, 4.2vw, 3.75rem);
+  line-height: 1.02;
+}
+
+:global(html[lang="en"]) .subtitle {
+  max-width: 34rem;
+}
+
+:global(html[lang="en"]) .grid {
+  gap: 1.1rem;
+}
+
+:global(html[lang="en"]) .card {
+  gap: 1.2rem;
+  padding: 1.5rem 1.55rem 1.6rem;
+}
+
+:global(html[lang="en"]) .cardTitle {
+  max-width: 20ch;
+  font-size: 1.34rem;
+  line-height: 1.32;
+}
+
+:global(html[lang="en"]) .cardDescription {
+  max-width: 42ch;
+  line-height: 1.78;
+}
+
+:global(html[lang="en"]) .valueCaption {
+  max-width: 18ch;
+}
+
+@media (max-width: 996px) {
+  .container {
+    grid-template-columns: 1fr;
+  }
+
+  .header {
+    max-width: 100%;
+  }
+
+  .title {
+    max-width: 100%;
+  }
+}
+
+@media (max-width: 768px) {
+  .section {
+    padding: 2.9rem 0 2.2rem;
+  }
+
+  .container {
+    padding: 0 20px;
+  }
+
+  .title {
+    max-width: 100%;
+    font-size: clamp(2.05rem, 8.8vw, 2.75rem);
+    line-height: 1.1;
+    letter-spacing: -0.03em;
+    text-wrap: pretty;
+  }
+
+  .value {
+    font-size: clamp(2.4rem, 11vw, 3.35rem);
+    line-height: 1;
+    letter-spacing: -0.04em;
+  }
+
+  .subtitle {
+    font-size: 0.94rem;
+    line-height: 1.68;
+  }
+
+  .grid {
+    grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+
+  .card {
+    gap: 0.95rem;
+    padding: 1.1rem 1.1rem 1.2rem;
+    border-radius: 1.35rem;
+  }
+
+  .cardTop {
+    gap: 0.75rem;
+  }
+
+  .valueBox {
+    gap: 0.3rem;
+    padding-bottom: 0.7rem;
+  }
+
+  .cardTitle {
+    font-size: 1.2rem;
+    line-height: 1.28;
+  }
+
+  .cardDescription,
+  .cardNote {
+    font-size: 0.94rem;
+    line-height: 1.62;
+  }
+
+  .cardNote {
+    padding-left: 0.75rem;
+  }
+
+  .valueCaption {
+    font-size: 0.84rem;
+    line-height: 1.45;
+  }
+
+  .cta {
+    min-height: 2.35rem;
+    font-size: 0.92rem;
+  }
+}
diff --git a/src/components/CloudPageFirstScreen/index.tsx b/src/components/CloudPageFirstScreen/index.tsx
new file mode 100644
index 0000000..9c41a26
--- /dev/null
+++ b/src/components/CloudPageFirstScreen/index.tsx
@@ -0,0 +1,135 @@
+import styles from "./styles.module.scss";
+
+import type { DocusaurusContext } from "@docusaurus/types";
+
+import Link from "@docusaurus/Link";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import React, { useRef, useState } from "react";
+
+import { DownloadButton } from "../DownloadButton";
+
+const zhCopy = {
+  ownershipNote: "开源还是闭源，",
+  ownershipHighlight: "都由你自己决定。",
+  slogan: `让 Agent 用上你的 Skill
+代码依然由你掌控`,
+  overview: `用 OOMOL 生成的 Skill，背后的工具函数在云端稳定执行；
+用户安装 oo-cli 后即可直接在 Codex 和 Claude Code 中使用。`,
+  secondaryCta: "先用 oo-cli",
+  playAriaLabel: "播放演示视频",
+  downloadButtonTexts: {
+    macos: "下载适用于 macOS 的版本",
+    macosStable: "下载适用于 macOS 的版本（稳定版）",
+    macosNote: "仅支持 Apple Silicon Mac",
+    windows: "下载适用于 Windows 的版本",
+    windowsStable: "下载适用于 Windows 的版本（稳定版）",
+    windowsSubtitle: "仅支持 x64 版本",
+  },
+};
+
+const enCopy = {
+  ownershipNote: "Open source or closed source,",
+  ownershipHighlight: "it is your call.",
+  slogan: `Let agents use your skill.
+You stay in control of the code.`,
+  overview: `A skill generated with OOMOL runs its underlying tool functions reliably in the cloud;
+once users install oo-cli, they can use it directly in Codex and Claude Code.`,
+  secondaryCta: "Start with oo-cli",
+  playAriaLabel: "Play demo video",
+  downloadButtonTexts: {
+    macos: "Download for macOS",
+    macosStable: "Download for macOS (Stable)",
+    macosNote: "Apple Silicon Mac only",
+    windows: "Download for Windows",
+    windowsStable: "Download for Windows (Stable)",
+    windowsSubtitle: "only supports x64",
+  },
+};
+
+export default function CloudPageFirstScreen() {
+  const [isPlaying, setIsPlaying] = useState(false);
+  const { i18n } = useDocusaurusContext() as unknown as DocusaurusContext & {
+    i18n: { currentLocale: string };
+  };
+  const copy = i18n.currentLocale === "zh-CN" ? zhCopy : enCopy;
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const heroVideoUrl = useBaseUrl(
+    "https://static.oomol.com/assets/homepage/oomol-flow-en.webm"
+  );
+  const heroVideoPosterUrl = useBaseUrl(
+    "/img/pages/home/homepage-first-screen-workflow-poster.png"
+  );
+
+  const handlePlay = async () => {
+    if (!videoRef.current) {
+      return;
+    }
+
+    try {
+      await videoRef.current.play();
+      setIsPlaying(true);
+    } catch {
+      setIsPlaying(false);
+    }
+  };
+
+  return (
+    <section className={styles.section}>
+      <div className={styles.background} />
+      <div className={styles.container}>
+        <div className={styles.titleGroup}>
+          <p className={styles.ownershipNote}>
+            <span>{copy.ownershipNote}</span>
+            <strong className={styles.ownershipHighlight}>
+              {copy.ownershipHighlight}
+            </strong>
+          </p>
+          <h1 className={styles.slogan}>{copy.slogan}</h1>
+          <p className={styles.overview}>{copy.overview}</p>
+          <div className={styles.actions}>
+            <DownloadButton centered texts={copy.downloadButtonTexts} />
+            <Link to="/docs/cloud-services/cli" className={styles.secondaryCta}>
+              {copy.secondaryCta}
+            </Link>
+          </div>
+        </div>
+      </div>
+      <div className={styles.videoShowcase}>
+        <div className={styles.videoShowcaseInner}>
+          <div className={styles.videoFrame}>
+            {!isPlaying && (
+              <button
+                type="button"
+                className={styles.playOverlay}
+                onClick={handlePlay}
+                aria-label={copy.playAriaLabel}
+              >
+                <span className={styles.playButton}>
+                  <span className={styles.playTriangle} aria-hidden="true" />
+                </span>
+              </button>
+            )}
+            <video
+              ref={videoRef}
+              className={styles.heroVideo}
+              controls={isPlaying}
+              poster={heroVideoPosterUrl}
+              playsInline
+              preload="metadata"
+              onPlay={() => setIsPlaying(true)}
+              onPause={() => {
+                if (videoRef.current && videoRef.current.currentTime === 0) {
+                  setIsPlaying(false);
+                }
+              }}
+              onEnded={() => setIsPlaying(false)}
+            >
+              <source src={heroVideoUrl} type="video/mp4" />
+            </video>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/CloudPageFirstScreen/styles.module.scss b/src/components/CloudPageFirstScreen/styles.module.scss
new file mode 100644
index 0000000..ebc293c
--- /dev/null
+++ b/src/components/CloudPageFirstScreen/styles.module.scss
@@ -0,0 +1,454 @@
+@use "../../css/custom.scss" as *;
+
+.section {
+  position: relative;
+  overflow: clip;
+  padding: clamp(4.75rem, 7.6vw, 6.6rem) 0 0;
+}
+
+.background {
+  position: absolute;
+  inset: 0;
+  background:
+    radial-gradient(
+      circle at top left,
+      rgba(161, 191, 235, 0.16) 0%,
+      rgba(161, 191, 235, 0) 34%
+    ),
+    radial-gradient(
+      circle at 80% 18%,
+      rgba(127, 138, 231, 0.08) 0%,
+      rgba(127, 138, 231, 0) 26%
+    ),
+    linear-gradient(
+      180deg,
+      rgba(252, 253, 255, 0.96) 0%,
+      rgba(246, 248, 251, 0.9) 100%
+    );
+
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background:
+      linear-gradient(rgba(92, 108, 141, 0.06) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(92, 108, 141, 0.06) 1px, transparent 1px);
+    background-size: 9.5rem 9.5rem;
+    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.75), transparent 90%);
+    opacity: 0.52;
+    pointer-events: none;
+  }
+}
+
+.container {
+  position: relative;
+  z-index: 1;
+  max-width: 1160px;
+  margin: 0 auto;
+  padding: 0 32px;
+  display: grid;
+  gap: clamp(1.1rem, 2.2vw, 1.85rem);
+}
+
+.titleGroup {
+  display: grid;
+  gap: 1rem;
+  max-width: 52rem;
+  margin: 0 auto;
+  justify-items: center;
+  text-align: center;
+}
+
+.slogan {
+  margin: 0;
+  max-width: 100%;
+  font-family: var(--oomol-font-display);
+  font-size: clamp(2.72rem, 4.7vw, 4.15rem);
+  line-height: 1.1;
+  font-weight: 700;
+  letter-spacing: -0.04em;
+  white-space: pre-line;
+  word-break: keep-all;
+  overflow-wrap: normal;
+  color: var(--oomol-text-primary);
+}
+
+.overview {
+  margin: 0;
+  max-width: 44rem;
+  font-size: 1.0625rem;
+  line-height: 1.7;
+  white-space: pre-line;
+  color: var(--oomol-text-secondary);
+}
+
+.ownershipNote {
+  margin: 0;
+  max-width: 48rem;
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 0.3rem;
+  padding: 0.55rem 1rem 0.58rem;
+  border-radius: 999px;
+  border: 1px solid color-mix(in srgb, var(--oomol-primary) 12%, white);
+  background: color-mix(in srgb, var(--oomol-primary-bg) 52%, white);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.72),
+    0 10px 24px rgba(124, 138, 190, 0.08);
+  font-size: 0.92rem;
+  line-height: 1.55;
+  color: color-mix(in srgb, var(--oomol-text-secondary) 88%, white 12%);
+}
+
+.ownershipHighlight {
+  font-weight: 700;
+  color: var(--oomol-primary-text);
+}
+
+.actions {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: center;
+  gap: 0.95rem;
+  padding-top: 0.4rem;
+}
+
+.secondaryCta {
+  align-self: flex-start;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 3rem;
+  padding: 0 1.1rem;
+  border-radius: 999px;
+  border: 1px solid color-mix(in srgb, var(--oomol-border-default) 86%, white);
+  background: color-mix(
+    in srgb,
+    var(--ifm-background-surface-color) 88%,
+    white
+  );
+  color: var(--oomol-text-primary);
+  font-size: 1rem;
+  font-weight: 700;
+  letter-spacing: 0.01em;
+  text-decoration: none;
+  box-shadow: 0 12px 24px rgba(105, 120, 159, 0.09);
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease,
+    border-color 0.2s ease;
+
+  &:hover {
+    transform: translateY(-1px);
+    text-decoration: none;
+    border-color: color-mix(in srgb, var(--oomol-primary) 28%, white);
+    box-shadow: 0 16px 30px rgba(105, 120, 159, 0.13);
+  }
+}
+
+/* ── Video Showcase: full-width dark container ── */
+
+.videoShowcase {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  margin-top: clamp(2rem, 3.5vw, 3rem);
+  padding: 0;
+}
+
+.videoShowcaseInner {
+  width: min(1480px, calc(100% - 24px));
+  margin: 0 auto;
+}
+
+.videoFrame {
+  width: 100%;
+  overflow: clip;
+  background: transparent;
+  box-shadow: 0 20px 40px rgba(83, 92, 132, 0.12);
+  position: relative;
+}
+
+.playOverlay {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  display: grid;
+  place-items: center;
+  background: rgba(0, 0, 0, 0.2);
+  border: 0;
+  padding: 0;
+  cursor: pointer;
+  transition: background 0.25s ease;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.1);
+  }
+
+  &:hover .playButton {
+    transform: scale(1.08);
+    box-shadow:
+      0 0 0 12px rgba(255, 255, 255, 0.08),
+      0 20px 40px rgba(0, 0, 0, 0.3);
+  }
+}
+
+.playButton {
+  width: 5.5rem;
+  height: 5.5rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.95);
+  box-shadow:
+    0 0 0 8px rgba(255, 255, 255, 0.1),
+    0 16px 32px rgba(0, 0, 0, 0.25);
+  transition:
+    transform 0.25s ease,
+    box-shadow 0.25s ease;
+}
+
+.playTriangle {
+  width: 0;
+  height: 0;
+  margin-left: 0.3rem;
+  border-top: 0.85rem solid transparent;
+  border-bottom: 0.85rem solid transparent;
+  border-left: 1.3rem solid #1a1b28;
+}
+
+.heroVideo {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  display: block;
+  object-fit: cover;
+  background: transparent;
+}
+
+/* ── English overrides ── */
+
+:global(html[lang="en"]) .container {
+  max-width: 1200px;
+}
+
+:global(html[lang="en"]) .titleGroup {
+  gap: 1rem;
+  max-width: 56rem;
+}
+
+:global(html[lang="en"]) .slogan {
+  max-width: 15em;
+  font-size: clamp(2.55rem, 4.2vw, 3.95rem);
+  line-height: 1.08;
+  letter-spacing: -0.038em;
+  text-wrap: pretty;
+}
+
+:global(html[lang="en"]) .overview {
+  max-width: 46rem;
+}
+
+:global(html[lang="en"]) .ownershipNote {
+  max-width: 42rem;
+  font-size: clamp(0.88rem, 0.95vw, 0.98rem);
+}
+
+/* ── Tablet ── */
+
+@media (max-width: 996px) {
+  .container {
+    gap: clamp(1.35rem, 3vw, 1.9rem);
+  }
+
+  :global(html[lang="en"]) .container {
+    gap: clamp(1.35rem, 3vw, 1.9rem);
+  }
+
+  .section {
+    padding-top: 4.5rem;
+  }
+
+  .container {
+    padding: 0 24px;
+  }
+
+  .slogan {
+    max-width: 100%;
+  }
+
+  .overview {
+    max-width: 100%;
+  }
+}
+
+/* ── Mobile ── */
+
+@media (max-width: 768px) {
+  .section {
+    padding: 3.8rem 0 0;
+  }
+
+  .container {
+    padding: 0 20px;
+  }
+
+  .slogan {
+    font-size: clamp(2.18rem, 8.5vw, 3rem);
+    line-height: 1.12;
+    letter-spacing: -0.03em;
+    max-width: 100%;
+  }
+
+  .titleGroup {
+    gap: 0.75rem;
+  }
+
+  .overview {
+    font-size: 1rem;
+    line-height: 1.6;
+  }
+
+  .ownershipNote {
+    max-width: 100%;
+    border-radius: 1rem;
+    padding: 0.55rem 0.85rem 0.58rem;
+    font-size: 0.88rem;
+    line-height: 1.58;
+  }
+
+  .actions {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .secondaryCta {
+    align-self: center;
+  }
+
+  .videoShowcase {
+    margin-top: clamp(1.5rem, 3vw, 2rem);
+  }
+
+  .playButton {
+    width: 4rem;
+    height: 4rem;
+  }
+
+  .playTriangle {
+    border-top-width: 0.65rem;
+    border-bottom-width: 0.65rem;
+    border-left-width: 1rem;
+  }
+}
+
+/* ── Dark mode ── */
+
+[data-theme="dark"] {
+  .section {
+    box-shadow: inset 0 -1px 0 var(--oomol-divider-subtle);
+  }
+
+  .background {
+    background:
+      radial-gradient(
+        circle at top left,
+        rgba(155, 146, 208, 0.16) 0%,
+        rgba(155, 146, 208, 0) 38%
+      ),
+      radial-gradient(
+        circle at 80% 18%,
+        rgba(132, 138, 208, 0.1) 0%,
+        rgba(132, 138, 208, 0) 26%
+      ),
+      linear-gradient(
+        180deg,
+        color-mix(
+            in srgb,
+            var(--oomol-bg-container) 78%,
+            var(--oomol-bg-spotlight) 22%
+          )
+          0%,
+        color-mix(in srgb, var(--oomol-bg-base) 76%, var(--oomol-bg-layout) 24%)
+          100%
+      );
+  }
+
+  .background::after {
+    background:
+      linear-gradient(rgba(204, 196, 223, 0.07) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(204, 196, 223, 0.07) 1px, transparent 1px);
+  }
+
+  .overview {
+    color: color-mix(in srgb, var(--oomol-text-secondary) 92%, white 8%);
+  }
+
+  .ownershipNote {
+    border-color: color-mix(
+      in srgb,
+      var(--oomol-primary) 18%,
+      var(--oomol-border-default)
+    );
+    background: color-mix(
+      in srgb,
+      var(--oomol-bg-elevated) 74%,
+      var(--oomol-primary-bg) 26%
+    );
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.06),
+      0 12px 28px rgba(0, 0, 0, 0.12);
+    color: color-mix(in srgb, var(--oomol-text-secondary) 90%, white 10%);
+  }
+
+  .ownershipHighlight {
+    color: color-mix(in srgb, var(--oomol-primary-text) 86%, white 14%);
+  }
+
+  .secondaryCta {
+    border-color: color-mix(
+      in srgb,
+      var(--oomol-border-default) 72%,
+      var(--oomol-divider)
+    );
+    background: color-mix(
+      in srgb,
+      var(--oomol-bg-elevated) 80%,
+      var(--oomol-bg-container) 20%
+    );
+    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
+
+    &:hover {
+      border-color: color-mix(
+        in srgb,
+        var(--oomol-primary) 24%,
+        var(--oomol-divider)
+      );
+      box-shadow: 0 18px 32px rgba(0, 0, 0, 0.22);
+    }
+  }
+
+  .videoShowcase {
+    background: transparent;
+  }
+
+  .videoFrame {
+    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.22);
+  }
+
+  .playButton {
+    background: rgba(255, 255, 255, 0.9);
+  }
+
+  .playOverlay {
+    background: rgba(0, 0, 0, 0.3);
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.15);
+    }
+  }
+}
diff --git a/src/components/CloudPageIntro/index.tsx b/src/components/CloudPageIntro/index.tsx
new file mode 100644
index 0000000..797373e
--- /dev/null
+++ b/src/components/CloudPageIntro/index.tsx
@@ -0,0 +1,16 @@
+import CloudPageBrandBreak from "@site/src/components/CloudPageBrandBreak";
+import CloudPageFirstScreen from "@site/src/components/CloudPageFirstScreen";
+import CloudPageLinearFlow from "@site/src/components/CloudPageLinearFlow";
+import CloudPagePainPoints from "@site/src/components/CloudPagePainPoints";
+import React from "react";
+
+export default function CloudPageIntro() {
+  return (
+    <>
+      <CloudPageFirstScreen />
+      <CloudPagePainPoints />
+      <CloudPageBrandBreak />
+      <CloudPageLinearFlow />
+    </>
+  );
+}
diff --git a/src/components/CloudPageLinearFlow/index.tsx b/src/components/CloudPageLinearFlow/index.tsx
new file mode 100644
index 0000000..0a1cba9
--- /dev/null
+++ b/src/components/CloudPageLinearFlow/index.tsx
@@ -0,0 +1,457 @@
+import styles from "./styles.module.scss";
+
+import type { DocusaurusContext } from "@docusaurus/types";
+
+import Link from "@docusaurus/Link";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import CloudPageDeveloperBenefits from "@site/src/components/CloudPageDeveloperBenefits";
+import { DownloadButton } from "@site/src/components/DownloadButton";
+import { clsx } from "clsx";
+import React from "react";
+
+const homepageMediaUrls = {
+  cli: "https://static.oomol.com/assets/homepage/oomol-oo-cli-en.webm",
+  studio:
+    "https://static.oomol.com/assets/homepage/OOMOL-Studio-gen-use-skils-en.webm",
+  agent: "https://static.oomol.com/assets/homepage/oomol-AI-use-skills-en.webm",
+} as const;
+
+type Copy = {
+  cli: {
+    eyebrow: string;
+    title: string;
+    description: string;
+    media: { title: string; note: string };
+    guide: string;
+    github: string;
+  };
+  studio: {
+    eyebrow: string;
+    title: string;
+    description: string;
+    media: { title: string; note: string };
+    primary: string;
+    secondary: string;
+  };
+  cloud: {
+    eyebrow: string;
+    title: string;
+    description: string;
+    cards: Array<{ title: string; text: string }>;
+    media: { title: string; note: string; pills: string[]; items: string[] };
+    primary: string;
+    secondary: string;
+  };
+  agent: {
+    eyebrow: string;
+    title: string;
+    description: string;
+    media: { title: string; note: string };
+    primary: string;
+    secondary: string;
+  };
+  cta: {
+    title: string;
+    description: string;
+    primary: string;
+    secondary: string;
+  };
+};
+
+type VideoCardProps = {
+  title: string;
+  note: string;
+  src: string;
+};
+
+type ImageCardProps = {
+  title: string;
+  note: string;
+  src: string;
+  pills: string[];
+};
+
+function VideoCard({ title, note, src }: VideoCardProps) {
+  return (
+    <div className={styles.videoCard}>
+      <div className={styles.videoCardMedia}>
+        <video
+          className={styles.videoCardVideo}
+          autoPlay
+          loop
+          muted
+          controls
+          playsInline
+          preload="metadata"
+          aria-label={title}
+        >
+          <source src={src} type="video/webm" />
+        </video>
+      </div>
+      <div className={styles.videoCardMeta}>
+        <h3 className={styles.videoCardTitle}>{title}</h3>
+        <p className={styles.videoCardNote}>{note}</p>
+      </div>
+    </div>
+  );
+}
+
+function ImageCard({ title, note, src, pills }: ImageCardProps) {
+  return (
+    <div className={styles.videoCard}>
+      <div className={styles.imageCardMedia}>
+        <img className={styles.imageCardImage} src={src} alt={title} />
+      </div>
+      <div className={styles.videoCardMeta}>
+        <h3 className={styles.videoCardTitle}>{title}</h3>
+        <p className={styles.videoCardNote}>{note}</p>
+        <div className={styles.cloudMetaRow}>
+          {pills.map(pill => (
+            <span key={pill} className={styles.cloudMetaPill}>
+              {pill}
+            </span>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const zhCopy: Copy = {
+  cli: {
+    eyebrow: "01 / oo-cli",
+    title: "先在 Codex 里装 oo-cli，直接开始用 Skill",
+    description:
+      "oo-cli 是最适合在 Codex 和 Claude Code 里开始使用 Skill 的入口。先把安装文档打开，再用右侧视频直接看真实使用过程。",
+    media: {
+      title: "Codex 演示视频",
+      note: "展示在 Codex 中安装、搜索、查看并运行 Skill。",
+    },
+    guide: "查看安装文档",
+    github: "查看 GitHub",
+  },
+  studio: {
+    eyebrow: "02 / OOMOL Studio",
+    title: "想做自己的 Skill，就用 OOMOL Studio",
+    description:
+      "直接告诉 Agent 你要生成什么，Studio 帮你把 Skill 生成出来，然后在本地完成验证。不会写平台 DSL，也能零门槛开始。",
+    media: {
+      title: "Studio + Agent Vibe 演示视频",
+      note: "展示从提需求到本地验证跑通的过程。",
+    },
+    primary: "安装 OOMOL Studio",
+    secondary: "了解 Studio",
+  },
+  cloud: {
+    eyebrow: "03 / Cloud",
+    title: "发布之后，Cloud 负责运行与交付",
+    description:
+      "Skill 发布之后，Cloud 在后台承接运行、订阅、配置和使用数据。你不需要再围着同一份实现重做一层产品外壳。",
+    cards: [
+      {
+        title: "交付给自己、团队或客户",
+        text: "通过订阅持续交付，而不是停留在本地脚本。",
+      },
+      {
+        title: "在一个后台里配置并观察",
+        text: "Secrets、权限、版本和使用数据集中管理。",
+      },
+    ],
+    media: {
+      title: "Cloud 控制台预览",
+      note: "把订阅、配置和运行数据放到同一个后台里。",
+      pills: ["订阅关系", "运行配置", "使用数据"],
+      items: ["按订阅持续交付与续费", "统一管理 Secrets、权限和版本"],
+    },
+    primary: "了解 Cloud",
+    secondary: "打开 Cloud 控制台",
+  },
+  agent: {
+    eyebrow: "04 / OOMOL AI",
+    title: "不想用 CLI，就直接用 OOMOL AI",
+    description:
+      "它可以理解成 oo-cli 的 GUI 版本。同一套 Skill，不同的消费入口。终端适合工作流，GUI 更适合直观使用。",
+    media: {
+      title: "OOMOL AI 演示视频",
+      note: "展示对话入口和参数入口的体验。",
+    },
+    primary: "体验 OOMOL AI",
+    secondary: "了解 OOMOL AI",
+  },
+  cta: {
+    title: "先用一个 Skill，再决定要不要自己做",
+    description:
+      "先通过 oo-cli 把使用路径跑通。需要自己的 Skill 时，再安装 Studio 生成、验证并发布。",
+    primary: "安装 OOMOL Studio",
+    secondary: "先用 oo-cli",
+  },
+};
+
+const enCopy: Copy = {
+  cli: {
+    eyebrow: "01 / oo-cli",
+    title: "Install oo-cli in Codex and start using skills",
+    description:
+      "oo-cli is the best entry point for using skills inside Codex and Claude Code. Open the install guide first, then use the video on the right to see the real flow.",
+    media: {
+      title: "Codex demo video",
+      note: "Show installing, searching, inspecting, and running a skill in Codex.",
+    },
+    guide: "Open install guide",
+    github: "View GitHub",
+  },
+  studio: {
+    eyebrow: "02 / OOMOL Studio",
+    title: "When you need your own skill, use OOMOL Studio",
+    description:
+      "Tell the agent what skill you want, let Studio generate the first version, then validate it locally. You do not need to learn a platform DSL before you begin.",
+    media: {
+      title: "Studio + Agent Vibe demo video",
+      note: "Show the path from prompting to local validation.",
+    },
+    primary: "Install OOMOL Studio",
+    secondary: "Explore Studio",
+  },
+  cloud: {
+    eyebrow: "03 / Cloud",
+    title: "After release, Cloud runs and delivers the skill",
+    description:
+      "After a skill is released, Cloud handles runtime, subscriptions, configuration, and usage data. You do not need a second product layer around the same implementation.",
+    cards: [
+      {
+        title: "Deliver it to yourself, your team, or customers",
+        text: "Keep the delivery loop running through subscriptions.",
+      },
+      {
+        title: "Configure and observe it in one backend",
+        text: "Keep secrets, access, releases, and usage in one place.",
+      },
+    ],
+    media: {
+      title: "Cloud console preview",
+      note: "Bring subscriptions, settings, and operational data into one backend.",
+      pills: ["Subscriptions", "Runtime settings", "Usage data"],
+      items: [
+        "Deliver and renew through subscriptions",
+        "Manage secrets, access, and releases in one console",
+      ],
+    },
+    primary: "Explore Cloud",
+    secondary: "Open Cloud Console",
+  },
+  agent: {
+    eyebrow: "04 / OOMOL AI",
+    title: "If you do not want CLI, use OOMOL AI",
+    description:
+      "Think of it as the GUI version of oo-cli. It uses the same skills through a more direct interface. CLI is better for workflows; GUI is better for straightforward use.",
+    media: {
+      title: "OOMOL AI demo video",
+      note: "Show both the chat surface and the structured surface.",
+    },
+    primary: "Try OOMOL AI",
+    secondary: "Explore OOMOL AI",
+  },
+  cta: {
+    title: "Use a skill first, then decide whether to build your own",
+    description:
+      "Start by getting the usage path working in oo-cli. When you need your own skill, install Studio to generate, validate, and publish it.",
+    primary: "Install OOMOL Studio",
+    secondary: "Start with oo-cli",
+  },
+};
+
+export default function CloudPageLinearFlow() {
+  const { i18n } = useDocusaurusContext() as unknown as DocusaurusContext & {
+    i18n: { currentLocale: string };
+  };
+  const copy = i18n.currentLocale === "zh-CN" ? zhCopy : enCopy;
+  const downloadButtonTexts =
+    i18n.currentLocale === "zh-CN"
+      ? {
+          macos: "下载适用于 macOS 的版本",
+          macosStable: "下载适用于 macOS 的版本（稳定版）",
+          macosNote: "仅支持 Apple Silicon Mac",
+          windows: "下载适用于 Windows 的版本",
+          windowsStable: "下载适用于 Windows 的版本（稳定版）",
+          windowsSubtitle: "仅支持 x64 版本",
+        }
+      : {
+          macos: "Download for macOS",
+          macosStable: "Download for macOS (Stable)",
+          macosNote: "Apple Silicon Mac only",
+          windows: "Download for Windows",
+          windowsStable: "Download for Windows (Stable)",
+          windowsSubtitle: "only supports x64",
+        };
+  const cloudConsoleImage = useBaseUrl(
+    i18n.currentLocale === "zh-CN"
+      ? "/img/pages/home/cloud-console-zh.png"
+      : "/img/pages/home/cloud-console-en.png"
+  );
+
+  return (
+    <div className={styles.flow}>
+      {/* ── Section: oo-cli ── */}
+      <section className={clsx(styles.section, styles.cliSection)}>
+        <div className={styles.container}>
+          <div className={styles.copyPanel}>
+            <span className={styles.eyebrow}>{copy.cli.eyebrow}</span>
+            <h2 className={styles.sectionTitle}>{copy.cli.title}</h2>
+            <p className={styles.sectionDescription}>{copy.cli.description}</p>
+            <div className={styles.inlineActions}>
+              <Link
+                to="/docs/cloud-services/cli"
+                className={styles.primaryLink}
+              >
+                {copy.cli.guide}
+              </Link>
+              <a
+                href="https://github.com/oomol-lab/oo-cli"
+                target="_blank"
+                rel="noreferrer"
+                className={styles.secondaryLink}
+              >
+                {copy.cli.github}
+              </a>
+            </div>
+          </div>
+
+          <div className={styles.mediaPanel}>
+            <VideoCard
+              title={copy.cli.media.title}
+              note={copy.cli.media.note}
+              src={homepageMediaUrls.cli}
+            />
+          </div>
+        </div>
+      </section>
+
+      {/* ── Section: Studio ── */}
+      <section className={clsx(styles.section, styles.sectionTint)}>
+        <div className={styles.container}>
+          <div className={styles.copyPanel}>
+            <span className={styles.eyebrow}>{copy.studio.eyebrow}</span>
+            <h2 className={styles.sectionTitle}>{copy.studio.title}</h2>
+            <p className={styles.sectionDescription}>
+              {copy.studio.description}
+            </p>
+            <div className={styles.inlineActions}>
+              <Link to="/downloads" className={styles.primaryLink}>
+                {copy.studio.primary}
+              </Link>
+              <Link to="/studio" className={styles.secondaryLink}>
+                {copy.studio.secondary}
+              </Link>
+            </div>
+          </div>
+
+          <div className={styles.mediaPanel}>
+            <VideoCard
+              title={copy.studio.media.title}
+              note={copy.studio.media.note}
+              src={homepageMediaUrls.studio}
+            />
+          </div>
+        </div>
+      </section>
+
+      {/* ── Section: Cloud ── */}
+      <section className={clsx(styles.section, styles.cloudSection)}>
+        <div className={styles.container}>
+          <div className={styles.copyPanel}>
+            <span className={styles.eyebrow}>{copy.cloud.eyebrow}</span>
+            <h2 className={styles.sectionTitle}>{copy.cloud.title}</h2>
+            <p className={styles.sectionDescription}>
+              {copy.cloud.description}
+            </p>
+            <div className={styles.cloudCardStack}>
+              {copy.cloud.cards.map(card => (
+                <article key={card.title} className={styles.cloudCard}>
+                  <h3 className={styles.cloudTitle}>{card.title}</h3>
+                  <p className={styles.cloudText}>{card.text}</p>
+                </article>
+              ))}
+            </div>
+            <div className={styles.inlineActions}>
+              <Link to="/cloud" className={styles.primaryLink}>
+                {copy.cloud.primary}
+              </Link>
+              <a
+                href="https://console.oomol.com/cloud-function"
+                target="_blank"
+                rel="noreferrer"
+                className={styles.secondaryLink}
+              >
+                {copy.cloud.secondary}
+              </a>
+            </div>
+          </div>
+
+          <div className={styles.mediaPanel}>
+            <ImageCard
+              title={copy.cloud.media.title}
+              note={copy.cloud.media.note}
+              src={cloudConsoleImage}
+              pills={copy.cloud.media.pills}
+            />
+          </div>
+        </div>
+      </section>
+
+      {/* ── Section: OOMOL AI ── */}
+      <section className={clsx(styles.section, styles.agentSection)}>
+        <div className={styles.container}>
+          <div className={styles.copyPanel}>
+            <span className={styles.eyebrow}>{copy.agent.eyebrow}</span>
+            <h2 className={styles.sectionTitle}>{copy.agent.title}</h2>
+            <p className={styles.sectionDescription}>
+              {copy.agent.description}
+            </p>
+            <div className={styles.inlineActions}>
+              <a
+                href="https://app.oomol.com"
+                target="_blank"
+                rel="noreferrer"
+                className={styles.primaryLink}
+              >
+                {copy.agent.primary}
+              </a>
+              <Link to="/app" className={styles.secondaryLink}>
+                {copy.agent.secondary}
+              </Link>
+            </div>
+          </div>
+
+          <div className={styles.mediaPanel}>
+            <VideoCard
+              title={copy.agent.media.title}
+              note={copy.agent.media.note}
+              src={homepageMediaUrls.agent}
+            />
+          </div>
+        </div>
+      </section>
+
+      <CloudPageDeveloperBenefits />
+
+      {/* ── CTA ── */}
+      <section className={styles.ctaSection}>
+        <div className={styles.ctaInner}>
+          <h2 className={styles.ctaTitle}>{copy.cta.title}</h2>
+          <p className={styles.ctaDescription}>{copy.cta.description}</p>
+          <div className={styles.ctaActions}>
+            <DownloadButton
+              centered
+              showNote={false}
+              texts={downloadButtonTexts}
+            />
+            <Link to="/docs/cloud-services/cli" className={styles.ctaGhost}>
+              {copy.cta.secondary}
+            </Link>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}
diff --git a/src/components/CloudPageLinearFlow/styles.module.scss b/src/components/CloudPageLinearFlow/styles.module.scss
new file mode 100644
index 0000000..05d8ea5
--- /dev/null
+++ b/src/components/CloudPageLinearFlow/styles.module.scss
@@ -0,0 +1,788 @@
+@use "../../css/custom.scss" as *;
+
+.flow {
+  display: grid;
+}
+
+.section {
+  padding: clamp(4rem, 7vw, 5.8rem) 0;
+}
+
+.cliSection {
+  .copyPanel {
+    gap: 1.05rem;
+    max-width: 36rem;
+  }
+
+  .sectionDescription {
+    max-width: 34rem;
+  }
+}
+
+.sectionTint {
+  background: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--oomol-bg-base) 92%, #d7c8af 8%) 0%,
+    color-mix(in srgb, var(--oomol-bg-base) 96%, white 4%) 100%
+  );
+}
+
+.cloudSection {
+  .copyPanel {
+    max-width: 100%;
+  }
+
+  .sectionTitle {
+    max-width: 100%;
+  }
+
+  .sectionDescription {
+    max-width: 33rem;
+  }
+}
+
+.agentSection {
+  background:
+    radial-gradient(
+      circle at top right,
+      rgba(188, 167, 122, 0.12) 0%,
+      rgba(188, 167, 122, 0) 28%
+    ),
+    linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--oomol-bg-base) 96%, white 4%) 0%,
+      var(--oomol-bg-base) 100%
+    );
+}
+
+.container,
+.ctaInner {
+  width: min(1260px, calc(100% - 48px));
+  margin: 0 auto;
+}
+
+.container {
+  display: grid;
+  grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
+  gap: clamp(1.7rem, 3.2vw, 2.8rem);
+  align-items: start;
+}
+
+.copyPanel {
+  display: grid;
+  gap: 1rem;
+  align-content: start;
+  max-width: 40rem;
+}
+
+/* ── Eyebrow badge ── */
+
+.eyebrow {
+  display: inline-flex;
+  width: fit-content;
+  align-items: center;
+  gap: 0.65rem;
+  padding: 0.38rem 0.85rem 0.4rem;
+  border-radius: 999px;
+  border: 1px solid
+    color-mix(in srgb, var(--oomol-primary) 16%, var(--oomol-divider));
+  background: color-mix(in srgb, var(--oomol-primary-bg) 42%, white);
+  font-size: 0.82rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  color: var(--oomol-primary-text);
+}
+
+/* ── Section titles ── */
+
+.sectionTitle,
+.ctaTitle {
+  margin: 0;
+  max-width: 100%;
+  font-family: var(--oomol-font-display);
+  font-size: clamp(2.1rem, 3.5vw, 2.85rem);
+  line-height: 1.12;
+  letter-spacing: -0.04em;
+  text-wrap: pretty;
+  color: var(--oomol-text-primary);
+}
+
+.sectionDescription,
+.ctaDescription {
+  margin: 0;
+  max-width: 40rem;
+  font-size: 1.0625rem;
+  line-height: 1.7;
+  color: var(--oomol-text-secondary);
+}
+
+/* ── Action buttons ── */
+
+.inlineActions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 1.2rem;
+  padding-top: 0.5rem;
+}
+
+.ctaActions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.9rem;
+  padding-top: 0.5rem;
+}
+
+.primaryLink,
+.secondaryLink {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--oomol-primary-text);
+  text-decoration: none;
+  transition: opacity 0.15s ease;
+
+  &::after {
+    content: "→";
+    transition: transform 0.15s ease;
+  }
+
+  &:hover {
+    text-decoration: none;
+    opacity: 0.78;
+
+    &::after {
+      transform: translateX(3px);
+    }
+  }
+}
+
+.secondaryLink {
+  color: var(--oomol-text-secondary);
+}
+
+.ctaGhost {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 12rem;
+  min-height: 52px;
+  padding: 0 1.35rem;
+  border-radius: 999px;
+  font-size: 1rem;
+  font-weight: 600;
+  text-decoration: none;
+  color: rgba(243, 239, 248, 0.94);
+  border: 1px solid rgba(243, 239, 248, 0.14);
+  background: rgba(243, 239, 248, 0.08);
+  transition: opacity 0.15s ease;
+
+  &:hover {
+    text-decoration: none;
+    opacity: 0.82;
+  }
+}
+
+/* ── Media panel + video card ── */
+
+.terminalPanel,
+.mediaPanel,
+.agentMediaCard {
+  border-radius: 1.5rem;
+  border: 1px solid var(--oomol-divider);
+  background: color-mix(in srgb, var(--oomol-bg-elevated) 94%, white 6%);
+  box-shadow: 0 16px 32px rgba(101, 118, 163, 0.1);
+  overflow: hidden;
+}
+
+.mediaPanel,
+.agentMediaCard {
+  min-height: clamp(24rem, 40vw, 33rem);
+}
+
+.videoCard {
+  height: 100%;
+  min-height: inherit;
+  display: grid;
+  grid-template-rows: 1fr auto;
+}
+
+.videoCardInner {
+  position: relative;
+  display: grid;
+  place-items: center;
+  background:
+    radial-gradient(
+      ellipse 70% 50% at 50% 40%,
+      rgba(84, 88, 135, 0.08) 0%,
+      transparent 70%
+    ),
+    linear-gradient(180deg, #1a1b28 0%, #12131d 100%);
+  min-height: 16rem;
+}
+
+.videoCardMedia {
+  min-height: 16rem;
+  background:
+    radial-gradient(
+      ellipse 70% 50% at 50% 40%,
+      rgba(84, 88, 135, 0.08) 0%,
+      transparent 70%
+    ),
+    linear-gradient(180deg, #1a1b28 0%, #12131d 100%);
+}
+
+.videoCardVideo {
+  width: 100%;
+  height: 100%;
+  min-height: inherit;
+  display: block;
+  object-fit: cover;
+  background: transparent;
+}
+
+.imageCardMedia {
+  min-height: 16rem;
+  background: color-mix(in srgb, var(--oomol-bg-container) 88%, black 12%);
+}
+
+.imageCardImage {
+  width: 100%;
+  height: 100%;
+  min-height: inherit;
+  display: block;
+  object-fit: cover;
+}
+
+.videoCardPlay {
+  width: 4.5rem;
+  height: 4.5rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.92);
+  box-shadow:
+    0 0 0 6px rgba(255, 255, 255, 0.08),
+    0 12px 28px rgba(0, 0, 0, 0.25);
+  cursor: pointer;
+  transition: transform 0.2s ease;
+
+  &:hover {
+    transform: scale(1.06);
+  }
+}
+
+.videoCardTriangle {
+  width: 0;
+  height: 0;
+  margin-left: 0.2rem;
+  border-top: 0.7rem solid transparent;
+  border-bottom: 0.7rem solid transparent;
+  border-left: 1.1rem solid #1a1b28;
+}
+
+.videoCardMeta {
+  padding: 1.15rem 1.35rem 1.25rem;
+  border-top: 1px solid var(--oomol-divider);
+  background: color-mix(in srgb, var(--oomol-bg-elevated) 94%, white 6%);
+}
+
+.videoCardTitle {
+  margin: 0;
+  font-size: 1.05rem;
+  font-weight: 700;
+  line-height: 1.35;
+  letter-spacing: -0.01em;
+  color: var(--oomol-text-primary);
+}
+
+.videoCardNote {
+  margin: 0.35rem 0 0;
+  font-size: 0.92rem;
+  line-height: 1.6;
+  color: var(--oomol-text-tertiary);
+}
+
+/* ── Terminal panel (kept) ── */
+
+.terminalPanel {
+  display: grid;
+}
+
+.terminalChrome {
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+  padding: 0.82rem 1rem;
+  border-bottom: 1px solid var(--oomol-divider);
+
+  span {
+    width: 0.58rem;
+    height: 0.58rem;
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--oomol-text-secondary) 26%, white);
+  }
+}
+
+.terminalBody {
+  display: grid;
+  gap: 0.82rem;
+  padding: 1.1rem 1.2rem 1.25rem;
+}
+
+.terminalLabel {
+  font-size: 0.9rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  color: var(--oomol-text-tertiary);
+}
+
+.commandBlock {
+  margin: 0;
+  padding: 0;
+  white-space: pre-wrap;
+  font-family:
+    ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Monaco, Consolas,
+    "Liberation Mono", monospace;
+  font-size: 1rem;
+  line-height: 1.9;
+  color: var(--oomol-text-primary);
+}
+
+.commandLine {
+  display: block;
+}
+
+.commentLine {
+  display: block;
+  margin: 0 0 0.3rem;
+  font-size: 0.9rem;
+  line-height: 1.5;
+  color: var(--oomol-text-tertiary);
+}
+
+.prompt {
+  color: var(--oomol-primary-text);
+}
+
+/* ── Placeholder card (Cloud section) ── */
+
+.placeholderCard {
+  height: 100%;
+  min-height: inherit;
+  display: grid;
+  align-content: start;
+  gap: 1.1rem;
+  padding: clamp(1.55rem, 3vw, 2.4rem);
+  padding-top: clamp(1.8rem, 3vw, 2.4rem);
+  position: relative;
+  overflow: hidden;
+  background:
+    linear-gradient(rgba(97, 113, 145, 0.06) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(97, 113, 145, 0.06) 1px, transparent 1px),
+    linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--oomol-bg-elevated) 90%, white 10%) 0%,
+      color-mix(in srgb, var(--oomol-bg-container) 82%, white 18%) 100%
+    );
+  background-size:
+    3.25rem 3.25rem,
+    3.25rem 3.25rem,
+    auto;
+}
+
+.placeholderTitle {
+  margin: 0;
+  max-width: 18ch;
+  font-family: var(--oomol-font-display);
+  font-size: clamp(1.42rem, 1.9vw, 1.72rem);
+  line-height: 1.12;
+  letter-spacing: -0.03em;
+  color: var(--oomol-text-primary);
+  position: relative;
+  z-index: 1;
+}
+
+.placeholderNote {
+  margin: 0;
+  max-width: 34rem;
+  font-size: 1rem;
+  line-height: 1.66;
+  color: var(--oomol-text-secondary);
+  position: relative;
+  z-index: 1;
+}
+
+/* ── Cloud cards ── */
+
+.cloudCardStack {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.75rem;
+}
+
+.cloudCard {
+  padding: 1.1rem 1.1rem 1.15rem;
+  border-radius: 1rem;
+  border: 1px solid var(--oomol-divider);
+  background: color-mix(in srgb, var(--oomol-bg-elevated) 92%, white 8%);
+  box-shadow: 0 4px 12px rgba(101, 118, 163, 0.06);
+  transition:
+    box-shadow 0.2s ease,
+    border-color 0.2s ease;
+
+  &:hover {
+    border-color: color-mix(
+      in srgb,
+      var(--oomol-primary) 18%,
+      var(--oomol-divider)
+    );
+    box-shadow: 0 8px 20px rgba(101, 118, 163, 0.1);
+  }
+}
+
+.cloudTitle {
+  margin: 0;
+  font-size: 1.05rem;
+  line-height: 1.34;
+  letter-spacing: -0.01em;
+  color: var(--oomol-text-primary);
+}
+
+.cloudText {
+  margin: 0.55rem 0 0;
+  font-size: 0.96rem;
+  line-height: 1.62;
+  color: var(--oomol-text-secondary);
+}
+
+.cloudMetaRow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.45rem;
+  margin-top: 0.25rem;
+}
+
+.cloudMetaPill {
+  display: inline-flex;
+  align-items: center;
+  min-height: 1.65rem;
+  padding: 0 0.65rem;
+  border-radius: 999px;
+  border: 1px solid color-mix(in srgb, var(--oomol-border-default) 82%, white);
+  background: color-mix(in srgb, var(--oomol-bg-elevated) 94%, white 6%);
+  font-size: 0.78rem;
+  font-weight: 700;
+  letter-spacing: 0.01em;
+  color: var(--oomol-text-tertiary);
+}
+
+/* ── CTA section ── */
+
+.ctaSection {
+  padding: clamp(4rem, 8vw, 5.8rem) 0 clamp(3rem, 6vw, 4.4rem);
+}
+
+.ctaInner {
+  display: grid;
+  gap: 1.1rem;
+  padding: clamp(2.1rem, 4.2vw, 3rem);
+  border-radius: 1.75rem;
+  border: 1px solid rgba(214, 221, 236, 0.12);
+  background:
+    radial-gradient(
+      circle at top left,
+      rgba(132, 138, 208, 0.18) 0%,
+      rgba(132, 138, 208, 0) 32%
+    ),
+    linear-gradient(180deg, #1a1b28 0%, #12131d 100%);
+  box-shadow: 0 18px 36px rgba(31, 28, 53, 0.22);
+}
+
+.ctaTitle {
+  max-width: 14ch;
+  color: rgba(243, 239, 248, 0.98);
+}
+
+.ctaDescription {
+  max-width: 42rem;
+  color: rgba(221, 214, 231, 0.8);
+}
+
+/* ── English overrides ── */
+
+:global(html[lang="en"]) .sectionTitle,
+:global(html[lang="en"]) .ctaTitle {
+  max-width: 100%;
+  font-size: clamp(2rem, 3.2vw, 2.85rem);
+  line-height: 1.1;
+}
+
+/* ── Tablet ── */
+
+@media (max-width: 996px) {
+  .container {
+    grid-template-columns: 1fr;
+  }
+
+  .cliSection {
+    .container {
+      grid-template-columns: 1fr;
+    }
+
+    .copyPanel {
+      max-width: 100%;
+    }
+
+    .terminalPanel {
+      max-width: 100%;
+    }
+  }
+
+  .cloudSection {
+    .container {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  .cloudCardStack {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* ── Mobile ── */
+
+@media (max-width: 768px) {
+  .container,
+  .ctaInner {
+    width: min(100%, calc(100% - 40px));
+  }
+
+  .section {
+    padding: 3rem 0;
+  }
+
+  .sectionTitle,
+  .ctaTitle {
+    max-width: 100%;
+    text-wrap: pretty;
+  }
+
+  .sectionDescription,
+  .ctaDescription {
+    font-size: 0.98rem;
+    line-height: 1.7;
+  }
+
+  .videoCardInner {
+    min-height: 12rem;
+  }
+
+  .videoCardMedia {
+    min-height: 12rem;
+  }
+
+  .imageCardMedia {
+    min-height: 12rem;
+  }
+
+  .videoCardPlay {
+    width: 3.5rem;
+    height: 3.5rem;
+  }
+
+  .videoCardTriangle {
+    border-top-width: 0.55rem;
+    border-bottom-width: 0.55rem;
+    border-left-width: 0.85rem;
+  }
+}
+
+/* ── Dark mode ── */
+
+[data-theme="dark"] {
+  .eyebrow {
+    border-color: color-mix(
+      in srgb,
+      var(--oomol-primary) 24%,
+      var(--oomol-divider)
+    );
+    background: color-mix(
+      in srgb,
+      var(--oomol-bg-elevated) 78%,
+      var(--oomol-primary-bg) 22%
+    );
+  }
+
+  .sectionTint {
+    background: linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--oomol-bg-base) 90%, #41372d 10%) 0%,
+      color-mix(in srgb, var(--oomol-bg-base) 96%, black 4%) 100%
+    );
+  }
+
+  .agentSection {
+    background:
+      radial-gradient(
+        circle at top right,
+        rgba(188, 167, 122, 0.08) 0%,
+        rgba(188, 167, 122, 0) 28%
+      ),
+      linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--oomol-bg-base) 96%, black 4%) 0%,
+        var(--oomol-bg-base) 100%
+      );
+  }
+
+  .stepCard,
+  .cloudCard,
+  .terminalPanel,
+  .mediaPanel,
+  .agentMediaCard {
+    border-color: color-mix(
+      in srgb,
+      var(--oomol-border-default) 72%,
+      var(--oomol-divider)
+    );
+    background: color-mix(
+      in srgb,
+      var(--oomol-bg-elevated) 86%,
+      var(--oomol-bg-container) 14%
+    );
+  }
+
+  .videoCardMeta {
+    border-top-color: color-mix(
+      in srgb,
+      var(--oomol-border-default) 68%,
+      var(--oomol-divider)
+    );
+    background: color-mix(
+      in srgb,
+      var(--oomol-bg-elevated) 86%,
+      var(--oomol-bg-container) 14%
+    );
+  }
+
+  .videoCardInner {
+    background:
+      radial-gradient(
+        ellipse 70% 50% at 50% 40%,
+        rgba(132, 138, 208, 0.08) 0%,
+        transparent 70%
+      ),
+      linear-gradient(
+        180deg,
+        color-mix(
+            in srgb,
+            var(--oomol-bg-container) 82%,
+            var(--oomol-bg-spotlight) 18%
+          )
+          0%,
+        color-mix(in srgb, var(--oomol-bg-elevated) 88%, black 12%) 100%
+      );
+  }
+
+  .videoCardMedia {
+    background:
+      radial-gradient(
+        ellipse 70% 50% at 50% 40%,
+        rgba(132, 138, 208, 0.08) 0%,
+        transparent 70%
+      ),
+      linear-gradient(
+        180deg,
+        color-mix(
+            in srgb,
+            var(--oomol-bg-container) 82%,
+            var(--oomol-bg-spotlight) 18%
+          )
+          0%,
+        color-mix(in srgb, var(--oomol-bg-elevated) 88%, black 12%) 100%
+      );
+  }
+
+  .imageCardMedia {
+    background: color-mix(
+      in srgb,
+      var(--oomol-bg-container) 72%,
+      var(--oomol-bg-elevated) 28%
+    );
+  }
+
+  .videoCardPlay {
+    background: rgba(255, 255, 255, 0.88);
+  }
+
+  .inlineNote {
+    border-color: color-mix(
+      in srgb,
+      var(--oomol-primary) 22%,
+      var(--oomol-divider)
+    );
+    background: color-mix(
+      in srgb,
+      var(--oomol-bg-elevated) 78%,
+      var(--oomol-primary-bg) 22%
+    );
+    color: color-mix(in srgb, var(--oomol-text-secondary) 92%, white 8%);
+  }
+
+  .cloudMetaPill {
+    border-color: color-mix(
+      in srgb,
+      var(--oomol-border-default) 72%,
+      var(--oomol-divider)
+    );
+    background: color-mix(
+      in srgb,
+      var(--oomol-bg-elevated) 82%,
+      var(--oomol-bg-container) 18%
+    );
+  }
+
+  .placeholderCard {
+    background:
+      linear-gradient(rgba(188, 194, 224, 0.07) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(188, 194, 224, 0.07) 1px, transparent 1px),
+      linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--oomol-bg-elevated) 88%, black 12%) 0%,
+        color-mix(in srgb, var(--oomol-bg-container) 82%, black 18%) 100%
+      );
+    background-size:
+      3.25rem 3.25rem,
+      3.25rem 3.25rem,
+      auto;
+  }
+
+  .ctaInner {
+    border-color: color-mix(
+      in srgb,
+      var(--oomol-primary-border) 44%,
+      var(--oomol-divider)
+    );
+    background:
+      radial-gradient(
+        circle at top left,
+        rgba(132, 138, 208, 0.16) 0%,
+        rgba(132, 138, 208, 0) 34%
+      ),
+      linear-gradient(
+        180deg,
+        color-mix(
+            in srgb,
+            var(--oomol-bg-container) 82%,
+            var(--oomol-bg-spotlight) 18%
+          )
+          0%,
+        color-mix(in srgb, var(--oomol-bg-elevated) 88%, black 12%) 100%
+      );
+  }
+}
diff --git a/src/components/CloudPagePainPoints/index.tsx b/src/components/CloudPagePainPoints/index.tsx
new file mode 100644
index 0000000..dfb504b
--- /dev/null
+++ b/src/components/CloudPagePainPoints/index.tsx
@@ -0,0 +1,110 @@
+import styles from "./styles.module.scss";
+
+import type { DocusaurusContext } from "@docusaurus/types";
+
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import React from "react";
+
+const zhCopy = {
+  badge: "为什么要上云",
+  title: "你写的能力，不该在交付时失控",
+  card1: {
+    title: "本地执行 = 代码泄露",
+    description:
+      "现在 Codex、Claude Code 要调用你的能力，就得把代码拉到本地跑。你的算法、商业逻辑、调用链路，全部暴露给使用方。",
+    solution:
+      "Cloud Skill 让能力在云端执行，用户只调用接口，代码始终在你手里。",
+  },
+  card2: {
+    title: "想交付一个 Skill，却要搭一整套后端",
+    description:
+      "服务器、扩缩容、计费系统、订阅管理、Secrets 配置、使用数据……写核心逻辑只占 20%，剩下 80% 都在搭基础设施。",
+    solution: "Cloud 把运行时、订阅、配置和数据全部承接，你只管写核心逻辑。",
+  },
+};
+
+const enCopy = {
+  badge: "Why go cloud",
+  title: "Your code shouldn't leak when you deliver it",
+  card1: {
+    title: "Local execution = code exposure",
+    description:
+      "Today, when Codex or Claude Code calls your skill, it pulls the code to local and runs it there. Your algorithms, business logic, and call chains are fully exposed to the consumer.",
+    solution:
+      "A cloud skill runs in the cloud. Users call the interface; your code stays with you.",
+  },
+  card2: {
+    title: "You just want to deliver a skill, not build an entire backend",
+    description:
+      "Servers, auto-scaling, billing, subscription management, secrets, usage analytics… Writing the core logic is 20% of the work. The other 80% is delivery infrastructure.",
+    solution:
+      "Cloud handles runtime, subscriptions, configuration, and data. You just write the logic.",
+  },
+};
+
+export default function CloudPagePainPoints() {
+  const { i18n } = useDocusaurusContext() as unknown as DocusaurusContext & {
+    i18n: { currentLocale: string };
+  };
+  const copy = i18n.currentLocale === "zh-CN" ? zhCopy : enCopy;
+
+  return (
+    <section className={styles.section}>
+      <div className={styles.container}>
+        <div className={styles.header}>
+          <div className={styles.badge}>{copy.badge}</div>
+          <h2 className={styles.title}>{copy.title}</h2>
+        </div>
+
+        <div className={styles.grid}>
+          <article className={styles.card}>
+            <div className={styles.cardIcon}>
+              <svg
+                width="22"
+                height="22"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
+                <path d="M7 11V7a5 5 0 0 1 9.9-1" />
+              </svg>
+            </div>
+            <h3 className={styles.cardTitle}>{copy.card1.title}</h3>
+            <p className={styles.cardDescription}>{copy.card1.description}</p>
+            <div className={styles.solution}>
+              <p className={styles.solutionText}>{copy.card1.solution}</p>
+            </div>
+          </article>
+
+          <article className={styles.card}>
+            <div className={styles.cardIcon}>
+              <svg
+                width="22"
+                height="22"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />
+                <polyline points="3.27 6.96 12 12.01 20.73 6.96" />
+                <line x1="12" y1="22.08" x2="12" y2="12" />
+              </svg>
+            </div>
+            <h3 className={styles.cardTitle}>{copy.card2.title}</h3>
+            <p className={styles.cardDescription}>{copy.card2.description}</p>
+            <div className={styles.solution}>
+              <p className={styles.solutionText}>{copy.card2.solution}</p>
+            </div>
+          </article>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/CloudPagePainPoints/styles.module.scss b/src/components/CloudPagePainPoints/styles.module.scss
new file mode 100644
index 0000000..127f3c1
--- /dev/null
+++ b/src/components/CloudPagePainPoints/styles.module.scss
@@ -0,0 +1,224 @@
+@use "../../css/custom.scss" as *;
+
+.section {
+  padding: clamp(4rem, 8vw, 6rem) 0;
+  position: relative;
+}
+
+.container {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 0 24px;
+  display: grid;
+  gap: clamp(1.6rem, 3.5vw, 2.4rem);
+}
+
+.header {
+  display: grid;
+  gap: 0.8rem;
+  text-align: center;
+  justify-items: center;
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.55rem;
+  font-size: 0.74rem;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--oomol-text-secondary);
+
+  &::before {
+    content: "";
+    width: 0.75rem;
+    height: 1px;
+    background: var(--oomol-primary);
+  }
+}
+
+.title {
+  margin: 0;
+  max-width: 20ch;
+  font-family: var(--oomol-font-display);
+  font-size: clamp(2.3rem, 4.2vw, 3.6rem);
+  line-height: 1.08;
+  letter-spacing: -0.04em;
+  color: var(--oomol-text-primary);
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1.1rem;
+  max-width: 960px;
+  margin: 0 auto;
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  gap: 0.9rem;
+  padding: 1.6rem 1.5rem 1.8rem;
+  border: 1px solid var(--oomol-divider);
+  border-radius: 1.7rem;
+  background: var(--oomol-surface-float);
+  box-shadow: var(--oomol-shadow-sm);
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 1.4rem;
+    right: 1.4rem;
+    height: 2px;
+    border-radius: 999px;
+    background: linear-gradient(
+      90deg,
+      color-mix(in srgb, var(--oomol-text-secondary) 50%, transparent) 0%,
+      color-mix(in srgb, var(--oomol-text-secondary) 10%, transparent) 100%
+    );
+  }
+}
+
+.cardIcon {
+  width: 2.6rem;
+  height: 2.6rem;
+  display: grid;
+  place-items: center;
+  border-radius: 0.75rem;
+  background: color-mix(
+    in srgb,
+    var(--oomol-primary-bg) 50%,
+    var(--oomol-bg-elevated) 50%
+  );
+  color: var(--oomol-primary);
+}
+
+.cardTitle {
+  margin: 0;
+  font-size: 1.4rem;
+  line-height: 1.28;
+  font-weight: 650;
+  color: var(--oomol-text-primary);
+}
+
+.cardDescription {
+  margin: 0;
+  font-size: 1rem;
+  line-height: 1.75;
+  color: var(--oomol-text-secondary);
+}
+
+.solution {
+  margin-top: 0.25rem;
+  padding-left: 0.9rem;
+  border-left: 2px solid var(--oomol-primary);
+}
+
+.solutionText {
+  margin: 0;
+  font-size: 0.95rem;
+  line-height: 1.7;
+  color: var(--oomol-primary-text);
+  font-weight: 500;
+}
+
+/* ── Dark mode ── */
+
+[data-theme="dark"] {
+  .card {
+    border-color: color-mix(
+      in srgb,
+      var(--oomol-border-default) 72%,
+      var(--oomol-divider)
+    );
+    background: linear-gradient(
+      180deg,
+      color-mix(
+          in srgb,
+          var(--oomol-bg-container) 84%,
+          var(--oomol-bg-elevated) 16%
+        )
+        0%,
+      color-mix(in srgb, var(--oomol-bg-elevated) 88%, black 12%) 100%
+    );
+    box-shadow: var(--oomol-shadow-md);
+  }
+
+  .cardIcon {
+    background: color-mix(
+      in srgb,
+      var(--oomol-primary-bg) 40%,
+      var(--oomol-bg-container) 60%
+    );
+  }
+
+  .solution {
+    border-left-color: color-mix(
+      in srgb,
+      var(--oomol-primary) 72%,
+      var(--oomol-primary-border) 28%
+    );
+  }
+}
+
+/* ── English overrides ── */
+
+:global(html[lang="en"]) .title {
+  max-width: 28ch;
+  font-size: clamp(2.1rem, 3.8vw, 3.2rem);
+  line-height: 1.1;
+}
+
+:global(html[lang="en"]) .cardTitle {
+  font-size: 1.28rem;
+  line-height: 1.32;
+}
+
+/* ── Mobile ── */
+
+@media (max-width: 768px) {
+  .section {
+    padding: 2.8rem 0 2.4rem;
+  }
+
+  .container {
+    padding: 0 20px;
+    gap: 1.2rem;
+  }
+
+  .title {
+    max-width: 100%;
+    font-size: clamp(2rem, 8.5vw, 2.8rem);
+    line-height: 1.1;
+    letter-spacing: -0.03em;
+  }
+
+  .grid {
+    grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+
+  .card {
+    padding: 1.2rem 1.15rem 1.4rem;
+    border-radius: 1.35rem;
+    gap: 0.8rem;
+  }
+
+  .cardTitle {
+    font-size: 1.2rem;
+  }
+
+  .cardDescription {
+    font-size: 0.94rem;
+    line-height: 1.65;
+  }
+
+  .solutionText {
+    font-size: 0.9rem;
+  }
+}
diff --git a/src/components/DownloadButton/index.tsx b/src/components/DownloadButton/index.tsx
index 286b112..f73e873 100644
--- a/src/components/DownloadButton/index.tsx
+++ b/src/components/DownloadButton/index.tsx
@@ -30,6 +30,14 @@ export interface DownloadButtonProps {
   centered?: boolean;
   showNote?: boolean;
   noteTone?: "default" | "inverse";
+  texts?: Partial<{
+    macos: string;
+    macosStable: string;
+    macosNote: string;
+    windows: string;
+    windowsStable: string;
+    windowsSubtitle: string;
+  }>;
 }
 
 export const DownloadButton = ({
@@ -37,6 +45,7 @@ export const DownloadButton = ({
   centered,
   showNote = true,
   noteTone = "default",
+  texts,
 }: DownloadButtonProps) => {
   const downloadIcon = (
     <span className={styles.downloadIconWrap} aria-hidden="true">
@@ -57,6 +66,36 @@ export const DownloadButton = ({
     noteTone === "inverse"
       ? `${styles.windowsSubtitle} ${styles.inverseNote}`
       : styles.windowsSubtitle;
+  const macosLabel =
+    texts?.macos ??
+    translate({
+      message: "HOME.FirstScreen.download-macos",
+    });
+  const macosStableLabel =
+    texts?.macosStable ??
+    translate({
+      message: "HOME.FirstScreen.download-macos-stable",
+    });
+  const macosNote =
+    texts?.macosNote ??
+    translate({
+      message: "HOME.FirstScreen.download-macos-chip-note",
+    });
+  const windowsLabel =
+    texts?.windows ??
+    translate({
+      message: "HOME.FirstScreen.download-windows",
+    });
+  const windowsStableLabel =
+    texts?.windowsStable ??
+    translate({
+      message: "HOME.FirstScreen.download-windows-stable",
+    });
+  const windowsSubtitle =
+    texts?.windowsSubtitle ??
+    translate({
+      message: "HOME.FirstScreen.download-windows-subtitle",
+    });
 
   return (
     <BrowserOnly
@@ -64,19 +103,9 @@ export const DownloadButton = ({
         <div className={containerClassName}>
           <Button className={styles.download}>
             {downloadIcon}
-            {translate({
-              message: stableTag
-                ? "HOME.FirstScreen.download-macos-stable"
-                : "HOME.FirstScreen.download-macos",
-            })}
+            {stableTag ? macosStableLabel : macosLabel}
           </Button>
-          {showNote ? (
-            <span className={noteClassName}>
-              {translate({
-                message: "HOME.FirstScreen.download-macos-chip-note",
-              })}
-            </span>
-          ) : null}
+          {showNote ? <span className={noteClassName}>{macosNote}</span> : null}
         </div>
       }
     >
@@ -94,19 +123,11 @@ export const DownloadButton = ({
                 >
                   <a href={DownloadUrl.Stable.MacOS.AppleSilicon}>
                     {downloadIcon}
-                    {translate({
-                      message: stableTag
-                        ? "HOME.FirstScreen.download-macos-stable"
-                        : "HOME.FirstScreen.download-macos",
-                    })}
+                    {stableTag ? macosStableLabel : macosLabel}
                   </a>
                 </Button>
                 {showNote ? (
-                  <span className={noteClassName}>
-                    {translate({
-                      message: "HOME.FirstScreen.download-macos-chip-note",
-                    })}
-                  </span>
+                  <span className={noteClassName}>{macosNote}</span>
                 ) : null}
               </div>
             ) : (
@@ -120,18 +141,12 @@ export const DownloadButton = ({
                 >
                   <a href={DownloadUrl.Stable.Windows.x64}>
                     {downloadIcon}
-                    {translate({
-                      message: stableTag
-                        ? "HOME.FirstScreen.download-windows-stable"
-                        : "HOME.FirstScreen.download-windows",
-                    })}
+                    {stableTag ? windowsStableLabel : windowsLabel}
                   </a>
                 </Button>
                 {showNote ? (
                   <span className={windowsSubtitleClassName}>
-                    {translate({
-                      message: "HOME.FirstScreen.download-windows-subtitle",
-                    })}
+                    {windowsSubtitle}
                   </span>
                 ) : null}
               </div>
diff --git a/src/components/GetStartedPrompt/index.tsx b/src/components/GetStartedPrompt/index.tsx
index 12a96e5..377e536 100644
--- a/src/components/GetStartedPrompt/index.tsx
+++ b/src/components/GetStartedPrompt/index.tsx
@@ -22,7 +22,10 @@ export const GetStartedPrompt = () => {
           </span>
           <div className={styles.actions}>
             <DownloadButton />
-            <Link to="/docs/cloud-services/cli" className={styles.secondaryLink}>
+            <Link
+              to="/docs/cloud-services/cli"
+              className={styles.secondaryLink}
+            >
               {translate({ message: "HOME.Downloads.cli.action.guide" })}
             </Link>
           </div>
diff --git a/src/components/HomePagePricing/style.module.scss b/src/components/HomePagePricing/style.module.scss
index 2d4afca..ee3695a 100644
--- a/src/components/HomePagePricing/style.module.scss
+++ b/src/components/HomePagePricing/style.module.scss
@@ -180,7 +180,11 @@
   border-radius: 8px;
   color: var(--oomol-text-primary);
   cursor: pointer;
-  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
+  transition:
+    background-color 0.3s ease,
+    color 0.3s ease,
+    border-color 0.3s ease,
+    transform 0.3s ease;
 
   &:hover {
     background-color: var(--oomol-primary);
diff --git a/src/components/HomepageBrandBreak/index.tsx b/src/components/HomepageBrandBreak/index.tsx
index e434703..ca602eb 100644
--- a/src/components/HomepageBrandBreak/index.tsx
+++ b/src/components/HomepageBrandBreak/index.tsx
@@ -1,8 +1,8 @@
 import styles from "./styles.module.scss";
 
-import { translate } from "@docusaurus/Translate";
-import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import type { DocusaurusContext } from "@docusaurus/types";
+
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import React from "react";
 
 export default function HomepageBrandBreak() {
@@ -25,7 +25,16 @@ export default function HomepageBrandBreak() {
         <div className={styles.showcaseRow}>
           <div className={styles.showcaseCard}>
             <div className={styles.showcaseCardIcon}>
-              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <svg
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
                 <polyline points="16 18 22 12 16 6" />
                 <polyline points="8 6 2 12 8 18" />
               </svg>
@@ -35,14 +44,32 @@ export default function HomepageBrandBreak() {
             </span>
           </div>
           <div className={styles.showcaseArrow} aria-hidden="true">
-            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <svg
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
               <line x1="5" y1="12" x2="19" y2="12" />
               <polyline points="12 5 19 12 12 19" />
             </svg>
           </div>
           <div className={styles.showcaseCard}>
             <div className={styles.showcaseCardIcon}>
-              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <svg
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
                 <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
               </svg>
             </div>
@@ -51,14 +78,26 @@ export default function HomepageBrandBreak() {
             </span>
           </div>
           <div className={styles.showcaseArrow} aria-hidden="true">
-            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <svg
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
               <line x1="5" y1="12" x2="19" y2="12" />
               <polyline points="12 5 19 12 12 19" />
             </svg>
           </div>
           <div className={styles.showcaseCard}>
             <div className={styles.showcaseCardIcon}>
-              <i className={`${styles.showcaseGlyph} i-lucide-bot`} aria-hidden="true" />
+              <i
+                className={`${styles.showcaseGlyph} i-lucide-bot`}
+                aria-hidden="true"
+              />
             </div>
             <span className={styles.showcaseCardLabel}>
               {isZh ? "oo-cli 使用" : "Use via oo-cli"}
diff --git a/src/components/HomepageBrandBreak/styles.module.scss b/src/components/HomepageBrandBreak/styles.module.scss
index d542c71..20f0453 100644
--- a/src/components/HomepageBrandBreak/styles.module.scss
+++ b/src/components/HomepageBrandBreak/styles.module.scss
@@ -24,7 +24,11 @@
       linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
       linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
     background-size: 6rem 6rem;
-    mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, rgba(0, 0, 0, 0.5), transparent 70%);
+    mask-image: radial-gradient(
+      ellipse 70% 70% at 50% 50%,
+      rgba(0, 0, 0, 0.5),
+      transparent 70%
+    );
     pointer-events: none;
   }
 }
@@ -153,8 +157,14 @@
       ),
       linear-gradient(
         135deg,
-        color-mix(in srgb, var(--oomol-primary) 72%, var(--oomol-bg-base) 28%) 0%,
-        color-mix(in srgb, var(--oomol-primary-active) 68%, var(--oomol-bg-base) 32%) 100%
+        color-mix(in srgb, var(--oomol-primary) 72%, var(--oomol-bg-base) 28%)
+          0%,
+        color-mix(
+            in srgb,
+            var(--oomol-primary-active) 68%,
+            var(--oomol-bg-base) 32%
+          )
+          100%
       );
   }
 }
diff --git a/src/components/HomepageCodexBlocks/index.tsx b/src/components/HomepageCodexBlocks/index.tsx
index e0aaf7f..3442348 100644
--- a/src/components/HomepageCodexBlocks/index.tsx
+++ b/src/components/HomepageCodexBlocks/index.tsx
@@ -38,7 +38,10 @@ export default function HomepageCodexBlocks() {
             {translate({ message: "HOME.CodexBlocks.subtitle" })}
           </p>
           <div className={styles.headerActions}>
-            <Link to="/docs/cloud-services/cli" className={styles.primaryAction}>
+            <Link
+              to="/docs/cloud-services/cli"
+              className={styles.primaryAction}
+            >
               {translate({ message: "HOME.CodexBlocks.action.primary" })}
             </Link>
             <Link to="/cloud" className={styles.secondaryAction}>
@@ -85,7 +88,9 @@ export default function HomepageCodexBlocks() {
                   </div>
                 </div>
                 <div className={styles.videoMeta}>
-                  <div className={styles.videoMetaTitle}>{item.previewTitle}</div>
+                  <div className={styles.videoMetaTitle}>
+                    {item.previewTitle}
+                  </div>
                   <p className={styles.videoMetaNote}>{item.previewNote}</p>
                 </div>
               </div>
diff --git a/src/components/HomepageCodexBlocks/styles.module.scss b/src/components/HomepageCodexBlocks/styles.module.scss
index 6d14357..51d9f53 100644
--- a/src/components/HomepageCodexBlocks/styles.module.scss
+++ b/src/components/HomepageCodexBlocks/styles.module.scss
@@ -96,7 +96,8 @@
 
 .primaryAction {
   color: var(--oomol-white);
-  border: 1px solid color-mix(in srgb, var(--oomol-primary-active) 64%, black 12%);
+  border: 1px solid
+    color-mix(in srgb, var(--oomol-primary-active) 64%, black 12%);
   background: linear-gradient(
     180deg,
     color-mix(in srgb, var(--oomol-primary) 78%, white 14%) 0%,
@@ -230,7 +231,11 @@
       rgba(123, 213, 184, 0.16) 0%,
       rgba(123, 213, 184, 0) 28%
     ),
-    linear-gradient(180deg, rgba(39, 45, 63, 0.92) 0%, rgba(28, 34, 48, 0.98) 100%);
+    linear-gradient(
+      180deg,
+      rgba(39, 45, 63, 0.92) 0%,
+      rgba(28, 34, 48, 0.98) 100%
+    );
 }
 
 .videoTracks {
diff --git a/src/components/HomepageDownloads/styles.module.scss b/src/components/HomepageDownloads/styles.module.scss
index 712dfe8..5af028d 100644
--- a/src/components/HomepageDownloads/styles.module.scss
+++ b/src/components/HomepageDownloads/styles.module.scss
@@ -47,7 +47,11 @@
   border-radius: 8px;
   color: var(--oomol-text-primary);
   cursor: pointer;
-  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
+  transition:
+    background-color 0.3s ease,
+    color 0.3s ease,
+    border-color 0.3s ease,
+    transform 0.3s ease;
 
   &:hover {
     background-color: var(--oomol-primary);
diff --git a/src/components/HomepageLifecycle/styles.module.scss b/src/components/HomepageLifecycle/styles.module.scss
index 4290610..1cb662a 100644
--- a/src/components/HomepageLifecycle/styles.module.scss
+++ b/src/components/HomepageLifecycle/styles.module.scss
@@ -173,7 +173,9 @@
   font-weight: 700;
   background: rgba(var(--ifm-color-primary-rgb), 0.1);
   color: var(--ifm-color-primary);
-  transition: background-color 0.3s ease, color 0.3s ease;
+  transition:
+    background-color 0.3s ease,
+    color 0.3s ease;
 
   @media (max-width: 768px) {
     width: 40px;
@@ -189,7 +191,9 @@
   background: var(--ifm-color-emphasis-300);
   opacity: 0.3;
   margin-top: 6px;
-  transition: background-color 0.3s ease, opacity 0.3s ease;
+  transition:
+    background-color 0.3s ease,
+    opacity 0.3s ease;
 }
 
 .stepInfo {
@@ -270,7 +274,10 @@
   align-items: center;
   justify-content: center;
   overflow: hidden;
-  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
+  transition:
+    background-color 0.3s ease,
+    border-color 0.3s ease,
+    box-shadow 0.3s ease;
   border: 1px solid var(--ifm-color-emphasis-200);
 
   @media (max-width: 996px) {
diff --git a/src/components/HomepageLinearFlow/styles.module.scss b/src/components/HomepageLinearFlow/styles.module.scss
index 1f1dd32..05d8ea5 100644
--- a/src/components/HomepageLinearFlow/styles.module.scss
+++ b/src/components/HomepageLinearFlow/styles.module.scss
@@ -777,10 +777,10 @@
       linear-gradient(
         180deg,
         color-mix(
-          in srgb,
-          var(--oomol-bg-container) 82%,
-          var(--oomol-bg-spotlight) 18%
-        )
+            in srgb,
+            var(--oomol-bg-container) 82%,
+            var(--oomol-bg-spotlight) 18%
+          )
           0%,
         color-mix(in srgb, var(--oomol-bg-elevated) 88%, black 12%) 100%
       );
diff --git a/src/components/HomepagePainPoints/styles.module.scss b/src/components/HomepagePainPoints/styles.module.scss
index 208259b..127f3c1 100644
--- a/src/components/HomepagePainPoints/styles.module.scss
+++ b/src/components/HomepagePainPoints/styles.module.scss
@@ -90,7 +90,11 @@
   display: grid;
   place-items: center;
   border-radius: 0.75rem;
-  background: color-mix(in srgb, var(--oomol-primary-bg) 50%, var(--oomol-bg-elevated) 50%);
+  background: color-mix(
+    in srgb,
+    var(--oomol-primary-bg) 50%,
+    var(--oomol-bg-elevated) 50%
+  );
   color: var(--oomol-primary);
 }
 
@@ -146,7 +150,11 @@
   }
 
   .cardIcon {
-    background: color-mix(in srgb, var(--oomol-primary-bg) 40%, var(--oomol-bg-container) 60%);
+    background: color-mix(
+      in srgb,
+      var(--oomol-primary-bg) 40%,
+      var(--oomol-bg-container) 60%
+    );
   }
 
   .solution {
diff --git a/src/components/HomepagePdfCraftShowcase/styles.module.scss b/src/components/HomepagePdfCraftShowcase/styles.module.scss
index 3746c41..fd06fa1 100644
--- a/src/components/HomepagePdfCraftShowcase/styles.module.scss
+++ b/src/components/HomepagePdfCraftShowcase/styles.module.scss
@@ -131,7 +131,9 @@
   color: var(--oomol-text-primary);
   font-size: 14px;
   font-weight: 600;
-  transition: background-color 0.2s ease, transform 0.2s ease;
+  transition:
+    background-color 0.2s ease,
+    transform 0.2s ease;
 
   &:hover {
     background: var(--oomol-bg-muted);
@@ -191,7 +193,9 @@
   border: 2px solid var(--oomol-border-subtle);
   border-radius: 12px;
   padding: 24px;
-  transition: border-color 0.3s ease, box-shadow 0.3s ease;
+  transition:
+    border-color 0.3s ease,
+    box-shadow 0.3s ease;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -242,7 +246,9 @@
   padding: 6px 16px;
   border-radius: 20px;
   font-size: 13px;
-  transition: background-color 0.2s ease, border-color 0.2s ease;
+  transition:
+    background-color 0.2s ease,
+    border-color 0.2s ease;
 
   &:hover {
     background: var(--oomol-primary-hover);
@@ -257,7 +263,9 @@
   padding: 6px 16px;
   border-radius: 20px;
   font-size: 13px;
-  transition: background-color 0.2s ease, border-color 0.2s ease;
+  transition:
+    background-color 0.2s ease,
+    border-color 0.2s ease;
 
   &:hover {
     background: var(--oomol-bg-subtle);
@@ -339,7 +347,10 @@
   font-size: 14px;
   font-weight: 500;
   text-decoration: none;
-  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
+  transition:
+    background-color 0.2s ease,
+    color 0.2s ease,
+    border-color 0.2s ease;
   white-space: nowrap;
   cursor: pointer;
   margin: 0 !important;
diff --git a/src/components/StudioDetailContent/styles.module.scss b/src/components/StudioDetailContent/styles.module.scss
index 483ce83..4b48205 100644
--- a/src/components/StudioDetailContent/styles.module.scss
+++ b/src/components/StudioDetailContent/styles.module.scss
@@ -118,7 +118,8 @@
 
 .homePrimaryAction {
   color: var(--oomol-white);
-  border: 1px solid color-mix(in srgb, var(--oomol-primary-active) 64%, black 12%);
+  border: 1px solid
+    color-mix(in srgb, var(--oomol-primary-active) 64%, black 12%);
   background: linear-gradient(
     180deg,
     color-mix(in srgb, var(--oomol-primary) 78%, white 14%) 0%,
diff --git a/src/components/StudioPdfCraftCase/styles.module.scss b/src/components/StudioPdfCraftCase/styles.module.scss
index 469bd71..50828ec 100644
--- a/src/components/StudioPdfCraftCase/styles.module.scss
+++ b/src/components/StudioPdfCraftCase/styles.module.scss
@@ -172,7 +172,10 @@
   background: var(--oomol-bg-subtle);
   border: 2px solid var(--oomol-border-subtle);
   border-radius: 12px;
-  transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
+  transition:
+    border-color 0.3s ease,
+    background-color 0.3s ease,
+    box-shadow 0.3s ease;
 
   &:hover {
     border-color: var(--oomol-primary);
diff --git a/src/pages/app/index.tsx b/src/pages/app/index.tsx
index 381b4d2..f9dca47 100644
--- a/src/pages/app/index.tsx
+++ b/src/pages/app/index.tsx
@@ -1,9 +1,10 @@
 import styles from "./styles.module.scss";
 
 import type { DocusaurusContext } from "@docusaurus/types";
-import clsx from "clsx";
+
 import useBaseUrl from "@docusaurus/useBaseUrl";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import cx from "clsx";
 import { memo, useEffect, useRef, useState } from "react";
 
 import Layout from "../../theme/Layout";
@@ -507,7 +508,6 @@ export default function AppPage() {
     "https://apps.apple.com/cn/app/%E6%82%9F%E5%A2%A8-ai-oomol-%E5%AF%B9%E8%AF%9D%E5%BC%8F%E4%BA%91%E5%87%BD%E6%95%B0/id6749377154";
   const rechargeHref = "https://console.oomol.com/billing/token-recharge";
 
-  const catPng = useBaseUrl("/img/pages/app/cat.png");
   const nanoBananaPng = useBaseUrl("/img/pages/app/nano-banana.png");
 
   const modelFeatureCards: readonly ModelFeatureCard[] = [
@@ -620,7 +620,7 @@ export default function AppPage() {
 
             <div className={styles.heroActions}>
               <a
-                className={clsx(
+                className={cx(
                   styles.heroActionButton,
                   styles.heroActionButtonPrimary
                 )}
@@ -655,9 +655,9 @@ export default function AppPage() {
 
         <section
           id="models"
-          className={clsx(styles.section, styles.modelsSection)}
+          className={cx(styles.section, styles.modelsSection)}
         >
-          <div className={clsx(styles.sectionIntro, styles.modelsIntro)}>
+          <div className={cx(styles.sectionIntro, styles.modelsIntro)}>
             <h2>{copy.models.title}</h2>
             <p>{copy.models.description}</p>
           </div>
@@ -702,7 +702,7 @@ export default function AppPage() {
         </section>
 
         <section id="problems" className={styles.section}>
-          <div className={clsx(styles.sectionIntro, styles.problemsIntro)}>
+          <div className={cx(styles.sectionIntro, styles.problemsIntro)}>
             <h2 className={styles.problemsTitle}>
               {copy.problems.titleLine1}
               <br />
@@ -722,7 +722,7 @@ export default function AppPage() {
 
         <section
           id="workspace"
-          className={clsx(styles.section, styles.workspaceSection)}
+          className={cx(styles.section, styles.workspaceSection)}
         >
           <div className={styles.solutionList}>
             {workflowSteps.map(step => (
@@ -746,7 +746,7 @@ export default function AppPage() {
         </section>
 
         <section id="outputs" className={styles.section}>
-          <div className={clsx(styles.sectionIntro, styles.outputsIntro)}>
+          <div className={cx(styles.sectionIntro, styles.outputsIntro)}>
             <h2>{copy.outputs.title}</h2>
             <p>{copy.outputs.description}</p>
           </div>
@@ -764,9 +764,9 @@ export default function AppPage() {
 
         <section
           id="pricing"
-          className={clsx(styles.section, styles.pricingSection)}
+          className={cx(styles.section, styles.pricingSection)}
         >
-          <div className={clsx(styles.sectionIntro, styles.pricingIntro)}>
+          <div className={cx(styles.sectionIntro, styles.pricingIntro)}>
             <h2>{copy.pricing.title}</h2>
             <p>{copy.pricing.description}</p>
           </div>
@@ -798,7 +798,7 @@ export default function AppPage() {
             {creditPacks.map(pack => (
               <article
                 key={pack.name}
-                className={clsx(
+                className={cx(
                   styles.pricingCard,
                   pack.featured && styles.pricingCardFeatured
                 )}
@@ -835,7 +835,7 @@ export default function AppPage() {
                 </div>
 
                 <a
-                  className={clsx(
+                  className={cx(
                     styles.cardAction,
                     pack.featured && styles.cardActionPrimary
                   )}
@@ -856,9 +856,9 @@ export default function AppPage() {
 
         <section
           id="downloads"
-          className={clsx(styles.section, styles.entrySection)}
+          className={cx(styles.section, styles.entrySection)}
         >
-          <div className={clsx(styles.sectionIntro, styles.downloadsIntro)}>
+          <div className={cx(styles.sectionIntro, styles.downloadsIntro)}>
             <h2>{copy.downloads.title}</h2>
           </div>
 
@@ -871,7 +871,7 @@ export default function AppPage() {
                 </div>
                 <p>{item.description}</p>
                 <a
-                  className={clsx(
+                  className={cx(
                     styles.cardAction,
                     item.kind === "web" && styles.cardActionPrimary
                   )}
@@ -885,7 +885,6 @@ export default function AppPage() {
             ))}
           </div>
         </section>
-
       </main>
     </Layout>
   );
diff --git a/src/pages/app/styles.module.scss b/src/pages/app/styles.module.scss
index b62c2d9..2dc43c8 100644
--- a/src/pages/app/styles.module.scss
+++ b/src/pages/app/styles.module.scss
@@ -1081,5 +1081,4 @@ video.outputsShowcaseImage {
   .painCard {
     min-height: 0;
   }
-
 }
diff --git a/src/pages/cloud/index.tsx b/src/pages/cloud/index.tsx
index 12159cb..e79bb7c 100644
--- a/src/pages/cloud/index.tsx
+++ b/src/pages/cloud/index.tsx
@@ -1,56 +1,11 @@
-import styles from "./styles.module.scss";
-
 import Head from "@docusaurus/Head";
-import Link from "@docusaurus/Link";
 import { translate } from "@docusaurus/Translate";
-import useBaseUrl from "@docusaurus/useBaseUrl";
-import ThemedImage from "@theme/ThemedImage";
+import CloudPageIntro from "@site/src/components/CloudPageIntro";
 import React from "react";
 
 import Layout from "../../theme/Layout";
 
-const deliveryModes = [
-  {
-    index: "01",
-    titleKey: "CLOUD.modes.serverless.title",
-    descriptionKey: "CLOUD.modes.serverless.description",
-  },
-  {
-    index: "02",
-    titleKey: "CLOUD.modes.mcp.title",
-    descriptionKey: "CLOUD.modes.mcp.description",
-  },
-  {
-    index: "03",
-    titleKey: "CLOUD.modes.library.title",
-    descriptionKey: "CLOUD.modes.library.description",
-  },
-];
-
-const openSourceProjects = [
-  {
-    titleKey: "CLOUD.opensource.ovm.title",
-    descriptionKey: "CLOUD.opensource.ovm.description",
-  },
-  {
-    titleKey: "CLOUD.opensource.ovm-core.title",
-    descriptionKey: "CLOUD.opensource.ovm-core.description",
-  },
-  {
-    titleKey: "CLOUD.opensource.ovm-win.title",
-    descriptionKey: "CLOUD.opensource.ovm-win.description",
-  },
-  {
-    titleKey: "CLOUD.opensource.ovm-mac.title",
-    descriptionKey: "CLOUD.opensource.ovm-mac.description",
-  },
-];
-
 export default function CloudPage() {
-  const publishLight = useBaseUrl("/img/pages/home/publish-light.png");
-  const publishDark = useBaseUrl("/img/pages/home/publish-dark.png");
-  const cloudConsoleUrl = "https://console.oomol.com/cloud-function";
-
   return (
     <Layout>
       <Head>
@@ -60,196 +15,8 @@ export default function CloudPage() {
           content={translate({ message: "CLOUD.hero.description" })}
         />
       </Head>
-      <main className={styles.page}>
-        <section className={styles.hero}>
-          <div className={styles.heroContainer}>
-            <div className={styles.heroCopy}>
-              <div className={styles.kicker}>
-                {translate({ message: "CLOUD.hero.kicker" })}
-              </div>
-              <h1 className={styles.heroTitle}>
-                {translate({ message: "CLOUD.hero.title" })}
-              </h1>
-              <p className={styles.heroDescription}>
-                {translate({ message: "CLOUD.hero.description" })}
-              </p>
-              <p className={styles.heroNote}>
-                {translate({ message: "CLOUD.hero.note" })}
-              </p>
-
-              <div className={styles.stats}>
-                <div className={styles.stat}>
-                  <span className={styles.statValue}>
-                    {translate({ message: "CLOUD.hero.stat1" })}
-                  </span>
-                </div>
-                <div className={styles.stat}>
-                  <span className={styles.statValue}>
-                    {translate({ message: "CLOUD.hero.stat2" })}
-                  </span>
-                </div>
-                <div className={styles.stat}>
-                  <span className={styles.statValue}>
-                    {translate({ message: "CLOUD.hero.stat3" })}
-                  </span>
-                </div>
-              </div>
-
-              <div className={styles.actions}>
-                <Link to="/studio" className={styles.primaryAction}>
-                  {translate({ message: "CLOUD.hero.cta.start" })}
-                </Link>
-                <a
-                  href={cloudConsoleUrl}
-                  className={styles.secondaryAction}
-                  target="_blank"
-                  rel="noreferrer"
-                >
-                  {translate({ message: "CLOUD.hero.cta.console" })}
-                </a>
-              </div>
-            </div>
-
-            <div className={styles.heroVisual}>
-              <div className={styles.visualFrame}>
-                <ThemedImage
-                  sources={{
-                    light: publishLight,
-                    dark: publishDark,
-                  }}
-                  alt="Deploy blocks with OOMOL Cloud"
-                  className={styles.visualImage}
-                />
-              </div>
-            </div>
-          </div>
-        </section>
-
-        <section className={styles.narrativeSection}>
-          <div className={styles.sectionContainer}>
-            <div className={styles.sectionHeader}>
-              <div className={styles.sectionLabel}>
-                {translate({ message: "CLOUD.painPoints.subtitle" })}
-              </div>
-              <h2 className={styles.sectionTitle}>
-                {translate({ message: "CLOUD.painPoints.title" })}
-              </h2>
-            </div>
-            <p className={styles.sectionBody}>
-              {translate({ message: "CLOUD.painPoints.description" })}
-            </p>
-          </div>
-        </section>
-
-        <section className={styles.pricingSection}>
-          <div className={styles.sectionContainer}>
-            <div className={styles.pricingCard}>
-              <div className={styles.sectionLabel}>
-                {translate({ message: "CLOUD.pricing.kicker" })}
-              </div>
-              <h2 className={styles.sectionTitle}>
-                {translate({ message: "CLOUD.pricing.title" })}
-              </h2>
-              <p className={styles.sectionBody}>
-                {translate({ message: "CLOUD.pricing.description" })}
-              </p>
-              <Link to="/pricing" className={styles.inlineLink}>
-                {translate({ message: "CLOUD.pricing.cta" })}
-              </Link>
-            </div>
-          </div>
-        </section>
-
-        <section className={styles.deliverySection}>
-          <div className={styles.sectionContainer}>
-            <div className={styles.sectionHeader}>
-              <div className={styles.sectionLabel}>
-                {translate({ message: "CLOUD.solution.kicker" })}
-              </div>
-              <h2 className={styles.sectionTitle}>
-                {translate({ message: "CLOUD.solution.title" })}
-              </h2>
-              <p className={styles.sectionSubtitle}>
-                {translate({ message: "CLOUD.solution.subtitle" })}
-              </p>
-            </div>
-
-            <div className={styles.modeGrid}>
-              {deliveryModes.map(mode => (
-                <article key={mode.titleKey} className={styles.modeCard}>
-                  <div className={styles.modeIndex}>{mode.index}</div>
-                  <h3 className={styles.modeTitle}>
-                    {translate({ message: mode.titleKey })}
-                  </h3>
-                  <p className={styles.modeDescription}>
-                    {translate({ message: mode.descriptionKey })}
-                  </p>
-                </article>
-              ))}
-            </div>
-          </div>
-        </section>
-
-        <section className={styles.openSourceSection}>
-          <div className={styles.sectionContainer}>
-            <div className={styles.sectionHeader}>
-              <div className={styles.sectionLabel}>
-                {translate({ message: "CLOUD.opensource.projects.title" })}
-              </div>
-              <h2 className={styles.sectionTitle}>
-                {translate({ message: "CLOUD.opensource.title" })}
-              </h2>
-              <p className={styles.sectionSubtitle}>
-                {translate({ message: "CLOUD.opensource.subtitle" })}
-              </p>
-            </div>
-            <p className={styles.sectionBody}>
-              {translate({ message: "CLOUD.opensource.description" })}
-            </p>
-
-            <div className={styles.projectGrid}>
-              {openSourceProjects.map(project => (
-                <article
-                  key={project.titleKey}
-                  className={styles.projectCard}
-                >
-                  <h3 className={styles.projectTitle}>
-                    {translate({ message: project.titleKey })}
-                  </h3>
-                  <p className={styles.projectDescription}>
-                    {translate({ message: project.descriptionKey })}
-                  </p>
-                </article>
-              ))}
-            </div>
-          </div>
-        </section>
-
-        <section className={styles.ctaSection}>
-          <div className={styles.sectionContainer}>
-            <div className={styles.ctaCard}>
-              <h2 className={styles.ctaTitle}>
-                {translate({ message: "HOME.ProductComparison.title" })}
-              </h2>
-              <p className={styles.ctaDescription}>
-                {translate({ message: "HOME.ProductComparison.subtitle" })}
-              </p>
-              <div className={styles.actions}>
-                <Link to="/studio" className={styles.primaryAction}>
-                  {translate({ message: "CLOUD.cta.primary" })}
-                </Link>
-                <a
-                  href={cloudConsoleUrl}
-                  className={styles.secondaryAction}
-                  target="_blank"
-                  rel="noreferrer"
-                >
-                  {translate({ message: "CLOUD.cta.secondary" })}
-                </a>
-              </div>
-            </div>
-          </div>
-        </section>
+      <main>
+        <CloudPageIntro />
       </main>
     </Layout>
   );
diff --git a/src/pages/cloud/styles.module.scss b/src/pages/cloud/styles.module.scss
deleted file mode 100644
index 1ebdd05..0000000
--- a/src/pages/cloud/styles.module.scss
+++ /dev/null
@@ -1,433 +0,0 @@
-@use "../../css/custom.scss" as *;
-
-.page {
-  background:
-    radial-gradient(
-      circle at top left,
-      color-mix(in srgb, var(--oomol-primary) 16%, transparent) 0%,
-      transparent 34%
-    ),
-    linear-gradient(
-      180deg,
-      color-mix(in srgb, var(--oomol-bg-layout) 92%, white 8%) 0%,
-      var(--oomol-bg-base) 100%
-    );
-}
-
-.hero {
-  padding: clamp(5rem, 9vw, 7.5rem) 0 clamp(3rem, 6vw, 4.5rem);
-}
-
-.heroContainer,
-.sectionContainer {
-  width: min(1280px, calc(100% - 48px));
-  margin: 0 auto;
-}
-
-.heroContainer {
-  display: grid;
-  grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
-  gap: clamp(1.6rem, 4vw, 3.5rem);
-  align-items: center;
-}
-
-.heroCopy {
-  display: grid;
-  gap: 1.2rem;
-  max-width: 40rem;
-}
-
-.kicker,
-.sectionLabel {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.7rem;
-  width: fit-content;
-  font-size: 0.76rem;
-  font-weight: 700;
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
-  color: var(--oomol-text-secondary);
-
-  &::before {
-    content: "";
-    width: 0.8rem;
-    height: 1px;
-    background: var(--oomol-primary);
-  }
-}
-
-.heroTitle,
-.sectionTitle,
-.ctaTitle {
-  margin: 0;
-  font-family: var(--oomol-font-display);
-  letter-spacing: -0.045em;
-  color: var(--oomol-text-primary);
-}
-
-.heroTitle {
-  max-width: 10ch;
-  font-size: clamp(3.1rem, 6vw, 5.35rem);
-  line-height: 0.95;
-}
-
-.heroDescription,
-.sectionSubtitle,
-.sectionBody,
-.ctaDescription {
-  margin: 0;
-  line-height: 1.72;
-  color: var(--oomol-text-secondary);
-}
-
-.heroDescription {
-  max-width: 38rem;
-  font-size: 1.08rem;
-}
-
-.heroNote {
-  margin: -0.2rem 0 0;
-  max-width: 38rem;
-  padding: 0.95rem 1rem;
-  border-radius: 1rem;
-  border: 1px solid color-mix(in srgb, var(--oomol-primary) 16%, white);
-  background: color-mix(in srgb, var(--oomol-primary-bg) 54%, white);
-  font-size: 0.98rem;
-  line-height: 1.68;
-  color: color-mix(in srgb, var(--oomol-text-secondary) 90%, white 10%);
-}
-
-.stats {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.75rem;
-}
-
-.stat {
-  display: inline-flex;
-  align-items: center;
-  min-height: 2.6rem;
-  padding: 0 0.95rem;
-  border-radius: 999px;
-  border: 1px solid var(--oomol-divider);
-  background: color-mix(in srgb, var(--oomol-bg-elevated) 94%, white 6%);
-}
-
-.statValue {
-  font-size: 0.94rem;
-  font-weight: 650;
-  color: var(--oomol-text-primary);
-}
-
-.actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.85rem;
-  padding-top: 0.3rem;
-}
-
-.primaryAction,
-.secondaryAction,
-.inlineLink {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  text-decoration: none;
-  transition:
-    transform 0.18s ease,
-    background-color 0.18s ease,
-    border-color 0.18s ease,
-    color 0.18s ease;
-
-  &:hover {
-    text-decoration: none;
-    transform: translateY(-1px);
-  }
-}
-
-.primaryAction,
-.secondaryAction {
-  min-height: 2.95rem;
-  padding: 0 1rem;
-  border-radius: 999px;
-  font-size: 0.96rem;
-  font-weight: 650;
-}
-
-.primaryAction {
-  color: var(--oomol-white);
-  border: 1px solid color-mix(in srgb, var(--oomol-primary-active) 64%, black 12%);
-  background: linear-gradient(
-    180deg,
-    color-mix(in srgb, var(--oomol-primary) 78%, white 14%) 0%,
-    color-mix(in srgb, var(--oomol-primary-active) 88%, black 12%) 100%
-  );
-}
-
-.secondaryAction {
-  color: var(--oomol-text-primary);
-  border: 1px solid var(--oomol-divider);
-  background: color-mix(in srgb, var(--oomol-bg-elevated) 92%, white 8%);
-}
-
-.heroVisual {
-  min-width: 0;
-}
-
-.visualFrame {
-  padding: 0.9rem;
-  border-radius: 1.9rem;
-  border: 1px solid var(--oomol-divider);
-  background: color-mix(in srgb, var(--oomol-bg-elevated) 95%, white 5%);
-  box-shadow: var(--oomol-shadow-lg);
-}
-
-.visualImage {
-  display: block;
-  width: 100%;
-  height: auto;
-  border-radius: 1.2rem;
-  border: 1px solid var(--oomol-divider);
-}
-
-.narrativeSection,
-.deliverySection,
-.pricingSection,
-.openSourceSection,
-.ctaSection {
-  padding: clamp(2.8rem, 6vw, 4.8rem) 0;
-}
-
-.sectionHeader {
-  display: grid;
-  gap: 0.9rem;
-  margin-bottom: 1.4rem;
-}
-
-.sectionTitle {
-  max-width: 12ch;
-  font-size: clamp(2.4rem, 4.8vw, 4rem);
-  line-height: 0.98;
-}
-
-.sectionSubtitle {
-  max-width: 48rem;
-  font-size: 1rem;
-}
-
-.sectionBody {
-  max-width: 52rem;
-  font-size: 1rem;
-}
-
-.modeGrid,
-.projectGrid {
-  display: grid;
-  gap: 1rem;
-}
-
-.modeGrid {
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-}
-
-.modeCard,
-.projectCard,
-.pricingCard,
-.ctaCard {
-  border: 1px solid var(--oomol-divider);
-  background: color-mix(in srgb, var(--oomol-bg-elevated) 94%, white 6%);
-  box-shadow: var(--oomol-shadow-md);
-}
-
-.modeCard,
-.projectCard {
-  border-radius: 1.4rem;
-  padding: 1.2rem 1.15rem 1.3rem;
-}
-
-.modeIndex {
-  font-family: var(--oomol-font-display);
-  font-size: 1.45rem;
-  line-height: 1;
-  letter-spacing: -0.06em;
-  color: color-mix(in srgb, var(--oomol-primary) 78%, var(--oomol-text-primary));
-}
-
-.modeTitle,
-.projectTitle {
-  margin: 0.9rem 0 0.45rem;
-  font-size: 1.15rem;
-  line-height: 1.25;
-  color: var(--oomol-text-primary);
-}
-
-.modeDescription,
-.projectDescription {
-  margin: 0;
-  font-size: 0.95rem;
-  line-height: 1.68;
-  color: var(--oomol-text-secondary);
-}
-
-.pricingCard,
-.ctaCard {
-  padding: clamp(1.6rem, 3.5vw, 2.4rem);
-  border-radius: 1.8rem;
-}
-
-.inlineLink {
-  margin-top: 1rem;
-  width: fit-content;
-  font-size: 0.95rem;
-  font-weight: 650;
-  color: var(--oomol-primary-text);
-}
-
-.projectGrid {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  margin-top: 1.4rem;
-}
-
-.ctaCard {
-  background:
-    radial-gradient(
-      circle at top left,
-      rgba(132, 138, 208, 0.2) 0%,
-      rgba(132, 138, 208, 0) 32%
-    ),
-    linear-gradient(180deg, #1a1b28 0%, #12131d 100%);
-  border-color: rgba(214, 221, 236, 0.12);
-}
-
-.ctaTitle {
-  max-width: 11ch;
-  font-size: clamp(2.4rem, 4.6vw, 4rem);
-  line-height: 0.96;
-  color: rgba(243, 239, 248, 0.98);
-}
-
-.ctaDescription {
-  max-width: 42rem;
-  padding-top: 0.9rem;
-  color: rgba(221, 214, 231, 0.8);
-}
-
-.ctaCard .secondaryAction {
-  color: rgba(243, 239, 248, 0.94);
-  border-color: rgba(243, 239, 248, 0.14);
-  background: rgba(243, 239, 248, 0.08);
-}
-
-:global(html[lang="en"]) .heroTitle {
-  max-width: 13ch;
-  font-size: clamp(2.8rem, 5.4vw, 4.8rem);
-  line-height: 0.98;
-}
-
-:global(html[lang="en"]) .sectionTitle {
-  max-width: 16ch;
-  font-size: clamp(2.1rem, 4vw, 3.45rem);
-  line-height: 1.02;
-}
-
-:global(html[lang="en"]) .ctaTitle {
-  max-width: 16ch;
-  font-size: clamp(2.2rem, 4vw, 3.55rem);
-  line-height: 1.03;
-}
-
-@media (max-width: 996px) {
-  .heroContainer,
-  .modeGrid,
-  .projectGrid {
-    grid-template-columns: 1fr;
-  }
-
-  .heroContainer {
-    gap: 1.5rem;
-  }
-}
-
-@media (max-width: 768px) {
-  .heroContainer,
-  .sectionContainer {
-    width: min(100%, calc(100% - 40px));
-  }
-
-  .hero {
-    padding-top: 4rem;
-  }
-
-  .heroTitle,
-  .sectionTitle,
-  .ctaTitle {
-    max-width: 100%;
-    text-wrap: pretty;
-  }
-}
-
-[data-theme="dark"] {
-  .page {
-    background:
-      radial-gradient(
-        circle at top left,
-        color-mix(in srgb, var(--oomol-primary) 14%, transparent) 0%,
-        transparent 36%
-      ),
-      linear-gradient(
-        180deg,
-        color-mix(
-            in srgb,
-            var(--oomol-bg-base) 90%,
-            var(--oomol-bg-container) 10%
-          )
-          0%,
-        color-mix(in srgb, var(--oomol-bg-base) 96%, black 4%) 100%
-      );
-  }
-
-  .heroNote {
-    border-color: color-mix(
-      in srgb,
-      var(--oomol-primary) 22%,
-      var(--oomol-divider)
-    );
-    background: color-mix(
-      in srgb,
-      var(--oomol-bg-elevated) 78%,
-      var(--oomol-primary-bg) 22%
-    );
-    color: color-mix(in srgb, var(--oomol-text-secondary) 92%, white 8%);
-  }
-
-  .stat,
-  .secondaryAction,
-  .visualFrame,
-  .modeCard,
-  .projectCard,
-  .pricingCard {
-    border-color: color-mix(
-      in srgb,
-      var(--oomol-border-default) 72%,
-      var(--oomol-divider)
-    );
-    background: linear-gradient(
-      180deg,
-      color-mix(
-          in srgb,
-          var(--oomol-bg-elevated) 82%,
-          var(--oomol-bg-container) 18%
-        )
-        0%,
-      color-mix(in srgb, var(--oomol-bg-container) 88%, black 12%) 100%
-    );
-  }
-
-  .visualFrame,
-  .modeCard,
-  .projectCard,
-  .pricingCard {
-    box-shadow: none;
-  }
-}
diff --git a/src/pages/contact-us/styles.module.scss b/src/pages/contact-us/styles.module.scss
index 3254eb6..571fc83 100644
--- a/src/pages/contact-us/styles.module.scss
+++ b/src/pages/contact-us/styles.module.scss
@@ -85,7 +85,11 @@
   background-color: var(--oomol-bg-elevated);
   border: 1px solid transparent;
   cursor: pointer;
-  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
+  transition:
+    background-color 0.3s ease,
+    border-color 0.3s ease,
+    transform 0.3s ease,
+    box-shadow 0.3s ease;
 
   &:hover {
     background-color: var(--oomol-hover-bg);
diff --git a/src/pages/downloads/index.tsx b/src/pages/downloads/index.tsx
index 9c51917..b1eac28 100644
--- a/src/pages/downloads/index.tsx
+++ b/src/pages/downloads/index.tsx
@@ -76,9 +76,7 @@ export default function Downloads() {
   return (
     <Layout>
       <Head>
-        <title>
-          {translate({ message: "HOME.Downloads.page.title" })}
-        </title>
+        <title>{translate({ message: "HOME.Downloads.page.title" })}</title>
         <meta
           name="description"
           content={translate({
diff --git a/src/pages/hub/styles.module.scss b/src/pages/hub/styles.module.scss
index f71aa7c..a76ec26 100644
--- a/src/pages/hub/styles.module.scss
+++ b/src/pages/hub/styles.module.scss
@@ -82,7 +82,9 @@
   padding: 1.5rem;
   border-radius: 12px;
   cursor: pointer;
-  transition: background-color 0.3s ease, border-color 0.3s ease;
+  transition:
+    background-color 0.3s ease,
+    border-color 0.3s ease;
   margin-bottom: 1rem;
   border: 2px solid transparent;
 
@@ -121,7 +123,9 @@
   font-size: 1rem;
   line-height: 1.5;
   color: var(--ifm-color-content);
-  transition: color 0.3s ease, font-weight 0.3s ease;
+  transition:
+    color 0.3s ease,
+    font-weight 0.3s ease;
 
   &.active {
     color: var(--oomol-hub-dark);
diff --git a/src/pages/studio/styles.module.scss b/src/pages/studio/styles.module.scss
index cfe3964..502e402 100644
--- a/src/pages/studio/styles.module.scss
+++ b/src/pages/studio/styles.module.scss
@@ -189,7 +189,8 @@
   background: linear-gradient(
     180deg,
     color-mix(in srgb, var(--oomol-primary-bg) 76%, var(--oomol-bg-elevated)) 0%,
-    color-mix(in srgb, var(--oomol-primary-bg) 48%, var(--oomol-bg-elevated)) 100%
+    color-mix(in srgb, var(--oomol-primary-bg) 48%, var(--oomol-bg-elevated))
+      100%
   );
   font-size: 0.96rem;
   line-height: 1.66;
diff --git a/src/theme/Navbar/index.tsx b/src/theme/Navbar/index.tsx
index fe26865..1bb3865 100644
--- a/src/theme/Navbar/index.tsx
+++ b/src/theme/Navbar/index.tsx
@@ -290,7 +290,9 @@ const NavbarComponent: React.FC<NavbarProps> = memo(() => {
             if (item === productMenuItem) {
               const isProductActive =
                 location.pathname.startsWith("/docs/cloud-services/cli") ||
-                location.pathname.startsWith(`/${locale}/docs/cloud-services/cli`) ||
+                location.pathname.startsWith(
+                  `/${locale}/docs/cloud-services/cli`
+                ) ||
                 location.pathname.startsWith("/studio") ||
                 location.pathname.startsWith(`/${locale}/studio`) ||
                 location.pathname.startsWith("/cloud") ||
@@ -318,7 +320,10 @@ const NavbarComponent: React.FC<NavbarProps> = memo(() => {
                     {translate({
                       message: "Theme.Navbar.product.label",
                     })}
-                    <span className={styles.productMenuCaret} aria-hidden="true" />
+                    <span
+                      className={styles.productMenuCaret}
+                      aria-hidden="true"
+                    />
                   </button>
 
                   <div