You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@inlong.apache.org by le...@apache.org on 2022/11/25 06:28:05 UTC
[inlong-website] branch master updated: [INLONG-619] Homepage optimization, including header and footer (#620)
This is an automated email from the ASF dual-hosted git repository.
leezng pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/inlong-website.git
The following commit(s) were added to refs/heads/master by this push:
new 1fabc9de37 [INLONG-619] Homepage optimization, including header and footer (#620)
1fabc9de37 is described below
commit 1fabc9de37ad542534d0bcbaf09880d76b99517b
Author: Daniel <le...@apache.org>
AuthorDate: Fri Nov 25 14:28:00 2022 +0800
[INLONG-619] Homepage optimization, including header and footer (#620)
---
docusaurus.config.js | 125 ++++----
i18n/zh-CN/docusaurus-theme-classic/footer.json | 38 ++-
src/components/Button/index.jsx | 32 +-
src/components/Button/index.less | 30 +-
src/css/custom.css | 16 +-
src/pages/Home/config.json | 4 +-
src/pages/Home/index.jsx | 213 ++-----------
src/pages/Home/index.less | 387 ++----------------------
src/pages/index.jsx | 14 +-
static/img/arch-img.png | Bin 125006 -> 0 bytes
static/img/incubating.svg | 20 --
static/img/incubator-logo.svg | 13 -
static/img/index-arch.svg | 325 ++++++++++++++++++++
13 files changed, 527 insertions(+), 690 deletions(-)
diff --git a/docusaurus.config.js b/docusaurus.config.js
index 0da505d458..5756e2abca 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -1,24 +1,30 @@
-const lightCodeTheme = require('prism-react-renderer/themes/github');
+// const lightCodeTheme = require('prism-react-renderer/themes/github');
const darkCodeTheme = require('prism-react-renderer/themes/dracula');
// With JSDoc @type annotations, IDEs can provide config autocompletion
/** @type {import('@docusaurus/types').DocusaurusConfig} */
(module.exports = {
// omit unrelated docusaurus options
- title: 'Apache Inlong',
- tagline: 'Apache Inlong',
+ title: 'Apache InLong',
+ tagline: 'Apache InLong is a one-stop integration framework for massive data that provides automatic, secure and reliable data transmission capabilities.',
url: 'https://inlong.apache.org',
baseUrl: '/',
onBrokenLinks: 'throw',
onBrokenMarkdownLinks: 'warn',
favicon: 'img/logo.svg',
- organizationName: 'Apache Inlong', // Usually your GitHub org/user name.
- projectName: 'Apache Inlong', // Usually your repo name.
+ organizationName: 'Apache', // Usually your GitHub org/user name.
+ projectName: 'inlong', // Usually your repo name.
customFields: {
team: require('./config/team.json'),
contributors: require('./config/contributors.json'),
docContributors: require('./config/doc-contributors.json')
},
+ scripts: [
+ {
+ src: 'https://www.apachecon.com/event-images/snippet.js',
+ async: true,
+ },
+ ],
i18n: {
defaultLocale: "en",
locales: ["en", "zh-CN"],
@@ -160,59 +166,57 @@ const darkCodeTheme = require('prism-react-renderer/themes/dracula');
],
},
footer: {
- // style: 'dark',
- // links: [
- // {
- // title: 'Docs',
- // items: [
- // {
- // label: 'Tutorial',
- // to: '/docs/quick_start',
- // },
- // ],
- // },
- // {
- // title: 'Community',
- // items: [
- // {
- // label: 'Stack Overflow',
- // href: 'https://stackoverflow.com/questions/tagged/docusaurus',
- // },
- // {
- // label: 'Discord',
- // href: 'https://discordapp.com/invite/docusaurus',
- // },
- // {
- // label: 'Twitter',
- // href: 'https://twitter.com/docusaurus',
- // },
- // ],
- // },
- // {
- // title: 'More',
- // items: [
- // {
- // label: 'Blog',
- // to: '/blog',
- // },
- // {
- // label: 'GitHub',
- // href: 'https://github.com/apache/inlong',
- // },
- // ],
- // },
- // ],
- // logo: {
- // alt: 'Apache Inlong',
- // src: 'img/logo.svg',
- // href: 'https://inlong.apache.org',
- // },
- copyright: `<div style="text-align: left;">
- <div style="display: flex; align-items: flex-end;">
- <p style="font-family: Avenir-Medium;font-size: 14px;color: #999; flex: 1;">Copyright © 2020-2022 The Apache Software Foundation. Licensed under the Apache License, Version 2.0.</p>
- <a class="acevent" data-format="square" data-mode="dark" data-event="random"></a>
- </div>
- <div style="border-top: 1px solid #ccc;min-height: 60px;line-height: 20px;font-family: Avenir-Medium;font-size: 14px;color: #999;display: flex;align-items: center;"><span>The Apache Software Foundation Apache InLong, InLong, Apache, the Apache feather, and the Apache InLong project logo are either registered trademarks or trademarks of the Apache Software Foundation.</span></div>
+ links: [
+ {
+ title: 'Events',
+ items: [
+ {
+ label: 'ApacheCon',
+ href: 'https://www.apachecon.com/',
+ },
+ {
+ html: '<a class="acevent" data-format="square" data-mode="dark" data-event="random"></a>',
+ },
+ ],
+ },
+ {
+ title: 'Community',
+ items: [
+ {
+ label: 'Twitter',
+ href: 'https://twitter.com/ApacheInlong',
+ },
+ {
+ label: 'WeChat',
+ href: 'https://inlong.apache.org/img/apache-inlong-wechat.jpg',
+ },
+ {
+ label: 'Email',
+ to: 'mailto:dev@inlong.apache.org',
+ },
+ ],
+ },
+ {
+ title: 'More',
+ items: [
+ {
+ label: 'Blog',
+ to: '/blog',
+ },
+ {
+ label: 'GitHub',
+ href: 'https://github.com/apache/inlong',
+ },
+ ],
+ },
+ ],
+ logo: {
+ alt: 'Apache InLong',
+ src: 'img/asf_logo.svg',
+ },
+ copyright: `<div style="font-family: Avenir-Medium;font-size: 14px;color: #999;">
+ <div>Copyright © 2020-2022 The Apache Software Foundation. Licensed under the Apache License, Version 2.0.</div>
+ <div style="margin-top: 20px; padding-top: 20px; border-top: 1px solid #666;line-height: 20px;">The Apache Software Foundation Apache InLong, InLong, Apache, the Apache feather, and the Apache InLong project logo are either registered trademarks or trademarks of the Apache Software Foundation.</div>
</div>`,
},
prism: {
@@ -225,6 +229,11 @@ const darkCodeTheme = require('prism-react-renderer/themes/dracula');
indexName: 'inlong',
contextualSearch: true,
},
+ colorMode: {
+ defaultMode: 'light',
+ disableSwitch: false,
+ respectPrefersColorScheme: true,
+ },
}),
plugins: [
'docusaurus-plugin-less',
diff --git a/i18n/zh-CN/docusaurus-theme-classic/footer.json b/i18n/zh-CN/docusaurus-theme-classic/footer.json
index ed34a31f44..948020d248 100644
--- a/i18n/zh-CN/docusaurus-theme-classic/footer.json
+++ b/i18n/zh-CN/docusaurus-theme-classic/footer.json
@@ -1,6 +1,42 @@
{
"copyright": {
- "message": "<div style=\"text-align: left;\">\n <div style=\"display: flex; align-items: flex-end;\">\n <p style=\"font-family: Avenir-Medium;font-size: 14px;color: #999; flex: 1;\">Copyright © 2020-2022 The Apache Software Foundation. Licensed under the Apache License, Version 2.0.</p>\n <a class=\"acevent\" data-format=\"square\" data-mode=\"dark\" data-event=\"random\"></a>\n </div>\n <div style=\"border-top: 1px solid #ccc;min-heig [...]
+ "message": "<div style=\"font-family: Avenir-Medium;font-size: 14px;color: #999;\">\n <div>Copyright © 2020-2022 The Apache Software Foundation. Licensed under the Apache License, Version 2.0.</div>\n <div style=\"margin-top: 20px; padding-top: 20px; border-top: 1px solid #666;line-height: 20px;\">The Apache Software Foundation Apache InLong, InLong, Apache, the Apache feather, and the Apache InLong project logo are either registered trademarks or trademarks of the [...]
"description": "The footer copyright"
+ },
+ "link.title.Events": {
+ "message": "事件",
+ "description": "The title of the footer links column with title=Events in the footer"
+ },
+ "link.title.Community": {
+ "message": "社区",
+ "description": "The title of the footer links column with title=Community in the footer"
+ },
+ "link.title.More": {
+ "message": "更多",
+ "description": "The title of the footer links column with title=More in the footer"
+ },
+ "link.item.label.ApacheCon": {
+ "message": "ApacheCon",
+ "description": "The label of footer link with label=ApacheCon linking to https://www.apachecon.com/"
+ },
+ "link.item.label.Twitter": {
+ "message": "Twitter",
+ "description": "The label of footer link with label=Twitter linking to https://twitter.com/ApacheInlong"
+ },
+ "link.item.label.WeChat": {
+ "message": "WeChat",
+ "description": "The label of footer link with label=WeChat linking to https://github.com/apache/inlong-website/blob/master/static/img/apache-inlong-wechat.jpg"
+ },
+ "link.item.label.Email": {
+ "message": "Email",
+ "description": "The label of footer link with label=Email linking to mailto:dev@inlong.apache.org"
+ },
+ "link.item.label.Blog": {
+ "message": "Blog",
+ "description": "The label of footer link with label=Blog linking to /blog"
+ },
+ "link.item.label.GitHub": {
+ "message": "GitHub",
+ "description": "The label of footer link with label=GitHub linking to https://github.com/apache/inlong"
}
}
diff --git a/src/components/Button/index.jsx b/src/components/Button/index.jsx
index 6b9fa8a3cc..c79443140e 100644
--- a/src/components/Button/index.jsx
+++ b/src/components/Button/index.jsx
@@ -1,32 +1,24 @@
import React from 'react';
-import PropTypes from 'prop-types';
import Link from '@docusaurus/Link';
import './index.less';
-const propTypes = {
- type: PropTypes.oneOf(['primary', 'normal']),
- link: PropTypes.string,
- target: PropTypes.string,
-};
-const defaultProps = {
- type: 'primary',
- link: '',
- target: '_self',
-};
-const Button = (props) => {
+const Button = ({
+ type = 'primary',
+ link = '',
+ target = '_self',
+ children,
+ ...rest
+}) => {
return (
<Link
- className={`button button-${props.type}`}
- target={props.target || '_self'}
- style={{marginRight: '50px'}}
- to={props.link}
+ className={`inlong-button inlong-button-${type}`}
+ target={target || '_self'}
+ to={link}
+ {...rest}
>
- {props.children}
+ {children}
</Link>
);
};
-Button.propTypes = propTypes;
-Button.defaultProps = defaultProps;
-
export default Button;
diff --git a/src/components/Button/index.less b/src/components/Button/index.less
index 5c0d62cc02..325fc80c93 100644
--- a/src/components/Button/index.less
+++ b/src/components/Button/index.less
@@ -1,20 +1,36 @@
-.button {
- box-sizing: border-box;
+.inlong-button {
display: inline-block;
height: 48px;
line-height: 48px;
min-width: 140px;
- font-family: Avenir-Heavy;
font-size: 16px;
- color: #FFF;
text-align: center;
border-radius: 4px;
text-decoration: none;
+ border: 1px solid;
+ transition: all .3s;
+
+ &:hover {
+ text-decoration: none;
+ }
+
&-primary {
- background: #4190FF;
+ color: #FFF;
+ background: var(--ifm-color-primary);
+ border-color: var(--ifm-color-primary);
+ &:hover {
+ color: #fff;
+ background: var(--ifm-color-primary-lighter);
+ }
}
- &-normal {
+
+ &-ghost {
+ color: var(--ifm-color-primary);
background: transparent;
- border: 1px solid #fff;
+ border-color: var(--ifm-color-primary);
+ &:hover {
+ color: var(--ifm-color-primary-lighter);
+ border-color: var(--ifm-color-primary-lighter);
+ }
}
}
\ No newline at end of file
diff --git a/src/css/custom.css b/src/css/custom.css
index 6d8ed97df5..4f8de60be5 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -23,28 +23,16 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
background-color: rgba(0, 0, 0, 0.3);
}
-@font-face {
- font-family: octicons-link;
- src: url(data:font/woff;charset=utf-8;base64,d09GRgABAAAAAAZwABAAAAAACFQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABEU0lHAAAGaAAAAAgAAAAIAAAAAUdTVUIAAAZcAAAACgAAAAoAAQAAT1MvMgAAAyQAAABJAAAAYFYEU3RjbWFwAAADcAAAAEUAAACAAJThvmN2dCAAAATkAAAABAAAAAQAAAAAZnBnbQAAA7gAAACyAAABCUM+8IhnYXNwAAAGTAAAABAAAAAQABoAI2dseWYAAAFsAAABPAAAAZwcEq9taGVhZAAAAsgAAAA0AAAANgh4a91oaGVhAAADCAAAABoAAAAkCA8DRGhtdHgAAAL8AAAADAAAAAwGAACfbG9jYQAAAsAAAAAIAAAACABiATBtYXhwAAACqAAAABgAAAAgAA8ASm5hbWUAAAToAAABQgAAAlXu73sOcG9zdAAABiwAA [...]
-}
-
html {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
font-variant: tabular-nums;
font-feature-settings: 'tnum';
}
-.navbar__title {
- color: #f5573d;
-}
-
.navbar.index-nav {
- background: rgb(255 255 255 / 40%);
margin-bottom: -60px;
-}
-
-.navbar.index-nav + .main-wrapper {
- position: relative;
+ background: transparent;
+ backdrop-filter: blur(5px);
}
aside {
diff --git a/src/pages/Home/config.json b/src/pages/Home/config.json
index 142e9ee668..6828cbec2d 100644
--- a/src/pages/Home/config.json
+++ b/src/pages/Home/config.json
@@ -19,7 +19,7 @@
{
"text": "联系我们",
"link": "/zh-CN/docs/contact",
- "type": "normal"
+ "type": "ghost"
}
]
},
@@ -77,7 +77,7 @@
{
"text": "Contact",
"link": "/docs/contact",
- "type": "normal"
+ "type": "ghost"
}
]
},
diff --git a/src/pages/Home/index.jsx b/src/pages/Home/index.jsx
index 7878a063be..654464cf2a 100644
--- a/src/pages/Home/index.jsx
+++ b/src/pages/Home/index.jsx
@@ -1,71 +1,53 @@
-import React, { useState } from 'react';
+import React from 'react';
import useIsBrowser from '@docusaurus/useIsBrowser';
import useBaseUrl from '@docusaurus/useBaseUrl';
+import IndexArch from '../../../static/img/index-arch.svg';
import Button from '../../components/Button';
import config from './config';
import './index.less';
-// import 'animate.css';
export default function() {
const isBrowser = useIsBrowser();
- const [p1Animation, setP1Animation] = useState(false);
- const [p2Animation, setP2Animation] = useState(false);
-
- // componentDidMount() {
- // window.addEventListener('scroll', () => {
- // const scrollTop = getScrollTop();
- // if (scrollTop > 350) {
- // this.setState({
- // p1Animation: true
- // });
- // } else {
- // this.setState({
- // p1Animation: false
- // });
- // }
- // if (scrollTop > 1150) {
- // this.setState({
- // p2Animation: true
- // });
- // } else {
- // this.setState({
- // p2Animation: false
- // });
- // }
- // }, true);
- // }
-
const language = isBrowser && location.pathname.indexOf('/zh-CN/') === 0 ? 'zh-CN' : 'en';
const dataSource = config?.[language];
return (
<div className="home-page">
<section className="top-section" style={{backgroundImage: `url("${useBaseUrl('/img/first-page-bg.png')}"`}}>
- <div className="vertical-middle animate__animated animate__fadeInLeft animate__delay-0.5s">
+ <div className="vertical-middle">
<div className="product-name">
<div className="brandname">{dataSource.brand.brandName}</div>
<div className="projectname" style={{backgroundImage: `url("${useBaseUrl('/img/inlong-en.svg')}"`}}>
</div>
</div>
<div className="product-desc2">
- <div>{dataSource.brand.features[0]}</div>
- <div className="split"></div>
- <div className="dist">{dataSource.brand.features[1]}</div>
- <div className="split"></div>
- <div className="dist">{dataSource.brand.features[2]}</div>
- <div className="split"></div>
- <div className="dist">{dataSource.brand.features[3]}</div>
+ {
+ dataSource.brand.features.map((item, index, arr) => [
+ <div key={`text-${index}`}>{item}</div>,
+ index !== arr.length - 1 && <div key={`split-${index}`} className="split"></div>
+ ])
+ }
</div>
<p className="product-desc">{dataSource.brand.briefIntroduction}</p>
<div className="button-area">
- {
- dataSource.brand.buttons.map((b, index) => <Button type={b.type} key={index} link={b.link} target={b.target}>{b.text}</Button>)
- }
+ {
+ dataSource.brand.buttons.map((b, index, arr) => (
+ <Button
+ type={b.type}
+ key={index}
+ link={b.link}
+ target={b.target}
+ style={{ borderRadius: 30, marginRight: index === arr.length - 1 ? 0 : 50 }}
+ >
+ {b.text}
+ </Button>
+ ))
+ }
</div>
</div>
</section>
- <section id="page1" className="feature-section" style={{backgroundImage: `url("${useBaseUrl('/img/sec-page-bg.png')}")`}}>
+ <section className="feature-section" style={{backgroundImage: `url("${useBaseUrl('/img/sec-page-bg.png')}")`}}>
<div className="title-index">01</div>
{
language === 'zh-CN' && <div className="page-title-wrap">
@@ -79,7 +61,7 @@ export default function() {
<div className="page1-title-l1">ADVANTAGES</div>
</div>
}
- <ul className={` ${p1Animation ? 'animate__animated animate__fadeInUp' : ''}`}>
+ <ul>
{
dataSource.features.list.map((feature, i) => (
<li key={i} index={i}>
@@ -107,153 +89,10 @@ export default function() {
<div className="page1-title-l1">STRUCTURE</div>
</div>
}
- <div className={`architecture-img-wrap ${p2Animation ? 'animate__animated animate__fadeInUp' : ''}`}>
- <img className="architecture-img" src={useBaseUrl('/img/arch-img.png')}></img>
+ <div className="architecture-img-wrap">
+ <IndexArch style={{ width: '100%' }} />
</div>
</section>
-
- <section className="connect-section" style={{backgroundColor: '#373740'}}>
- <div className="content-div">
- <div className="connect-div">
- <div className="connect-div-img">
- <svg t="1638515494456" className="icon" viewBox="0 0 1024 1024" version="1.1"
- xmlns="http://www.w3.org/2000/svg" p-id="14579" width="48" height="48">
- <path
- d="M544 832v128h-128v-128h128zM512 64a288 288 0 0 1 288 288c0 110.336-60.64 203.52-151.648 251.744L640 608c-64 32-96 96-96 160h-128c0-128 96-224 170.848-274.56A160 160 0 1 0 352 352H224a288 288 0 0 1 288-288z"
- fill="#ffffff" p-id="14580"></path>
- </svg>
- </div>
- {
- language === 'zh-CN' && <div>
- <h3>任何问题</h3>
- <p>
- 功能请求、提问或报告错误? 随时<a href="https://the-asf.slack.com/archives/C01QAG6U00L" target="_blank">GitHub Discussions</a>讨论或者<a
- href="https://github.com/apache/inlong/issues" target="_blank">提交问题</a>。
- </p>
- </div>
- }
- {
- language === 'en' && <div>
- <h3>Any questions</h3>
- <p>
- Features request, ask questions or report bugs? Feel free to <a href="https://github.com/apache/inlong/discussions" target="_blank">GitHub Discussion</a> or <a
- href="https://github.com/apache/inlong/issues" target="_blank">submit an issue</a>.
- </p>
- </div>
- }
- </div>
- <div className="connect-div">
- <div className="connect-div-img">
- <svg t="1638515632177" className="icon" viewBox="0 0 1024 1024" version="1.1"
- xmlns="http://www.w3.org/2000/svg" p-id="26063" width="48" height="48">
- <path
- d="M872 160h-720A119.84 119.84 0 0 0 32 279.36v464A119.84 119.84 0 0 0 152 864h720a120 120 0 0 0 120-120.48v-464A120 120 0 0 0 872 160zM928 743.52A56 56 0 0 1 872 800h-720A56 56 0 0 1 96 743.52v-464A56 56 0 0 1 152 224h720a56 56 0 0 1 56 55.36z"
- fill="#ffffff" p-id="26064"></path>
- <path
- d="M832 375.52L512 582.24 192 375.52a32 32 0 1 0-34.56 53.92l337.28 217.76a31.04 31.04 0 0 0 17.28 5.12 30.72 30.72 0 0 0 17.28-5.12l338.08-217.76A32 32 0 0 0 832 375.52z"
- fill="#ffffff" p-id="26065"></path>
- </svg>
- </div>
- {
- language === 'zh-CN' && <div>
- <h3>加入Slack Workspace</h3>
- <p>
- 将“请求加入 Apache InLong”邮件发送到邮箱<a href="mailto:dev@inlong.apache.org">dev@inlong.apache.org</a> , 我们将邀请您加入。
- </p>
- </div>
- }
- {
- language === 'en' && <div>
- <h3>Join our slack workspace</h3>
- <p>
- Send ‘Request to join Apache InLong’ mail to the mail list <a href="mailto:dev@inlong.apache.org">dev@inlong.apache.org</a> , we will invite you in.
- </p>
- </div>
- }
- </div>
- <div className="connect-div">
- <div className="connect-div-img">
- <svg t="1638514162507" className="icon" viewBox="0 0 1024 1024" version="1.1"
- xmlns="http://www.w3.org/2000/svg" p-id="2762" data-spm-anchor-id="a313x.7781069.0.i3" width="48"
- height="48">
- <path
- d="M512 12.64c-282.752 0-512 229.216-512 512 0 226.208 146.72 418.144 350.144 485.824 25.6 4.736 35.008-11.104 35.008-24.64 0-12.192-0.48-52.544-0.704-95.328-142.464 30.976-172.512-60.416-172.512-60.416-23.296-59.168-56.832-74.912-56.832-74.912-46.464-31.776 3.52-31.136 3.52-31.136 51.392 3.616 78.464 52.768 78.464 52.768 45.664 78.272 119.776 55.648 148.992 42.56 4.576-33.088 17.856-55.68 32.512-68.48-113.728-12.928-233.28-56.864-233.28-253.024 0-55.904 20-101.568 52 [...]
- p-id="2763" fill="#ffffff"></path>
- </svg>
- </div>
- {
- language === 'zh-CN' && <div>
- <h3>欢迎贡献</h3>
- <p>
- 欢迎大家可以随时创建 <a href="https://github.com/apache/inlong" target="_blank">Pull Request</a> 贡献自己的代码。
- </p>
- </div>
- }
- {
- language === 'en' && <div>
- <h3>Contributions welcome</h3>
- <p>
- Everyone is welcome to create <a href="https://github.com/apache/inlong" target="_blank">Pull Request</a> and contribute their own code at any time!
- </p>
- </div>
- }
-
- </div>
- <div className="connect-div">
- <div className="connect-div-img">
- <svg t="1638515814626" className="icon" viewBox="0 0 1024 1024" version="1.1"
- xmlns="http://www.w3.org/2000/svg" p-id="34514" width="48" height="48">
- <path
- d="M679.68 360.107a284.16 284.16 0 0 1 32 1.92C682.667 227.84 539.52 128 375.68 128 192 128 42.667 253.013 42.667 411.52c0 91.52 49.92 166.613 133.333 224.853L142.72 736.64l116.48-58.453a569.813 569.813 0 0 0 116.693 16.64c10.454 0 21.334 0 31.147-1.28a248.32 248.32 0 0 1-10.24-69.76c0-145.494 125.013-263.68 283.093-263.68zM498.347 263.04a51.413 51.413 0 1 1-51.414 51.413 51.413 51.413 0 0 1 51.414-51.413zM265.173 367.147a51.413 51.413 0 1 1 51.414-51.414 51.413 51.41 [...]
- p-id="34515" fill="#ffffff"></path>
- </svg>
- </div>
- {
- language === 'zh-CN' && <div>
- <h3>微信互动</h3>
- <p>
- 欢迎大家关注微信公众号 <a href="https://github.com/apache/inlong-website/blob/master/static/img/apache-inlong-wechat.jpg" target="_blank"> Apache InLong </a>。
- </p>
- </div>
- }
- {
- language === 'en' && <div>
- <h3>Follow us on WeChat</h3>
- <p>
- Welcome everyone to follow the WeChat public account <a href="https://github.com/apache/inlong-website/blob/master/static/img/apache-inlong-wechat.jpg" target="_blank">Apache InLong</a> .
- </p>
- </div>
- }
- </div>
- <div className="connect-div">
- <div className="connect-div-img">
- <svg t="1647868339633" className="icon" viewBox="0 0 1024 1024" version="1.1"
- xmlns="http://www.w3.org/2000/svg" p-id="1775" width="48" height="48">
- <path
- d="M1024 194.56a420.352 420.352 0 0 1-120.832 33.28 210.432 210.432 0 0 0 92.16-116.224 422.4 422.4 0 0 1-133.632 51.2A209.92 209.92 0 0 0 499.2 307.2a211.968 211.968 0 0 0 5.632 47.616 596.48 596.48 0 0 1-433.152-220.16 208.896 208.896 0 0 0-28.672 105.472A204.8 204.8 0 0 0 132.096 414.72C97.28 413.696 32.256 404.48 32.256 388.608v2.56a214.528 214.528 0 0 0 173.056 204.8 193.024 193.024 0 0 1-51.2 7.168 199.68 199.68 0 0 1-38.4-3.584 210.944 210.944 0 0 0 196.608 1 [...]
- fill="#ffffff" p-id="1776"></path>
- </svg>
- </div>
- {
- language === 'zh-CN' && <div>
- <h3>推特互动</h3>
- <p>
- 欢迎大家关注Twitter <a href="https://github.com/apache/inlong-website/blob/master/static/img/apache-inlong-wechat.jpg" target="_blank">@ApacheInlong</a> 。
- </p>
- </div>
- }
- {
- language === 'en' && <div>
- <h3>Follow us on Twitter</h3>
- <p>
- Follow the latest developments of the project on <a href="https://twitter.com/ApacheInlong" target="_blank">@ApacheInlong</a> .
- </p>
- </div>
- }
- </div>
- </div>
- </section>
-
</div>
);
}
diff --git a/src/pages/Home/index.less b/src/pages/Home/index.less
index 7c4a78ec5f..013495c1af 100644
--- a/src/pages/Home/index.less
+++ b/src/pages/Home/index.less
@@ -1,23 +1,26 @@
-@brandColor: #2DACEC;
-@startColor: #03DDE4;
-@intermediateColor: #30AFED;
-@endColor: #8755FF;
-@mobileWidth: 640px;
-@contentWidth: 1280px;
+@keyframes fadeIn {
+ 0% {
+ opacity: 0;
+ transform: translate3d(0,50%,0);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateZ(0);
+ }
+}
+
+.fadeInAnimation {
+ animation-name: fadeIn;
+ animation-delay: 0s;
+ animation-duration: 1s;
+ animation-fill-mode: both;
+}
.home-page {
- .show-tips {
- width: 100%;
- background: rgba(255,255,0,0.5);
- height: 30px;
- text-align: center;
- font-size: 18px;
- top: 67px;
- position: absolute;
- }
.top-section {
position: relative;
- height: 800px;
+ height: 100vh;
+ min-height: 800px;
background-size: cover;
background-position: bottom;
.vertical-middle {
@@ -56,133 +59,36 @@
}
}
.product-desc2 {
+ .fadeInAnimation;
font-family: Helvetica;
font-size: 1.5rem;
- color: #5494FF;
+ color: var(--ifm-color-primary);
text-align: justify;
display: flex;
justify-content: space-between;
+ align-items: center;
.split {
width: 1px;
- background: #5494FF;
- height: 34px;
- margin-left: 10px;
- }
- .dist {
- margin-left: 10px;
+ background: var(--ifm-color-primary);
+ height: 20px;
+ margin: 0 5px;
}
}
.product-desc {
+ .fadeInAnimation;
width: 550px;
font-family: HelveticaNeue-Medium;
- color: rgba(0,0,0,0.85);
- opacity: 0.6;
+ color: rgba(255, 255, 255, 0.6);
margin-top: 1rem;
font-size: 18px;
- color: #FFFFFF;
- text-align: justify;
line-height: 27px;
}
.button-area {
margin-top: 40px;
-
- .button {
- margin-right: 20px;
- padding: 0 20px;
- }
- .button-primary {
- border-radius: 30px;
- font-family: PingFangSC-Semibold;
- font-size: 16px;
- color: #FFFFFF;
- letter-spacing: 0;
- text-align: center;
- }
- .button-normal {
- background: rgba(255,255,255,0.30);
- border: 1px solid #5494FF;
- border-radius: 30px;
- font-family: PingFangSC-Semibold;
- font-size: 16px;
- color: #5494FF;
- letter-spacing: 0;
- text-align: center;
- }
-
- .button:last-child {
- margin-right: 0;
- }
- }
- }
- .introduction-section {
- background: #F9FAFA;
- .introduction-body {
- max-width: @contentWidth;
- box-sizing: border-box;
- margin: 0 auto;
- min-height: 640px;
- padding: 0 40px;
- position: relative;
- display: flex;
- flex-wrap: wrap;
- align-items: center;
- justify-content: space-between;
- &::before {
- content: '';
- position: absolute;
- top: 0;
- left: 40px;
- height: 165px;
- opacity: 0.3;
- border-right: 1px solid #666;
- }
- &::after {
- content: '';
- position: absolute;
- left: 39px;
- top: 165px;
- width: 3px;
- height: 17px;
- background-image: linear-gradient(0deg, @startColor 0%, @intermediateColor 51%, @endColor 100%);
- }
- .introduction {
- display: inline-block;
- width: calc(100% - 726px);
- min-width: 300px;
- max-width: 590px;
- h3 {
- font-family: Avenir-Heavy;
- font-size: 36px;
- color: #333;
- margin-bottom: 40px;
- word-break: break-word;
- }
- p {
- opacity: 0.56;
- font-family: Avenir-Medium;
- font-size: 18px;
- color: #999;
- }
- }
- img {
- width: 562px;
- margin: 0 82px;
- max-width: 100%;
- box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.05);
- }
- @media screen and (max-width: 1106px){
- .introduction {
- display: inline-block;
- width: 100%;
- max-width: 100%;
- }
- img {
- margin: 0;
- }
- }
}
}
+
.feature-section {
box-sizing: border-box;
position: relative;
@@ -232,7 +138,7 @@
.title-index {
font-family: Helvetica;
font-size: 5rem;
- color: #5494FF;
+ color: var(--ifm-color-primary);
letter-spacing: 0;
line-height: 5rem;
display: inline;
@@ -291,19 +197,6 @@
}
}
}
- li::after {
- content: '';
- width: 0;
- height: 12rem;
- position: absolute;
- border-right: 1px dashed #7B98F7;
- top: 12rem;
- right: 0;
- opacity: 0.5;
- }
- li:last-child::after {
- border-right: 0;
- }
@media screen and (max-width: 768px){
li {
width: 100%;
@@ -311,232 +204,12 @@
}
}
}
- .start-section {
- background-image: linear-gradient(0deg, @startColor 0%, @intermediateColor 51%, @endColor 100%);
- .start-body {
- max-width: @contentWidth;
- margin: 0 auto;
- box-sizing: border-box;
- height: 260px;
- padding: 35px 40px;
- position: relative;
- &::before {
- content: '';
- position: absolute;
- top: 0;
- left: 20px;
- height: 100%;
- opacity: 0.3;
- border-right: 1px solid #fff;
- }
- &::after {
- content: '';
- position: absolute;
- left: 19px;
- top: 48px;
- width: 3px;
- height: 17px;
- background: #fff;
- }
- .left-part {
- display: inline-block;
- width: 50%;
- vertical-align: top;
- h3 {
- font-family: Avenir-Heavy;
- font-size: 36px;
- color: #FFF;
- margin: 0;
- }
- p {
- opacity: 0.8;
- font-family: Avenir-Medium;
- font-size: 18px;
- color: #FFF;
- line-height: 24px;
- margin: 6px 0 12px;
- }
- a {
- font-family: Avenir-Heavy;
- font-size: 14px;
- color: @brandColor;
- text-align: center;
- display: inline-block;
- width: 140px;
- height: 48px;
- line-height: 48px;
- background: #FFF;
- border-radius: 4px;
- }
- }
- .right-part {
- display: inline-block;
- width: 50%;
- font-size: 0;
- margin-top: 15px;
- img {
- margin-left: 5%;
- width: 500px;
- }
- }
- @media screen and (max-width: 1050px){
- & {
- height: 474px;
- }
- .left-part {
- width: 100%;
- }
- .right-part {
- width: 100%;
- margin-top: 38px;
- img {
- max-width: 100%;
- margin-left: 0;
- }
- }
- }
- }
- }
- .users-section {
- box-sizing: border-box;
- max-width: @contentWidth;
- margin: 0 auto;
- padding: 80px 40px 40px;
- position: relative;
- &::before {
- content: '';
- position: absolute;
- top: 0;
- left: 50%;
- transform: translateX(-50%);
- margin: 0 auto;
- height: 83px;
- opacity: 0.3;
- border-right: 1px solid #666;
- }
- &::after {
- content: '';
- position: absolute;
- top: 66px;
- left: 50%;
- transform: translateX(-50%);
- width: 3px;
- height: 17px;
- background-image: linear-gradient(0deg, @startColor 0%, @intermediateColor 51%, @endColor 100%);
- }
- h3 {
- font-family: Avenir-Heavy;
- font-size: 36px;
- color: #333;
- text-align: center;
- margin-bottom: 40px;
- }
- p {
- font-family: Avenir-Medium;
- font-size: 14px;
- color: #666;
- text-align: center;
- margin: 0 0 40px;
- a {
- color: #1e6bb8;
- text-decoration: none;
- }
- }
- .users {
- // display: flex;
- // flex-wrap: wrap;
- // justify-content: space-between;
- display: inline-block;
- text-align: center;
- img {
- margin-right: 10px;
- width: 140px;
- height: 80px;
- margin-bottom: 40px;
- }
- }
- }
- @media screen and (max-width: @mobileWidth) {
- .introduction-section {
- padding: 0 20px;
- &::before {
- left: 20px;
- }
- &::after {
- left: 19px;
- }
- }
- .feature-section, .users-section {
- padding-left: 20px;
- padding-right: 20px;
- background-size: cover;
- background: no-repeat 50% 50%;
- .index {
- font-family: DINAlternate-Bold;
- font-size: 24px;
- color: #5494FF;
- letter-spacing: 0;
- text-align: center;
- line-height: 36px;
- width: 60%;
- margin: 0 20%;
-
- span {
- display: inline-block;
- margin-bottom: 24px;
- padding-bottom: 8px;
- border-bottom: 1px solid #ccc;
- }
- }
- }
- }
.architecture-img-wrap {
width: 100%;
- margin-top: 2rem;
}
.architecture-img {
+ .fadeInAnimation;
width: 100%;
}
-
- .connect-section {
- box-sizing: border-box;
- position: relative;
- padding: 80px 10%;
- background-size: cover;
- //background: #373740;
- color: white;
- margin: 0 auto;
-
- .content-div {
- //background: dodgerblue;
- width: 100%;
- height: 280px;
- margin: 0 auto;
-
- .connect-div{
- width: 20%;
- height: auto;
- float: left;
- text-align: center;
- margin: 0 auto;
- padding-left: 15px;
-
- .connect-div-img {
- width: 100%;
- height: 100px;
- margin: 0 auto;
- }
-
- h3 {
- margin-top: 20px;
- font-size: 1vw;
- }
-
- }
-
- }
-
- }
-
}
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index ecd3bc90ff..dcdfeda4a2 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -10,23 +10,15 @@ export default function() {
const pathname = isBrowser && location.pathname
- useEffect(() => {
- if (isBrowser) {
- const script = document.createElement('script');
- script.src = 'https://www.apachecon.com/event-images/snippet.js';
- document.body.appendChild(script);
- }
- }, [isBrowser])
-
useEffect(() => {
if (isBrowser) {
const nav = document.getElementsByTagName('nav')[0];
const classList = nav && nav.classList;
if(!classList) return;
if (pathname === '/' || pathname === '/zh-CN/') {
- classList.add('index-nav');
+ classList.add('index-nav', 'navbar--dark');
} else {
- classList.remove('index-nav');
+ classList.remove('index-nav', 'navbar--dark');
}
}
}, [isBrowser, pathname])
@@ -34,7 +26,7 @@ export default function() {
return (
<Layout
title={siteConfig.title}
- description="Description will go into a meta tag in <head />">
+ description="Apache InLong">
<main>
<Home />
</main>
diff --git a/static/img/arch-img.png b/static/img/arch-img.png
deleted file mode 100644
index 106ea1ed7e..0000000000
Binary files a/static/img/arch-img.png and /dev/null differ
diff --git a/static/img/incubating.svg b/static/img/incubating.svg
deleted file mode 100644
index bc957da7ac..0000000000
--- a/static/img/incubating.svg
+++ /dev/null
@@ -1,20 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="148px" height="57px" viewBox="0 0 148 57" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
- <!-- Generator: Sketch 55.2 (78181) - https://sketchapp.com -->
- <title>编组 2</title>
- <desc>Created with Sketch.</desc>
- <g id="框架图" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
- <g id="重构稿-修改" transform="translate(-770.000000, -252.000000)">
- <g id="1" transform="translate(-1.000000, 0.000000)">
- <g id="text" transform="translate(360.000000, 192.000000)">
- <g id="编组-2" transform="translate(411.000000, 60.000000)">
- <path d="M40,48 L34.1,55.8666667 C33.9862915,56.018278 33.8516113,56.1529582 33.7,56.2666667 C32.8163444,56.9294084 31.5627417,56.7503223 30.9,55.8666667 L25,48 L8,48 C3.581722,48 5.41083001e-16,44.418278 0,40 L0,8 C-5.41083001e-16,3.581722 3.581722,-2.76100849e-14 8,-2.84217094e-14 L140,-2.84217094e-14 C144.418278,-2.92333339e-14 148,3.581722 148,8 L148,40 C148,44.418278 144.418278,48 140,48 L40,48 Z" id="形状结合" fill="#ABB4EF"></path>
- <text id="Incubating" font-family="PingFangSC-Semibold, PingFang SC" font-size="24" font-weight="500" fill="#FFFFFF">
- <tspan x="16" y="33">Incubating</tspan>
- </text>
- </g>
- </g>
- </g>
- </g>
- </g>
-</svg>
\ No newline at end of file
diff --git a/static/img/incubator-logo.svg b/static/img/incubator-logo.svg
deleted file mode 100644
index 7f54eeac8e..0000000000
--- a/static/img/incubator-logo.svg
+++ /dev/null
@@ -1,13 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="248px" height="59px" viewBox="0 0 248 59" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
- <!-- Generator: Sketch 55.2 (78181) - https://sketchapp.com -->
- <title>egg-logo</title>
- <desc>Created with Sketch.</desc>
- <g id="框架图" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
- <g id="重构稿" transform="translate(-363.000000, -2089.000000)">
- <g id="3" transform="translate(0.000000, 1869.000000)">
- <image id="egg-logo" x="359" y="215" width="256" height="65" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAB+CAYAAADSiuOAAAAABGdBTUEAALGN5fIAKQAAQABJREFUeAHtXQecFMXS79m9QAYBQUQ4OO4OAQEDBp4JjA8jJlQUBAOKOesTUcxZFBNgeAoGRPQpfIgRMGFExYByiSQIomQ4uLvd+f7/2Zm9uWN3ZnZ3ZsPRdb+6memqrq6unenqru6eEUKCtIC0gLSAtIC0gLSAtIC0gLSAtIC0gLSAtIC0gLSAtIC0gLSAtIC0gLSAtIC0gLSAtIC0gLSAtIC0gLSAtIC0gLSAtIC0gLSAtIC0gLSAtIC0gLSAtIC0gLSAtIC0gLSAtIC0gLSAtIC0gLSAtIC0gLSAtIC0gLSAtIC0gLSAt [...]
- </g>
- </g>
- </g>
-</svg>
\ No newline at end of file
diff --git a/static/img/index-arch.svg b/static/img/index-arch.svg
new file mode 100644
index 0000000000..2fdd2b2fcb
--- /dev/null
+++ b/static/img/index-arch.svg
@@ -0,0 +1,325 @@
+<svg width="1202" viewBox="0 0 1202 646"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+ <path id="e" d="M0 0h144v48H0z"/>
+ <filter x="-38.2%" y="-72.9%" width="176.4%" height="329.2%" filterUnits="objectBoundingBox" id="d">
+ <feOffset dy="20" in="SourceAlpha" result="shadowOffsetOuter1"/>
+ <feGaussianBlur stdDeviation="15" in="shadowOffsetOuter1" result="shadowBlurOuter1"/>
+ <feColorMatrix values="0 0 0 0 0.254423549 0 0 0 0 0.322753253 0 0 0 0 0.546591938 0 0 0 0.05 0" in="shadowBlurOuter1"/>
+ </filter>
+ <path id="g" d="M0 0h144v48H0z"/>
+ <filter x="-38.2%" y="-72.9%" width="176.4%" height="329.2%" filterUnits="objectBoundingBox" id="f">
+ <feOffset dy="20" in="SourceAlpha" result="shadowOffsetOuter1"/>
+ <feGaussianBlur stdDeviation="15" in="shadowOffsetOuter1" result="shadowBlurOuter1"/>
+ <feColorMatrix values="0 0 0 0 0.254423549 0 0 0 0 0.322753253 0 0 0 0 0.546591938 0 0 0 0.05 0" in="shadowBlurOuter1"/>
+ </filter>
+ <path id="i" d="M0 0h144v48H0z"/>
+ <filter x="-38.2%" y="-72.9%" width="176.4%" height="329.2%" filterUnits="objectBoundingBox" id="h">
+ <feOffset dy="20" in="SourceAlpha" result="shadowOffsetOuter1"/>
+ <feGaussianBlur stdDeviation="15" in="shadowOffsetOuter1" result="shadowBlurOuter1"/>
+ <feColorMatrix values="0 0 0 0 0.254423549 0 0 0 0 0.322753253 0 0 0 0 0.546591938 0 0 0 0.05 0" in="shadowBlurOuter1"/>
+ </filter>
+ <path id="k" d="M0 0h144v48H0z"/>
+ <filter x="-38.2%" y="-72.9%" width="176.4%" height="329.2%" filterUnits="objectBoundingBox" id="j">
+ <feOffset dy="20" in="SourceAlpha" result="shadowOffsetOuter1"/>
+ <feGaussianBlur stdDeviation="15" in="shadowOffsetOuter1" result="shadowBlurOuter1"/>
+ <feColorMatrix values="0 0 0 0 0.254423549 0 0 0 0 0.322753253 0 0 0 0 0.546591938 0 0 0 0.05 0" in="shadowBlurOuter1"/>
+ </filter>
+ <path id="m" d="M0 0h144v48H0z"/>
+ <filter x="-38.2%" y="-72.9%" width="176.4%" height="329.2%" filterUnits="objectBoundingBox" id="l">
+ <feOffset dy="20" in="SourceAlpha" result="shadowOffsetOuter1"/>
+ <feGaussianBlur stdDeviation="15" in="shadowOffsetOuter1" result="shadowBlurOuter1"/>
+ <feColorMatrix values="0 0 0 0 0.254423549 0 0 0 0 0.322753253 0 0 0 0 0.546591938 0 0 0 0.05 0" in="shadowBlurOuter1"/>
+ </filter>
+ <path id="o" d="M0 0h144v48H0z"/>
+ <filter x="-38.2%" y="-72.9%" width="176.4%" height="329.2%" filterUnits="objectBoundingBox" id="n">
+ <feOffset dy="20" in="SourceAlpha" result="shadowOffsetOuter1"/>
+ <feGaussianBlur stdDeviation="15" in="shadowOffsetOuter1" result="shadowBlurOuter1"/>
+ <feColorMatrix values="0 0 0 0 0.254423549 0 0 0 0 0.322753253 0 0 0 0 0.546591938 0 0 0 0.05 0" in="shadowBlurOuter1"/>
+ </filter>
+ <path id="q" d="M0 0h144v48H0z"/>
+ <filter x="-38.2%" y="-72.9%" width="176.4%" height="329.2%" filterUnits="objectBoundingBox" id="p">
+ <feOffset dy="20" in="SourceAlpha" result="shadowOffsetOuter1"/>
+ <feGaussianBlur stdDeviation="15" in="shadowOffsetOuter1" result="shadowBlurOuter1"/>
+ <feColorMatrix values="0 0 0 0 0.254423549 0 0 0 0 0.322753253 0 0 0 0 0.546591938 0 0 0 0.05 0" in="shadowBlurOuter1"/>
+ </filter>
+ <path id="a" d="M38 0h221v382H38z"/>
+ <mask id="r" x="0" y="0" width="221" height="382" fill="#fff">
+ <use xlink:href="#a"/>
+ </mask>
+ <path id="t" d="M0 0h144v48H0z"/>
+ <filter x="-38.2%" y="-72.9%" width="176.4%" height="329.2%" filterUnits="objectBoundingBox" id="s">
+ <feOffset dy="20" in="SourceAlpha" result="shadowOffsetOuter1"/>
+ <feGaussianBlur stdDeviation="15" in="shadowOffsetOuter1" result="shadowBlurOuter1"/>
+ <feColorMatrix values="0 0 0 0 0.254423549 0 0 0 0 0.322753253 0 0 0 0 0.546591938 0 0 0 0.05 0" in="shadowBlurOuter1"/>
+ </filter>
+ <path id="v" d="M77 0h144v48H77z"/>
+ <filter x="-38.2%" y="-72.9%" width="176.4%" height="329.2%" filterUnits="objectBoundingBox" id="u">
+ <feOffset dy="20" in="SourceAlpha" result="shadowOffsetOuter1"/>
+ <feGaussianBlur stdDeviation="15" in="shadowOffsetOuter1" result="shadowBlurOuter1"/>
+ <feColorMatrix values="0 0 0 0 0.254423549 0 0 0 0 0.322753253 0 0 0 0 0.546591938 0 0 0 0.05 0" in="shadowBlurOuter1"/>
+ </filter>
+ <path id="x" d="M0 0h144v48H0z"/>
+ <filter x="-38.2%" y="-72.9%" width="176.4%" height="329.2%" filterUnits="objectBoundingBox" id="w">
+ <feOffset dy="20" in="SourceAlpha" result="shadowOffsetOuter1"/>
+ <feGaussianBlur stdDeviation="15" in="shadowOffsetOuter1" result="shadowBlurOuter1"/>
+ <feColorMatrix values="0 0 0 0 0.254423549 0 0 0 0 0.322753253 0 0 0 0 0.546591938 0 0 0 0.05 0" in="shadowBlurOuter1"/>
+ </filter>
+ <path id="b" d="M0 0h221v382H0z"/>
+ <mask id="y" x="0" y="0" width="221" height="382" fill="#fff">
+ <use xlink:href="#b"/>
+ </mask>
+ <path id="A" d="M0 0h144v48H0z"/>
+ <filter x="-38.2%" y="-72.9%" width="176.4%" height="329.2%" filterUnits="objectBoundingBox" id="z">
+ <feOffset dy="20" in="SourceAlpha" result="shadowOffsetOuter1"/>
+ <feGaussianBlur stdDeviation="15" in="shadowOffsetOuter1" result="shadowBlurOuter1"/>
+ <feColorMatrix values="0 0 0 0 0.254423549 0 0 0 0 0.322753253 0 0 0 0 0.546591938 0 0 0 0.05 0" in="shadowBlurOuter1"/>
+ </filter>
+ <path id="C" d="M0 0h144v48H0z"/>
+ <filter x="-38.2%" y="-72.9%" width="176.4%" height="329.2%" filterUnits="objectBoundingBox" id="B">
+ <feOffset dy="20" in="SourceAlpha" result="shadowOffsetOuter1"/>
+ <feGaussianBlur stdDeviation="15" in="shadowOffsetOuter1" result="shadowBlurOuter1"/>
+ <feColorMatrix values="0 0 0 0 0.254423549 0 0 0 0 0.322753253 0 0 0 0 0.546591938 0 0 0 0.05 0" in="shadowBlurOuter1"/>
+ </filter>
+ <path id="E" d="M0 0h144v48H0z"/>
+ <filter x="-38.2%" y="-72.9%" width="176.4%" height="329.2%" filterUnits="objectBoundingBox" id="D">
+ <feOffset dy="20" in="SourceAlpha" result="shadowOffsetOuter1"/>
+ <feGaussianBlur stdDeviation="15" in="shadowOffsetOuter1" result="shadowBlurOuter1"/>
+ <feColorMatrix values="0 0 0 0 0.254423549 0 0 0 0 0.322753253 0 0 0 0 0.546591938 0 0 0 0.05 0" in="shadowBlurOuter1"/>
+ </filter>
+ <path id="G" d="M0 0h144v48H0z"/>
+ <filter x="-38.2%" y="-72.9%" width="176.4%" height="329.2%" filterUnits="objectBoundingBox" id="F">
+ <feOffset dy="20" in="SourceAlpha" result="shadowOffsetOuter1"/>
+ <feGaussianBlur stdDeviation="15" in="shadowOffsetOuter1" result="shadowBlurOuter1"/>
+ <feColorMatrix values="0 0 0 0 0.254423549 0 0 0 0 0.322753253 0 0 0 0 0.546591938 0 0 0 0.05 0" in="shadowBlurOuter1"/>
+ </filter>
+ <path id="c" d="M0 0h221v382H0z"/>
+ <mask id="H" x="0" y="0" width="221" height="382" fill="#fff">
+ <use xlink:href="#c"/>
+ </mask>
+ <path id="J" d="M0 0h144v48H0z"/>
+ <filter x="-38.2%" y="-72.9%" width="176.4%" height="329.2%" filterUnits="objectBoundingBox" id="I">
+ <feOffset dy="20" in="SourceAlpha" result="shadowOffsetOuter1"/>
+ <feGaussianBlur stdDeviation="15" in="shadowOffsetOuter1" result="shadowBlurOuter1"/>
+ <feColorMatrix values="0 0 0 0 0.254423549 0 0 0 0 0.322753253 0 0 0 0 0.546591938 0 0 0 0.05 0" in="shadowBlurOuter1"/>
+ </filter>
+ <path id="L" d="M0 0h144v48H0z"/>
+ <filter x="-38.2%" y="-72.9%" width="176.4%" height="329.2%" filterUnits="objectBoundingBox" id="K">
+ <feOffset dy="20" in="SourceAlpha" result="shadowOffsetOuter1"/>
+ <feGaussianBlur stdDeviation="15" in="shadowOffsetOuter1" result="shadowBlurOuter1"/>
+ <feColorMatrix values="0 0 0 0 0.254423549 0 0 0 0 0.322753253 0 0 0 0 0.546591938 0 0 0 0.05 0" in="shadowBlurOuter1"/>
+ </filter>
+ <path id="N" d="M0 0h144v48H0z"/>
+ <filter x="-38.2%" y="-72.9%" width="176.4%" height="329.2%" filterUnits="objectBoundingBox" id="M">
+ <feOffset dy="20" in="SourceAlpha" result="shadowOffsetOuter1"/>
+ <feGaussianBlur stdDeviation="15" in="shadowOffsetOuter1" result="shadowBlurOuter1"/>
+ <feColorMatrix values="0 0 0 0 0.254423549 0 0 0 0 0.322753253 0 0 0 0 0.546591938 0 0 0 0.05 0" in="shadowBlurOuter1"/>
+ </filter>
+ <path id="P" d="M0 0h144v48H0z"/>
+ <filter x="-38.2%" y="-72.9%" width="176.4%" height="329.2%" filterUnits="objectBoundingBox" id="O">
+ <feOffset dy="20" in="SourceAlpha" result="shadowOffsetOuter1"/>
+ <feGaussianBlur stdDeviation="15" in="shadowOffsetOuter1" result="shadowBlurOuter1"/>
+ <feColorMatrix values="0 0 0 0 0.254423549 0 0 0 0 0.322753253 0 0 0 0 0.546591938 0 0 0 0.05 0" in="shadowBlurOuter1"/>
+ </filter>
+ <path id="R" d="M0 0h200v64H0z"/>
+ <filter x="-27.5%" y="-54.7%" width="155%" height="271.9%" filterUnits="objectBoundingBox" id="Q">
+ <feOffset dy="20" in="SourceAlpha" result="shadowOffsetOuter1"/>
+ <feGaussianBlur stdDeviation="15" in="shadowOffsetOuter1" result="shadowBlurOuter1"/>
+ <feColorMatrix values="0 0 0 0 0.254423549 0 0 0 0 0.322753253 0 0 0 0 0.546591938 0 0 0 0.05 0" in="shadowBlurOuter1"/>
+ </filter>
+ </defs>
+ <g fill="none" fill-rule="evenodd">
+ <path class="arch-m-line" stroke="#7C99F8" stroke-width="4" d="M601 147v27H111.5v71"/>
+ <path class="arch-m-line" d="M601 147v27h495v69" stroke="#7C99F8" stroke-width="4" stroke-dasharray="4,6"/>
+ <path d="M601.844 244.674l5.178-8.137a1 1 0 0 0-.844-1.537h-10.356a1 1 0 0 0-.844 1.537l5.178 8.137a1 1 0 0 0 1.688 0zM855.844 244.674l5.178-8.137a1 1 0 0 0-.844-1.537h-10.356a1 1 0 0 0-.844 1.537l5.178 8.137a1 1 0 0 0 1.688 0zM1096.844 244.674l5.178-8.137a1 1 0 0 0-.844-1.537h-10.356a1 1 0 0 0-.844 1.537l5.178 8.137a1 1 0 0 0 1.688 0zM366.844 244.674l5.178-8.137a1 1 0 0 0-.844-1.537h-10.356a1 1 0 0 0-.844 1.537l5.178 8.137a1 1 0 0 0 1.688 0zM112.844 244.674l5.178-8.137a1 1 0 0 0 [...]
+ <path fill="#7C99F8" d="M364 174h4v64h-4zM599 174h4v64h-4zM853 174h4v64h-4zM601.832 143.248l4.132 6.197a1 1 0 0 1-.833 1.555h-8.262a1 1 0 0 1-.833-1.555l4.132-6.197a1 1 0 0 1 1.664 0z"/>
+ <path d="M222 412.441V254H1v382h221V412.441z" stroke="#7C99F8" stroke-dasharray="4,8"/>
+ <text font-family=".AppleSystemUIFont" font-size="24" fill="#FFF" transform="translate(1 254)">
+ <tspan x="78.599" y="55">Ingest</tspan>
+ </text>
+ <g transform="translate(40 332)">
+ <use fill="#000" filter="url(#d)" xlink:href="#e"/>
+ <use fill="#5494FF" xlink:href="#e"/>
+ </g>
+ <text font-family=".AppleSystemUIFont" font-size="16" fill="#FFF" transform="translate(40 332)">
+ <tspan x="56.289" y="29">SDK</tspan>
+ </text>
+ <g transform="translate(40 404)">
+ <use fill="#000" filter="url(#f)" xlink:href="#g"/>
+ <use fill="#5494FF" xlink:href="#g"/>
+ </g>
+ <text font-family=".AppleSystemUIFont" font-size="16" fill="#FFF" transform="translate(40 404)">
+ <tspan x="59.477" y="29">File</tspan>
+ </text>
+ <g transform="translate(40 476)">
+ <use fill="#000" filter="url(#h)" xlink:href="#i"/>
+ <use fill="#5494FF" xlink:href="#i"/>
+ </g>
+ <text font-family=".AppleSystemUIFont" font-size="16" fill="#FFF" transform="translate(40 476)">
+ <tspan x="53.391" y="26">HTTP</tspan>
+ </text>
+ <g transform="translate(40 548)">
+ <use fill="#000" filter="url(#j)" xlink:href="#k"/>
+ <use fill="#5494FF" xlink:href="#k"/>
+ </g>
+ <text font-family=".AppleSystemUIFont" font-size="16" fill="#FFF" transform="translate(40 548)">
+ <tspan x="61.242" y="29">DB</tspan>
+ </text>
+ <g fill="#7C99F8">
+ <path d="M259.801 451.176l-13.234-9.099a1 1 0 0 0-1.567.824v18.198a1 1 0 0 0 1.567.824l13.234-9.099a1 1 0 0 0 0-1.648z"/>
+ <path d="M208 449h37v5h-37z"/>
+ </g>
+ <path d="M757.801 355.176l-13.234-9.099a1 1 0 0 0-1.567.824v18.198a1 1 0 0 0 1.567.824l13.234-9.099a1 1 0 0 0 0-1.648zM757.801 499.176l-13.234-9.099a1 1 0 0 0-1.567.824v18.198a1 1 0 0 0 1.567.824l13.234-9.099a1 1 0 0 0 0-1.648z" fill="#7C99F8"/>
+ <path d="M246 412.441V254h221v382H246V412.441z" stroke="#7C99F8" stroke-dasharray="4,8"/>
+ <text font-family=".AppleSystemUIFont" font-size="24" fill="#FFF" transform="translate(246 254)">
+ <tspan x="59.927" y="55">Converge</tspan>
+ </text>
+ <g transform="translate(285 332)">
+ <use fill="#000" filter="url(#l)" xlink:href="#m"/>
+ <use fill="#5494FF" xlink:href="#m"/>
+ </g>
+ <text font-family=".AppleSystemUIFont" font-size="16" fill="#FFF" transform="translate(285 332)">
+ <tspan x="34.465" y="29">DataProxy</tspan>
+ </text>
+ <g transform="translate(285 404)">
+ <use fill="#000" filter="url(#n)" xlink:href="#o"/>
+ <use fill="#5494FF" xlink:href="#o"/>
+ </g>
+ <text font-family=".AppleSystemUIFont" font-size="16" fill="#FFF" transform="translate(285 404)">
+ <tspan x="34.465" y="29">DataProxy</tspan>
+ </text>
+ <g>
+ <g transform="translate(285 476)">
+ <use fill="#000" filter="url(#p)" xlink:href="#q"/>
+ <use fill="#5494FF" xlink:href="#q"/>
+ </g>
+ <text font-family=".AppleSystemUIFont" font-size="16" fill="#FFF" transform="translate(285 476)">
+ <tspan x="34.465" y="29">DataProxy</tspan>
+ </text>
+ </g>
+ <g transform="translate(453 254)">
+ <use stroke="#7C99F8" mask="url(#r)" stroke-width="2" stroke-dasharray="4,8" xlink:href="#a"/>
+ <text font-family=".AppleSystemUIFont" font-size="24" fill="#FFF">
+ <tspan x="114.903" y="55">Cache</tspan>
+ </text>
+ <g transform="translate(77 78)">
+ <use fill="#000" filter="url(#s)" xlink:href="#t"/>
+ <use fill="#5494FF" xlink:href="#t"/>
+ </g>
+ <text font-family=".AppleSystemUIFont" font-size="16" fill="#FFF" transform="translate(77 78)">
+ <tspan x="40.551" y="29">TubeMQ</tspan>
+ </text>
+ <g transform="translate(0 150)">
+ <use fill="#000" filter="url(#u)" xlink:href="#v"/>
+ <use fill="#5494FF" xlink:href="#v"/>
+ </g>
+ <g fill="#7C99F8">
+ <path d="M51.801 197.176l-13.234-9.099a1 1 0 0 0-1.567.824v18.198a1 1 0 0 0 1.567.824l13.234-9.099a1 1 0 0 0 0-1.648z"/>
+ <path d="M0 195h37v5H0z"/>
+ </g>
+ <text font-family=".AppleSystemUIFont" font-size="16" fill="#FFF" transform="translate(0 150)">
+ <tspan x="126.516" y="29">Pulsar</tspan>
+ </text>
+ <g>
+ <g transform="translate(77 222)">
+ <use fill="#000" filter="url(#w)" xlink:href="#x"/>
+ <use fill="#5494FF" xlink:href="#x"/>
+ </g>
+ <text font-family=".AppleSystemUIFont" font-size="16" fill="#FFF" transform="translate(77 222)">
+ <tspan x="51.445" y="29">Kafka</tspan>
+ </text>
+ </g>
+ </g>
+ <g transform="translate(736 254)">
+ <use stroke="#7C99F8" mask="url(#y)" stroke-width="2" stroke-dasharray="4,8" xlink:href="#b"/>
+ <path fill-opacity=".3" fill="#5494FF" d="M27 138h168v216H27z"/>
+ <text font-family=".AppleSystemUIFont" font-size="24" fill="#FFF">
+ <tspan x="89.038" y="55">Sort</tspan>
+ </text>
+ <g transform="translate(39 78)">
+ <use fill="#000" filter="url(#z)" xlink:href="#A"/>
+ <use fill="#5494FF" xlink:href="#A"/>
+ </g>
+ <text font-family=".AppleSystemUIFont" font-size="16" fill="#FFF" transform="translate(39 78)">
+ <tspan x="56.848" y="29">Sort</tspan>
+ </text>
+ <g transform="translate(39 150)">
+ <use fill="#000" filter="url(#B)" xlink:href="#C"/>
+ <use fill="#5494FF" xlink:href="#C"/>
+ </g>
+ <text font-family=".AppleSystemUIFont" font-size="16" fill="#FFF" transform="translate(39 150)">
+ <tspan x="36.984" y="29">Real-time</tspan>
+ </text>
+ <g>
+ <g transform="translate(39 222)">
+ <use fill="#000" filter="url(#D)" xlink:href="#E"/>
+ <use fill="#5494FF" xlink:href="#E"/>
+ </g>
+ <text font-family=".AppleSystemUIFont" font-size="16" fill="#FFF" transform="translate(39 222)">
+ <tspan x="45.375" y="29">OffLine</tspan>
+ </text>
+ </g>
+ <g>
+ <g transform="translate(39 294)">
+ <use fill="#000" filter="url(#F)" xlink:href="#G"/>
+ <use fill="#5494FF" xlink:href="#G"/>
+ </g>
+ <text font-family=".AppleSystemUIFont" font-size="16" fill="#FFF" transform="translate(39 294)">
+ <tspan x="56.289" y="29">SDK</tspan>
+ </text>
+ </g>
+ </g>
+ <path d="M685 428h27.734a9 9 0 0 1 9 9v54a9 9 0 0 0 9 9H744" stroke="#7C99F8" stroke-width="4"/>
+ <path d="M685 428h27.734a9 9 0 0 1 9 9v54a9 9 0 0 0 9 9H744" stroke="#7C99F8" stroke-width="4"/>
+ <g transform="translate(981 254)">
+ <use stroke="#7C99F8" mask="url(#H)" stroke-width="2" stroke-dasharray="4,8" xlink:href="#c"/>
+ <text font-family=".AppleSystemUIFont" font-size="24" fill="#FFF">
+ <tspan x="69.807" y="55">Storage</tspan>
+ </text>
+ <g transform="translate(39 78)">
+ <use fill="#000" filter="url(#I)" xlink:href="#J"/>
+ <use fill="#5494FF" xlink:href="#J"/>
+ </g>
+ <text font-family=".AppleSystemUIFont" font-size="16" fill="#FFF" transform="translate(39 78)">
+ <tspan x="55.805" y="29">Hive</tspan>
+ </text>
+ <g transform="translate(39 150)">
+ <use fill="#000" filter="url(#K)" xlink:href="#L"/>
+ <use fill="#5494FF" xlink:href="#L"/>
+ </g>
+ <text font-family=".AppleSystemUIFont" font-size="16" fill="#FFF" transform="translate(39 150)">
+ <tspan x="44.5" y="29">Iceberg</tspan>
+ </text>
+ <g>
+ <g transform="translate(39 222)">
+ <use fill="#000" filter="url(#M)" xlink:href="#N"/>
+ <use fill="#5494FF" xlink:href="#N"/>
+ </g>
+ <text font-family=".AppleSystemUIFont" font-size="16" fill="#FFF" transform="translate(39 222)">
+ <tspan x="48.414" y="29">HBase</tspan>
+ </text>
+ </g>
+ <g>
+ <g transform="translate(39 294)">
+ <use fill="#000" filter="url(#O)" xlink:href="#P"/>
+ <use fill="#5494FF" xlink:href="#P"/>
+ </g>
+ <text font-family=".AppleSystemUIFont" font-size="16" fill="#FFF" transform="translate(39 294)">
+ <tspan x="30.926" y="29">ClickHouse</tspan>
+ </text>
+ </g>
+ </g>
+ <g>
+ <g transform="translate(501 70)">
+ <use fill="#000" filter="url(#Q)" xlink:href="#R"/>
+ <use fill="#5494FF" xlink:href="#R"/>
+ </g>
+ <text font-family=".AppleSystemUIFont" font-size="24" fill="#FFF" transform="translate(501 70)">
+ <tspan x="46" y="40">Manager</tspan>
+ </text>
+ </g>
+ <path d="M685 428h27.734a9 9 0 0 0 9-9v-54a9 9 0 0 1 9-9H744M935 356h22.734a9 9 0 0 1 9 9v91a9 9 0 0 0 9 9H993" stroke="#7C99F8" stroke-width="4"/>
+ <path d="M1002.801 464.176l-13.234-9.099a1 1 0 0 0-1.567.824v18.198a1 1 0 0 0 1.567.824l13.234-9.099a1 1 0 0 0 0-1.648z" fill="#7C99F8"/>
+ </g>
+</svg>
\ No newline at end of file