[Improve] core features description improvement (#386)

[Improve] core features description improvement --------- Co-authored-by: benjobs <[email protected]>
apache · Jun 9, 2024 · 667d2a5 · 667d2a5
1 parent 21d37c6
commit 667d2a5
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 40 deletions.
diff --git a/src/css/bootstrap.min.css b/src/css/bootstrap.min.css
@@ -327,11 +327,6 @@ template {
     font-size: 0.95rem
 }
 
-.lead {
-    font-size: 1.25rem;
-    font-weight: 300
-}
-
 .display-1 {
     font-size: 6rem;
     font-weight: 300;

diff --git a/src/pages/home/feature.jsx b/src/pages/home/feature.jsx
@@ -13,8 +13,8 @@ export default function () {
           <div className="col-12">
             <div className="mb-5 pt-6">
               <h2 className="article-title h3 fw-bold">{dataSource.common.coreFeatures}</h2>
-              <hr className="divider my-4 mx-auto" />
-              <p className="lead text-muted">{dataSource.common.coreFeaturesDesc}</p>
+              <hr className="divider my-4" />
+              <p className="lead desc">{dataSource.common.coreFeaturesDesc}</p>
             </div>
           </div>
         </div>
@@ -32,7 +32,7 @@ export default function () {
               </div>
             ))
           }
-          </div>
+        </div>
       </div>
     </div>
   );

diff --git a/src/pages/home/hero.jsx b/src/pages/home/hero.jsx
@@ -41,7 +41,7 @@ export default function () {
                           Incubating
                         </span>
                       </div>
-                      <span className="project_title">Apache StreamPark™</span>
+                      <span className="project_title">Apache StreamPark<span className="tm">™</span></span>
                     </div>
                   </div>
                   <p className="desc lead">
@@ -57,11 +57,11 @@ export default function () {
                   <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"
+                  <img src="https://img.shields.io/github/stars/apache/incubator-streampark.svg?style=for-the-badge"
                        className="wow fadeInUp"></img>
-                  <img src="https://img.shields.io/github/forks/apache/incubator-streampark.svg"
+                  <img src="https://img.shields.io/github/forks/apache/incubator-streampark.svg?style=for-the-badge"
                        className="wow fadeInUp"></img>
-                  <img src="https://img.shields.io/github/downloads/apache/streampark/total.svg"
+                  <img src="https://img.shields.io/github/downloads/apache/streampark/total.svg?style=for-the-badge"
                        className="wow fadeInUp"></img>
                 </div>
               </div>
@@ -84,7 +84,7 @@ function HeroImage() {
     return null
   }
   return (
-    <div className="col-6 align-self-center">
+    <div className="col-6 pt-6 align-self-center">
       <div
         className="text-right"
         data-aos="fade-up"

diff --git a/src/pages/home/index.less b/src/pages/home/index.less
@@ -49,7 +49,19 @@
         font-weight: 200;
         line-height: 1;
         padding-bottom: 8px;
-        color: #2e7fed;
+        color: var(--primary-color);
+      }
+
+      .desc {
+        color: var(--ifm-color-secondary-contrast-foreground);
+        opacity: .8;
+      }
+
+      .tm {
+        font-size: 1.5rem;
+        font-weight: bold;
+        position: fixed;
+        top: 30px;
       }
 
       h5 {
@@ -59,6 +71,7 @@
       }
     }
 
+
     .cover-container {
       max-width: 1400px;
     }
@@ -247,6 +260,16 @@
     }
   }
 
+  .lead {
+    font-size: 1.25rem;
+    font-weight: 400;
+  }
+
+
+  [data-theme="dark"] .lead {
+    color: #dddddd !important;
+  }
+
   .ztop {
     z-index: 3;
   }
@@ -659,12 +682,8 @@
     color: #fff;
   }
 
-  .system_info .project_title {
-    color: var(--primary-color);
-  }
-
   .feature-children {
-    background-color: var(--bg-color);
+    background-color: #282828;
     border: 1px solid #333;
   }
 
@@ -690,7 +709,6 @@
     .desc {
       font-size: 1rem !important;
       line-height: 1.5 !important;
-      color: #63646d;
     }
   }
 }

diff --git a/src/pages/home/languages.json b/src/pages/home/languages.json
@@ -4,9 +4,10 @@
       "getStart": "快速开始",
       "architecture": "系统架构",
       "learnMore": "了解更多",
-      "coreFeatures": "核心特性",
-      "coreFeaturesDesc": "StreamPark 让您的流处理作业更简单的核心特性",
-      "development": "开发脚手架",
+      "coreFeatures": "核 心 特 性",
+      "coreFeaturesDesc": "StreamPark™ 让流处理作业开发 & 管理更简单的核心特性",
+      "development": "开 发 框 架",
+      "developmentDesc": "StreamPark™ 提供了开发框架，可快速完成流处理作业开发",
       "honor": "我们的荣誉",
       "ourUsers": "Our Users",
       "readMore": "阅读更多",
