This is an automated email from the ASF dual-hosted git repository.
gaojun2048 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 3eedf6e93a Feat/update homepage UIUI (#235)
3eedf6e93a is described below
commit 3eedf6e93ab0ef5663c8e67f15ed22dbe8babb6d
Author: chaoling <[email protected]>
AuthorDate: Fri Jun 2 11:54:09 2023 +0800
Feat/update homepage UIUI (#235)
---
src/pages/home/index.jsx | 132 +++++++++++++--
src/pages/home/index.less | 158 +++++++++++++++---
src/pages/home/languages.json | 276 +++++++++++++++++++++++---------
static/home/connector/Clickhouse.png | Bin 0 -> 580 bytes
static/home/connector/Datahub.jpeg | Bin 0 -> 18559 bytes
static/home/connector/Doris.png | Bin 0 -> 17899 bytes
static/home/connector/Elasticsearch.svg | 15 ++
static/home/connector/Github.svg | 11 ++
static/home/connector/GoogleSheets.jpeg | Bin 0 -> 11101 bytes
static/home/connector/GoogleSheets.svg | 13 ++
static/home/connector/Greenplum.jpeg | Bin 0 -> 15662 bytes
static/home/connector/Hive.png | Bin 0 -> 8735 bytes
static/home/connector/Hudi.png | Bin 0 -> 37454 bytes
static/home/connector/Iceberg.png | Bin 0 -> 17608 bytes
static/home/connector/InfluxDB.png | Bin 0 -> 11783 bytes
static/home/connector/MongoDB.png | Bin 0 -> 6335 bytes
static/home/connector/MySQL-CDC.svg | 10 ++
static/home/connector/Neo4j.jpeg | Bin 0 -> 5375 bytes
static/home/connector/Notion.svg | 3 +
static/home/connector/PostgreSql.svg | 13 ++
static/home/connector/S3-Redshift.png | Bin 0 -> 3584 bytes
static/home/connector/S3File.svg | 13 ++
static/home/connector/SftpFile.png | Bin 0 -> 603 bytes
static/home/connector/SqlServer-CDC.svg | 19 +++
static/home/connector/db2.svg | 9 ++
static/home/connector/excel.png | Bin 0 -> 2019 bytes
static/home/connector/kafka.svg | 10 ++
static/home/connector/oracle.png | Bin 0 -> 23397 bytes
static/home/connector/orcle_copy.png | Bin 0 -> 28300 bytes
static/home/icons/lesstime.png | Bin 0 -> 6184 bytes
static/home/intro_en.png | Bin 0 -> 372653 bytes
static/home/introduction1.png | Bin 0 -> 83697 bytes
static/home/introduction2.png | Bin 0 -> 77929 bytes
static/home/introduction3.png | Bin 0 -> 51607 bytes
34 files changed, 579 insertions(+), 103 deletions(-)
diff --git a/src/pages/home/index.jsx b/src/pages/home/index.jsx
index 022f1069c7..845a47fad0 100644
--- a/src/pages/home/index.jsx
+++ b/src/pages/home/index.jsx
@@ -7,6 +7,53 @@ import systemConfiguration from '../../js/sysConfig'
const versions = require('../../../versions.json');
+const connectorImgs = [
+ { key: 'MySQL-CDC', path: 'MySQL-CDC', imgSrc: 'MySQL-CDC.svg', type:
'source' },
+ { key: 'PostgreSql', path: 'Jdbc#appendix', imgSrc: 'PostgreSql.svg',
type: 'source' },
+ { key: 'Neo4j', path: 'Neo4j', imgSrc: 'Neo4j.jpeg', type: 'source' },
+ { key: 'Clickhouse', path: 'Clickhouse', imgSrc: 'Clickhouse.png', type:
'source' },
+ { key: 'InfluxDB', path: 'InfluxDB', imgSrc: 'InfluxDB.png', type:
'source' },
+ { key: 'MongoDB', path: 'MongoDB', imgSrc: 'MongoDB.png', type: 'source' },
+ { key: 'Hive', path: 'Hive', imgSrc: 'Hive.png', type: 'source' },
+ { key: 'Greenplum', path: 'Greenplum', imgSrc: 'Greenplum.jpeg', type:
'source' },
+ { key: 'Hudi', path: 'Hudi', imgSrc: 'Hudi.png', type: 'source' },
+ { key: 'Iceberg', path: 'Iceberg', imgSrc: 'Iceberg.png', type: 'source' },
+ { key: 'oracle', path: 'Jdbc#appendix', imgSrc: 'oracle.png', type:
'source' },
+ { key: 'db2', path: 'Jdbc#appendix', imgSrc: 'db2.svg', type: 'source' },
+ { key: 'SqlServer-CDC', path: 'SqlServer-CDC', imgSrc:
'SqlServer-CDC.svg', type: 'source' },
+ { key: 'S3File', path: 'S3File', imgSrc: 'S3File.svg', type: 'source' },
+ { key: 'S3-Redshift', path: 'S3-Redshift', imgSrc: 'S3-Redshift.png',
type: 'sink' },
+ { key: 'kafka', path: 'kafka', imgSrc: 'kafka.svg', type: 'source' },
+ { key: 'GoogleSheets', path: 'GoogleSheets', imgSrc: 'GoogleSheets.svg',
type: 'source' },
+ { key: 'Notion', path: 'Notion', imgSrc: 'Notion.svg', type: 'source' },
+ { key: 'Doris', path: 'Doris', imgSrc: 'Doris.png', type: 'sink' },
+ { key: 'Datahub', path: 'Datahub', imgSrc: 'Datahub.jpeg', type: 'sink' },
+ { key: 'SftpFile', path: 'SftpFile', imgSrc: 'SftpFile.png', type:
'source' },
+ { key: 'Github', path: 'Github', imgSrc: 'Github.svg', type: 'source' },
+ { key: 'excel', path: 'Jdbc#appendix', imgSrc: 'excel.png', type: 'source'
},
+ { key: 'Elasticsearch', path: 'Elasticsearch', imgSrc:
'Elasticsearch.svg', type: 'source' },
+];
+
+// postgreSql db2 excel oracle => jdbc
+const Connector = function(){
+ return (
+ <div className="connector_img_wrap">
+ {
+ connectorImgs.map(connector => {
+ return (
+ <div className="connector_img_item"
key={connector.key}>
+ <a
href={`/docs/${versions[0]}/connector-v2/${connector.type}/${connector.path}`}
target="_blank" className="connector_link">
+ <img
src={useBaseUrl(`/home/connector/${connector.imgSrc}`)} alt="" />
+ </a>
+ </div>
+ )
+ })
+ }
+ </div>
+ )
+
+}
+
export default function () {
const [flag, setFlag] = useState(1)
const isBrowser = useIsBrowser();
@@ -18,6 +65,9 @@ export default function () {
setFlag(val == 1 ? 2 : 1)
}
+
+
+
return (
<div>
<div className="main slogan">
@@ -30,18 +80,18 @@ export default function () {
</h1>
<p
className="main_slogan">{dataSource.home.banner.slogan}</p>
-
+
<div className="button_row center">
{/* TODO next release should be change to
/category/start */}
- <a href={'/docs/' + versions[0] + '/about'}
className="corner_button blue_fill">{dataSource.common.getStart}</a>
+ <a href={'/docs/' + versions[0] + '/about'}
className="corner_button link_btn blue_fill">{dataSource.common.getStart}</a>
<a href={systemConfiguration.github.projectUrl}
target="_blank"
- className="corner_button blue" onMouseOver={()
=> changeFlag(1)} onMouseOut={() => changeFlag(2)}>
+ className="corner_button link_btn blue"
onMouseOver={() => changeFlag(1)} onMouseOut={() => changeFlag(2)}>
<img className="button_icon github1"
src={useBaseUrl('/home/icons/github' + flag + '.svg')} alt="github"/>
<span>GitHub</span>
</a>
<a
href="https://the-asf.slack.com/archives/C053HND1D6X";
- target="_blank"
- className="corner_button blue"
+ target="_blank"
+ className="corner_button link_btn blue"
>
<img className="button_icon"
src={useBaseUrl('/home/icons/slack.svg')} alt="slack"/>
<span>Slack</span>
@@ -51,19 +101,30 @@ export default function () {
</div>
</div>
+ <div className="main introduction">
+ <div className="block">
+ <div className="main_intro">
+ <img src={useBaseUrl('/home/intro_en.png')} alt="" />
+ </div>
+
+ </div>
+ </div>
+
<div className="main feature">
<div className="block">
- <h1 className="main_subtitle
text_center">{dataSource.common.coreFeatures}</h1>
+ <h1 className="main_subtitle
text_center">{dataSource.home.feature.mainTitle}</h1>
+ <h2 className="sub_subtitle
text_center">{dataSource.home.feature.subTitle}</h2>
+
<div className="features item_block text_center">
<div className="feature_item components">
- <h3
className="item-title">{dataSource.common.components}</h3>
- <p
className="item-desc">{dataSource.home.feature.components}</p>
+ <h3
className="item-title">{dataSource.common.reduceComplexity}</h3>
+ <p
className="item-desc">{dataSource.home.feature.reduceComplexity}</p>
</div>
<div className="feature_item scalability">
- <h3
className="item-title">{dataSource.common.scalability}</h3>
- <p
className="item-desc">{dataSource.home.feature.scalability}</p>
+ <h3
className="item-title">{dataSource.common.lesstime}</h3>
+ <p
className="item-desc">{dataSource.home.feature.lesstime}</p>
</div>
<div className="feature_item simplicity">
@@ -78,7 +139,56 @@ export default function () {
</div>
</div>
</div>
- </div>
+ <div className="main fun_feature">
+ <div className="block">
+ <div className="feature_list">
+ {
+ dataSource.home.featureList.map((item, index) => {
+ return (
+ <div className="feat_item" key={index}>
+ {
+ item.leftImg &&
+ <div className="feature_img">
+ {
+ item.name === 'connector'
+ ? <Connector/>
+ : <img
src={useBaseUrl(item.imgSrc || `/home/introduction${ index + 1}.png`)} alt="" />
+ }
+
+ </div>
+ }
+
+ <div className="img_explain">
+ {
+ item.features.map(feature => {
+ return (
+ <div
className="explain_item" key={feature.title}>
+
+ <a
className="see_more" href={`/docs/${versions[0]}${feature.link || '/about'}`}
target="_blank">
+ <h3
className="explain_title">{feature.title}</h3>
+ </a>
+
+ <p
className="explain_desc">{feature.desc}</p>
+ </div>
+ )
+ })
+ }
+ </div>
+
+ {
+ !item.leftImg &&
+ <div className="feature_img">
+ <img
src={useBaseUrl(item.imgSrc || `/home/introduction${ index + 1}.png`)} alt="" />
+ </div>
+ }
+ </div>
+ )
+ })
+ }
+ </div>
+ </div>
+ </div>
+ </div>
);
}
diff --git a/src/pages/home/index.less b/src/pages/home/index.less
index 3ed14680b7..3556745388 100644
--- a/src/pages/home/index.less
+++ b/src/pages/home/index.less
@@ -20,8 +20,11 @@
&.slogan {
background-color: #fff;
margin-top: -54px;
- }
+ .block {
+ min-width: 1200px;
+ }
+ }
&.feature {
background-color: rgba(219, 238, 253, 0.3);
@@ -55,9 +58,19 @@
.main_subtitle {
margin-bottom: 40px;
- font-size: 35px;
+ font-size: 55px;
+ font-weight: 700;
+ line-height: 1.2;
+ white-space: pre-line;
+ }
+
+ .sub_subtitle {
+ margin-bottom: 40px;
+ font-size: 24px;
font-weight: 400;
line-height: 46px;
+ line-height: 1.2;
+ white-space: pre-line;
}
.item_block {
@@ -66,7 +79,7 @@
.paragraph {
padding-left: 50px;
font-size: 18px;
- color: #4A4A4A;
+ color: #4a4a4a;
line-height: 26px;
font-weight: 400;
margin-bottom: 16px;
@@ -150,7 +163,7 @@
}
.concept_title {
- background: #E4E5E9;
+ background: #e4e5e9;
}
}
@@ -216,8 +229,6 @@
.feature_item {
width: 25%;
- height: 350px;
- margin-bottom: 20px;
border-radius: 2px;
padding: 126px 50px 24px;
background-repeat: no-repeat;
@@ -225,7 +236,7 @@
background-position: center 30px;
transition: all 0.5s;
- &:nth-child(3n+3) {
+ &:nth-child(3n + 3) {
margin-right: 0;
}
@@ -234,7 +245,7 @@
}
&.scalability {
- background-image: url(/static/home/icons/scalability.svg);
+ background-image: url(/static/home/icons/lesstime.png);
}
&.simplicity {
@@ -247,7 +258,7 @@
.item-title {
color: #333;
- font-weight: 500;
+ font-weight: 700;
line-height: 32px;
font-size: 20px;
margin-top: 20px;
@@ -306,44 +317,151 @@
color: #666;
font-size: 14px;
position: absolute;
- border: 1px solid #E4E5E9;
+ border: 1px solid #e4e5e9;
border-radius: 30px 30px 30px 0;
padding: 5px 9px;
- background: #E4E5E9;
+ background: #e4e5e9;
top: -17px;
text-shadow: none;
}
}
.main_slogan {
- margin-bottom: 50px;
- font-size: 24px;
+ margin-bottom: 80px;
+ font-size: 30px;
color: #0f1223;
text-align: center;
line-height: 32px;
font-weight: 500;
+ line-height: 1.2;
+ white-space: pre-line;
}
+ .button_row {
+ display: flex;
+
+ &.center {
+ justify-content: center;
+ }
+
+ .link_btn {
+ min-width: 80px;
+ height: 64px;
+ line-height: 64px;
+ border-radius: 32px;
+ font-size: 24px;
+ padding: 0 30px;
+ margin-right: 80px;
+ &:last-child {
+ margin-right: 0px;
+ }
+ }
+ }
}
- .button_row {
- display: flex;
+ &.introduction {
+ margin-top: -80px;
- &.center {
+ .block {
+ width: 80%;
+ }
+
+ .main_intro {
+ display: flex;
+ margin-bottom: 60px;
justify-content: center;
}
}
+ &.fun_feature {
+ .block {
+ width: 80%;
+ }
+
+ .feat_item {
+ display: flex;
+ padding-top: 50px;
+ padding-bottom: 50px;
+ overflow: auto;
+ }
+
+ .feature_img {
+ width: 50%;
+ }
+
+ .feature_img + .img_explain,
+ .img_explain + .feature_img {
+ padding-left: 40px;
+ }
+
+ .connector_img_wrap {
+ width: 100%;
+ display: flex;
+ flex-wrap: wrap;
+ .connector_img_item {
+ width: 16.666%;
+ padding: 20px;
+ }
+ .connector_link {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ }
+
+ .img_explain {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+
+ .explain_item {
+ margin-bottom: 20px;
+ }
+
+ .explain_title {
+ font-size: 20px;
+ font-weight: bold;
+ }
+
+ .explain_desc {
+ font-size: 20px;
+ }
+
+ .see_more {
+ &:hover {
+ cursor: pointer;
+ color: #007bff;
+ text-decoration: underline;
+ }
+
+ img {
+ height: 16px;
+ display: inline-block;
+ margin-left: 10px;
+ }
+ }
+ }
+
+ @media screen and (min-width: 1800px) {
+ .connector_img_wrap {
+ padding: 0 3vw !important;
+ }
+ .connector_img_item {
+ padding: 1.2vw !important;
+ }
+ }
+ }
@keyframes move_wave {
0% {
- transform: translateX(0) translateZ(0) scaleY(1)
+ transform: translateX(0) translateZ(0) scaleY(1);
}
50% {
- transform: translateX(-25%) translateZ(0) scaleY(0.55)
+ transform: translateX(-25%) translateZ(0) scaleY(0.55);
}
100% {
- transform: translateX(-50%) translateZ(0) scaleY(1)
+ transform: translateX(-50%) translateZ(0) scaleY(1);
}
}
@@ -409,7 +527,6 @@
.wave_animation .wave_bottom {
animation: move_wave 15s linear infinite;
}
-
}
.connector {
@@ -519,3 +636,4 @@
}
}
}
+
diff --git a/src/pages/home/languages.json b/src/pages/home/languages.json
index 823574f270..83e1690ca1 100644
--- a/src/pages/home/languages.json
+++ b/src/pages/home/languages.json
@@ -1,74 +1,206 @@
{
- "zh-CN": {
- "common": {
- "getStart": "快速开始",
- "architecture": "系统架构",
- "description": "描述",
- "learnMore": "了解更多",
- "coreFeatures": "核心特性",
- "components": "组件丰富",
- "scalability": "高扩展性",
- "batchStream": "批流一体",
- "simplicity": "简单易用",
- "stable": "成熟稳定",
- "ourUsers": "Our Users",
- "readMore": "阅读更多",
- "download": "下载",
- "releaseDate": "发布日期",
- "newFeatures": "新特性",
- "enhancement": "增强点",
- "bugFixs": "Bug修复",
- "changeLog": "详细变更"
- },
- "home": {
- "banner": {
- "slogan": "下一代高性能、分布式、海量数据集成框架"
- },
- "feature": {
- "components": "内置丰富插件,支持各种数据产品方便快捷的传输和集成数据",
- "scalability": "基于模块化和插件化设计,支持热插拔, 带来更好的扩展性",
- "simplicity": "特有的架构设计下,使得开发配置更简单,几乎零代码,无使用成本",
- "stable": "经历多家企业,大规模生产环境使用和海量数据的洗礼,稳定健壮"
- },
- "architecture": {
- "desc": "Apache
SeaTunnel是下一代高性能、分布式、海量数据集成框架。通过我们的努力让Spark的使用更简单，更高效，并将业界和我们使用Spark的优质经验固化到seatunnel这个产品中，明显减少学习成本，加快分布式数据处理能力在生产环境落地."
- }
- }
- },
- "en": {
- "common": {
- "getStart": "Quick Start",
- "architecture": "System Architecture",
- "description": "Description",
- "learnMore": "Learn More",
- "coreFeatures": "Core Features",
- "components": "Rich Components",
- "scalability": "High Scalability",
- "batchStream": "Batch Flow Integration",
- "simplicity": "Easy to use",
- "stable": "Mature & stable",
- "ourUsers": "Our Users",
- "readMore": "Read More",
- "download": "Download",
- "releaseDate": "Release Date",
- "newFeatures": "New Features",
- "enhancement": "Enhancement point",
- "bugFixs": "Bug Fix",
- "changeLog": "Change Log"
- },
- "home": {
- "banner": {
- "slogan": "Next-generation high-performance, distributed, massive data
integration framework"
- },
- "feature": {
- "components": "Built-in rich plugins to support the transmission and
integration of various data products",
- "scalability": "Modularization and plugin, support hot swap, bring
better scalability",
- "simplicity": "Unique architecture design,make development and
configuration easier",
- "stable": "Experience the baptism of large-scale production
environment use and massive data"
- },
- "architecture": {
- "desc": "Apache SeaTunnel is a next-generation high-performance,
distributed, and massive data integration framework. Through our efforts to
make the use of Spark simpler and more efficient, and solidify the high-quality
experience of the industry and our use of Spark into the product SeaTunnel, it
significantly reduces the cost of learning and accelerates the deployment of
distributed data processing capabilities in the production environment."
- }
- }
- }
+ "zh-CN": {
+ "common": {
+ "getStart": "快速开始",
+ "architecture": "系统架构",
+ "description": "描述",
+ "learnMore": "了解更多",
+ "coreFeatures": "核心特性",
+ "components": "组件丰富",
+ "scalability": "高扩展性",
+ "batchStream": "批流一体",
+ "stable": "成熟稳定",
+ "ourUsers": "Our Users",
+ "readMore": "阅读更多",
+ "download": "下载",
+ "releaseDate": "发布日期",
+ "newFeatures": "新特性",
+ "enhancement": "增强点",
+ "bugFixs": "Bug修复",
+ "changeLog": "详细变更",
+ "reduceComplexity": "降低复杂性",
+ "lesstime": "节省更多时间",
+ "simplicity": "简单易维护",
+ "seeMore": "查看更多"
+ },
+ "home": {
+ "banner": {
+ "slogan": "下一代高性能、分布式、海量数据集成框架"
+ },
+ "introduction": {
+ "texts": [
+ "支持数百个连接器, 支持CDC和大批量数据, 稳定高效同步百亿数据。",
+ "获取Apache SeaTunnel的最新信息,
包括更新、社区贡献、新闻博客等。"
+ ],
+ "placeholder": "输入你的邮箱地址",
+ "subscribe": "订阅"
+ },
+ "feature": {
+ "mainTitle": "支持上百个数据源、传输速度快、准确率高",
+ "subTitle":
"丰富易扩展的连接器和插件化的连接器设计，能够更轻松的运行复杂的集成。",
+ "components": "内置丰富插件,支持各种数据产品方便快捷的传输和集成数据",
+ "scalability": "基于模块化和插件化设计,支持热插拔, 带来更好的扩展性",
+ "stable": "经历多家企业,大规模生产环境使用和海量数据的洗礼,稳定健壮",
+ "reduceComplexity":
"基于API开发的连接器能兼容离线同步、实时同步、全量同步、增量同步等多种场景。",
+ "lesstime":
"提供了作业可视化管理、调度、运行和监控能力。加速低代码和无代码工具的集成。",
+ "simplicity": "支持单机、集群部署, 选择Zeta引擎部署,
无需依赖Spark, Flink 等大数据组件。"
+ },
+ "featureList": [
+ {
+ "leftImg": true,
+ "imgSrc": "",
+ "name": "connector",
+ "features": [
+ {
+ "title": "丰富的连接器",
+ "desc":
"已有数百种连接器，基于API可以运行在多种不同的引擎上。",
+ "link": ""
+ },
+ {
+ "title": "批流一体、多种开发模式",
+ "desc":
"完美兼容离线同步、实时同步、全量/增量同步等场景。支持可视化开发和代码开发。",
+ "link": ""
+ }
+ ]
+ },
+ {
+ "leftImg": false,
+ "imgSrc": "",
+ "features": [
+ {
+ "title": "转换海量数据",
+ "desc":
"使用超高性能分布式数据同步、将会实时同步海量数据摄取或获取变更数据。",
+ "link": ""
+ },
+ {
+ "title": "多引擎",
+ "desc":
"默认使用zeta引擎，同时也支持多个版本的spark和flink。",
+ "link": ""
+ }
+ ]
+ },
+ {
+ "leftImg": true,
+ "imgSrc": "",
+ "features": [
+ {
+ "title": "易管理维护",
+ "desc": "提供统一的开发和管理平台。",
+ "link": ""
+ },
+ {
+ "title": "完善的监控",
+ "desc":
"提供数据同步过程中的详细监控，直观了解数据的真实情况。",
+ "link": ""
+ }
+ ]
+ }
+ ],
+ "architecture": {
+ "desc": "Apache
SeaTunnel是下一代高性能、分布式、海量数据集成框架。通过我们的努力让Spark的使用更简单，更高效，并将业界和我们使用Spark的优质经验固化到seatunnel这个产品中，明显减少学习成本，加快分布式数据处理能力在生产环境落地."
+ }
+ }
+ },
+ "en": {
+ "common": {
+ "getStart": "Quick Start",
+ "architecture": "System Architecture",
+ "description": "Description",
+ "learnMore": "Learn More",
+ "coreFeatures": "Core Features",
+ "components": "Rich Components",
+ "scalability": "High Scalability",
+ "batchStream": "Batch Flow Integration",
+ "stable": "Mature & Stable",
+ "ourUsers": "Our Users",
+ "readMore": "Read More",
+ "download": "Download",
+ "releaseDate": "Release Date",
+ "newFeatures": "New Features",
+ "enhancement": "Enhancement point",
+ "bugFixs": "Bug Fix",
+ "changeLog": "Change Log",
+ "reduceComplexity": "Reduce Complexity",
+ "lesstime": "Save More Time",
+ "simplicity": "Simple And Easy To Maintain",
+ "seeMore": "More"
+ },
+ "home": {
+ "banner": {
+ "slogan": "Next-generation high-performance,\n
distributed, massive data integration tool."
+ },
+ "introduction": {
+ "texts": [
+ "Our system supports hundreds of
connectors, enabling efficient synchronization of massive amounts of data. It
seamlessly handles both CDC and bulk data transfers, ensuring stability and
high performance.",
+ "Apache SeaTunnel provides the latest
information on updates, community contributions, news, and blog posts."
+ ],
+ "placeholder": "Enter your email address",
+ "subscribe": "Subscribe"
+ },
+ "feature": {
+ "mainTitle": "Support Hundreds Of Data Sources,
\nFast Speed & High Accuracy",
+ "subTitle": "Inteagate massive data between
Transaction DB, Cloud DB, SaaS, \n Binlog with SQL-like code or Drag & Drop.",
+ "reduceComplexity": "The connector developed
based on API can be compatible with offline synchronization, real-time
synchronization, full synchronization, incremental synchronization and other
scenarios.",
+ "lesstime": "Provides visual job management,
scheduling, running, and monitoring capabilities. Accelerates the integration
of low-code and no-code tools.",
+ "simplicity": "Support stand-alone, cluster
deployment, choose Zeta engine deployment, no need to rely on Spark, Flink and
other big data components.",
+ "components": "Built-in rich plugins to support
the transmission and integration of various data products",
+ "scalability": "Modularization and plugin,
support hot swap, bring better scalability",
+ "stable": "Experience the baptism of
large-scale production environment use and massive data."
+ },
+ "featureList": [
+ {
+ "leftImg": true,
+ "imgSrc": "",
+ "name": "connector",
+ "features": [
+ {
+ "title": "Rich
Connectors",
+ "desc": "There are
hundreds of connectors that can run on many different engines based on APIs.",
+ "link":
"/category/source-v2"
+ },
+ {
+ "title": "Batch &
Realtime Integration",
+ "desc": "Perfect
compatibility with offline synchronization, real-time synchronization, and
full/incremental synchronization scenarios. Supports visual development and
code development.",
+ "link": ""
+ }
+ ]
+ },
+ {
+ "leftImg": false,
+ "imgSrc": "",
+ "features": [
+ {
+ "title": "Transforming
Massive Data",
+ "desc": "Use ultra-high
performance distributed data synchronization, which will synchronize massive
data in real time to ingest or obtain changed data.",
+ "link":
"/category/transform-v2"
+ },
+ {
+ "title": "SeaTunel
Zeta, Spark, Flink Supported",
+ "desc": "The zeta
engine is used by default, and multiple versions of spark and flink are also
supported.",
+ "link":
"/seatunnel-engine/about"
+ }
+ ]
+ },
+ {
+ "leftImg": true,
+ "imgSrc": "",
+ "features": [
+ {
+ "title": "Easy
Management And Maintenance",
+ "desc": "Provide a
unified development and management platform.",
+ "link":
"/start-v2/locally/quick-start-seatunnel-engine"
+ },
+ {
+ "title": "Fully-fledged
Monitoring",
+ "desc": "Provides
detailed monitoring during data synchronization to understand the actual data
situation.",
+ "link":
"/start-v2/locally/quick-start-seatunnel-engine"
+ }
+ ]
+ }
+ ],
+ "architecture": {
+ "desc": "Apache SeaTunnel is a next-generation
high-performance, distributed, and massive data integration framework. Through
our efforts to make the use of Spark simpler and more efficient, and solidify
the high-quality experience of the industry and our use of Spark into the
product SeaTunnel, it significantly reduces the cost of learning and
accelerates the deployment of distributed data processing capabilities in the
production environment."
+ }
+ }
+ }
}
\ No newline at end of file
diff --git a/static/home/connector/Clickhouse.png
b/static/home/connector/Clickhouse.png
new file mode 100644
index 0000000000..f292776c84
Binary files /dev/null and b/static/home/connector/Clickhouse.png differ
diff --git a/static/home/connector/Datahub.jpeg
b/static/home/connector/Datahub.jpeg
new file mode 100644
index 0000000000..2c21282174
Binary files /dev/null and b/static/home/connector/Datahub.jpeg differ
diff --git a/static/home/connector/Doris.png b/static/home/connector/Doris.png
new file mode 100644
index 0000000000..6ac5579871
Binary files /dev/null and b/static/home/connector/Doris.png differ
diff --git a/static/home/connector/Elasticsearch.svg
b/static/home/connector/Elasticsearch.svg
new file mode 100644
index 0000000000..85c00ecd08
--- /dev/null
+++ b/static/home/connector/Elasticsearch.svg
@@ -0,0 +1,15 @@
+<svg width="250" height="250" viewBox="0 0 250 250" fill="none"
xmlns="http://www.w3.org/2000/svg";>
+<g clip-path="url(#clip0_2108_4084)">
+<path d="M168.992 95.9H118.455C118.697 97.1125 119.18 98.325 119.422
99.295C121.115 105.115 122.082 111.178 122.566 117.483C122.808 119.908 122.808
122.575 122.808 125C122.808 127.425 122.808 130.093 122.566 132.518C122.082
138.823 121.115 144.885 119.422 150.705C119.18 151.918 118.697 153.13 118.455
154.1H168.992C184.951 154.1 197.767 141.005 197.767 125C197.767 108.995 184.951
95.9 168.992 95.9Z" fill="#00A9E5"/>
+<path d="M122.566 132.518C122.807 130.093 122.807 127.425 122.807 125C122.807
122.575 122.807 119.908 122.566 117.483C122.082 111.178 121.115 105.115 119.422
99.295C119.18 98.0825 118.697 96.87 118.455 95.9H40.3525C37.4508 105.115 36
114.815 36 125C36 135.185 37.4508 144.885 40.3525 154.1H118.455C118.697 152.888
119.18 151.675 119.422 150.705C121.115 144.885 122.082 138.823 122.566
132.518Z" fill="#353535"/>
+<path d="M177.697 163.8H114.828C112.894 168.165 110.718 172.288 108.3
176.168C104.673 182.23 100.32 187.565 95.484 192.658C93.7914 194.355 92.0988
195.81 90.4062 197.508C87.0209 200.66 83.1521 203.328 79.2832 205.995C94.5168
216.18 112.894 222 132.48 222C166.091 222 195.591 204.783 213 178.835C204.054
169.62 191.48 163.8 177.697 163.8Z" fill="#00BFB3"/>
+<path d="M108.3 176.168C110.718 172.288 112.894 168.165 114.829
163.8H43.9805C51.4764 181.018 63.8083 195.81 79.5255 205.995C83.3944 203.328
87.0214 200.66 90.6485 197.508C92.3411 196.053 94.0337 194.355 95.7264
192.658C100.321 187.808 104.673 182.23 108.3 176.168Z" fill="#019B8F"/>
+<path d="M95.4842 57.3425C93.7916 55.645 92.0989 54.19 90.4063 52.4925C87.0211
49.34 83.1522 46.6725 79.2834 44.005C63.808 54.19 51.476 68.9825 43.7383
86.2H114.587C112.652 81.835 110.476 77.7125 108.058 73.8325C104.673 67.77
100.32 62.1925 95.4842 57.3425Z" fill="#F9B110"/>
+<path d="M132.48 28C112.894 28 94.5168 33.82 79.2832 44.005C83.1521 46.6725
86.7791 49.34 90.4062 52.4925C92.0988 53.9475 93.7914 55.645 95.484
57.3425C100.32 62.435 104.673 67.77 108.3 73.8325C110.718 77.7125 112.894
81.835 114.828 86.2H177.697C191.48 86.2 204.054 80.38 213 71.165C195.591
45.2175 166.091 28 132.48 28Z" fill="#FED10A"/>
+</g>
+<defs>
+<clipPath id="clip0_2108_4084">
+<rect width="177" height="194" fill="white" transform="translate(36 28)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/static/home/connector/Github.svg b/static/home/connector/Github.svg
new file mode 100644
index 0000000000..45658b90ff
--- /dev/null
+++ b/static/home/connector/Github.svg
@@ -0,0 +1,11 @@
+<svg width="250" height="250" viewBox="0 0 250 250" fill="none"
xmlns="http://www.w3.org/2000/svg";>
+<g clip-path="url(#clip0_1789_6866)">
+<path d="M124.621 30C70.7134 30 27 73.5524 27 127.279C27 170.26 54.9713
206.723 93.7594 219.587C98.638 220.487 100.43 217.476 100.43 214.907C100.43
212.587 100.338 204.924 100.297 196.795C73.1381 202.68 67.4074 185.318 67.4074
185.318C62.9668 174.073 56.5684 171.084 56.5684 171.084C47.7117 165.046 57.2361
165.17 57.2361 165.17C67.0391 165.857 72.201 175.195 72.201 175.195C80.9077
190.067 95.038 185.767 100.609 183.282C101.485 176.994 104.015 172.703 106.806
170.274C85.124 167.814 62.3298 [...]
+<path d="M63.5619 168.576C63.3475 169.059 62.5834 169.204 61.889
168.873C61.1808 168.555 60.7827 167.896 61.0124 167.411C61.2229 166.913 61.987
166.774 62.6937 167.109C63.4034 167.425 63.8077 168.091 63.5619
168.576ZM68.3639 172.845C67.8984 173.275 66.9881 173.076 66.3702
172.396C65.7317 171.718 65.6122 170.811 66.0846 170.374C66.5647 169.944 67.4474
170.145 68.0875 170.824C68.726 171.51 68.8501 172.411 68.3631 172.846L68.3639
172.845ZM71.6584 178.308C71.0597 178.722 70.0812 178.334 69.4 [...]
+</g>
+<defs>
+<clipPath id="clip0_1789_6866">
+<rect width="196" height="190" fill="white" transform="translate(27 30)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/static/home/connector/GoogleSheets.jpeg
b/static/home/connector/GoogleSheets.jpeg
new file mode 100644
index 0000000000..7e35fc5d15
Binary files /dev/null and b/static/home/connector/GoogleSheets.jpeg differ
diff --git a/static/home/connector/GoogleSheets.svg
b/static/home/connector/GoogleSheets.svg
new file mode 100644
index 0000000000..21effa309a
--- /dev/null
+++ b/static/home/connector/GoogleSheets.svg
@@ -0,0 +1,13 @@
+<svg width="250" height="250" viewBox="0 0 250 250" fill="none"
xmlns="http://www.w3.org/2000/svg";>
+<g clip-path="url(#clip0_1789_6983)">
+<path d="M200.745 218.706C200.743 221.885 199.49 224.933 197.262
227.181C195.034 229.429 192.013 230.693 188.862 230.695H62.0719C58.9212 230.695
55.8992 229.434 53.6695 227.188C51.4399 224.942 50.1847 221.895 50.1797
218.716V31.4846C50.1784 29.9086 50.4852 28.3478 51.0824 26.8916C51.6796 25.4354
52.5555 24.1122 53.6601 22.9978C54.7646 21.8834 56.0761 20.9997 57.5195
20.3972C58.9629 19.7947 60.5099 19.4852 62.0719 19.4865H143.443L200.745
78.4453V218.706Z" fill="#23A566"/>
+<path d="M149.748 76.9073L200.745 126.084V78.1013H155.571C153.599 78.1238
151.655 77.6302 149.928 76.6685L149.748 76.9073Z" fill="#1C8F5A"/>
+<path d="M200.746 78.3497H155.449C152.298 78.3472 149.277 77.0833 147.05
74.8355C144.822 72.5878 143.569 69.54 143.566 66.3612V19.1616L200.746 78.3497Z"
fill="#8ED1B1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M164.491
191.758H86.1406V123.218H164.491V191.758ZM130.187
133.105V145.103H154.862V133.124L130.187 133.105ZM130.187
152.659V164.123H154.862V152.602L130.187 152.659ZM130.187
171.43V182.043H154.862V171.373L130.187 171.43ZM120.501
181.986V171.373H95.8362V181.986H120.501ZM120.501
163.998V152.602H95.8362V164.056L120.501 163.998ZM120.501
145.227V133.105H95.8362V145.103L120.501 145.227Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_1789_6983">
+<rect width="151" height="212" fill="white" transform="translate(50 19)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/static/home/connector/Greenplum.jpeg
b/static/home/connector/Greenplum.jpeg
new file mode 100644
index 0000000000..754bc7ceff
Binary files /dev/null and b/static/home/connector/Greenplum.jpeg differ
diff --git a/static/home/connector/Hive.png b/static/home/connector/Hive.png
new file mode 100644
index 0000000000..1a42b655b8
Binary files /dev/null and b/static/home/connector/Hive.png differ
diff --git a/static/home/connector/Hudi.png b/static/home/connector/Hudi.png
new file mode 100644
index 0000000000..09af406bd8
Binary files /dev/null and b/static/home/connector/Hudi.png differ
diff --git a/static/home/connector/Iceberg.png
b/static/home/connector/Iceberg.png
new file mode 100644
index 0000000000..e4a99c3951
Binary files /dev/null and b/static/home/connector/Iceberg.png differ
diff --git a/static/home/connector/InfluxDB.png
b/static/home/connector/InfluxDB.png
new file mode 100644
index 0000000000..285e08a5f2
Binary files /dev/null and b/static/home/connector/InfluxDB.png differ
diff --git a/static/home/connector/MongoDB.png
b/static/home/connector/MongoDB.png
new file mode 100644
index 0000000000..d5f5c2c9a0
Binary files /dev/null and b/static/home/connector/MongoDB.png differ
diff --git a/static/home/connector/MySQL-CDC.svg
b/static/home/connector/MySQL-CDC.svg
new file mode 100644
index 0000000000..2974f9714e
--- /dev/null
+++ b/static/home/connector/MySQL-CDC.svg
@@ -0,0 +1,10 @@
+<svg width="250" height="250" viewBox="0 0 250 250" fill="none"
xmlns="http://www.w3.org/2000/svg";>
+<path d="M168.624 57.885C167.47 57.885 166.664 58.0267 165.848 58.2339C165.848
58.2339 165.848 58.2884 165.848 58.3647C165.924 58.3647 165.967 58.3647 165.978
58.3647C166.523 59.4549 167.47 60.2072 168.145 61.1557C168.69 62.2459 169.169
63.3252 169.713 64.4154C169.778 64.35 169.844 64.2737 169.844 64.2737C170.802
63.5978 171.27 62.5075 171.27 60.8831C170.867 60.4034 170.802 59.9237 170.453
59.4549C170.051 58.7681 169.169 58.4301 168.624 57.885Z" fill="#5B85A4"/>
+<path d="M237.834 116.931C232.401 116.79 228.198 117.335 224.67
118.828C223.657 119.243 222.024 119.243 221.894 120.529C222.438 121.074 222.503
121.957 222.982 122.699C223.788 124.061 225.215 125.893 226.499 126.852C227.926
127.932 229.352 129.022 230.855 129.97C233.49 131.606 236.484 132.554 239.054
134.189C240.556 135.138 242.037 136.359 243.54 137.373C244.28 137.918 244.748
138.801 245.706 139.139C245.706 139.117 245.706 138.954 245.706 138.932C245.227
138.321 245.097 137.438 244.618 [...]
+<path d="M232.974
191.982H234.455V186.258H236.404V185.092H230.949V186.258H232.974V191.982ZM244.298
191.982H245.703V185.092H243.591L241.87 189.791L240.008
185.092H237.972V191.982H239.301V186.738H239.377L241.337 191.982H242.338L244.298
186.738V191.982Z" fill="#F18513"/>
+<path d="M226.565 191.993H199.855V135.759H208.838V185.07H226.565V191.993Z"
fill="#F18513"/>
+<path d="M158.837 180.818C156.561 177.155 155.429 171.279 155.429
163.167C155.429 149.005 159.73 141.919 168.321 141.919C172.818 141.919 176.117
143.62 178.218 146.999C180.494 150.674 181.637 156.495 181.637 164.497C181.637
178.768 177.336 185.909 168.735 185.909C164.249 185.909 160.949 184.22 158.837
180.818ZM192.286 193.421C186.091 190.368 182.65 188.668 181.964 188.33C182.879
187.577 183.75 186.76 184.545 185.822C188.922 180.655 191.121 173.023 191.121
162.917C191.121 144.318 183.826 [...]
+<path d="M142.612 176.403C142.612 181.167 140.859 185.081 137.375
188.144C133.89 191.197 129.198 192.723 123.318 192.723C117.83 192.723 112.506
190.968 107.355 187.479C107.595 186.989 109.522 183.129 109.762 182.65C114.204
184.863 118.211 185.975 121.826 185.975C125.202 185.975 127.847 185.223 129.764
183.74C131.68 182.235 132.823 180.142 132.823 177.493C132.823 174.157 130.493
171.3 126.225 168.902C122.294 166.743 114.422 162.219 114.422 162.219C110.154
159.101 108.02 155.765 108.02 150 [...]
+<path d="M101.445 150.51C97.6123 171.3 92.571 186.411 86.2993 195.83C81.4213
203.102 76.0752 206.733 70.2499 206.733C68.6928 206.733 66.7765 206.264 64.5117
205.326C64.5117 204.825 64.5117 200.824 64.5117 200.322C65.6223 200.486 66.918
200.573 68.4206 200.573C71.1318 200.573 73.3313 199.821 74.9972 198.316C76.9898
196.485 77.9806 194.435 77.9806 192.156C77.9806 190.597 77.2076 187.403 75.6614
182.573C74.9645 180.437 71.5347 169.752 65.3392 150.51H74.5726C79.015 164.901
81.4867 172.892 81 [...]
+<path d="M60.6787 191.993C55.0385 191.993 51.9136 191.993 51.2821
191.993C50.9554 176.108 50.0408 161.172 48.5382 147.174C48.5382 147.174 48.5055
147.174 48.4511 147.174L34.1438 191.993H26.9901L12.7699 147.174C12.7155 147.174
12.6828 147.174 12.6828 147.174C11.6266 160.616 10.9624 175.552 10.6902
191.993C9.83006 191.993 2.97039 191.993 2.12109 191.993C2.6764 171.998 4.05922
153.257 6.28045 135.759C7.05352 135.759 10.9407 135.759 17.9201 135.759L31.487
177.079H31.5632L45.2064 135.759C51.9 [...]
+</svg>
diff --git a/static/home/connector/Neo4j.jpeg b/static/home/connector/Neo4j.jpeg
new file mode 100644
index 0000000000..4c5da525fb
Binary files /dev/null and b/static/home/connector/Neo4j.jpeg differ
diff --git a/static/home/connector/Notion.svg b/static/home/connector/Notion.svg
new file mode 100644
index 0000000000..77d613d90a
--- /dev/null
+++ b/static/home/connector/Notion.svg
@@ -0,0 +1,3 @@
+<svg width="250" height="250" viewBox="0 0 250 250" fill="none"
xmlns="http://www.w3.org/2000/svg";>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M64.3521 62.5245C70.3551
67.4017 72.607 67.0296 83.8797 66.2774L190.151 59.8963C192.405 59.8963 190.53
57.6478 189.779 57.2742L172.13 44.515C168.748 41.8894 164.242 38.8827 155.607
39.6348L52.7043 47.1402C48.9515 47.5123 48.202 49.3887 49.6964 50.8927L64.3521
62.5245ZM70.7325 87.2911V199.107C70.7325 205.116 73.7355 207.364 80.4944
206.993L197.286 200.235C204.049 199.863 204.802 195.729 204.802
190.848V79.7823C204.802 74.9086 202.927 72.280 [...]
+</svg>
diff --git a/static/home/connector/PostgreSql.svg
b/static/home/connector/PostgreSql.svg
new file mode 100644
index 0000000000..7336dd44ba
--- /dev/null
+++ b/static/home/connector/PostgreSql.svg
@@ -0,0 +1,13 @@
+<svg width="250" height="250" viewBox="0 0 250 250" fill="none"
xmlns="http://www.w3.org/2000/svg";>
+<g clip-path="url(#clip0_1789_7042)">
+<path d="M219.262 144.355C218.122 140.904 215.138 138.5 211.279
137.923C209.459 137.652 207.375 137.767 204.909 138.276C200.61 139.163 197.421
139.501 195.093 139.566C203.878 124.73 211.022 107.812 215.134 91.8864C221.784
66.135 218.231 54.4037 214.078 49.0974C203.089 35.0521 187.055 27.5068 167.712
27.276C157.394 27.1498 148.335 29.1875 143.61 30.6529C139.21 29.8764 134.479
29.4429 129.516 29.3627C120.211 29.2143 111.99 31.2431 104.965 35.4129C101.076
34.0974 94.8341 32.243 87.626 31.05 [...]
+<path d="M206.57 146.312C184.497 150.866 182.979 143.392 182.979
143.392C206.284 108.803 216.027 64.8985 207.62 54.153C184.683 24.8413 144.98
38.704 144.317 39.0633L144.104 39.1019C139.743 38.1962 134.863 37.6572 129.378
37.5674C119.391 37.4041 111.815 40.1864 106.066 44.547C106.066 44.547 35.2388
15.3622 38.5333 81.2518C39.234 95.2688 58.6199 187.314 81.742 159.512C90.1933
149.345 98.3596 140.75 98.3596 140.75C102.415 143.444 107.27 144.819 112.36
144.326L112.756 143.99C112.633 145.252 [...]
+<path d="M110.212 87.5203C108.223 87.2434 106.421 87.4995 105.51
88.1899C104.998 88.5782 104.839 89.028 104.796 89.3376C104.682 90.1579 105.256
91.065 105.609 91.5327C106.608 92.8571 108.068 93.7672 109.512 93.9676C109.721
93.9973 109.93 94.0107 110.137 94.0107C112.545 94.0107 114.735 92.1348 114.928
90.7503C115.17 89.0161 112.653 87.8603 110.212 87.521V87.5203ZM176.106
87.5752C175.916 86.216 173.498 85.8285 171.203 86.1477C168.911 86.4669 166.689
87.5017 166.875 88.864C167.023 89.9233 1 [...]
+<path d="M213.915 145.795C213.074 143.249 210.365 142.43 205.864
143.36C192.501 146.118 187.715 144.208 186.144 143.05C196.531 127.223 205.076
108.092 209.686 90.2418C211.869 81.7864 213.075 73.9338 213.174 67.5333C213.283
60.5084 212.087 55.3461 209.62 52.1926C199.673 39.4799 185.074 32.6607 167.402
32.4736C155.254 32.337 144.989 35.4467 142.999 36.3212C138.809 35.2789 134.241
34.639 129.267 34.5574C120.147 34.4097 112.264 36.5936 105.737 41.0455C102.902
39.9899 95.5749 37.4741 86.6144 [...]
+</g>
+<defs>
+<clipPath id="clip0_1789_7042">
+<rect width="190" height="196" fill="white" transform="translate(30 27)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/static/home/connector/S3-Redshift.png
b/static/home/connector/S3-Redshift.png
new file mode 100644
index 0000000000..a00eb7e60f
Binary files /dev/null and b/static/home/connector/S3-Redshift.png differ
diff --git a/static/home/connector/S3File.svg b/static/home/connector/S3File.svg
new file mode 100644
index 0000000000..3a842f7c2b
--- /dev/null
+++ b/static/home/connector/S3File.svg
@@ -0,0 +1,13 @@
+<svg width="250" height="250" viewBox="0 0 250 250" fill="none"
xmlns="http://www.w3.org/2000/svg";>
+<path d="M57.1105 60.9434L44.0708 67.4645V181.916L57.1105 188.399L57.1889
188.305V61.0331L57.1105 60.9434Z" fill="#8C3123"/>
+<path d="M126.897 171.787L57.1108 188.399V60.9434L126.897 77.193V171.787Z"
fill="#E05243"/>
+<path d="M95.3965 145.78L124.998 149.548L125.183 149.119L125.35
100.581L124.998 100.202L95.3965 103.915V145.78Z" fill="#8C3123"/>
+<path d="M124.998 171.974L192.884 188.434L192.991 188.264L192.989
61.0572L192.881 60.9434L124.998 77.3795V171.974Z" fill="#8C3123"/>
+<path d="M154.607 145.78L124.998 149.548V100.202L154.607 103.915V145.78Z"
fill="#E05243"/>
+<path d="M154.607 83.67L124.998 89.0663L95.3965 83.67L124.96 75.921L154.607
83.67Z" fill="#5E1F18"/>
+<path d="M154.607 165.971L124.998 160.539L95.3965 165.971L124.961
174.224L154.607 165.971Z" fill="#F2B0A9"/>
+<path d="M95.3965 83.6699L124.998 76.3446L125.237 76.2706V27.1979L124.998
27L95.3965 41.8031V83.6699Z" fill="#8C3123"/>
+<path d="M154.607 83.6699L124.998 76.3446V27L154.607 41.8031V83.6699Z"
fill="#E05243"/>
+<path d="M124.998 222.638L95.3936 207.84V165.974L124.998 173.297L125.433
173.792L125.315 221.784L124.998 222.638Z" fill="#8C3123"/>
+<path d="M124.998 222.638L154.604 207.84V165.974L124.998
173.297V222.638ZM192.884 60.9434L205.929 67.4645V181.916L192.884
188.434V60.9434Z" fill="#E05243"/>
+</svg>
diff --git a/static/home/connector/SftpFile.png
b/static/home/connector/SftpFile.png
new file mode 100644
index 0000000000..9c4be7fb4e
Binary files /dev/null and b/static/home/connector/SftpFile.png differ
diff --git a/static/home/connector/SqlServer-CDC.svg
b/static/home/connector/SqlServer-CDC.svg
new file mode 100644
index 0000000000..f13128da97
--- /dev/null
+++ b/static/home/connector/SqlServer-CDC.svg
@@ -0,0 +1,19 @@
+<svg width="250" height="250" viewBox="0 0 250 250" fill="none"
xmlns="http://www.w3.org/2000/svg";>
+<path d="M150.271 118.365L108.214 132.199L71.6244 148.467L61.3881
151.189C58.7811 153.688 56.0476 156.218 53.0911 158.779C49.8487 161.597 46.8287
164.16 44.5078 166.017C41.933 168.066 38.1183 171.909 36.1793 174.343C33.2863
177.993 30.9976 181.868 30.0121 184.847C28.2635 190.227 29.1222 195.671 32.4918
200.699C36.8151 207.103 45.4301 213.636 55.4751 218.087C60.5935 220.362 69.2083
223.276 75.693 224.909C86.4693 227.663 107.323 230.641 118.799 231.09C121.119
231.186 124.235 231.186 124.36 [...]
+<path d="M106.907 19.6026C106.208 19.507 94.9225 23.606 87.6431 26.5839C77.82
30.6194 70.1911 34.4625 65.4861 37.7922C63.738 39.0417 61.5441 41.2511 61.1949
42.1155C61.0678 42.4358 61.0039 42.8201 61.0039 43.2043L65.2639 47.2714L75.4043
50.5378L99.5324 54.8932L127.125 59.6648L127.411 57.2631C127.316 57.2631 127.252
57.2312 127.158 57.2312L123.533 56.6545L122.802 55.3417C119.051 48.6805 114.918
40.4183 112.502 34.8461C110.627 30.5228 108.847 25.5276 107.861 21.9407C107.321
19.7631 107.257 [...]
+<path d="M61.4209 41.667C61.4209 41.667 60.7219 42.7883 61.3893 44.4536C61.803
45.478 63.0108 46.7268 64.3775 48.008C64.3775 48.008 78.5235 61.9062 80.2402
63.892C88.06 72.9865 91.4617 81.9533 91.7796 94.3147C91.9703 102.257 90.4758
109.238 86.7568 117.34C80.1447 131.879 66.189 147.923 44.668 165.728L47.8156
164.671C49.85 163.134 52.6157 161.501 59.1005 157.914C74.0729 149.652 90.9212
142.062 111.584 134.248C141.338 122.976 190.262 109.782 218.109 105.491L221.002
105.042L220.557 104.338C [...]
+<defs>
+<linearGradient id="paint0_linear_1789_6920" x1="60.7701" y1="210.234"
x2="76.0356" y2="201.28" gradientUnits="userSpaceOnUse">
+<stop stop-color="#909CA9"/>
+<stop offset="1" stop-color="#EDEDEE"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1789_6920" x1="61.1154" y1="39.5711"
x2="73.352" y2="39.5711" gradientUnits="userSpaceOnUse">
+<stop stop-color="#939FAB"/>
+<stop offset="1" stop-color="#DCDEE1"/>
+</linearGradient>
+<radialGradient id="paint2_radial_1789_6920" cx="0" cy="0" r="1"
gradientUnits="userSpaceOnUse" gradientTransform="translate(122.865 96.1062)
rotate(-171.395) scale(15.7789 31.7884)">
+<stop stop-color="#EE352C"/>
+<stop offset="1" stop-color="#A91D22"/>
+</radialGradient>
+</defs>
+</svg>
diff --git a/static/home/connector/db2.svg b/static/home/connector/db2.svg
new file mode 100644
index 0000000000..bef5fa73f0
--- /dev/null
+++ b/static/home/connector/db2.svg
@@ -0,0 +1,9 @@
+<svg width="250" height="250" viewBox="0 0 250 250" fill="none"
xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink";>
+<rect x="28" y="28" width="194" height="194" fill="url(#pattern0)"/>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1"
height="1">
+<use xlink:href="#image0_1789_6879" transform="scale(0.00195312)"/>
+</pattern>
+<image id="image0_1789_6879" width="512" height="512"
xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAYAAAD0eNT6AAAgAElEQVR4Ae2dCZhU1Zm/D2Ac1zGZuASf/2R01MlCtVuIyzwYR3lijDrRmMTRaCJOXBInmsVMXDNm1BiTYMIQNVDdKqDgggq44A6KCy4IGFwQWQTZbFyARqFZ+vyfr0lhL9V113PqnnPe+zzd1V1177nnfL/3fN/vVt26VymWpBHYUSnVoJQ6Ril1tlLqcqXUDUqpu5RSk5VSM5RS85VSzUqpFqXUeqVUm1JK80MMYAAGYMAYAyuUUlOVUqOUUpcopU5USn0uaYJnfSJQiYDAIxAJTAKVwCWQUcyJAQzAAAwUnwE5AJumlGpSSp2rlDpEKdWnkuB5JAKVCAgUAodAIrAINAIPk5wYwAAM
[...]
+</defs>
+</svg>
diff --git a/static/home/connector/excel.png b/static/home/connector/excel.png
new file mode 100644
index 0000000000..048269db38
Binary files /dev/null and b/static/home/connector/excel.png differ
diff --git a/static/home/connector/kafka.svg b/static/home/connector/kafka.svg
new file mode 100644
index 0000000000..9933047e57
--- /dev/null
+++ b/static/home/connector/kafka.svg
@@ -0,0 +1,10 @@
+<svg width="250" height="250" viewBox="0 0 250 250" fill="none"
xmlns="http://www.w3.org/2000/svg";>
+<g clip-path="url(#clip0_1789_6891)">
+<path d="M167.675 137.813C158.317 137.813 149.928 141.949 144.183
148.46L129.463 138.064C131.025 133.772 131.922 129.163 131.922 124.339C131.922
119.599 131.056 115.067 129.545 110.839L144.233 100.552C149.977 107.031 158.345
111.144 167.675 111.144C184.946 111.144 199 97.1263 199 79.8936C199 62.6608
184.946 48.6429 167.675 48.6429C150.403 48.6429 136.35 62.6608 136.35
79.8936C136.35 82.978 136.817 85.9523 137.655 88.7692L122.957 99.0607C116.818
91.462 107.978 86.1565 97.9056 84.537V66.86 [...]
+</g>
+<defs>
+<clipPath id="clip0_1789_6891">
+<rect width="148" height="240" fill="white" transform="translate(51 5)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/static/home/connector/oracle.png b/static/home/connector/oracle.png
new file mode 100644
index 0000000000..96d230cca3
Binary files /dev/null and b/static/home/connector/oracle.png differ
diff --git a/static/home/connector/orcle_copy.png
b/static/home/connector/orcle_copy.png
new file mode 100644
index 0000000000..a753583ab5
Binary files /dev/null and b/static/home/connector/orcle_copy.png differ
diff --git a/static/home/icons/lesstime.png b/static/home/icons/lesstime.png
new file mode 100644
index 0000000000..a3a86636fe
Binary files /dev/null and b/static/home/icons/lesstime.png differ
diff --git a/static/home/intro_en.png b/static/home/intro_en.png
new file mode 100644
index 0000000000..8f5a6f9b9b
Binary files /dev/null and b/static/home/intro_en.png differ
diff --git a/static/home/introduction1.png b/static/home/introduction1.png
new file mode 100644
index 0000000000..ce1483d996
Binary files /dev/null and b/static/home/introduction1.png differ
diff --git a/static/home/introduction2.png b/static/home/introduction2.png
new file mode 100644
index 0000000000..ce72254694
Binary files /dev/null and b/static/home/introduction2.png differ
diff --git a/static/home/introduction3.png b/static/home/introduction3.png
new file mode 100644
index 0000000000..2706d718aa
Binary files /dev/null and b/static/home/introduction3.png differ
