This is an automated email from the ASF dual-hosted git repository.

davidzollo pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/seatunnel-website.git


The following commit(s) were added to refs/heads/main by this push:
     new 93f39f1a0510 Polish the homepage shell after the refresh (#460)
93f39f1a0510 is described below

commit 93f39f1a051032cfd0d18f2e8c05b67a2d62cf6f
Author: Daniel <[email protected]>
AuthorDate: Tue Jun 16 13:03:53 2026 +0800

    Polish the homepage shell after the refresh (#460)
    
    Co-authored-by: Daniel <[email protected]>
---
 docusaurus.config.js                            |  70 ++++----
 i18n/zh-CN/docusaurus-theme-classic/footer.json |  30 +++-
 src/css/custom.css                              | 104 +++++++-----
 src/pages/home/index.jsx                        | 180 ++++++--------------
 src/pages/home/index.less                       | 177 +++++---------------
 src/pages/index.tsx                             |   4 -
 src/theme/Layout/index.js                       | 214 +++++++++++++++++++++---
 7 files changed, 405 insertions(+), 374 deletions(-)

diff --git a/docusaurus.config.js b/docusaurus.config.js
index cc70b1e13f81..ba2b4b84f17a 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -227,9 +227,9 @@ const config = {
     },
     hideOnScroll: false, // Whether to hide the sidebar on scroll
     colorMode: {
-      defaultMode: "light",
+      defaultMode: "dark",
       disableSwitch: false,
-      respectPrefersColorScheme: true,
+      respectPrefersColorScheme: false,
     },
     navbar: {
       title: "Apache SeaTunnel",
@@ -238,12 +238,6 @@ const config = {
         src: "image/logo.png",
       },
       items: [
-        {
-          to: "/",
-          position: "right",
-          label: "Home",
-          activeBaseRegex: `^/$`,
-        },
         {
           position: "right",
           label: "Document",
@@ -297,36 +291,6 @@ const config = {
           position: "right",
           activeBaseRegex: `/user/`,
         },
-        {
-          label: "ASF",
-          position: "right",
-          items: [
-            {
-              label: "Foundation",
-              to: "https://www.apache.org/";,
-            },
-            {
-              label: "License",
-              to: "https://www.apache.org/licenses/";,
-            },
-            {
-              label: "Events",
-              to: "https://www.apache.org/events/current-event";,
-            },
-            {
-              label: "Sponsorship",
-              to: "https://www.apache.org/foundation/sponsorship.html";,
-            },
-            {
-              label: "Thanks",
-              to: "https://www.apache.org/foundation/thanks.html";,
-            },
-            {
-              label: "Privacy",
-              to: "https://apache.org/foundation/policies/privacy.html";,
-            },
-          ],
-        },
         {
           href: "https://github.com/apache/seatunnel";,
           label: "GitHub",
@@ -378,6 +342,35 @@ const config = {
             },
           ],
         },
+        {
+          title: "ASF",
+          items: [
+            {
+              label: "Foundation",
+              href: "https://www.apache.org/";,
+            },
+            {
+              label: "License",
+              href: "https://www.apache.org/licenses/";,
+            },
+            {
+              label: "Events",
+              href: "https://www.apache.org/events/current-event";,
+            },
+            {
+              label: "Sponsorship",
+              href: "https://www.apache.org/foundation/sponsorship.html";,
+            },
+            {
+              label: "Thanks",
+              href: "https://www.apache.org/foundation/thanks.html";,
+            },
+            {
+              label: "Privacy",
+              href: "https://apache.org/foundation/policies/privacy.html";,
+            },
+          ],
+        },
         {
           title: "Subscribe Mailing List",
           items: [
@@ -398,7 +391,6 @@ const config = {
       ],
       copyright: `
             <div style="margin-top: 20px;">
-                <img style="height:50px;margin: 30px 0 10px;" alt="Apache 
Software Foundation" src="/image/asf_logo_wide.svg" />
                 <div style="border-top: 1px solid #ccc;min-height: 
60px;line-height: 20px;text-align: center;font-family: Avenir-Medium;font-size: 
14px;color: #999;display: flex;align-items: center;"><span>Copyright © 
2021-${new Date().getFullYear()} The Apache Software Foundation. Apache 
SeaTunnel, SeaTunnel, and its feather logo are trademarks of The Apache 
Software Foundation.</span></div>
                 <div style="text-align: center;">
                     <a href="https://twitter.com/asfseatunnel?s=21"; 
target="_blank" title="Twitter" ><svg t="1644553365083" class="icon" viewBox="0 
0 1260 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"; p-id="7015" 
width="38" height="38"><path d="M1259.846921 121.148242c-46.524504 
20.728739-96.273478 34.547899-148.325646 40.536201 53.434084-31.784067 
94.430924-82.454319 113.777747-142.797982-50.209613 29.480874-105.486251 
51.13089-164.447999 62.646857A257.584528 257.584528 0 0 0 8 [...]
diff --git a/i18n/zh-CN/docusaurus-theme-classic/footer.json 
b/i18n/zh-CN/docusaurus-theme-classic/footer.json
index f5c8c8909aca..e621e76d984a 100644
--- a/i18n/zh-CN/docusaurus-theme-classic/footer.json
+++ b/i18n/zh-CN/docusaurus-theme-classic/footer.json
@@ -15,6 +15,10 @@
     "message": "社区",
     "description": "The title of the footer links column with title=Community 
in the footer"
   },
+  "link.title.ASF": {
+    "message": "Apache",
+    "description": "The title of the footer links column with title=ASF in the 
footer"
+  },
   "link.item.label.GitHub": {
     "message": "GitHub",
     "description": "The label of footer link with label=GitHub linking to 
https://github.com/apache/seatunnel";
@@ -28,6 +32,30 @@
     "message": "Pull Requests",
     "description": "The label of footer link with label=Pull Requests linking 
to https://github.com/apache/seatunnel/pulls";
   },
+  "link.item.label.Foundation": {
+    "message": "基金会",
+    "description": "The label of footer link with label=Foundation linking to 
https://www.apache.org/";
+  },
+  "link.item.label.License": {
+    "message": "许可证",
+    "description": "The label of footer link with label=License linking to 
https://www.apache.org/licenses/";
+  },
+  "link.item.label.Events": {
+    "message": "活动",
+    "description": "The label of footer link with label=Events linking to 
https://www.apache.org/events/current-event";
+  },
+  "link.item.label.Sponsorship": {
+    "message": "赞助",
+    "description": "The label of footer link with label=Sponsorship linking to 
https://www.apache.org/foundation/sponsorship.html";
+  },
+  "link.item.label.Thanks": {
+    "message": "致谢",
+    "description": "The label of footer link with label=Thanks linking to 
https://www.apache.org/foundation/thanks.html";
+  },
+  "link.item.label.Privacy": {
+    "message": "隐私",
+    "description": "The label of footer link with label=Privacy linking to 
https://apache.org/foundation/policies/privacy.html";
+  },
 
   "link.title.Subscribe Mailing List": {
     "message": "订阅邮件组",
@@ -46,7 +74,7 @@
     "description": "The label of footer link with label=Mail Archive linking 
to https://lists.apache.org/[email protected]";
   },
   "copyright": {
-    "message": "<div style=\"margin-top: 20px;background: #f4f8fa\">\n         
       <img style=\"height:50px;margin-bottom: 10px\" alt=\"Apache Software 
Foundation\" src=\"/image/asf_logo_wide.svg\" />\n                <p 
style=\"color: #999999;font-weight:400;text-align:left\">Apache SeaTunnel is a 
top-level project at The Apache Software Foundation.</p>\n                <div 
style=\"border-top: 1px solid #ccc;min-height: 60px;line-height: 
20px;text-align: center;font-family: Avenir-M [...]
+    "message": "<div style=\"margin-top: 20px;\">\n                <div 
style=\"border-top: 1px solid #ccc;min-height: 60px;line-height: 
20px;text-align: center;font-family: Avenir-Medium;font-size: 14px;color: 
#999;display: flex;align-items: center;\"><span>Copyright © 2021-2026 The 
Apache Software Foundation. Apache SeaTunnel, SeaTunnel, and its feather logo 
are trademarks of The Apache Software Foundation.</span></div>\n                
<div style=\"text-align: center;\">\n             [...]
     "description": "The footer copyright"
   }
 }
diff --git a/src/css/custom.css b/src/css/custom.css
index 4380850d19b3..3972086a62da 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -95,6 +95,8 @@ body {
   display: flex;
   align-items: center;
   gap: 10px;
+  flex: 0 0 auto;
+  min-width: max-content;
   margin-right: 1.75rem;
 }
 
@@ -103,16 +105,24 @@ body {
   font-weight: 700;
   letter-spacing: -0.02em;
   color: var(--st-shell-text-strong);
+  max-width: none;
+  overflow: visible;
+  text-overflow: clip;
+  white-space: nowrap;
 }
 
 .navbar__link {
   font-size: 15px;
   font-family: PingFangSC-Regular, -apple-system, BlinkMacSystemFont, "Segoe 
UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
   font-weight: 500;
-  padding: 10px;
+  padding: 10px 8px;
   color: var(--st-shell-text);
 }
 
+.navbar__items--right {
+  gap: 0.05rem;
+}
+
 .navbar__brand,
 .navbar__title,
 .navbar__link,
@@ -160,6 +170,9 @@ html[data-theme='dark'] .navbar__search-input {
 .navbar [class*='colorModeToggle'] {
   display: inline-flex;
   margin-left: 0.15rem;
+  width: 40px;
+  height: 40px;
+  flex: 0 0 40px;
 }
 
 .navbar [class*='toggleButton'] {
@@ -168,7 +181,7 @@ html[data-theme='dark'] .navbar__search-input {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border-radius: 12px;
+  border-radius: 999px;
   border: 1px solid var(--st-shell-border);
   background: rgba(255, 255, 255, 0.52);
   color: var(--st-shell-text-strong);
@@ -188,7 +201,13 @@ html[data-theme='dark'] .navbar [class*='toggleButton'] {
 .navbar [class*='lightToggleIcon'],
 .navbar [class*='darkToggleIcon'] {
   width: 18px;
-  height: 18px;
+  height: auto;
+  flex: 0 0 18px;
+}
+
+html[data-theme='dark'] .navbar__item.dropdown > .navbar__link,
+html[data-theme='dark'] .dropdown__menu .dropdown__link {
+  color: var(--st-shell-text-strong);
 }
 
 .footer__link-item svg,.navbar__link svg {
@@ -247,6 +266,11 @@ html[data-theme='dark'] .card {
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  font: inherit;
   pointer-events: auto;
   text-decoration: none;
 }
@@ -255,59 +279,60 @@ html[data-theme='dark'] .card {
   position: relative;
   display: inline-flex;
   align-items: center;
-  gap: 8px;
-  padding: 0.76rem 1.55rem;
-  border: 1px solid rgba(255, 255, 255, 0.16);
-  border-radius: 999px;
-  background: linear-gradient(135deg, #7eb8ff 0%, #6776ff 48%, #5847ff 100%);
-  color: #fff;
-  white-space: nowrap;
+  justify-content: center;
+  width: 78px;
+  height: 92px;
+  padding: 0;
+  border: 1px solid rgba(155, 206, 245, 0.95);
+  border-radius: 28px;
+  background: linear-gradient(180deg, rgba(252, 254, 255, 0.98) 0%, rgba(238, 
247, 255, 0.98) 100%);
+  color: #0f172a;
   overflow: hidden;
-  box-shadow: 0 14px 34px rgba(74, 87, 255, 0.38), 0 2px 8px rgba(0, 0, 0, 
0.3);
-  transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.2s, 
border-color 0.2s;
+  box-shadow: 0 18px 42px rgba(132, 181, 226, 0.22), 0 2px 10px rgba(15, 23, 
42, 0.08);
+  transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.2s, 
border-color 0.2s, background 0.2s;
 }
 
 .st-global-ask-ai-button::before {
   content: '';
   position: absolute;
-  inset: 1px;
+  inset: 7px;
   border-radius: inherit;
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 
255, 255, 0.03) 52%, transparent);
+  border: 1px solid rgba(190, 224, 250, 0.7);
+  background: radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.96), 
rgba(255, 255, 255, 0) 68%);
   pointer-events: none;
 }
 
 .st-global-ask-ai-button svg {
-  width: 17px;
-  height: 17px;
+  width: 34px;
+  height: 34px;
+  aspect-ratio: 1 / 1;
   flex-shrink: 0;
   position: relative;
   z-index: 1;
 }
 
 .st-global-ask-ai-button span {
-  font-size: 0.88rem;
-  font-weight: 700;
-  letter-spacing: 0;
-  position: relative;
-  z-index: 1;
+  display: none;
 }
 
 .st-global-ask-ai:hover .st-global-ask-ai-button {
-  transform: translateY(-3px) scale(1.04);
-  border-color: rgba(255, 255, 255, 0.22);
-  box-shadow: 0 18px 42px rgba(74, 87, 255, 0.48), 0 2px 8px rgba(0, 0, 0, 
0.3);
+  transform: translateY(-3px);
+  border-color: rgba(121, 188, 237, 0.98);
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(232, 
244, 255, 0.98) 100%);
+  box-shadow: 0 22px 48px rgba(132, 181, 226, 0.28), 0 2px 10px rgba(15, 23, 
42, 0.1);
+}
+
+.st-global-ask-ai:focus-visible {
+  outline: none;
+}
+
+.st-global-ask-ai:focus-visible .st-global-ask-ai-button {
+  border-color: rgba(121, 188, 237, 0.98);
+  box-shadow: 0 0 0 4px rgba(154, 213, 249, 0.24), 0 22px 48px rgba(132, 181, 
226, 0.28), 0 2px 10px rgba(15, 23, 42, 0.1);
 }
 
 .st-global-ask-ai-dot {
-  position: absolute;
-  top: -2px;
-  right: -2px;
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  background: #00d79c;
-  box-shadow: 0 0 0 0 rgba(0, 215, 156, 0.55);
-  animation: st-home-pulse 2s ease infinite;
+  display: none;
 }
 
 @media (max-width: 996px) {
@@ -317,24 +342,23 @@ html[data-theme='dark'] .card {
   }
 
   .st-global-ask-ai-button {
-    padding: 0.72rem 1.2rem;
+    width: 70px;
+    height: 82px;
   }
 
   .st-global-ask-ai-button span {
-    font-size: 0.84rem;
+    display: none;
   }
 }
 
 @media (max-width: 640px) {
   .st-global-ask-ai-button {
-    padding: 0.7rem 1rem;
+    width: 64px;
+    height: 76px;
+    border-radius: 24px;
   }
 }
 
-html[data-theme='dark']  img {
-  filter: brightness(.8) contrast(1.2)
-}
-
 /* Hide Google Translate banner and fix body positioning */
 .goog-te-banner-frame {
   display: none !important;
diff --git a/src/pages/home/index.jsx b/src/pages/home/index.jsx
index cf24433072f5..826e4d0eac7d 100644
--- a/src/pages/home/index.jsx
+++ b/src/pages/home/index.jsx
@@ -7,9 +7,7 @@ import systemConfiguration from '../../js/sysConfig';
 
 const versions = require('../../../versions.json');
 
-const MAILING_LIST_URL = 
'https://lists.apache.org/[email protected]';
 const SLACK_URL = 'https://s.apache.org/seatunnel-slack';
-const TWITTER_URL = 'https://twitter.com/asfseatunnel?s=21';
 const EXAMPLES_URL = 
'https://github.com/apache/seatunnel/tree/dev/seatunnel-examples';
 
 const HERO_SOURCES = [
@@ -124,7 +122,7 @@ const CONNECTOR_MARQUEE_ITEMS = [
 
 const HOME_COPY = {
     'en': {
-        badge: `v${versions[0]} docs live / Apache Top-Level Project`,
+        badge: `v${versions[0]} live / Apache Top-Level Project`,
         nav: {
             docs: 'Docs',
             connectors: 'Connectors',
@@ -223,6 +221,8 @@ const HOME_COPY = {
             lead: 'Real fault tolerance, schema evolution, and multi-engine 
scale for production pipelines.',
             schema: {
                 number: '01',
+                icon: 'schema',
+                accent: 'violet',
                 title: 'Schema changes? Handled automatically.',
                 description: 'SeaTunnel detects upstream schema changes and 
propagates them downstream in real time, so teams do not need to pause the 
pipeline for every column change.',
             },
@@ -383,7 +383,7 @@ const HOME_COPY = {
         askAi: 'Ask AI',
     },
     'zh-CN': {
-        badge: `v${versions[0]} 文档已发布 / Apache 顶级项目`,
+        badge: `v${versions[0]} 已发布 / Apache 顶级项目`,
         nav: {
             docs: '文档',
             connectors: '连接器',
@@ -394,7 +394,7 @@ const HOME_COPY = {
         hero: {
             titleLead: '开源的',
             titleAccent: '数据集成',
-            titleTail: '工具。',
+            titleTail: '工具',
             subtitle: '通过一份配置连接近 200 种 source 与 sink,运行在 Flink、Spark 或原生 Zeta 
引擎之上,覆盖批处理、CDC 与流式任务。',
             primaryButton: '快速开始',
             secondaryButton: '阅读文档',
@@ -419,8 +419,8 @@ const HOME_COPY = {
         ],
         architecture: {
             eyebrow: '架构',
-            titleLead: '不只是 ETL。',
-            titleAccent: '而是 EtLT。',
+            titleLead: '不只是 ETL',
+            titleAccent: '而是 EtLT',
             lead: 'SeaTunnel 负责抽取、轻量转换与装载,把重量级的下游转换保留给仓库或湖仓,让数据链路更清晰也更稳定。',
             headers: {
                 sources: '01 上游数据源',
@@ -478,11 +478,13 @@ const HOME_COPY = {
         },
         features: {
             eyebrow: '为什么选择 SeaTunnel',
-            title: '从第一天起就是生产级。',
+            title: '从第一天起就是生产级',
             lead: '容错、模式演进和多引擎扩展能力都按生产环境要求设计。',
             schema: {
                 number: '01',
-                title: 'Schema 变化?自动处理。',
+                icon: 'schema',
+                accent: 'violet',
+                title: 'Schema 变化?自动处理',
                 description: 'SeaTunnel 能检测上游 Schema 
变化并实时同步到下游,减少因为字段变更带来的人工迁移与任务中断。',
             },
             cards: [
@@ -512,7 +514,7 @@ const HOME_COPY = {
         connectors: {
             eyebrow: '约 200 个原生连接器',
             titleLead: '只要你的数据在那里,',
-            titleAccent: 'SeaTunnel 就能连接。',
+            titleAccent: 'SeaTunnel 就能连接',
             lead: '覆盖数据库、消息系统、湖仓、搜索系统与对象存储等主流数据系统。',
             categories: [
                 {
@@ -565,7 +567,7 @@ const HOME_COPY = {
         flow: {
             eyebrow: '工作方式',
             titleLead: 'Extract. transform. Load. Transform.',
-            titleAccent: '保持简单。',
+            titleAccent: '保持简单',
             lead: '一份配置文件即可定义整条 EtLT pipeline,从抽取、轻量转换到目标写入。',
             steps: [
                 {
@@ -588,8 +590,8 @@ const HOME_COPY = {
         },
         code: {
             eyebrow: '设计上就是简单',
-            titleLead: '一份配置文件。',
-            titleTail: '就够了。',
+            titleLead: '一份配置文件',
+            titleTail: '就够了',
             lead: '用一份配置描述 source、transform 与 sink,然后在任意支持的执行引擎上运行,无需重复改写 
pipeline。',
             primaryButton: '阅读文档',
             secondaryButton: '查看示例',
@@ -597,7 +599,7 @@ const HOME_COPY = {
         },
         cta: {
             titleLead: '开始让数据流动',
-            titleAccent: '不受限制。',
+            titleAccent: '不受限制',
             lead: '开源、Apache License、永久免费。为真正的生产团队提供稳定的数据集成底座,而不是一套只能演示的页面。',
             primaryButton: '快速开始',
             secondaryButton: 'GitHub',
@@ -664,38 +666,6 @@ function ArrowRightIcon() {
     );
 }
 
-function GitHubIcon() {
-    return (
-        <svg viewBox="0 0 24 24" aria-hidden="true">
-            <path fill="currentColor" d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 
9.795 8.205 11.385.6.105.825-.255.825-.57 
0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015
 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 
3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 
0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 
1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 [...]
-        </svg>
-    );
-}
-
-function XIcon() {
-    return (
-        <svg viewBox="0 0 24 24" aria-hidden="true">
-            <path fill="currentColor" d="M18.244 2.25h3.308l-7.227 8.26 8.502 
11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 
6.231Zm-1.161 17.52h1.833L7.084 4.126H5.117Z" />
-        </svg>
-    );
-}
-
-function MailIcon() {
-    return (
-        <svg viewBox="0 0 1024 1024" aria-hidden="true">
-            <path fill="currentColor" d="M853.333333 
170.666667H170.666667c-46.933333 0-85.333333 38.4-85.333334 85.333333v512c0 
46.933333 38.4 85.333333 85.333334 85.333333h682.666666c46.933333 0 
85.333333-38.4 
85.333334-85.333333V256c0-46.933333-38.4-85.333333-85.333334-85.333333z m0 
170.666666l-341.333333 213.333334-341.333333-213.333334V256l341.333333 
213.333333 341.333333-213.333333v85.333333z" />
-        </svg>
-    );
-}
-
-function SlackIcon() {
-    return (
-        <svg viewBox="0 0 1024 1024" aria-hidden="true">
-            <path fill="currentColor" d="M215.125333 647.04a107.861333 
107.861333 0 0 1-107.52 107.648A107.861333 107.861333 0 0 1 0 647.04a107.818667 
107.818667 0 0 1 107.605333-107.52h107.52v107.52z m54.229334 0a107.818667 
107.818667 0 0 1 107.562666-107.52 107.818667 107.818667 0 0 1 107.562667 
107.52v269.354667A107.861333 107.861333 0 0 1 376.917333 1024a107.861333 
107.861333 0 0 1-107.562666-107.605333v-269.354667zM376.917333 
215.125333a107.861333 107.861333 0 0 1-107.562666-107.52A [...]
-        </svg>
-    );
-}
-
 function LightningIcon() {
     return (
         <svg viewBox="0 0 24 24" aria-hidden="true">
@@ -723,6 +693,17 @@ function LayersIcon() {
     );
 }
 
+function SchemaIcon() {
+    return (
+        <svg viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M6 5.5h12" fill="none" stroke="currentColor" 
strokeWidth="2" strokeLinecap="round" />
+            <path d="M6 12h12" fill="none" stroke="currentColor" 
strokeWidth="2" strokeLinecap="round" />
+            <path d="M6 18.5h8" fill="none" stroke="currentColor" 
strokeWidth="2" strokeLinecap="round" />
+            <circle cx="17.5" cy="18.5" r="1.5" fill="currentColor" />
+        </svg>
+    );
+}
+
 function FeatureIcon({icon}) {
     if (icon === 'lightning') {
         return <LightningIcon />;
@@ -730,6 +711,9 @@ function FeatureIcon({icon}) {
     if (icon === 'shield') {
         return <ShieldIcon />;
     }
+    if (icon === 'schema') {
+        return <SchemaIcon />;
+    }
     return <LayersIcon />;
 }
 
@@ -741,36 +725,17 @@ export default function Home() {
     const ctaWarpCanvasRef = useRef(null);
     const flowCanvasRef = useRef(null);
 
-    const language = i18n.currentLocale === 'zh-CN' ? 'zh-CN' : 'en';
+    const language = isBrowser
+        ? (window.location.pathname.startsWith('/zh-CN/') ? 'zh-CN' : 'en')
+        : (i18n.currentLocale === 'zh-CN' ? 'zh-CN' : 'en');
+    const isChinese = language === 'zh-CN';
     const content = HOME_COPY[language] || HOME_COPY.en;
     const version = versions[0];
     const assetRoot = useBaseUrl('/');
     const docsOverviewPath = useBaseUrl(localizePath(language, 
`/docs/${version}/introduction/about`));
     const quickStartPath = useBaseUrl(localizePath(language, 
`/docs/${version}/getting-started/locally/quick-start-seatunnel-engine`));
     const connectorsPath = useBaseUrl(localizePath(language, 
`/docs/${version}/connectors/source`));
-    const transformsPath = useBaseUrl(localizePath(language, 
`/docs/${version}/transforms`));
-    const apiReferencePath = useBaseUrl(localizePath(language, 
`/docs/${version}/engines/zeta/rest-api-v2`));
-    const seatunnelWebPath = useBaseUrl(localizePath(language, 
'/seatunnel_web/about'));
-    const blogPath = useBaseUrl(localizePath(language, '/blog'));
-    const communityPath = useBaseUrl(localizePath(language, 
'/community/contribution_guide/contribute'));
     const logoPath = `${assetRoot}image/logo.png`;
-    const routeMap = {
-        apiReference: apiReferencePath,
-        blog: blogPath,
-        community: communityPath,
-        connectors: connectorsPath,
-        docsOverview: docsOverviewPath,
-        examples: EXAMPLES_URL,
-        github: systemConfiguration.github.projectUrl,
-        mailingList: MAILING_LIST_URL,
-        quickStart: quickStartPath,
-        releases: systemConfiguration.github.projectReleaseUrl,
-        roadmap: systemConfiguration.github.projectIssueUrl,
-        seatunnelWeb: seatunnelWebPath,
-        slack: SLACK_URL,
-        transforms: transformsPath,
-        twitter: TWITTER_URL,
-    };
 
     useEffect(() => {
         if (!isBrowser || !pageRef.current) {
@@ -1125,10 +1090,23 @@ export default function Home() {
                         <span>{content.badge}</span>
                     </div>
 
-                    <h1 className="st-home-hero-title">
-                        {content.hero.titleLead}<br />
-                        <span className="st-home-gradient st-home-meteor-line" 
id="st-home-hero-meteor">{content.hero.titleAccent}</span><br />
-                        {content.hero.titleTail}
+                    <h1 className={`st-home-hero-title${isChinese ? ' 
st-home-hero-title-zh' : ''}`}>
+                        {isChinese ? (
+                            <>
+                                <span 
className="st-home-hero-title-line">{content.hero.titleLead}</span>
+                                <span className="st-home-hero-title-line 
st-home-hero-title-line-zh">
+                                    <span className="st-home-gradient 
st-home-meteor-line" id="st-home-hero-meteor">{content.hero.titleAccent}</span>
+                                    {content.hero.titleTail}
+                                </span>
+                            </>
+                        ) : (
+                            <>
+                                {content.hero.titleLead}<br />
+                                <span className="st-home-gradient 
st-home-meteor-line" id="st-home-hero-meteor">{content.hero.titleAccent}</span>
+                                <br />
+                                {content.hero.titleTail}
+                            </>
+                        )}
                     </h1>
 
                     <p 
className="st-home-hero-subtitle">{content.hero.subtitle}</p>
@@ -1298,6 +1276,9 @@ export default function Home() {
                         <article className="st-home-feature-card 
st-home-feature-card-wide st-home-rv" onMouseMove={handleFeatureGlow}>
                             <div className="st-home-feature-accent"></div>
                             <div>
+                                <div className={`st-home-feature-icon 
st-home-feature-icon-${content.features.schema.accent}`}>
+                                    <FeatureIcon 
icon={content.features.schema.icon} />
+                                </div>
                                 <div 
className="st-home-feature-number">{content.features.schema.number}</div>
                                 <h3 className="st-home-feature-title 
st-home-feature-title-large">{content.features.schema.title}</h3>
                                 <p className="st-home-feature-description 
st-home-feature-description-large">{content.features.schema.description}</p>
@@ -1450,59 +1431,6 @@ export default function Home() {
                 </div>
             </section>
 
-            <footer className="st-home-footer">
-                <div className="st-home-container">
-                    <div className="st-home-footer-top">
-                        <div>
-                            <div className="st-home-footer-brand">
-                                <span className="st-home-footer-brand-icon">
-                                    <img src={logoPath} alt="Apache SeaTunnel 
logo" />
-                                </span>
-                                <span 
className="st-home-footer-brand-name">Sea<span>Tunnel</span></span>
-                            </div>
-                            <p 
className="st-home-footer-tagline">{content.footer.tagline}</p>
-                            <p 
className="st-home-footer-apache">{content.footer.apache}</p>
-                        </div>
-
-                        {content.footer.columns.map((column) => (
-                            <div key={column.title} 
className="st-home-footer-column">
-                                <h5>{column.title}</h5>
-                                <ul>
-                                    {column.items.map((item) => {
-                                        const href = routeMap[item.hrefKey];
-                                        const isExternal = 
href.startsWith('http') || href.startsWith('mailto:');
-                                        return (
-                                            <li 
key={`${column.title}-${item.label}`}>
-                                                <a href={href} {...(isExternal 
? {target: '_blank', rel: 'noreferrer'} : {})}>
-                                                    {item.label}
-                                                </a>
-                                            </li>
-                                        );
-                                    })}
-                                </ul>
-                            </div>
-                        ))}
-                    </div>
-
-                    <div className="st-home-footer-bottom">
-                        <p className="st-home-footer-copy">Copyright {new 
Date().getFullYear()} The Apache Software Foundation. Apache SeaTunnel is 
licensed under Apache 2.0.</p>
-                        <div className="st-home-footer-socials">
-                            <a href={systemConfiguration.github.projectUrl} 
className="st-home-social" target="_blank" rel="noreferrer" aria-label="GitHub">
-                                <GitHubIcon />
-                            </a>
-                            <a href={TWITTER_URL} className="st-home-social" 
target="_blank" rel="noreferrer" aria-label="Twitter / X">
-                                <XIcon />
-                            </a>
-                            <a href={MAILING_LIST_URL} 
className="st-home-social" target="_blank" rel="noreferrer" aria-label="Mailing 
list">
-                                <MailIcon />
-                            </a>
-                            <a href={SLACK_URL} className="st-home-social" 
target="_blank" rel="noreferrer" aria-label="Slack access">
-                                <SlackIcon />
-                            </a>
-                        </div>
-                    </div>
-                </div>
-            </footer>
         </div>
     );
 }
diff --git a/src/pages/home/index.less b/src/pages/home/index.less
index 2823f36c4b1c..90e1f9e86937 100644
--- a/src/pages/home/index.less
+++ b/src/pages/home/index.less
@@ -141,6 +141,9 @@ body.seatunnel-homepage-page .index-nav .toggleButton_gllP {
 
 body.seatunnel-homepage-page .index-nav [class*='colorModeToggle'] {
   margin-left: 0.15rem;
+  width: 40px;
+  height: 40px;
+  flex: 0 0 40px;
 }
 
 body.seatunnel-homepage-page .index-nav [class*='toggleButton'] {
@@ -149,7 +152,7 @@ body.seatunnel-homepage-page .index-nav 
[class*='toggleButton'] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border-radius: 12px;
+  border-radius: 999px;
   border: 1px solid var(--home-toggle-border);
   background: var(--home-toggle-bg);
   color: var(--home-toggle-color);
@@ -165,7 +168,12 @@ body.seatunnel-homepage-page .index-nav 
[class*='toggleButton']:hover {
 body.seatunnel-homepage-page .index-nav [class*='lightToggleIcon'],
 body.seatunnel-homepage-page .index-nav [class*='darkToggleIcon'] {
   width: 18px;
-  height: 18px;
+  height: auto;
+  flex: 0 0 18px;
+}
+
+body.seatunnel-homepage-page .index-nav .dropdown__menu .dropdown__link {
+  color: var(--home-nav-text-hover);
 }
 
 .seatunnel-homepage-shell {
@@ -524,6 +532,20 @@ html[data-theme='light'] .st-home {
   animation: st-home-fade-up 0.6s ease both 0.08s;
 }
 
+.st-home-hero-title-zh {
+  line-height: 1;
+  font-size: clamp(2.8rem, 5.25vw, 4.7rem);
+  letter-spacing: -0.03em;
+}
+
+.st-home-hero-title-line {
+  display: block;
+}
+
+.st-home-hero-title-line-zh {
+  white-space: nowrap;
+}
+
 .st-home-hero-subtitle {
   max-width: 620px;
   margin: 0 auto 2.5rem;
@@ -943,7 +965,9 @@ html[data-theme='light'] .st-home {
 
 .st-home-architecture-engine-t-small {
   font-size: 0.6em;
-  color: rgba(150, 200, 230, 0.42);
+  color: rgba(181, 230, 255, 0.88);
+  font-weight: 700;
+  text-shadow: 0 0 10px rgba(93, 184, 226, 0.18);
   vertical-align: middle;
 }
 
@@ -1169,6 +1193,11 @@ html[data-theme='light'] .st-home {
   border: 1px solid rgba(245, 158, 11, 0.2);
 }
 
+.st-home-feature-icon-violet {
+  background: rgba(111, 91, 255, 0.1);
+  border: 1px solid rgba(111, 91, 255, 0.24);
+}
+
 .st-home-schema-demo {
   margin: 0;
   padding: 1.25rem 1.5rem;
@@ -1266,10 +1295,10 @@ html[data-theme='light'] .st-home {
 
 .st-home-marquee-chip {
   padding: 4px 12px;
-  border: 1px solid rgba(255, 255, 255, 0.07);
+  border: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: 999px;
-  background: rgba(255, 255, 255, 0.03);
-  color: var(--t3);
+  background: rgba(255, 255, 255, 0.05);
+  color: rgba(217, 230, 248, 0.9);
   font-family: var(--ifm-font-family-monospace);
   font-size: 0.76rem;
   font-weight: 500;
@@ -1285,7 +1314,7 @@ html[data-theme='light'] .st-home {
 
 .st-home-connector-more {
   margin-top: 2rem;
-  color: var(--t3);
+  color: rgba(214, 228, 248, 0.86);
   font-family: var(--ifm-font-family-base);
   font-size: 0.84rem;
   font-weight: 500;
@@ -1585,122 +1614,6 @@ html[data-theme='light'] .st-home {
   gap: 0.875rem;
 }
 
-.st-home-footer {
-  padding: 3.5rem 1.5rem 2.5rem;
-  border-top: 1px solid rgba(255, 255, 255, 0.06);
-  background: var(--bg1);
-}
-
-.st-home-footer-top {
-  display: grid;
-  grid-template-columns: 2fr 1fr 1fr 1fr;
-  gap: 2.5rem;
-}
-
-.st-home-footer-brand {
-  display: flex;
-  align-items: center;
-  gap: 9px;
-}
-
-.st-home-footer-brand-icon {
-  width: 28px;
-  height: 28px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-
-  img {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-  }
-}
-
-.st-home-footer-brand-name {
-  color: var(--t1);
-  font-size: 0.95rem;
-  font-weight: 700;
-  letter-spacing: -0.02em;
-
-  span {
-    background: linear-gradient(90deg, #6f5bff, #f0188a);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-  }
-}
-
-.st-home-footer-tagline {
-  max-width: 220px;
-  margin: 0.75rem 0 0;
-  color: var(--t2);
-  font-size: 0.9rem;
-  line-height: 1.78;
-  font-weight: 500;
-}
-
-.st-home-footer-apache {
-  margin: 1.15rem 0 0;
-  color: var(--t3);
-  font-family: var(--ifm-font-family-monospace);
-  font-size: 0.68rem;
-  font-weight: 500;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.st-home-footer-column h5 {
-  margin: 0 0 0.875rem;
-  color: var(--t1);
-  font-size: 0.8rem;
-  font-weight: 700;
-  letter-spacing: 0.01em;
-}
-
-.st-home-footer-column ul {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.st-home-footer-column a {
-  color: var(--t2);
-  font-size: 0.9rem;
-  font-weight: 500;
-  transition: color 0.18s ease;
-}
-
-.st-home-footer-column a:hover {
-  color: var(--teal);
-}
-
-.st-home-footer-bottom {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 1rem;
-  margin-top: 2.5rem;
-  padding-top: 2rem;
-  border-top: 1px solid rgba(255, 255, 255, 0.06);
-}
-
-.st-home-footer-copy {
-  margin: 0;
-  color: var(--t3);
-  font-size: 0.84rem;
-  line-height: 1.7;
-}
-
-.st-home-footer-socials {
-  display: flex;
-  gap: 0.75rem;
-}
-
 .st-home-social {
   width: 44px;
   height: 44px;
@@ -1871,10 +1784,6 @@ html[data-theme='light'] .st-home .st-home-stat + 
.st-home-stat::before {
   background: rgba(17, 31, 53, 0.08);
 }
 
-html[data-theme='light'] .st-home .st-home-footer-bottom {
-  border-top-color: rgba(17, 31, 53, 0.08);
-}
-
 html[data-theme='light'] .st-home .st-home-connector-item {
   border-bottom-color: rgba(17, 31, 53, 0.08);
   color: var(--t2);
@@ -1884,9 +1793,7 @@ html[data-theme='light'] .st-home .st-home-stat-label,
 html[data-theme='light'] .st-home .st-home-section-lead,
 html[data-theme='light'] .st-home .st-home-feature-description,
 html[data-theme='light'] .st-home .st-home-code-lead,
-html[data-theme='light'] .st-home .st-home-cta-subtitle,
-html[data-theme='light'] .st-home .st-home-footer-tagline,
-html[data-theme='light'] .st-home .st-home-footer-column a {
+html[data-theme='light'] .st-home .st-home-cta-subtitle {
   color: #39526f;
 }
 
@@ -1898,9 +1805,7 @@ html[data-theme='light'] .st-home .st-home-marquee-chip {
 }
 
 html[data-theme='light'] .st-home .st-home-feature-number,
-html[data-theme='light'] .st-home .st-home-connector-more,
-html[data-theme='light'] .st-home .st-home-footer-apache,
-html[data-theme='light'] .st-home .st-home-footer-copy {
+html[data-theme='light'] .st-home .st-home-connector-more {
   color: #6a83a2;
 }
 
@@ -1916,11 +1821,6 @@ html[data-theme='light'] .st-home .st-home-code-box {
   box-shadow: 0 24px 56px rgba(39, 63, 101, 0.12);
 }
 
-html[data-theme='light'] .st-home .st-home-footer {
-  border-top-color: rgba(17, 31, 53, 0.08);
-  background: rgba(255, 255, 255, 0.9);
-}
-
 html[data-theme='light'] .st-home .st-home-eyebrow.st-home-rv {
   color: #4eaad7;
 }
@@ -1962,7 +1862,6 @@ html[data-theme='light'] .st-home .st-home-rv {
   .st-home-feature-grid,
   .st-home-connector-categories,
   .st-home-code-layout,
-  .st-home-footer-top,
   .st-home-flow-grid,
   .st-home-stats {
     grid-template-columns: 1fr;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index cbd9aea84a65..c1b8fa5f5b64 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -3,7 +3,6 @@ import Layout from '@theme/Layout';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Home from './home'
 import useIsBrowser from '@docusaurus/useIsBrowser';
-import Head from '@docusaurus/Head';
 
 export default function() {
     const isBrowser = useIsBrowser();
@@ -28,9 +27,6 @@ export default function() {
         <Layout
             title={siteConfig.title}
             description="Description will go into a meta tag in <head />">
-            <Head>
-                <script async 
src="https://widget.kapa.ai/kapa-widget.bundle.js"; 
data-website-id="3a335e8d-d400-4c7d-baad-d820ee0600a7" 
data-project-name="Apache SeaTunnel" 
data-project-logo="https://seatunnel.apache.org/image/logo.png"; 
data-project-color="#444FD9" data-modal-disclaimer="This is a custom LLM with 
access to all [SeaTunnel 
documentation](https://seatunnel.apache.org/docs/introduction/about)." 
data-consent-required data-consent-screen-disclaimer="By clicking &amp;quot;I 
agr [...]
-            </Head>
             <main>
                 <Home/>
             </main>
diff --git a/src/theme/Layout/index.js b/src/theme/Layout/index.js
index 89a41742e26f..b3e42fb40969 100644
--- a/src/theme/Layout/index.js
+++ b/src/theme/Layout/index.js
@@ -1,28 +1,157 @@
-import React from 'react';
+import React, {useEffect} from 'react';
+import Head from '@docusaurus/Head';
 import Layout from '@theme-original/Layout';
-import useBaseUrl from '@docusaurus/useBaseUrl';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 
-// Keep the floating Ask AI entry aligned with the current locale route layout.
-function localizePath(locale, path) {
-  const normalizedPath = path.startsWith('/') ? path : `/${path}`;
-  return locale === 'zh-CN' ? `/zh-CN${normalizedPath}` : normalizedPath;
+const ASK_AI_TRIGGER_ID = 'st-global-ask-ai-trigger';
+const KAPA_PROJECT_COLOR = '#7db9f5';
+const KAPA_SHADOW_STYLE_ID = 'st-kapa-shadow-overrides';
+const KAPA_SHADOW_OVERRIDES = `
+  #kapa-widget-root [data-modal-content],
+  #kapa-widget-root [role='dialog'] {
+    width: min(1120px, calc(100vw - 28px)) !important;
+    min-width: min(1120px, calc(100vw - 28px)) !important;
+    max-width: 1120px !important;
+    min-height: min(780px, calc(100vh - 32px)) !important;
+    border-radius: 34px !important;
+    border: 1px solid rgba(160, 202, 240, 0.92) !important;
+    background:
+      radial-gradient(circle at 12% 10%, rgba(125, 185, 245, 0.16) 0%, 
rgba(125, 185, 245, 0) 34%),
+      radial-gradient(circle at 88% 92%, rgba(107, 118, 214, 0.12) 0%, 
rgba(107, 118, 214, 0) 30%),
+      linear-gradient(180deg, rgba(251, 254, 255, 0.985) 0%, rgba(241, 248, 
255, 0.985) 100%) !important;
+    box-shadow: 0 32px 86px rgba(125, 185, 245, 0.24) !important;
+  }
+
+  #kapa-widget-root #kapa-modal-content {
+    width: min(1120px, calc(100vw - 28px)) !important;
+    min-width: min(1120px, calc(100vw - 28px)) !important;
+    max-width: 1120px !important;
+  }
+
+  #kapa-widget-root [data-modal-body] {
+    padding: 24px 24px 18px !important;
+  }
+
+  #kapa-widget-root [data-modal-header] {
+    padding: 22px 24px 18px !important;
+  }
+
+  #kapa-widget-root textarea,
+  #kapa-widget-root input[type='text'],
+  #kapa-widget-root input:not([type]) {
+    min-height: 112px !important;
+    border-radius: 22px !important;
+    border: 1px solid rgba(160, 202, 240, 0.78) !important;
+    background: rgba(248, 252, 255, 0.97) !important;
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
+    color: #1b2b3d !important;
+  }
+
+  #kapa-widget-root textarea::placeholder,
+  #kapa-widget-root input[type='text']::placeholder,
+  #kapa-widget-root input:not([type])::placeholder {
+    color: #91a4b9 !important;
+  }
+
+  #kapa-widget-root button {
+    border-radius: 18px !important;
+  }
+
+  #kapa-widget-root [data-modal-disclaimer] {
+    border-radius: 16px !important;
+    background: linear-gradient(135deg, rgba(247, 251, 255, 0.96) 0%, 
rgba(235, 245, 255, 0.96) 100%) !important;
+    border: 1px solid rgba(160, 202, 240, 0.44) !important;
+  }
+
+  #kapa-widget-root [data-modal-close-button] {
+    width: 44px !important;
+    height: 44px !important;
+  }
+
+  #kapa-widget-root [data-query-input-container] {
+    border-radius: 24px !important;
+    border: 1px solid rgba(160, 202, 240, 0.5) !important;
+    background: rgba(255, 255, 255, 0.9) !important;
+  }
+`;
+
+/**
+ * Apply site-specific widget overrides inside Kapa's shadow root.
+ */
+function applyKapaWidgetOverrides(shadowRoot) {
+  if (!shadowRoot) {
+    return;
+  }
+
+  let styleElement = shadowRoot.getElementById(KAPA_SHADOW_STYLE_ID);
+  if (!styleElement) {
+    styleElement = document.createElement('style');
+    styleElement.id = KAPA_SHADOW_STYLE_ID;
+    styleElement.textContent = KAPA_SHADOW_OVERRIDES;
+    shadowRoot.appendChild(styleElement);
+  }
+
+  const root = shadowRoot.querySelector('#kapa-widget-root');
+  if (!root) {
+    return;
+  }
+
+  root.style.setProperty('--mantine-radius-md', '18px');
+  root.style.setProperty('--mantine-radius-lg', '22px');
+  root.style.setProperty('--mantine-radius-xl', '30px');
+  root.style.setProperty('--mantine-color-anchor', '#2f77bb');
+  root.style.setProperty('--mantine-color-default-border', '#d9e8f5');
+  root.style.setProperty('--mantine-color-default', '#f8fcff');
 }
 
-function MessageIcon() {
+function KapaWidgetOverrides() {
+  useEffect(() => {
+    if (typeof document === 'undefined') {
+      return undefined;
+    }
+
+    let hostObserver;
+    let shadowObserver;
+
+    const bindShadowRoot = () => {
+      const shadowRoot = 
document.querySelector('#kapa-widget-container')?.shadowRoot;
+      if (!shadowRoot) {
+        return false;
+      }
+
+      applyKapaWidgetOverrides(shadowRoot);
+      shadowObserver?.disconnect();
+      shadowObserver = new MutationObserver(() => 
applyKapaWidgetOverrides(shadowRoot));
+      shadowObserver.observe(shadowRoot, {childList: true, subtree: true});
+      return true;
+    };
+
+    if (!bindShadowRoot()) {
+      hostObserver = new MutationObserver(() => {
+        if (bindShadowRoot()) {
+          hostObserver.disconnect();
+        }
+      });
+      hostObserver.observe(document.body, {childList: true, subtree: true});
+    }
+
+    return () => {
+      hostObserver?.disconnect();
+      shadowObserver?.disconnect();
+    };
+  }, []);
+
+  return null;
+}
+
+function AskAiSparkIcon() {
   return (
-    <svg viewBox="0 0 20 20" fill="none" aria-hidden="true">
-      <path
-        d="M5.833 14.167 2.5 17.5V4.167C2.5 3.246 3.246 2.5 4.167 
2.5h11.666c.921 0 1.667.746 1.667 1.667v8.333c0 .921-.746 1.667-1.667 
1.667H5.833Z"
-        stroke="currentColor"
-        strokeWidth="1.7"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
+    <svg viewBox="0 0 32 32" fill="none" aria-hidden="true">
+      <circle cx="16" cy="16" r="4.25" fill="currentColor" />
       <path
-        d="M6.667 7.083h6.666M6.667 10.417h4.166"
+        d="M16 4.5V8M16 24v3.5M27.5 16H24M8 16H4.5M24.132 7.868l-2.475 
2.475M10.343 21.657l-2.475 2.475M24.132 24.132l-2.475-2.475M10.343 10.343 7.868 
7.868"
         stroke="currentColor"
-        strokeWidth="1.7"
+        strokeWidth="2.4"
         strokeLinecap="round"
       />
     </svg>
@@ -30,25 +159,60 @@ function MessageIcon() {
 }
 
 function GlobalAskAi() {
-  const {i18n} = useDocusaurusContext();
-  const askAiPath = useBaseUrl(localizePath(i18n.currentLocale, '/ask-ai'));
-
   return (
-    <a href={askAiPath} className="st-global-ask-ai" aria-label="Ask AI">
+    <button id={ASK_AI_TRIGGER_ID} type="button" className="st-global-ask-ai" 
aria-label="Ask AI" title="Ask AI">
       <span className="st-global-ask-ai-button">
-        <MessageIcon />
-        <span>Ask AI</span>
+        <AskAiSparkIcon />
       </span>
-      <span className="st-global-ask-ai-dot" aria-hidden="true"></span>
-    </a>
+    </button>
   );
 }
 
 export default function LayoutWrapper(props) {
+  const {i18n} = useDocusaurusContext();
+  const widgetLanguage = typeof window !== 'undefined'
+    ? (window.location.pathname.startsWith('/zh-CN/') ? 'zh' : 'en')
+    : (i18n.currentLocale === 'zh-CN' ? 'zh' : 'en');
+
   // Inject the global Ask AI shortcut once so docs pages and custom pages 
stay consistent.
   return (
     <>
+      <Head>
+        <script
+          async
+          id="st-kapa-widget-script"
+          src="https://widget.kapa.ai/kapa-widget.bundle.js";
+          data-website-id="3a335e8d-d400-4c7d-baad-d820ee0600a7"
+          data-project-name="Apache SeaTunnel"
+          data-project-logo="https://seatunnel.apache.org/image/logo.png";
+          data-project-color={KAPA_PROJECT_COLOR}
+          data-language={widgetLanguage}
+          data-button-hide="true"
+          data-modal-border-radius="34px"
+          data-modal-override-open-id-ask-ai={ASK_AI_TRIGGER_ID}
+          data-modal-disclaimer="This is a custom LLM with access to all 
[SeaTunnel 
documentation](https://seatunnel.apache.org/docs/introduction/about)."
+          data-modal-disclaimer-bg-color="#f4fbff"
+          data-modal-disclaimer-text-color="#5b6b7e"
+          data-query-input-border-color="#d9e8f5"
+          data-query-input-text-color="#0f172a"
+          data-query-input-placeholder-text-color="#9aa7b8"
+          data-deep-thinking-button-bg-color="#f4fbff"
+          data-deep-thinking-button-hover-bg-color="#ebf6ff"
+          data-deep-thinking-button-text-color="#233445"
+          data-deep-thinking-button-active-bg-color="#dceeff"
+          data-deep-thinking-button-active-hover-bg-color="#d2e9ff"
+          data-deep-thinking-button-active-text-color="#1d6db4"
+          data-example-question-button-bg-color="#f8fcff"
+          data-example-question-button-border="1px solid #d9e8f5"
+          data-example-question-button-hover-bg-color="#eef7ff"
+          data-example-question-button-text-color="#233445"
+          data-consent-required="true"
+          data-consent-screen-disclaimer="By clicking &quot;I agree, let's 
chat&quot;, you consent to the use of the AI assistant in accordance with 
kapa.ai's [Privacy Policy](https://www.kapa.ai/content/privacy-policy). This 
service uses reCAPTCHA, which requires your consent to Google's [Privacy 
Policy](https://policies.google.com/privacy) and [Terms of 
Service](https://policies.google.com/terms). By proceeding, you explicitly 
agree to both kapa.ai's and Google's privacy policies."
+          data-bot-protection-mechanism="hcaptcha"
+        ></script>
+      </Head>
       <Layout {...props} />
+      <KapaWidgetOverrides />
       <GlobalAskAi />
     </>
   );


Reply via email to