This is an automated email from the ASF dual-hosted git repository.
benjobs pushed a commit to branch dev
in repository
https://gitbox.apache.org/repos/asf/incubator-streampark-website.git
The following commit(s) were added to refs/heads/dev by this push:
new 21d37c62 [Improve] homePage style improvement (#385)
21d37c62 is described below
commit 21d37c6229574cac9559db7ffaba345a56621881
Author: benjobs <[email protected]>
AuthorDate: Sun Jun 9 10:40:32 2024 +0800
[Improve] homePage style improvement (#385)
Co-authored-by: benjobs <[email protected]>
---
src/pages/home/hero.jsx | 75 +++++++++++++++----------------------------
src/pages/home/index.less | 28 ++++++++--------
src/pages/home/languages.json | 2 +-
3 files changed, 41 insertions(+), 64 deletions(-)
diff --git a/src/pages/home/hero.jsx b/src/pages/home/hero.jsx
index 7a616a9f..c31bd2f5 100644
--- a/src/pages/home/hero.jsx
+++ b/src/pages/home/hero.jsx
@@ -20,81 +20,59 @@ export default function () {
<div className="overflow-hidden">
<Top1 className="top1" />
</div>
- <div className="section hero-main pb-6 overflow-hidden main-page">
+ <div className="section hero-main pt-4 pb-2 overflow-hidden main-page">
{/* background overlay */}
<div className="overlay opacity-90 z-index-n1"></div>
<div className="container-fluid pb-2 cover-container container-hero
hero-px">
<div className="row justify-content-center">
<div
- className="col-10 col-sm-10 col-md-10 col-lg-6 align-self-center
pe-0"
- data-aos="fade-right"
+ className="col-10 col-sm-10 col-md-10 col-lg-6
align-self-center pe-0"
+ data-aos="fade-right"
>
<div className="text-start mt-0">
<div className="mb-5 system_info pt-0">
<div className="fw-bold mb-3">
<div
- className="d-flex flex-column align-items-start"
- style={{ width: "max-content" }}
+ className="d-flex flex-column align-items-start"
+ style={{width: "max-content"}}
>
- <div className="text-right" style={{ width: "100%" }}>
+ <div className="text-right" style={{width: "100%"}}>
<span className="badge incubating fs-6 tag">
Incubating
</span>
</div>
- <span className="project_title">Apache StreamPark</span>
+ <span className="project_title">Apache StreamPark™</span>
</div>
</div>
<p className="desc lead">
{dataSource.slogan.description}
</p>
</div>
- <div>
- <Button
- theme="github"
- icon="lni-github-original"
- href="https://github.com/apache/incubator-streampark";
- target="_blank"
- >
- Github
- </Button>
- <Button
- theme="primary"
- icon="lni-play"
- href="/docs/user-guide/quick-start"
- style={{ marginLeft: "10px" }}
- >
- Get started
- </Button>
+ <a className="btn streampark-btn btn mt-30 ztop"
href="https://github.com/apache/incubator-streampark";
+ target="_blank">
+ <i className="lni-github-original"></i> GitHub
+ </a>
+ <a className="btn streampark-btn btn-green mt-30 ml-3 ztop"
href="/docs/user-guide/quick-start"
+ style={{marginLeft: '10px'}}>
+ <i className="lni-play"></i> Get started
+ </a>
+ <div style={{marginTop: '20px'}} className="shields ztop">
+ <img
src="https://img.shields.io/github/stars/apache/incubator-streampark.svg";
+ className="wow fadeInUp"></img>
+ <img
src="https://img.shields.io/github/forks/apache/incubator-streampark.svg";
+ className="wow fadeInUp"></img>
+ <img
src="https://img.shields.io/github/downloads/apache/streampark/total.svg";
+ className="wow fadeInUp"></img>
</div>
</div>
</div>
{/* hero image */}
{HeroImage()}
</div>
- <AchievementBanner />
-
</div>
- {/* <section className="achievement-banner-wrapper">
- <div className="achievement-banner">
- <div className="achievement-banner-item">
- <div className="achievement-banner-item__highlight">3.7k+</div>
- <div>Github stars</div>
- </div>
- <div className="achievement-banner-item">
- <div className="achievement-banner-item__highlight">964</div>
- <div>Github forks</div>
- </div>
- <div className="achievement-banner-item">
- <div className="achievement-banner-item__highlight">9.9k+</div>
- <div>Total downloads</div>
- </div>
- </div>
- </section> */}
-
- {/* <div className="pt-6 cover-top">
- <Top2 className="top2" />
- </div> */}
- {/* <StreamWave /> */}
+ <div className='pt-6 pt-6 cover-top'>
+ <Top2 className="top2"/>
+ </div>
</div>
</>
);
@@ -114,7 +92,6 @@ function HeroImage() {
>
<Dashboard
className="img-fluid"
- style={{ transform: "translateY(4rem)" }}
/>
</div>
</div>
@@ -248,4 +225,4 @@ function AchievementBanner() {
</div>
</section>
);
-}
\ No newline at end of file
+}
diff --git a/src/pages/home/index.less b/src/pages/home/index.less
index 3e4ec7a3..a63fb5db 100644
--- a/src/pages/home/index.less
+++ b/src/pages/home/index.less
@@ -19,7 +19,7 @@
}
.top2 {
- margin-top: -50px;
+ margin-top: -70px;
}
.hero-main {
@@ -30,8 +30,8 @@
}
.hero-px {
- padding-left: 6rem;
- padding-right: 6rem;
+ padding-left: 4rem;
+ padding-right: 4rem;
}
.cover-top {
@@ -39,20 +39,17 @@
flex-direction: column;
border-bottom: 2px solid var(--primary-color);
vertical-align: bottom;
- height: 180px;
+ height: 200px;
transform: scaleX(3) rotate(-3deg);
}
.system_info {
.project_title {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif !important;
- font-size: 4rem;
- font-weight: 500;
+ font-weight: 200;
line-height: 1;
padding-bottom: 8px;
- color: var(--primary-color);
- position: relative;
- white-space: nowrap;
+ color: #2e7fed;
}
h5 {
@@ -246,6 +243,7 @@
.shields img {
margin-right: 5px;
+ border-radius: 5px;
}
}
@@ -626,8 +624,10 @@
}
.incubating {
- background-color: rgba(66, 144, 245, .15);
-
+ background-color: rgba(66, 144, 245, 0.15);
+ padding: 0.25em 0.7em;
+ color: #084696;
+ font-weight: 400;
&:hover {
background-color: rgba(66, 144, 245, .25);
}
@@ -724,13 +724,13 @@
@media (min-width: 1200px) {
.system_info .project_title {
- font-size: 3rem !important;
+ font-size: 3.5rem !important;
}
}
@media (min-width: 1400px) {
.system_info .project_title {
- font-size: 3.5rem !important;
+ font-size: 4.0rem !important;
}
}
@@ -755,4 +755,4 @@
}
}
-}
\ No newline at end of file
+}
diff --git a/src/pages/home/languages.json b/src/pages/home/languages.json
index a4fa1479..64bbe875 100644
--- a/src/pages/home/languages.json
+++ b/src/pages/home/languages.json
@@ -19,7 +19,7 @@
},
"slogan": {
"key": "让流处理更简单!",
- "description": "流处理极速开发框架，流批一体 & 湖仓一体的云原生平台，一站式流处理计算平台"
+ "description": "流处理开发框架 & 一站式实时计算平台，同时支持 Apache Flink 和 Apache Spark。"
},
"feature": [
{
![https://img.shields.io/github/stars/apache/incubator-streampark.svg"](https://img.shields.io/github/stars/apache/incubator-streampark.svg"){kind=link}
![https://img.shields.io/github/forks/apache/incubator-streampark.svg"](https://img.shields.io/github/forks/apache/incubator-streampark.svg"){kind=link}
![https://img.shields.io/github/downloads/apache/streampark/total.svg"](https://img.shields.io/github/downloads/apache/streampark/total.svg"){kind=link}