diff --git a/assets/scss/common.scss b/assets/scss/common.scss index 72a4b5f78..363d185dc 100644 --- a/assets/scss/common.scss +++ b/assets/scss/common.scss @@ -14,3 +14,43 @@ h1, h2, h3 ,h4, h5, h6 { html { background-color: #f5f8f9; } + +button { + border: none; + + &:hover { + box-shadow: none; + } +} + +.title-h1 { + font-size: 40px; + line-height: 1; + letter-spacing: -0.11px; + color: #ffffff; + text-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); +} + +.title-black-h2 { + text-shadow: 0 4px 8px rgba(35, 45, 65, 0.1); + font-size: 32px; + font-weight: bold; + line-height: 1.63; + color: #3d3e49; +} + +.title-white-h2 { + text-shadow: 0 4px 8px rgba(35, 45, 65, 0.1); + font-size: 32px; + font-weight: bold; + line-height: 1.63; + color: #ffffff; +} + +.title-p { + font-size: 16px; + line-height: 1.5; + letter-spacing: -0.04px; + color: #ffffff; + text-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); +} diff --git a/assets/scss/service-mesh.scss b/assets/scss/service-mesh.scss new file mode 100644 index 000000000..53d777eb1 --- /dev/null +++ b/assets/scss/service-mesh.scss @@ -0,0 +1,170 @@ +@import 'variables'; +@import 'mixin'; + +html { + background-color: #ffffff; +} + +.section-1 { + position: relative; + height: 350px; + min-width: 1160px; + + img { + width: 100%; + height: 100%; + object-fit:cover; + } + + .title-div { + position: absolute; + width: 1160px; + top: 129px; + left: 50%; + transform: translateX(-50%); + + h1 { + width: 1060px; + font-size: 40px; + text-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); + line-height: 1; + letter-spacing: -0.11px; + color: #ffffff; + } + + p { + width: 1060px; + margin-top: 25px; + font-size: 16px; + line-height: 1.5; + letter-spacing: -0.04px; + color: #ffffff; + text-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); + } + } +} + +.section-2 { + background-color: #f5f8f9; + padding-top: 60px; + & > div { + position: relative; + width: 1160px; + margin: 0 auto; + + h2 { + text-align: center; + margin-bottom: 45px; + } + + & > ul { + & > li:nth-child(2n) { + flex-direction: row-reverse; + } + & > li { + @include common-flex-style; + align-items: center; + margin-bottom: 20px; + + & > div { + width: 460px; + + h3 { + font-size: 24px; + line-height: 1; + color: #3d3e49; + } + + p { + margin-top: 24px; + opacity: 0.9; + font-size: 16px; + line-height: 1.5; + color: #3d3e49; + } + + li { + position: relative; + margin-top: 25px; + padding-left: 14px; + font-size: 16px; + color: #36435c; + + &::before { + content: ''; + position: absolute; + display: block; + width: 6px; + height: 6px; + top: 5px; + left: 0; + border-radius: 50%; + background-color: #00a971; + } + + span { + font-weight: 600; + } + } + } + + img { + width: 660px; + } + } + } + } +} + +.section-3 { + position: relative; + padding-top: 80px; + text-align: center; + overflow: hidden; + + .bg-left { + position: absolute; + top: 242px; + right: 50%; + transform: translateX(-200px); + } + + .bg-right { + position: absolute; + top: 200px; + left: 50%; + transform: translateX(180px); + } + + & > div { + position: relative; + width: 1160px; + margin: 0 auto; + img { + width: 955px; + margin-top: 40px; + } + + p { + margin-top: 56px; + font-size: 16px; + line-height: 1.5; + letter-spacing: -0.04px; + color: #31383e; + } + + button { + width: 263px; + height: 56px; + margin-top: 20px; + letter-spacing: -0.04px; + color: #ffffff; + font-size: 16px; + border-radius: 28px; + cursor: pointer; + box-shadow: 0 10px 50px 0 rgba(34, 43, 62, 0.1), 0 8px 16px 0 rgba(33, 43, 61, 0.2), 0 10px 50px 0 rgba(34, 43, 62, 0.1); + background-image: linear-gradient(to bottom, rgba(85, 188, 138, 0), rgba(85, 188, 138, 0.1) 97%), linear-gradient(to bottom, #55bc8a, #55bc8a); + } + } + +} \ No newline at end of file diff --git a/content/en/service-mesh/_index.md b/content/en/service-mesh/_index.md new file mode 100644 index 000000000..475ef51ff --- /dev/null +++ b/content/en/service-mesh/_index.md @@ -0,0 +1,41 @@ +--- +title: "service mesh" + +css: "scss/service-mesh.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 + +section2: + title: What Makes KubeSphere Service Mesh Special + list: + - title: Traffic Management + image: /images/service-mesh/traffic-management.png + summary: + contentList: + - content: Canary release, provides canary rollouts, and staged rollouts with percentage-based traffic splits. + - content: Blue-green deployment allows the new version of the application to be deployed in the green environment and tested for functionality and performance. + - content: Traffic mirroring enables teams to bring changes to production with as little risk as possible. + - content: Circuit breakers allows users to set limits for calls to individual hosts within a service + + - title: Visualization + image: /images/service-mesh/visualization.png + summary: observability is extremely useful in understanding cloud-native microservice interconnections. KubeSphere has the ability to visualize the connections between microservices and the topology of how they interconnect. + contentList: + + - title: Distributed Tracing + image: /images/service-mesh/distributed-tracing.png + summary: Based on Jaeger, KubeSphere enables users to track how each service interacts with other services. It brings a deeper understanding about request latency, bottlenecks, serialization and parallelism via visualization. + contentList: + +section3: + title: See KubeSphere Service Mesh 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/layouts/service-mesh/list.html b/layouts/service-mesh/list.html new file mode 100644 index 000000000..3d8c1c565 --- /dev/null +++ b/layouts/service-mesh/list.html @@ -0,0 +1,52 @@ +{{ define "main" }} +
+ {{ with .Params.section1}} + +
+

{{ .title }}

+

{{ .content }}

+
+ {{ end }} +
+ +
+ {{ with .Params.section2 }} +
+

{{ .title }}

+ +
+ {{ end }} +
+ +
+ {{ with .Params.section3 }} + + +
+

{{ .title }}

+ +

{{ .content }}

+ +
+ {{ end }} +
+{{ end }} \ No newline at end of file diff --git a/static/images/service-mesh/15.jpg b/static/images/service-mesh/15.jpg new file mode 100644 index 000000000..c967fff82 Binary files /dev/null and b/static/images/service-mesh/15.jpg differ diff --git a/static/images/service-mesh/3-2.svg b/static/images/service-mesh/3-2.svg new file mode 100644 index 000000000..08b4568b8 --- /dev/null +++ b/static/images/service-mesh/3-2.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/static/images/service-mesh/3.svg b/static/images/service-mesh/3.svg new file mode 100644 index 000000000..4dc929f93 --- /dev/null +++ b/static/images/service-mesh/3.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/static/images/service-mesh/banner.jpg b/static/images/service-mesh/banner.jpg new file mode 100644 index 000000000..a0623be08 Binary files /dev/null and b/static/images/service-mesh/banner.jpg differ diff --git a/static/images/service-mesh/distributed-tracing.png b/static/images/service-mesh/distributed-tracing.png new file mode 100644 index 000000000..ea0ffed2b Binary files /dev/null and b/static/images/service-mesh/distributed-tracing.png differ diff --git a/static/images/service-mesh/traffic-management.png b/static/images/service-mesh/traffic-management.png new file mode 100644 index 000000000..d33e5bf63 Binary files /dev/null and b/static/images/service-mesh/traffic-management.png differ diff --git a/static/images/service-mesh/visualization.png b/static/images/service-mesh/visualization.png new file mode 100644 index 000000000..3433c0881 Binary files /dev/null and b/static/images/service-mesh/visualization.png differ