feat(overview): new description for kubewharf (#11)

Change-Id: Ibcd7c7bdbc5ed3ff81aa2926d044cc4bf7b8898a

Author: caosm

assets/scss/_styles_project.scss

@@ -161,6 +161,58 @@ nav.foldable-nav .ul-1 .with-child>input:checked~label:hover:before {
 
 #overviewBg {
   position: relative;
+
+  .overviewBox {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 22%;
+    left: 40px;
+    display: flex;
+    align-items: center;
+    color: #d3def9;
+    font-weight: 300;
+
+    .overviewContent {
+      width: 100%;
+      display: flex;
+      align-items: flex-end;
+      justify-content: space-between;
+    }
+
+    .overviewHeader {
+      width: 440px;
+      padding-left: 7em;
+
+      .overviewTitle {
+        color: white;
+        font-size: 2.85em;
+        font-weight: 600;
+      }
+    }
+
+    .overviewDesc {
+      display: flex;
+      align-items: center;
+
+      .overviewDevider {
+        width: 2px;
+        height: 60px;
+        display: block;
+        margin-right: 48px;
+        border-radius: 1px;
+        background-color: rgba(201, 206, 213, 0.4);
+      }
+
+      p {
+        margin-bottom: unset;
+        width: 420px;
+        color: white;
+      }
+    }
+  }
+
+
   .buttonWrapper {
     position: absolute;
     border-radius: 10px;
@@ -348,4 +400,51 @@ nav.foldable-nav .ul-1 .with-child>input:checked~label:hover:before {
 }
 .cp {
   cursor: pointer;
-}
+}
+
+@media (min-width: 960px) and (max-width: 1200px) {
+  .overviewBox {
+    .overviewContent {
+      .overviewTitle {
+        font-size: 2.5em !important;
+      }
+    }
+
+    .overviewDevider {
+      display: none !important;
+    }
+  }
+}
+
+@media (max-width: 960px) {
+  .overviewBox {
+    .overviewContent {
+      flex-direction: column;
+      align-items: center !important;
+      text-align: center;
+    }
+
+    .overviewHeader {
+      .overviewTitle {
+        font-size: 2.5em !important;
+      }
+    }
+
+    .overviewDesc {
+      flex-direction: column;
+      align-items: center;
+
+      .overviewDevider {
+        margin: 4px 0;
+        width: 60px !important;
+        height: 2px !important;
+      }
+
+      p {
+        width: 70% !important;
+        margin-left: 7em;
+      }
+    }
+  }
+
+}

content/en/_index.html

@@ -39,6 +39,18 @@
 
 <div id="overviewBg">
 	<img src="docs/images/homepage/kubeWharfBg.svg" style="padding-left: 40px; width: 100%;">
+	<div class="overviewBox">
+		<div class="overviewContent">
+			<div class="overviewHeader">
+				<div class="overviewTitle">KubeWharf</div>
+				<div class="overviewSubTitle">The Enhanced Toolkit for Kubernetes</div>
+			</div>
+			<div class="overviewDesc">
+				<div class="overviewDevider"></div>
+		  	<p>Power your Kubernetes with the leading open-source solution for efficient, scalable, and reliable cloud and cost management at million-scale container infrastructure.</p>
+			</div>
+		</div>
+	</div>
 	<div class="buttonWrapper">
 		<a class="startButton" href="https://github.com/kubewharf" target="_blank">Get Started</a>
 		<a class="contributeButton" href="https://github.com/orgs/kubewharf/people" target="_blank">Contribute</a>