@@ -19,44 +20,44 @@
     },
     "slogan": {
       "key": "让流处理更简单!",
-      "description": "流处理开发框架 & 一站式实时计算平台，同时支持 Apache Flink 和 Apache Spark。"
+      "description": "Apache StreamPark™ 是一个流处理应用程序开发管理框架，旨在轻松构建和管理流处理应用程序，提供使用 Apache Flink® 和 Apache Spark™ 编写流处理应用的开发框架和一站式实时计算平台，核心能力包括不限于应用开发、部署、管理、运维、实时数仓等。"
     },
     "feature": [
       {
         "title": "简单易用",
         "icon": "lni-layers",
-        "details": "提供了一系列快捷 API 和 Connector，开箱即用，作业状态自动追踪, 分钟内即可完成作业的开发和管理"
+        "details": "Apache StreamPark™ 提供了一系列快捷 API 和 Connector，开箱即用，作业状态自动追踪，快速完成作业的开发和管理。"
       },
       {
         "title": "流批一体",
         "icon": "lni-shuffle",
-        "details": "StreamPark 同时支持 Apache Flink & Apache Spark，无缝支持流式处理和批处理，连接互通，创造更多可能"
+        "details": "Apache StreamPark™  同时支持 Apache Flink® & Apache Spark™，无缝支持流式处理和批处理，连接互通，创造无限可能。"
       },
       {
         "title": "一站式解决方案",
         "icon": "lni-display-alt",
-        "details": "StreamPark 为流处理作业提供全生命周期支持，从开发到部署，集等众多功能于一身，是一站式流处理平台"
+        "details": "Apache StreamPark™  为流处理作业提供全生命周期支持，从开发到部署，集等众多功能于一身，是一站式流处理平台。"
       }
     ],
     "development": [
       {
         "icon": "lni-code",
         "title": "编写代码",
-        "description": "使用 StreamPark API 快速进行作业开发"
+        "description": "使用 Apache StreamPark™ 提供的快捷 API 开发流处理作业。"
       },
       {
         "icon": "lni-bug",
         "title": "调试代码",
-        "description": "传入 StreamPark 约定的配置，进行本地作业调试"
+        "description": "传入 Apache StreamPark™ 约定的配置，进行本地作业开发调试。"
       },
       {
         "icon": "lni-bolt-alt",
         "title": "部署任务",
-        "description": "使用 StreamPark 来部署和管理您的作业"
+        "description": "使用 Apache StreamPark™ 提供的平台来部署和管理你的作业。"
       }
     ],
     "honor" : {
-      "description": "我们获得了些殊荣，这些荣誉属于所有为 StreamPark 做出贡献的人，感谢您的付出！"
+      "description": "我们获得了些殊荣，这些荣誉属于所有为 StreamPark™ 做出贡献的人，感谢你的付出！"
     }
   },
   "en": {
@@ -66,8 +67,9 @@
       "description": "Description",
       "learnMore": "Learn More",
       "coreFeatures": "Key Features",
-      "coreFeaturesDesc": "The key features of StreamPark is to make your stream processing easier.",
+      "coreFeaturesDesc": "The key features of StreamPark™ is to make your stream processing easier.",
       "development": "Development Framework",
+      "developmentDesc": "StreamPark™ provided a development framework to quickly develop stream processing jobs.",
       "honor": "Our Honor",
       "ourUsers": "Our Users",
       "readMore": "Read More",
@@ -80,7 +82,7 @@
     },
     "slogan": {
       "key": "make stream processing easier!",
-      "description":  "Make stream processing easier! Easy-to-use streaming application development framework and operation platform, with Apache Flink and Apache Spark supported."
+      "description":  "Make stream processing easier! Easy-to-use streaming application development framework and operation platform, with Apache Flink® and Apache Spark™ supported."
     },
     "feature": [
       {
@@ -91,19 +93,19 @@
       {
         "title": "Unified Batch & Streaming",
         "icon": "lni-shuffle",
-        "details": "StreamPark supports both Apache Flink and Apache Spark, making it easier to seamlessly support streaming and batch processing"
+        "details": "StreamPark™ supports both Apache Flink® and Apache Spark™, making it easier to seamlessly support streaming and batch processing"
       },
       {
         "title": "One-stop Solution",
         "icon": "lni-display-alt",
-        "details": "StreamPark provides full lifecycle support for stream processing jobs.from development to deployment, It is an one-stop streaming platform"
+        "details": "StreamPark™ provides full lifecycle support for stream processing jobs.from development to deployment, It is an one-stop streaming platform"
       }
     ],
     "development": [
       {
         "icon": "lni-code",
         "title": "Write",
-        "description": "Develop your code quickly using the StreamPark API"
+        "description": "Develop your code quickly using the StreamPark™ API"
       },
       {
         "icon": "lni-bug",
@@ -113,11 +115,11 @@
       {
         "icon": "lni-bolt-alt",
         "title": "Deploy",
-        "description": "Deploy and manage your jobs using StreamPark"
+        "description": "Deploy and manage your jobs using StreamPark™"
       }
     ],
     "honor" : {
-      "description": "We have received some precious honors, which belong to everyone who contributes to StreamPark, Thanks"
+      "description": "We have received some precious honors, which belong to everyone who contributes to StreamPark™, Thanks"
     }
   }
 }
diff --git a/src/pages/home/performance.jsx b/src/pages/home/performance.jsx
@@ -14,11 +14,12 @@ export default function () {
   return (
     <div className="section py-6 py-md-7 overflow-hidden performance">
       <div className="container">
-        <div className="row text-center">
+        <div className="row text-center pb-4">
           <div className="col-12">
             <div className="mb-5">
               <h2 className="article-title h3 fw-bold">{dataSource.common.development}</h2>
-              <hr className="divider my-4 mx-auto" style={{ maxWidth: "10rem" }} />
+              <hr className="divider my-4 mx-auto" style={{maxWidth: "10rem"}}/>
+              <p className="lead desc">{dataSource.common.developmentDesc}</p>
             </div>
           </div>
         </div>