[incubator-streampark-website] 01/01: homepage style improvement

[benjobs]

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

commit 4bc458c2cf51682cf3a4eb719ead888288897f46
Author: benjobs <benj...@gmail.com>
AuthorDate: Thu Sep 7 13:57:31 2023 +0800

    homepage style improvement
---
 src/pages/home/hero.jsx   | 13 +++++--------
 src/pages/home/index.less | 18 +++++++++++++++++-
 2 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/pages/home/hero.jsx b/src/pages/home/hero.jsx
index de7b405..a9f62fe 100644
--- a/src/pages/home/hero.jsx
+++ b/src/pages/home/hero.jsx
@@ -15,16 +15,16 @@ export default function () {
       <div className='overflow-hidden'>
         <Top1 className="top1"/>
       </div>
-      <div className="section pb-9 overflow-hidden main-page" >
+      <div className="section pb-6 overflow-hidden main-page" >
         {/* background overlay */}
         <div className="overlay opacity-90 z-index-n1"></div>
-        <div className="container-fluid px-7 pb-2">
+        <div className="container-fluid px-7 pb-2 cover-container">
           <div className="row justify-content-center">
             <div className="col-md-6  col-8 align-self-center pe-5" 
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">
+                    <div className="d-flex flex-column align-items-start" 
style={{maxWidth: '700px'}}>
                       <div className='text-right' style={{ width: '100%' }}>
                         <span className="badge incubating fs-6 
tag">Incubating</span>
                       </div>
@@ -42,12 +42,9 @@ export default function () {
                   <i className="lni-play"></i>&nbsp;Get started
                 </a>
                 <div style={{ marginTop: '20px' }} className="shields ztop">
-                  <a href="https://www.apache.org/licenses/LICENSE-2.0.html";>
-                    <img 
src="https://img.shields.io/badge/license-Apache%202-4EB1BA.svg"; className="wow 
fadeInUp"></img>
-                  </a>
                   <img 
src="https://img.shields.io/github/stars/apache/incubator-streampark.svg?sanitize=true";
 className="wow fadeInUp"></img>
                   <img 
src="https://img.shields.io/github/forks/apache/incubator-streampark.svg?sanitize=true";
 className="wow fadeInUp"></img>
-                  <img 
src="https://img.shields.io/github/languages/count/apache/incubator-streampark"; 
className="wow fadeInUp"></img>
+                  <img 
src="https://img.shields.io/github/downloads/apache/streampark/total.svg"; 
className="wow fadeInUp"></img>
                 </div>
               </div>
             </div>
@@ -59,7 +56,7 @@ export default function () {
             </div>
           </div>
         </div >
-        <div className='pt-6'>
+        <div className='pt-6 cover-top'>
           <Top2 className="top2"/>
         </div>
       </div >
diff --git a/src/pages/home/index.less b/src/pages/home/index.less
index 2b78d03..ff112fb 100644
--- a/src/pages/home/index.less
+++ b/src/pages/home/index.less
@@ -1634,13 +1634,25 @@ hr {
 }
 
 .top1 {
-  margin-top: -5px;
+  margin-top: -15px;
 }
 
 .top2 {
   margin-top: -50px;
 }
 
+.cover-top {
+  display: flex;
+  flex-direction: column;
+  border-bottom: 2px solid #2e7fed;
+  vertical-align: bottom;
+  height: 180px;
+  transform: scaleX(3) rotate(-3deg);
+}
+
+[data-theme='dark'] .cover-top {
+  border-bottom-color: #4f46e4;
+}
 
 .system_info .project_title {
   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, 
Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif !important;
@@ -1657,6 +1669,10 @@ hr {
   line-height: 2;
 }
 
+.cover-container {
+  max-width: 1600px;
+}
+
 .tag {
   border-radius: 30px 30px 30px 0;
 }