diff --git a/assets/scss/case-detail.scss b/assets/scss/case-detail.scss index 7c09a9545..f754759df 100644 --- a/assets/scss/case-detail.scss +++ b/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) { diff --git a/assets/scss/content.scss b/assets/scss/content.scss index 8f11992e1..1318dccfc 100644 --- a/assets/scss/content.scss +++ b/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; diff --git a/assets/scss/header.scss b/assets/scss/header.scss index fb1eba37d..dd0af5bc1 100644 --- a/assets/scss/header.scss +++ b/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; + } + } } diff --git a/assets/scss/service-mesh.scss b/assets/scss/scenario.scss similarity index 91% rename from assets/scss/service-mesh.scss rename to assets/scss/scenario.scss index 726c0d90b..9919e1bad 100644 --- a/assets/scss/service-mesh.scss +++ b/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; diff --git a/config/_default/config.toml b/config/_default/config.toml index 4bdcc8e20..75e108c0b 100644 --- a/config/_default/config.toml +++ b/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 diff --git a/content/en/dev-ops/_index.md b/content/en/dev-ops/_index.md new file mode 100644 index 000000000..c54b69d2c --- /dev/null +++ b/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: Easy to integrate with your SCM, support GitLab / GitHub / BitBucket / SVN + - content: Design a graphical editing panel to create CI/CD pipelines, without writing Jenkinsfile + - content: Integrate SonarQube to implement source code quality analysis + - content: Support dependency cache to accelerate build and deployment + - content: Provide dynamic build agents to automatically spin up Pods as necessary + + - title: Built-in automated toolkits + image: /images/observability/log-query-and-collection.png + contentList: + - content: Source to Image, building reproducible container images from source code, without writing dockerfile + - content: Binary-to-imageis the bridge between your artifact and a runnable image + - content: Support automatically build and push image to any registry, finally deploy to Kubernetes. + - content: Good recoverability and flexibility, 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: Combine Git with Kubernetes’ convergence, and automates the cloud native Apps delivery + - content: Designed for teams, offer built-in multitenancy in DevOps project + - content: Liable to be observable, 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 +--- \ No newline at end of file diff --git a/content/en/observability/_index.md b/content/en/observability/_index.md index c7996a2de..3f55c6d91 100644 --- a/content/en/observability/_index.md +++ b/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: diff --git a/content/en/service-mesh/_index.md b/content/en/service-mesh/_index.md index 475ef51ff..ae9ee5c50 100644 --- a/content/en/service-mesh/_index.md +++ b/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: diff --git a/layouts/observability/list.html b/layouts/_default/scenario.html similarity index 87% rename from layouts/observability/list.html rename to layouts/_default/scenario.html index 753e46298..575b2d295 100644 --- a/layouts/observability/list.html +++ b/layouts/_default/scenario.html @@ -1,5 +1,4 @@ {{ define "main" }} - {{ with .Params.section1}}
@@ -9,6 +8,13 @@
{{ end }} +
+ + {{ if .Params.bg }} + + {{ end }} +
+
{{ with .Params.section2 }}
diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 1cfa42172..f4fbaf8c4 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -48,7 +48,7 @@
  • - +
    1. {{ i18n "demo content 1" }}
      2. @@ -86,7 +86,15 @@ {{ .Name }} @@ -97,6 +105,22 @@ {{ end }} +
      + + + +
      +
      + + + + + + + + + +