add dev-ops page

assets/scss/case-detail.scss

@@ -76,15 +76,17 @@
           font-size: 0;
           border-radius: 8px;
           overflow: hidden;
+          display: flex;
           @media only screen and (max-width: $mobile-max-width) {
             width: 100%;
+            display: block;
           }
           li {
             position: relative;
             display: inline-block;
             box-sizing: border-box;
             width: 220px;
-            height: 100%;
+            min-height: 100%;
             padding: 35px 30px;
 
             @media only screen and (max-width: $mobile-max-width) {

assets/scss/content.scss

@@ -1,5 +1,10 @@
 @import "variables";
 
+.navigation {
+  box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06), 0 8px 16px 0 rgba(36, 46, 66, 0.05);
+  background-image: linear-gradient(to bottom, rgba(134, 219, 162, 0.9), rgba(0, 170, 114, 0.9));
+}
+
 .main-section {
   padding-top: 93px;
 

assets/scss/header.scss

@@ -195,21 +195,6 @@
         display: none;
       }
 
-      button {
-        width: 112px;
-        height: 36px;
-        border-radius: 30px;
-        border: none;
-        font-size: 14px;
-        color: #ffffff;
-        cursor: pointer;
-        box-shadow: 0 10px 50px 0 rgba(34, 43, 62, 0.1), 0 8px 16px 0 rgba(33, 43, 61, 0.2);
-        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1) 97%), linear-gradient(to bottom, #242e42, #242e42);
-        &:hover {
-          box-shadow: none;
-        }
-      }
-
       &:hover {
         padding-bottom: 40px;
       }
@@ -279,6 +264,21 @@
   }
 }
 
+.demo-btn {
+  width: 112px;
+  height: 36px;
+  border-radius: 30px;
+  border: none;
+  font-size: 14px;
+  color: #ffffff;
+  cursor: pointer;
+  box-shadow: 0 10px 50px 0 rgba(34, 43, 62, 0.1), 0 8px 16px 0 rgba(33, 43, 61, 0.2);
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1) 97%), linear-gradient(to bottom, #242e42, #242e42);
+  &:hover {
+    box-shadow: none;
+  }
+}
+
 .navigationScroll {
   box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06), 0 8px 16px 0 rgba(36, 46, 66, 0.05);
   background-image: linear-gradient(to bottom, rgba(134, 219, 162, 0.9), rgba(0, 170, 114, 0.9));
@@ -321,7 +321,10 @@
         display: none;
 
         li {
+          box-sizing: border-box;
+          padding-top: 11px;
           font-weight: 500;
+          line-height: 1.75;
         }
 
         li:last-child {
@@ -362,6 +365,21 @@
       transform: rotate(-135deg);
     }
   }
+
+  & > .btn-div {
+    margin-top: 30px;
+    text-align: center;
+  }
+
+  & > .link-div {
+    margin-top: 27px;
+    text-align: center;
+
+    img {
+      width: 24px;
+      margin: 0 16px;
+    }
+  }
 }
 
 

assets/scss/scenario.scss

@@ -38,9 +38,27 @@ html {
   }
 }
 
