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 &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 "I agree, let's
chat", 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 />
</>
);