You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@inlong.apache.org by za...@apache.org on 2021/05/08 01:45:03 UTC
[incubator-inlong-website] branch master updated: [feat] rollback
to inlong
This is an automated email from the ASF dual-hosted git repository.
zakwu pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-inlong-website.git
The following commit(s) were added to refs/heads/master by this push:
new 3a86bbf [feat] rollback to inlong
new fa063b8 Merge remote-tracking branch 'origin/master'
3a86bbf is described below
commit 3a86bbfc3687f1df9ccdb1a38e96e41efadb74be
Author: zakwu <12...@qq.com>
AuthorDate: Sat May 8 09:44:39 2021 +0800
[feat] rollback to inlong
---
docsite.config.yml | 8 +-
img/Tube logo.svg | 27 +++---
img/advantage-01.png | Bin 17674 -> 1620 bytes
img/advantage-02.png | Bin 18210 -> 1750 bytes
img/advantage-03.png | Bin 16706 -> 746 bytes
img/advantage-04.png | Bin 18824 -> 1406 bytes
img/advantage-05.png | Bin 0 -> 1792 bytes
img/arch-img.png | Bin 0 -> 61536 bytes
img/first-page-bg.png | Bin 0 -> 873857 bytes
img/inlong-en.svg | 26 ++++++
img/inlong-zh.svg | 19 +++++
img/sec-page-bg.png | Bin 81470 -> 1111129 bytes
img/system/first-page-bg.png | Bin 0 -> 873857 bytes
package-lock.json | 14 +++-
package.json | 1 +
site_config/home.jsx | 57 ++++++++-----
src/components/footer/index.scss | 1 -
src/components/header/index.jsx | 5 +-
src/components/header/index.scss | 25 +++---
src/pages/home/featureItem.jsx | 5 +-
src/pages/home/index.jsx | 80 ++++++++++++++----
src/pages/home/index.scss | 173 ++++++++++++++++++++++++++-------------
22 files changed, 309 insertions(+), 132 deletions(-)
diff --git a/docsite.config.yml b/docsite.config.yml
index 58dad51..85d483f 100644
--- a/docsite.config.yml
+++ b/docsite.config.yml
@@ -3,22 +3,22 @@ pages:
home:
# 首页配置
zh-cn:
- title: 'Apache TubeMQ'
+ title: 'Apache InLong'
keywords: '关键词1，关键词2'
description: '页面内容简介'
# home config
en-us:
- title: 'Apache TubeMQ'
+ title: 'Apache InLong'
keywords: 'keyword1,keyword2'
description: 'page description'
community:
# 社区页配置
zh-cn:
- title: 'Apache TubeMQ'
+ title: 'Apache InLong'
keywords: '关键词1，关键词2'
description: '页面内容简介'
# community page config
en-us:
- title: 'Apache TubeMQ'
+ title: 'Apache InLong'
keywords: 'keyword1,keyword2'
description: 'page description'
diff --git a/img/Tube logo.svg b/img/Tube logo.svg
index 8bfd99a..8dd0941 100644
--- a/img/Tube logo.svg
+++ b/img/Tube logo.svg
@@ -1,17 +1,22 @@
<?xml version="1.0" encoding="UTF-8"?>
-<svg width="64px" height="38px" viewBox="0 0 64 38" 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>logo</title>
- <desc>Created with Sketch.</desc>
- <g id="框架图" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
- <g id="重构稿" transform="translate(-521.000000, -13.000000)" fill-rule="nonzero">
- <g id="1" transform="translate(-1.000000, 0.000000)">
+<svg width="120px" height="40px" viewBox="0 0 120 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>编组 9</title>
+ <defs>
+ <linearGradient x1="21.4018039%" y1="6.67873476%" x2="90.574187%" y2="88.6401169%" id="linearGradient-1">
+ <stop stop-color="#FAAD1A" offset="0%"></stop>
+ <stop stop-color="#FF4444" offset="100%"></stop>
+ </linearGradient>
+ </defs>
+ <g id="页面1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g id="应龙官网" transform="translate(-560.000000, -20.000000)">
+ <g id="1">
<g id="top-bar">
- <g id="logo" transform="translate(522.000000, 13.000000)">
- <g id="编组-9">
- <path d="M24.2781455,26.1022727 L21.6615385,26.1022727 L21.6615385,25.1931818 L27.9391966,25.1931818 L27.9391966,26.1022727 L25.3225895,26.1022727 L25.3225895,33.3068182 L24.2781455,33.3068182 L24.2781455,26.1022727 Z M33.3593113,33.3068182 L32.4797795,33.3068182 L32.4797795,32.375 L32.4577912,32.375 C32.2598955,32.7386382 32.0070327,33.005681 31.699195,33.1761364 C31.3913573,33.3465918 31.0285541,33.4318182 30.6107744,33.4318182 C30.2369715,33.4318182 29.9254 [...]
- <path d="M18.7011804,4.26834983 C11.1488964,3.25442193 3.79868025,7.35959343 0.843438692,14.2592491 C0.792921743,14.4076288 0.666629368,14.4818187 0.515078519,14.4818187 C0.489820044,14.4818187 0.489820044,14.4818187 0.46456157,14.4818187 C0.41404462,14.4818187 0.388786145,14.4570887 0.36352767,14.4570887 C0.161459871,14.3828989 0.0856844467,14.1603294 0.161459871,13.9872197 C3.2429938,6.81553456 10.8963117,2.53725341 18.8022143,3.57591126 C19.3831592,3.650101 [...]
+ <g id="编组-9" transform="translate(560.000000, 20.000000)">
+ <g id="编组-8" transform="translate(48.421053, 7.368421)" fill="#FFFFFF" fill-rule="nonzero">
+ <path d="M4.95143581,6.26359287 L4.36404744,4.86488691 L1.51397285,4.86488691 L0.934857555,6.26359287 L0.144778825,6.26359287 L2.56879001,0.415941714 L3.26372837,0.415941714 L5.75806069,6.26359287 L4.95143581,6.26359287 Z M2.9286688,1.42725098 L1.79112089,4.19204002 L4.0868994,4.19204002 L2.9286688,1.42725098 Z M10.1179716,1.65561114 C10.5674776,1.65561114 10.9714754,1.75755661 11.3299772,1.96145063 C11.6884789,2.16534465 11.9676924,2.44603453 12.1676261,2.803 [...]
+ <path d="M1.49246286,24.845585 L1.49246286,11.9807525 L4.31358167,11.9807525 L4.31358167,24.845585 L1.49246286,24.845585 Z M15.1471743,11.9807525 L17.9136908,11.9807525 L17.9136908,24.845585 L15.5566916,24.845585 L9.64144243,16.8073075 L9.64144243,24.845585 L6.87492591,24.845585 L6.87492591,11.9807525 L9.42303323,11.9807525 L15.1471743,19.8306329 L15.1471743,11.9807525 Z M23.2870535,22.261853 L28.2922643,22.261853 L28.2922643,24.845585 L20.4659347,24.845585 L2 [...]
</g>
+ <path d="M39.9853818,19.2973018 C39.9950979,19.5529297 40,19.8097907 40,20.0677966 C40,31.0760486 31.0760486,40 20.0677966,40 C19.8097907,40 19.5529297,39.9950979 19.2973018,39.9853818 L39.9853818,19.2973018 Z M38.3014333,12.1275835 C38.8657526,13.4234274 39.2960338,14.7910849 39.5747667,16.2130456 L16.2130456,39.5747667 C14.7914516,39.2961057 13.4241329,38.8659746 12.1285862,38.30187 L38.3014333,12.1275835 Z M20.0677966,0 C27.3635314,0 33.7499449,3.8932668 37.262 [...]
</g>
</g>
</g>
diff --git a/img/advantage-01.png b/img/advantage-01.png
index 908f0d9..62d9f6a 100644
Binary files a/img/advantage-01.png and b/img/advantage-01.png differ
diff --git a/img/advantage-02.png b/img/advantage-02.png
index 38e0053..83aafeb 100644
Binary files a/img/advantage-02.png and b/img/advantage-02.png differ
diff --git a/img/advantage-03.png b/img/advantage-03.png
index f35acb5..329d348 100644
Binary files a/img/advantage-03.png and b/img/advantage-03.png differ
diff --git a/img/advantage-04.png b/img/advantage-04.png
index 854d630..09f1b58 100644
Binary files a/img/advantage-04.png and b/img/advantage-04.png differ
diff --git a/img/advantage-05.png b/img/advantage-05.png
new file mode 100644
index 0000000..8c94f35
Binary files /dev/null and b/img/advantage-05.png differ
diff --git a/img/arch-img.png b/img/arch-img.png
new file mode 100644
index 0000000..2855a6e
Binary files /dev/null and b/img/arch-img.png differ
diff --git a/img/first-page-bg.png b/img/first-page-bg.png
new file mode 100644
index 0000000..25505b9
Binary files /dev/null and b/img/first-page-bg.png differ
diff --git a/img/inlong-en.svg b/img/inlong-en.svg
new file mode 100644
index 0000000..f001f4a
--- /dev/null
+++ b/img/inlong-en.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="472px" height="154px" viewBox="0 0 472 154" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>主标题</title>
+ <defs>
+ <linearGradient x1="8.36638217%" y1="45.9316982%" x2="100%" y2="54.0308678%" id="linearGradient-1">
+ <stop stop-color="#FFE8CB" offset="0%"></stop>
+ <stop stop-color="#FFB26E" offset="100%"></stop>
+ </linearGradient>
+ <linearGradient x1="8.36638217%" y1="49.3445989%" x2="100%" y2="50.6493705%" id="linearGradient-2">
+ <stop stop-color="#FFE7CB" offset="0%"></stop>
+ <stop stop-color="#FFD2A5" offset="100%"></stop>
+ </linearGradient>
+ </defs>
+ <g id="页面1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g id="应龙官网-英文版排版适配" transform="translate(-360.000000, -337.000000)" fill-rule="nonzero">
+ <g id="1">
+ <g id="text" transform="translate(360.000000, 169.000000)">
+ <g id="主标题" transform="translate(0.000000, 168.000000)">
+ <path d="M41.4582019,17.8955513 L32.1754732,17.8955513 L32.1754732,89.9651838 L41.4582019,89.9651838 L41.4582019,107.860735 L0,107.860735 L0,89.9651838 L9.1431388,89.9651838 L9.1431388,17.8955513 L0,17.8955513 L0,2.84217094e-14 L41.4582019,2.84217094e-14 L41.4582019,17.8955513 Z M125.305205,107.860735 L102.901025,107.860735 L102.901025,64.8974855 C102.901025,52.4564175 98.4109282,46.2359768 89.4305994,46.2359768 C85.1498209,46.2359768 81.5903139,47.8955347 78.7519 [...]
+ <path d="M7.51171875,131.859375 L5.953125,131.859375 L5.953125,143.988281 L7.51171875,143.988281 L7.51171875,147 L0.55078125,147 L0.55078125,143.988281 L2.0859375,143.988281 L2.0859375,131.859375 L0.55078125,131.859375 L0.55078125,128.847656 L7.51171875,128.847656 L7.51171875,131.859375 Z M30.0898438,147 L26.328125,147 L26.328125,139.769531 C26.328125,137.675771 25.5742263,136.628906 24.0664062,136.628906 C23.3476527,136.628906 22.7500024,136.9082 22.2734375,137.4 [...]
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/img/inlong-zh.svg b/img/inlong-zh.svg
new file mode 100644
index 0000000..41a42f1
--- /dev/null
+++ b/img/inlong-zh.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="207px" height="98px" viewBox="0 0 207 98" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>应龙</title>
+ <defs>
+ <linearGradient x1="8.36638217%" y1="40.8900376%" x2="100%" y2="59.0261381%" id="linearGradient-1">
+ <stop stop-color="#FFE8CB" offset="0%"></stop>
+ <stop stop-color="#FFB26E" offset="100%"></stop>
+ </linearGradient>
+ </defs>
+ <g id="页面1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g id="应龙官网" transform="translate(-361.000000, -372.000000)" fill="url(#linearGradient-1)" fill-rule="nonzero">
+ <g id="1">
+ <g id="text" transform="translate(360.000000, 216.000000)">
+ <path d="M22.4609375,201.083984 C22.4609375,225.791139 19.1081064,243.271433 12.4023438,253.525391 C9.40753711,250.725897 5.72918848,247.600929 1.3671875,244.150391 C6.90106934,234.905553 9.63541699,219.964296 9.5703125,199.326172 L9.5703125,168.662109 L47.0214844,168.662109 C45.8170513,165.667303 44.6289121,162.802748 43.4570312,160.068359 L59.1796875,156.357422 C60.6445386,159.873064 62.2884023,163.974586 64.1113281,168.662109 L97.265625,168.662109 L97.265625,180.67 [...]
+ </g>
+ </g>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/img/sec-page-bg.png b/img/sec-page-bg.png
index 9d4e35a..0a417b0 100755
Binary files a/img/sec-page-bg.png and b/img/sec-page-bg.png differ
diff --git a/img/system/first-page-bg.png b/img/system/first-page-bg.png
new file mode 100644
index 0000000..25505b9
Binary files /dev/null and b/img/system/first-page-bg.png differ
diff --git a/package-lock.json b/package-lock.json
index ab948cf..6dc2a6c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,3 @@
-
-
-
{
"name": "site",
"version": "0.0.1",
@@ -11,6 +8,7 @@
"name": "site",
"version": "0.0.1",
"dependencies": {
+ "animate.css": "^4.1.1",
"antd": "^3.26.7",
"classnames": "^2.2.5",
"core-decorators": "^0.20.0",
@@ -307,6 +305,11 @@
"node": ">=0.4.2"
}
},
+ "node_modules/animate.css": {
+ "version": "4.1.1",
+ "resolved": "https://registry.npmjs.org/animate.css/-/animate.css-4.1.1.tgz",
+ "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ=="
+ },
"node_modules/ansi-escapes": {
"version": "3.2.0",
"resolved": "http://r.tnpm.oa.com/ansi-escapes/download/ansi-escapes-3.2.0.tgz",
@@ -13878,6 +13881,11 @@
"integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=",
"dev": true
},
+ "animate.css": {
+ "version": "4.1.1",
+ "resolved": "https://registry.npmjs.org/animate.css/-/animate.css-4.1.1.tgz",
+ "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ=="
+ },
"ansi-escapes": {
"version": "3.2.0",
"resolved": "http://r.tnpm.oa.com/ansi-escapes/download/ansi-escapes-3.2.0.tgz",
diff --git a/package.json b/package.json
index 77c7ffe..c18771c 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
"webpack-dev-server": "^2.4.5"
},
"dependencies": {
+ "animate.css": "^4.1.1",
"antd": "^3.26.7",
"classnames": "^2.2.5",
"core-decorators": "^0.20.0",
diff --git a/site_config/home.jsx b/site_config/home.jsx
index ec470f7..43bf311 100644
--- a/site_config/home.jsx
+++ b/site_config/home.jsx
@@ -1,9 +1,11 @@
export default {
'zh-cn': {
+ language: 'zh',
brand: {
brandName: 'Apache',
projectName: 'InLong',
- briefIntroduction: 'Apache InLong，万亿级分布式消息中间件，专注于海量数据下的数据传输和存储，与许多开源MQ项目相比，InLong在稳定性、性能和低成本方面具有独特的优势',
+ briefIntroduction: 'Apache InLong（应龙）是一站式的数据流接入服务平台，提供自动、安全、高性能、分布式的数据发布订阅能力，基于该系统用户可以轻松构建基于流式的数据应用。',
+ features: ['自动', '安全', '高性能', '分布式'],
buttons: [
{
text: '立即开始',
@@ -23,30 +25,37 @@ export default {
img: '/img/architecture.png',
},
features: {
- title: '优势',
+ title: '产品优势',
list: [
{
img: '/img/advantage-01.png',
- title: '高吞吐',
- content: '大数据满负载场景下，消息吞吐量可达14W TPS，且系统运行平稳',
+ title: '简单易用',
+ content: '基于SaaS模式对外服务，用户只需要按主题发布和订阅数据即可完成数据的上报，传输和分发工作',
},
{
img: '/img/advantage-02.png',
- title: '低时延',
- content: '满负载场景下，从生产到消费，可以做到5ms以内',
+ title: '稳定可靠',
+ content: '系统源于实际的线上系统，服务上十万亿级的高性能及上千亿级的高可靠数据数据流量，系统稳定可靠',
},
{
img: '/img/advantage-03.png',
- title: '稳定性高',
- content: '系统线上运营近7年，目前过35万亿的日均消息接入条数近1500台机器，运维人员不到1个人力资源，系统除了版本发布系统可以连续不间断运营',
+ title: '功能完善',
+ content: '支持各种类型的数据接入方式，多种不同类型的MQ集成，以及基于配置规则的实时数据ETL和数据分拣落地，并支持以可插拔方式扩展系统能力',
},
{
img: '/img/advantage-04.png',
- title: '成本低',
- content: '相比同类使用原生Kafka机器的业务，按照已知的横向数据比较，仅机器成本就可以节约至少4倍资源',
+ title: '服务集成',
+ content: '支持统一的系统监控、告警，以及细粒度的数据指标呈现，对于管道的运行情况，以数据主题为核心的数据运营情况，汇总在统一的数据指标平台，并支持通过业务设置的告警信息进行异常告警提醒',
+ }, {
+ img: '/img/advantage-04.png',
+ title: '灵活扩展',
+ content: '全链条上的各个模块基于协议以可插拔方式组成服务，业务可根据自身需要进行组件替换和功能扩展',
}
],
},
+ architecture: {
+ title: '产品架构'
+ },
start: {
title: '快速开始',
desc: '简单描述',
@@ -58,10 +67,12 @@ export default {
},
},
'en-us': {
+ language: 'en',
brand: {
brandName: 'Apache',
projectName: 'InLong',
- briefIntroduction: 'Apache InLong, a trillion-records-scale distributed messaging queue (MQ) system, focuses on data transmission and storage under massive data. Compared to many open source MQ projects, InLong has unique advantages in terms of stability, performance, and low cost',
+ features: ['Automatic', 'Safety', 'High performance', 'Distributed'],
+ briefIntroduction: 'Apache InLong is a one-stop data streaming platform that provides automatic, secure, distributed, and efficient data publishing and subscription capabilities. This platform helps you easily build stream-based data applications.',
buttons: [
{
text: 'Quick Start',
@@ -80,28 +91,36 @@ export default {
desc: 'some introduction of your product',
img: '/img/architecture.png',
},
+ architecture: {
+ title: 'Product Architecture'
+ },
features: {
title: 'Advantages',
list: [
{
img: '/img/advantage-01.png',
- title: 'High Throughput',
- content: 'Throughput arrives 14W TPS under a full load of massive data while the system runs stably',
+ title: 'Ease of Use',
+ content: 'Apache InLong is a SaaS-based service platform. You can easily and quickly report, transfer, and distribute data by publishing and subscribing to data based on topics',
},
{
img: '/img/advantage-02.png',
- title: 'Low Latency',
- content: 'Latency is less than 5ms from producer to consumer under a full load of massive data',
+ title: 'Stability & Reliability',
+ content: 'Apache InLong is derived from the actual online production environment, it delivers high-performance processing capabilities for 10 trillion-level data streams and highly reliable services for 100 billion-level data streams',
},
{
img: '/img/advantage-03.png',
- title: 'High stability',
- content: 'InLong has been successfully operating for nearly seven years. Currently, there are over 35 trillion messages processed every day. The operation costs 1500 machines and 1 operator. Besides, InLong can run continuously except during releasing',
+ title: 'Comprehensive Features',
+ content: 'Apache InLong supports various types of data access methods and can be integrated with different types of Message Queue (MQ) services. It also provides real-time data extract, transform, and load (ETL) and sorting capabilities based on rules. Apache InLong also allows you to plug features to extend system capabilities',
},
{
img: '/img/advantage-04.png',
- title: 'Low Cost',
- content: 'Compared with similar systems such as Kafka, for serving the same workload, InLong only requires the utilization of 20% resources according to cross-sectional results',
+ title: 'Service Integration',
+ content: 'Apache InLong provides unified system monitoring and alert services. It provides fine-grained metrics to facilitate data visualization. You can view the running status of queues and topic-based data statistics in a unified data metric platform. You can also configure the alert service based on your business requirements so that users can be alerted when errors occur',
+ },
+ {
+ img: '/img/advantage-05.png',
+ title: 'Scalability',
+ content: 'Apache InLong adopts a pluggable architecture that allows you to plug modules into the system based on specific protocols. You can replace components and add features based on your business requirements',
}
]
},
diff --git a/src/components/footer/index.scss b/src/components/footer/index.scss
index 8bb4918..6b62bae 100644
--- a/src/components/footer/index.scss
+++ b/src/components/footer/index.scss
@@ -1,7 +1,6 @@
@import '../../variables.scss';
.footer-container {
- background: #E6EBFF;
.footer-body {
max-width: $contentWidth;
margin: 0 auto;
diff --git a/src/components/header/index.jsx b/src/components/header/index.jsx
index 6c5253c..8c2bb9f 100644
--- a/src/components/header/index.jsx
+++ b/src/components/header/index.jsx
@@ -151,10 +151,7 @@ class Header extends React.Component {
<img className="logo apache" style={{width: '120px'}} alt={siteConfig.name} title={siteConfig.name} src={getLink('/img/asf_logo.svg')} />
</a>
<div className="logo-split"></div>
- <a href="">
-
- </a>
- <img className="logo tube" style={{width: '72px'}} alt={siteConfig.name} title={siteConfig.name} src={getLink('/img/Tube logo.svg')} />
+ <img className="logo tube" style={{width: '120px',top: '12px', position: 'absolute'}} alt={siteConfig.name} title={siteConfig.name} src={getLink('/img/Tube logo.svg')} />
</a>
{
siteConfig.defaultSearch ?
diff --git a/src/components/header/index.scss b/src/components/header/index.scss
index ab0d435..868a677 100644
--- a/src/components/header/index.scss
+++ b/src/components/header/index.scss
@@ -8,28 +8,28 @@
.ant-menu-horizontal > .ant-menu-item > a, .ant-menu-horizontal > .ant-menu-submenu {
font-family: HelveticaNeue-Medium;
font-size: 16px;
- color: rgba(0,0,0,0.85);
+ color: #D1D1D1;
letter-spacing: 0;
text-align: right;
}
.ant-menu-horizontal > .ant-menu-item:hover > a, .ant-menu-horizontal > .ant-menu-submenu-open > .submenu-title-wrapper, .ant-menu-submenu-active > .ant-menu-submenu-title > .submenu-title-wrapper {
- color: #2AAC4A!important;
+ color: #5494FF!important;
}
.ant-menu-horizontal > .ant-menu-item:hover, .ant-menu-horizontal > .ant-menu-submenu:hover {
font-family: HelveticaNeue-Medium;
font-size: 16px;
- color: #2AAC4A;
+ color: #5494FF;
letter-spacing: 0;
text-align: justify;
- border-bottom: 2px solid #2AAC4A!important;
+ border-bottom: 2px solid #5494FF!important;
}
.ant-menu-horizontal > .ant-menu-submenu-active {
- border-bottom: 2px solid #2AAC4A!important;
+ border-bottom: 2px solid #5494FF!important;
}
.ant-menu-item-active > a {
- color: #2AAC4A!important;
+ color: #5494FF!important;
}
.header-container {
position: fixed;
@@ -66,13 +66,12 @@
}
.logo-split {
display: inline-block;
- border: 1px solid #000;
+ border: 1px solid #fff;
height: 29px;
opacity: 0.2;
- margin: 0 32px;
+ margin: 5px 32px;
}
.logo {
- width: 96px;
vertical-align: sub;
}
.header-menu {
@@ -154,8 +153,8 @@
}
}
.language-switch-primary {
- border: 1px solid #000;
- color: #000;
+ border: 1px solid #D1D1D1;
+ color: #D1D1D1;
}
.language-switch-normal {
border: 1px solid #333;
@@ -189,10 +188,10 @@
}
&-primary {
.icon-search {
- border-color: #000;
+ border-color: #D1D1D1;
opacity: 0.6;
&::before {
- background-color: #000;
+ background-color: #D1D1D1;
}
&:hover {
opacity: 1;
diff --git a/src/pages/home/featureItem.jsx b/src/pages/home/featureItem.jsx
index 4284970..2a80c25 100644
--- a/src/pages/home/featureItem.jsx
+++ b/src/pages/home/featureItem.jsx
@@ -2,12 +2,9 @@ import React from 'react';
import {getLink} from '../../../utils';
const Item = (props) => {
- const {feature, index} = props;
+ const {feature} = props;
return (
<li>
- <div className="index">
- <span>0{index+1}</span>
- </div>
<div className="feature-icon" style={{background: 'url(' + getLink(feature.img) + ')'}}/>
<div>
<h4>{feature.title}</h4>
diff --git a/src/pages/home/index.jsx b/src/pages/home/index.jsx
index 49a0e86..73aa329 100644
--- a/src/pages/home/index.jsx
+++ b/src/pages/home/index.jsx
@@ -8,6 +8,7 @@ import Language from '../../components/language';
import Item from './featureItem';
import homeConfig from '../../../site_config/home';
import './index.scss';
+import 'animate.css';
class Home extends Language {
@@ -15,43 +16,64 @@ class Home extends Language {
super(props);
this.state = {
headerType: 'primary',
+ p1Animation: false,
+ p2Animation: false
};
}
componentDidMount() {
window.addEventListener('scroll', () => {
const scrollTop = getScrollTop();
- if (scrollTop > 66) {
+ console.log(scrollTop);
+ if (scrollTop > 350) {
this.setState({
- headerType: 'normal',
+ p1Animation: true
});
} else {
this.setState({
- headerType: 'primary',
+ p1Animation: false
});
}
- });
+ if (scrollTop > 1150) {
+ this.setState({
+ p2Animation: true
+ });
+ } else {
+ this.setState({
+ p2Animation: false
+ });
+ }
+ }, true);
}
render() {
const language = this.getLanguage();
const dataSource = homeConfig[language];
- const { headerType } = this.state;
+ const { headerType, p1Animation, p2Animation } = this.state;
return (
<div className="home-page">
- <section className="top-section" style={{backgroundImage: 'url(' + getLink("/img/first-page-bg.jpg") + ')'}}>
+ <section className="top-section" style={{backgroundImage: 'url(' + getLink("/img/first-page-bg.png") + ')'}}>
<Header
currentKey="home"
type={headerType}
language={language}
onLanguageChange={this.onLanguageChange}
/>
- <div className="show-tips">Apache TubeMQ has been renamed to Apache InLong, the homepage will updete soon!</div>
- <div className="vertical-middle">
+ <div className="vertical-middle animate__animated animate__fadeInLeft">
<div className="product-name">
<div className="brandname">{dataSource.brand.brandName}</div>
- <div className="projectname">{dataSource.brand.projectName}</div>
- <img src={getLink("/img/incubating.svg")}></img>
+ <div className="projectname" style={{backgroundImage: 'url(' + getLink(`/img/inlong-en.svg`) + ')'}}>
+ {/*<img src={getLink("/img/incubating.svg")}></img>*/}
+ </div>
+ </div>
+ <div className="product-desc2">
+ <div>{dataSource.brand.features[0]}</div>
+ <div className="split"></div>
+ <div>{dataSource.brand.features[1]}</div>
+ <div className="split"></div>
+ <div>{dataSource.brand.features[2]}</div>
+ <div className="split"></div>
+ <div>{dataSource.brand.features[3]}</div>
</div>
<p className="product-desc">{dataSource.brand.briefIntroduction}</p>
<div className="button-area">
@@ -61,17 +83,45 @@ class Home extends Language {
</div>
</div>
</section>
- <section className="feature-section" style={{backgroundImage: 'url(' + getLink('/img/sec-page-bg.png') + ')'}}>
- <h3>{dataSource.features.title}</h3>
- <ul>
+ <section id="page1" className="feature-section" style={{backgroundImage: 'url(' + getLink('/img/sec-page-bg.png') + ')'}}>
+ <div className="title-index">01</div>
+ {
+ dataSource.language === 'zh' && <div className="page-title-wrap">
+ <div className="page1-title-l1">{dataSource.features.title}</div>
+ <div className="page1-title-l2">PRODUCT ADVANTAGES</div>
+ </div>
+ }
+ {
+ dataSource.language === 'en' && <div className="page-title-wrap">
+ <div className="page1-title-l2">PRODUCT</div>
+ <div className="page1-title-l1">ADVANTAGES</div>
+ </div>
+ }
+ <ul className={` ${p1Animation ? 'animate__animated animate__fadeInUp' : ''}`}>
{
dataSource.features.list.map((feature, i) => (
<Item feature={feature} key={i} index={i}/>
))
}
</ul>
- <div className="ball1" style={{backgroundImage: 'url(' + getLink('/img/blue-ball.png') + ')'}}></div>
- <div className="ball2" style={{backgroundImage: 'url(' + getLink('/img/yellow-ball.png') + ')'}}></div>
+ </section>
+ <section className="feature-section" style={{backgroundColor: '#000'}}>
+ <div className="title-index">02</div>
+ {
+ dataSource.language === 'zh' && <div className="page-title-wrap">
+ <div className="page1-title-l1">{dataSource.architecture.title}</div>
+ <div className="page1-title-l2">PRODUCT STRUCTURE</div>
+ </div>
+ }
+ {
+ dataSource.language === 'en' && <div className="page-title-wrap">
+ <div className="page1-title-l2">PRODUCT</div>
+ <div className="page1-title-l1">STRUCTURE</div>
+ </div>
+ }
+ <div className={`architecture-img-wrap ${p2Animation ? 'animate__animated animate__fadeInUp' : ''}`}>
+ <img className="architecture-img" src={getLink('/img/arch-img.png')}></img>
+ </div>
</section>
<Footer logo="/img/incubator-logo.svg" language={language} />
</div>
diff --git a/src/pages/home/index.scss b/src/pages/home/index.scss
index 6ffba56..03fdeb4 100644
--- a/src/pages/home/index.scss
+++ b/src/pages/home/index.scss
@@ -30,33 +30,50 @@
img {
position: absolute;
- right: -70px;
- bottom: 120px;
+ right: -7rem;
+ bottom: 9rem;
}
.brandname {
- font-family: HelveticaNeue-Bold;
- font-size: 88px;
- color: #000000;
- letter-spacing: 0;
- line-height: 120px;
+ font-family: PingFangSC-Thin;
+ font-size: 7.5rem;
+ width: 25rem;
+ color: #C4C4C4;
+ letter-spacing: 2px;
}
.projectname {
font-family: HelveticaNeue-Bold;
- font-size: 120px;
- color: #000000;
- letter-spacing: 0;
- line-height: 120px;
+ width: 25rem;
+ height: 10rem;
+ background-size: contain;
+ position: relative;
+ background-repeat: no-repeat;
+ }
+ }
+ .product-desc2 {
+ font-family: Helvetica;
+ font-size: 1.5rem;
+ color: #5494FF;
+ text-align: justify;
+ display: flex;
+ justify-content: space-between;
+
+ .split {
+ width: 1px;
+ background: #5494FF;
+ height: 34px;
}
}
.product-desc {
width: 500px;
font-family: HelveticaNeue-Medium;
- font-size: 20px;
color: rgba(0,0,0,0.85);
- line-height: 30px;
opacity: 0.6;
- margin-top: 48px;
+ margin-top: 1rem;
+ font-size: 18px;
+ color: #FFFFFF;
+ text-align: justify;
+ line-height: 27px;
}
.button-area {
margin-top: 40px;
@@ -66,7 +83,6 @@
padding: 0 20px;
}
.button-primary {
- background: #55CA72;
border-radius: 30px;
font-family: PingFangSC-Semibold;
font-size: 16px;
@@ -76,11 +92,11 @@
}
.button-normal {
background: rgba(255,255,255,0.30);
- border: 1px solid #2AAC4A;
+ border: 1px solid #5494FF;
border-radius: 30px;
font-family: PingFangSC-Semibold;
font-size: 16px;
- color: #2AAC4A;
+ color: #5494FF;
letter-spacing: 0;
text-align: center;
}
@@ -163,17 +179,17 @@
position: relative;
padding: 80px 15%;
background-size: cover;
- background: no-repeat 50% 50%;
.index {
- font-family: DINAlternate-Bold;
- font-size: 24px;
- color: #2AAC4A;
letter-spacing: 0;
text-align: center;
line-height: 36px;
width: 60%;
margin: 0 20%;
+ font-family: Helvetica;
+ font-size: 30px;
+ color: #FFFFFF;
+ letter-spacing: 0;
span {
display: inline-block;
@@ -183,49 +199,63 @@
}
}
- .ball1 {
- position: absolute;
- top: 100px;
- right: -75px;
- background-size: contain;
- width: 150px;
- height: 150px;
+ .page-title-wrap {
+ display: inline-block;
+ padding-left: 1.5rem;
+ border-left: 2px solid #4982E0;
+
+ .page1-title-l1 {
+ font-family: PingFangSC-Regular;
+ font-size: 30px;
+ color: #FFFFFF;
+ letter-spacing: 0;
+ }
+
+ .page1-title-l2 {
+ opacity: 0.5;
+ font-family: PingFangSC-Regular;
+ font-size: 16px;
+ color: #FFFFFF;
+ letter-spacing: 0;
+ }
}
- .ball2 {
- position: absolute;
- bottom: 70px;
- left: 18%;
- background-size: contain;
- width: 124px;
- height: 124px;
- transform: scale(0.8);
+
+ .title-index {
+ font-family: Helvetica;
+ font-size: 5rem;
+ color: #5494FF;
+ letter-spacing: 0;
+ line-height: 5rem;
+ display: inline;
+ padding-right: 1.5rem;
}
h3 {
- font-family: Avenir-Heavy;
- font-size: 36px;
- color: #333;
- margin: 0 0 40px 30px;
+ margin: 0 0 40px 0;
+ font-family: Helvetica;
+ font-size: 2.5rem;
+ color: #FFFFFF;
+ letter-spacing: 0;
+ display: inline;
}
ul {
+ margin-top: 2rem;
list-style: none;
padding: 0;
- margin: 0;
+ background: #000;
+
li {
vertical-align: top;
display: inline-block;
margin-bottom: 40px;
- width: 25%;
+ width: 20%;
text-align: center;
- border-left: 1px solid #ccc;
- min-height: 400px;
-
- &:last-child {
- border-right: 1px solid #ccc;
- }
+ min-height: 26rem;
+ padding-top: 4rem;
+ position: relative;
.feature-icon {
- width: 96px;
- height: 96px;
+ width: 56px;
+ height: 56px;
background-size: contain!important;
}
@@ -234,18 +264,37 @@
width: 80%;
h4 {
- font-family: Avenir-Heavy;
- font-size: 22px;
- margin-top: 32px;
+ font-family: Helvetica;
+ font-size: 1.5rem;
+ color: #FFFFFF;
+ letter-spacing: 0;
+ margin-top: 2rem;
+ min-height: 4rem;
}
p {
- font-family: Avenir-Medium;
- font-size: 16px;
- margin-top: 16px;
- text-align: justify;
+ margin-top: 2rem;
+ text-align: left;
+ font-family: Helvetica;
+ font-size: 14px;
+ color: #FFFFFF;
+ letter-spacing: 0;
+ line-height: 21px;
}
}
}
+ li::after {
+ content: '';
+ width: 0;
+ height: 60%;
+ position: absolute;
+ border-right: 1px dashed #7B98F7;
+ top: 20%;
+ right: 0;
+ opacity: 0.5;
+ }
+ li:last-child::after {
+ border-right: 0;
+ }
@media screen and (max-width: 768px){
li {
width: 100%;
@@ -416,7 +465,7 @@
.index {
font-family: DINAlternate-Bold;
font-size: 24px;
- color: #2AAC4A;
+ color: #5494FF;
letter-spacing: 0;
text-align: center;
line-height: 36px;
@@ -432,4 +481,12 @@
}
}
}
+
+ .architecture-img-wrap {
+ width: 100%;
+ margin-top: 2rem;
+ }
+ .architecture-img {
+ width: 100%;
+ }
}