Skip to content

Commit

Permalink
[Improve] homePage style improvement
Browse files Browse the repository at this point in the history
  • Loading branch information
benjobs committed Jun 9, 2024
1 parent b9f18ac commit ac7e8a8
Show file tree
Hide file tree
Showing 3 changed files with 41 additions and 64 deletions.
75 changes: 26 additions & 49 deletions src/pages/home/hero.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>&nbsp;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>&nbsp;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>
</>
);
Expand All @@ -114,7 +92,6 @@ function HeroImage() {
>
<Dashboard
className="img-fluid"
style={{ transform: "translateY(4rem)" }}
/>
</div>
</div>
Expand Down Expand Up @@ -248,4 +225,4 @@ function AchievementBanner() {
</div>
</section>
);
}
}
28 changes: 14 additions & 14 deletions src/pages/home/index.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
}

.top2 {
margin-top: -50px;
margin-top: -70px;
}

.hero-main {
Expand All @@ -30,29 +30,26 @@
}

.hero-px {
padding-left: 6rem;
padding-right: 6rem;
padding-left: 4rem;
padding-right: 4rem;
}

.cover-top {
display: flex;
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 {
Expand Down Expand Up @@ -246,6 +243,7 @@

.shields img {
margin-right: 5px;
border-radius: 5px;
}
}

Expand Down Expand Up @@ -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);
}
Expand Down Expand Up @@ -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;
}
}

Expand All @@ -755,4 +755,4 @@
}
}

}
}
2 changes: 1 addition & 1 deletion src/pages/home/languages.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
},
"slogan": {
"key": "让流处理更简单!",
"description": "流处理极速开发框架，流批一体 & 湖仓一体的云原生平台，一站式流处理计算平台"
"description": "流处理开发框架 & 一站式实时计算平台，同时支持 Apache Flink 和 Apache Spark。"
},
"feature": [
{
Expand Down

0 comments on commit ac7e8a8

Please sign in to comment.