+.section-img {
+  position: relative;
+  padding: 47px 0 65px 0;
+  text-align: center;
+  overflow: hidden;
+
+  .bg {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+
+    @media only screen and (max-width: $mobile-max-width) {
+      display: none;
+    }
+  }
+}
+
 .section-2 {
   background-color: #f5f8f9;
   padding-top: 60px;
+  padding-bottom: 40px;
   & > div {
     position: relative;
 

config/_default/config.toml

@@ -46,18 +46,21 @@ hasChildren = true
   [[languages.en.menu.main]]
   parent = "Scenario"
   name = "DevOps"
+  Title = "Embracing One-stop DevOps Workflow"
   URL = "dev-ops"
   weight = 1
 
   [[languages.en.menu.main]]
   parent = "Scenario"
   name = "Service Mesh"
+  Title = "Running Microservices on Kubernetes"
   URL = "service-mesh"
   weight = 2
 
   [[languages.en.menu.main]]
   parent = "Scenario"
   name = "Observability"
+  Title = "Building Cloud Native Observability"
   URL = "observability"
   weight = 3
 

content/en/dev-ops/_index.md

@@ -0,0 +1,51 @@
+---
+title: "dev-ops"
+layout: "scenario"
+
+css: "scss/scenario.scss"
+
+section1:
+  title: KubeSphere DevOps offers end-to-end workflow and integrates popular CI/CD tools to boost delivery
+  content: KubeSphere provides rich observability from infrastructure to applications. It integrates your favorite tools for multi-dimensional monitoring metrics, multi-tenant log query and collection, alerting and notification.
+  image: /images/service-mesh/banner.jpg
+
+image: /images/dev-ops/dev-ops.jpg
+
+section2:
+  title: Automatically Checkout Code, Test, Analyse, Build, Deploy and Release
+  list:
+    - title: Multi-dimensional Monitoring
+      image: /images/observability/multi-dimensional-monitoring.png
+      contentList:
+        - content: <span>Easy to integrate with your SCM, </span> support GitLab / GitHub / BitBucket / SVN
+        - content: <span>Design a graphical editing panel</span> to create CI/CD pipelines, without writing Jenkinsfile
+        - content: <span>Integrate SonarQube</span> to implement source code quality analysis
+        - content: <span>Support dependency cache</span> to accelerate build and deployment
+        - content: <span>Provide dynamic build agents</span> to automatically spin up Pods as necessary
+    
+    - title: Built-in automated toolkits
+      image: /images/observability/log-query-and-collection.png
+      contentList:
+        - content: <span>Source to Image,</span> building reproducible container images from source code, without writing dockerfile
+        - content: <span>Binary-to-image</span>is the bridge between your artifact and a runnable image
+        - content: <span>Support automatically build and push</span> image to any registry, finally deploy to Kubernetes.
+        - content: <span>Good recoverability and flexibility,</span> you can rebuild and rerun S2I / B2I whenever a patch is needed
+    
+    - title: Use GitOps to implement DevOps, not just culture
+      image: /images/observability/flexible-alerting-and-notification.png
+      contentList:
+        - content: <span>Combine Git with Kubernetes’ convergence, and automates the cloud native Apps delivery</span>
+        - content: <span>Designed for teams, offer built-in multitenancy in DevOps project</span>
+        - content: <span>Liable to be observable,</span> provide dynamic logs for the S2I / B2I build and pipeline
+        - content: Provide audit, alert and notification in pipeline, ensuring quickly locate and solve issues.
+        - content: Support add Git SCM webhooks to trigger a Jenkins build when new commints to the branch
+
+section3:
+  title: See KubeSphere One-stop DevOps Workflow In Action
+  image: /images/service-mesh/15.jpg
+  content: Want to get started in action by following with the hands-on lab?
+  btnContent: Start Hands-on Lab
+  link:
+  bgLeft: /images/service-mesh/3-2.svg
+  bgRight: /images/service-mesh/3.svg
+---

content/en/observability/_index.md

@@ -1,13 +1,16 @@
 ---
 title: "observability"
+layout: "scenario"
 
-css: "scss/service-mesh.scss"
+css: "scss/scenario.scss"
 
 section1:
   title: KubeSphere allows you to build visualizations simply and intuitively
   content: KubeSphere provides rich observability from infrastructure to applications. It integrates your favorite tools for multi-dimensional monitoring metrics, multi-tenant log query and collection, alerting and notification.
   image: /images/service-mesh/banner.jpg
 
+image: /images/observability/observability.jpg
+
 section2:
   title: Discoverability, Observability, Security, Everything You Need in One Platform
   list:

content/en/service-mesh/_index.md

@@ -1,13 +1,17 @@
 ---
 title: "service mesh"
+layout: "scenario"
 
-css: "scss/service-mesh.scss"
+css: "scss/scenario.scss"
 
 section1:
   title: KubeSphere Service Mesh provides a simpler distribution of Istio with consolidated UX
   content: If you’re running and scaling microservices on Kubernetes, it’s time to adopt the istio-based service mesh for your distributed system. We design a unified UI to integrate and manage tools including Istio, Envoy, Jaeger.
   image: /images/service-mesh/banner.jpg
 
+image: /images/service-mesh/service-mesh.jpg
+bg: /images/service-mesh/28.svg
+
 section2:
   title: What Makes KubeSphere Service Mesh Special
   list:

layouts/_default/scenario.html

@@ -1,5 +1,4 @@
 {{ define "main" }}
-
 {{ with .Params.section1}}
 <section class='section-1 bg-cover' style='background-image: url("{{ .image }}");'>
   <div class="title-div common-layout">
@@ -9,6 +8,13 @@
 </section>
 {{ end }}
 
+<section class="section-img">
+  <img class="common-layout" src="{{ .Params.image }}" alt="">
+  {{ if .Params.bg }}
+  <img class="bg" src="{{ .Params.bg }}" alt="">
+  {{ end }}
+</section>
+
 <section class="section-2">
   {{ with .Params.section2 }}
   <div class="common-layout">

layouts/partials/header.html

@@ -48,7 +48,7 @@
                     </li>
                     <li class='btn-li'>
                         <a href="https://demo.kubesphere.io/login" target="_blank" rel="noopener noreferrer">
-                            <button>{{ i18n "Demo" }} →</button>
+                            <button class="demo-btn">{{ i18n "Demo" }} →</button>
                         </a>
                         <ol class="dropdown-menu">
                             <li>{{ i18n "demo content 1" }}</li>
@@ -86,7 +86,15 @@
                 <span class='menu-span'>{{ .Name }}</span>
                 <ul class="dropdown-menu">
                     {{ range .Children }}
-                    <li {{ if eq $section .URL }} class="active"{{ end}}><a href="{{ .URL | absLangURL }}">{{ .Name }}</a></li>
+                    <li {{ if eq $section .URL }} class="active"{{ end}}>
+                        <a href="{{ .URL | absLangURL }}">
+                            {{ if .Title }}
+                            {{ .Title }}
+                            {{ else }}
+                            {{ .Name }}
+                            {{ end }}
+                        </a>
+                    </li>
                     {{ end }}
                 </ul>
             </li>
@@ -97,6 +105,22 @@
             {{ end }}
 
         </ul>
+        <div class="btn-div">
+            <a href="https://demo.kubesphere.io/login" target="_blank" rel="noopener noreferrer">
+                <button class="demo-btn">{{ i18n "Demo" }} →</button>
+            </a>
+        </div>
+        <div class="link-div">
+            <a href="{{ .Site.Params.slackLink }}" target="_blank">
+                <img src="/images/header/slack-hover.svg" alt="">
+            </a>
+            <a href="{{ .Site.Params.twitterLink }}" target="_blank">
+                <img src="/images/header/twitter-hover.svg" alt="">
+            </a>
+            <a href="{{ .Site.Params.githubLink }}" target="_blank">
+                <img src="/images/header/github-hover.svg" alt="">
+            </a>
+        </div>
     </div>
 </header>
 <script>

layouts/service-mesh/list.html

@@ -1,52 +0,0 @@
-{{ define "main" }}
-
-{{ with .Params.section1}}
-<section class='section-1 bg-cover' style='background-image: url("{{ .image }}");'>
-  <div class="title-div common-layout">
-    <h1 class="title-h1">{{ .title }}</h1>
-    <p class="common-p">{{ .content }}</p>
-  </div>
-</section>
-{{ end }}
-
-<section class="section-2">
-  {{ with .Params.section2 }}
-  <div class="common-layout">
-    <h2 class="title-black-h2">{{ .title }}</h2>
-    <ul>
-      {{ range .list }}
-      <li class="common-flex-layout">
-        <div>
-          <h3 class="title-black-h3">{{ .title }}</h3>
-          {{ if .summary }}
-          <p class="common-p">{{ .summary }}</p>
-          {{ end }}
-          {{ if .contentList }}
-          <ul>
-            {{ range .contentList}}
-            <li class="common-li">{{ .content | safeHTML }}</li>
-            {{ end }}
-          </ul>
-          {{ end }}
-        </div>
-        <img src="{{ .image }}" alt="">
-      </li>
-      {{ end }}
-    </ul>
-  </div>
-  {{ end }}
-</section>
-
-<section class="section-3">
-  {{ with .Params.section3 }}
-  <img class="bg-left" src="{{ .bgLeft }}" alt="">
-  <img class="bg-right" src="{{ .bgRight }}" alt="">
-  <div class="common-layout">
-    <h2 class="title-black-h2">{{ .title }}</h2>
-    <img src="{{ .image }}" alt="">
-    <p class="common-p">{{ .content }}</p>
-    <a href="{{ .link }}"><button class="common-btn">{{ .btnContent }}</button></a>
-  </div>
-  {{ end }}
-</section>
-{{ end }}

static/images/service-mesh/28.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="685" height="428" viewBox="0 0 685 428">
+    <defs>
+        <linearGradient id="prefix__a" x1="0%" x2="100%" y1="45.194%" y2="50%">
+            <stop offset="0%" stop-color="#FFF" stop-opacity="0"/>
+            <stop offset="100%" stop-color="#F7B500"/>
+        </linearGradient>
+        <linearGradient id="prefix__b" x1="2.08%" x2="100%" y1="45.278%" y2="50%">
+            <stop offset="0%" stop-color="#FFF" stop-opacity="0"/>
+            <stop offset="100%" stop-color="#F7B500"/>
+        </linearGradient>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <path fill="url(#prefix__a)" d="M169 0L962 543.044 962 551.998 169 703z" opacity=".3" transform="translate(-7 -12)"/>
+        <path fill="url(#prefix__b)" d="M0 70L634 490.436 634 498.632 0 633z" transform="translate(-7 -12)"/>
+    </g>
+</svg>