This is an automated email from the ASF dual-hosted git repository. benjobs pushed a commit to branch home in repository https://gitbox.apache.org/repos/asf/incubator-streampark-website.git
commit ac7e8a88503c2e13a925efda3595329db2fa8329 Author: benjobs <[email protected]> AuthorDate: Sun Jun 9 10:39:59 2024 +0800 [Improve] homePage style improvement --- 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}