diff --git a/assets/scss/case-detail.scss b/assets/scss/case-detail.scss new file mode 100644 index 000000000..05ade9d52 --- /dev/null +++ b/assets/scss/case-detail.scss @@ -0,0 +1,187 @@ +.section-1 { + height: 300px; + + img { + width: 100%; + height: 100%; + object-fit: cover; + } + + div { + position: relative; + width: 1160px; + margin: -162px auto 0; + + h1 { + height: 40px; + text-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); + font-size: 40px; + font-weight: bold; + line-height: 1; + letter-spacing: -0.11px; + color: #ffffff; + } + + p { + width: 733px; + margin-top: 12px; + opacity: 0.8; + text-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); + font-size: 16px; + line-height: 1.5; + letter-spacing: -0.04px; + color: #ffffff; + } + } +} + +.section-2 { + position: relative; + & > img { + position: absolute; + top: 320px; + left: 50%; + transform: translateX(400px); + } + & > div { + position: relative; + width: 1160px; + margin: 0 auto; + padding-top: 56px; + z-index: 2; + + .ul-left { + width: 668px; + + & > li + li { + margin-top: 30px; + } + + & > li { + h2 { + font-size: 24px; + left: 28px; + letter-spacing: -0.07px; + color: #30313b; + } + + & > p { + margin-top: 12px; + font-size: 16px; + line-height: 1.75; + letter-spacing: -0.04px; + color: #919aa3; + } + + & > img { + display: block; + max-width: 100%; + margin: 20px auto 0; + } + + & > ul { + width: 660px; + font-size: 0; + border-radius: 8px; + overflow: hidden; + li { + position: relative; + display: inline-block; + box-sizing: border-box; + width: 220px; + height: 126px; + + p { + position: absolute; + width: 160px; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 16px; + line-height: 1.75; + text-align: center; + color: #ffffff; + } + } + li:nth-child(1) { + background-image: linear-gradient(to left, #0c8349 99%, #00603c 0%); + } + li:nth-child(2) { + background-image: linear-gradient(to left, #2a9762 99%, #278d67 0%); + } + li:nth-child(3) { + background-image: linear-gradient(to left, #65c194 99%, #4ca986 9%); + } + } + + & > div { + position: relative; + padding: 20px 60px 20px 38px; + border-radius: 8px; + background-image: linear-gradient(107deg, #4a499a 28%, #8552c3 81%); + + .p1 { + font-size: 16px; + line-height: 1.75; + color: #ffffff; + } + + .p2 { + opacity: 0.8; + font-size: 14px; + line-height: 1.86; + letter-spacing: 0.35px; + color: #ffffff; + } + + img { + position: absolute; + top: -20px; + right: -8px; + } + } + } + } + + & > div { + position: absolute; + right: 40px; + top: -56px; + width: 373px; + border-radius: 10px; + box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06), 0 8px 16px 0 rgba(36, 46, 66, 0.05); + background-color: #ffffff; + + img { + display: block; + width: 293px; + margin: 0 auto; + height: 120px; + object-fit: contain; + } + + .ul-right { + padding: 4px 60px 26px; + + li + li { + margin-top: 16px; + } + + li { + .p1 { + font-size: 16px; + line-height: 28px; + color: #30313b; + } + + .p2 { + font-size: 16px; + line-height: 1.75; + letter-spacing: -0.04px; + color: #919aa3; + } + } + } + } + } +} \ No newline at end of file diff --git a/assets/scss/common.scss b/assets/scss/common.scss index b3cc25bc4..72a4b5f78 100644 --- a/assets/scss/common.scss +++ b/assets/scss/common.scss @@ -4,7 +4,11 @@ @import 'footer'; body { - font-family: $font-family-id; + font-family: $font-family-2; +} + +h1, h2, h3 ,h4, h5, h6 { + font-family: $font-family-1; } html { diff --git a/assets/scss/footer.scss b/assets/scss/footer.scss index e5cf5c812..61bb3da58 100644 --- a/assets/scss/footer.scss +++ b/assets/scss/footer.scss @@ -39,7 +39,7 @@ width: 209px; height: 20px; font-size: 14px; - margin-left: 17px; + margin-left: 16px; color: #ccd3db; border: none; background-color: #f5f8f9; @@ -88,7 +88,6 @@ display: block; line-height: 2; color: #919aa3; - font-family: $font-family-id; } } } diff --git a/assets/scss/index.scss b/assets/scss/index.scss index ac97d67c2..88f2e41e9 100644 --- a/assets/scss/index.scss +++ b/assets/scss/index.scss @@ -53,7 +53,7 @@ section { } h1 { - width: 668px; + width: 660px; height: 120px; margin-top: 12px; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); @@ -65,7 +65,7 @@ section { } .p2 { - width: 668px; + width: 660px; height: 72px; margin-top: 12px; margin-bottom: 30px; @@ -113,14 +113,16 @@ section { top: 231px; right: 0; z-index: 2; - width: 480px; - height: 297px; + width: 460px; object-fit: contain; + border: 6px solid #ffffff; + border-radius: 3px; + box-shadow: 0 10px 20px 0 rgba(34, 43, 62, 0.1), 0 8px 16px 0 rgba(33, 43, 61, 0.2), 0 10px 30px 0 rgba(34, 43, 62, 0.1); } .img2 { - top: 490px; - right: 454px; + top: 470px; + right: 445px; } .img4 { @@ -221,7 +223,7 @@ section { width: 964px; margin: 16px auto 50px; font-size: 16px; - line-height: 1.5; + line-height: 2; color: #919aa3; } @@ -310,6 +312,7 @@ section { font-size: 16px; color: #36435c; margin-bottom: 20px; + line-height: 1.4; } li::before { @@ -327,6 +330,7 @@ section { & > img { position: absolute; + max-width: 365px; bottom: -50px; right: -16px; } diff --git a/assets/scss/markdown.scss b/assets/scss/markdown.scss index 93951c042..ce694ec66 100644 --- a/assets/scss/markdown.scss +++ b/assets/scss/markdown.scss @@ -2,7 +2,6 @@ $mobile-max-width: 768px; .md-body { - font-family: $font-family-id; font-size: 16px; line-height: 2; word-wrap: break-word; diff --git a/assets/scss/variables.scss b/assets/scss/variables.scss index d82120fcd..ff1098461 100644 --- a/assets/scss/variables.scss +++ b/assets/scss/variables.scss @@ -1,4 +1,5 @@ $font-family: 'PingFang SC', 'Lantinghei SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', 微软雅黑, STHeitiSC-Light, simsun, 宋体, 'WenQuanYi Zen Hei', 'WenQuanYi Micro Hei', sans-serif; -$font-family-id: Roboto, $font-family; \ No newline at end of file +$font-family-1: Roboto, $font-family; +$font-family-2: Proxima Nova, $font-family; \ No newline at end of file diff --git a/content/en/case/_index.md b/content/en/case/_index.md index ce53082f0..290045d64 100644 --- a/content/en/case/_index.md +++ b/content/en/case/_index.md @@ -15,32 +15,32 @@ section2: - icon: "images/case/case1.jpg" content: "KubeSphere is trusted by various enterprises and organizations to the innovators driving the future of software." - link: "" + link: "aqara" - icon: "images/case/case2.jpg" content: "KubeSphere is trusted by various enterprises and organizations to the innovators driving the future of software." - link: "" + link: "aqara" - icon: "images/case/case3.jpg" content: "KubeSphere is trusted by various enterprises and organizations to the innovators driving the future of software." - link: "" + link: "aqara" - icon: "images/case/case4.jpg" content: "KubeSphere is trusted by various enterprises and organizations to the innovators driving the future of software." - link: "" + link: "aqara" - icon: "images/case/case5.jpg" content: "KubeSphere is trusted by various enterprises and organizations to the innovators driving the future of software." - link: "" + link: "aqara" - icon: "images/case/case6.jpg" content: "KubeSphere is trusted by various enterprises and organizations to the innovators driving the future of software." - link: "" + link: "aqara" section3: title: 'Various Industries are Powered by KubeSphere' diff --git a/content/en/case/aqara.md b/content/en/case/aqara.md new file mode 100644 index 000000000..23edae5a5 --- /dev/null +++ b/content/en/case/aqara.md @@ -0,0 +1,66 @@ +--- +title: Aqara +description: + +css: scss/case-detail.scss + +section1: + title: Aqara + content: KubeSphere is trusted by various enterprises and organizations to the innovators driving the future of software. + +section2: + listLeft: + - title: Company Introduction + content: China Minsheng Bank’s main applications were written in C and Java, using traditional architecture. “Our biggest challenge is how to make our traditional legacy applications adaptable to the cloud native environment,” says Zhang Li, who is leader of technology for CMBC’s container cloud. “We want to do distributed applications because in the past we used VMs, and that was quite expensive.” + image: /images/case/aqara-1.jpg + + - title: Challenge + content: CMBC brought in Alibaba Cloud to help with its cloud native transformation. The company is now in the process of breaking down and migrating its legacy applications to a Kubernetes platform, as well as developing new microservices on it. + image: + + - title: Solution + content: With the Kubernetes platform, delivery efficiency has increased 3-4x, and resource utilization has doubled. “We are now developing AI-based applications, a blockchain application, and some big data analysis applications on the cloud native platform,” says Zhang. + image: + + - title: Benefit + content: With the Kubernetes platform, delivery efficiency has increased 3-4x, and resource utilization has doubled. “We are now developing AI-based applications, a blockchain application, and some big data analysis applications on the cloud native platform,” says Zhang. + image: + + - type: 1 + contentList: + - content: With the Kubernetes platform + - content: With the Kubernetes platform + - content: With the Kubernetes platform + + + - title: Installation Architecture + content: CMBC brought in Alibaba Cloud to help with its cloud native transformation. The company is now in the process of breaking down and migrating its legacy applications to a Kubernetes platform, as well as developing new microservices on it. + image: + + - title: Bussiness introduction + content: With the Kubernetes platform, delivery efficiency has increased 3-4x, and resource utilization has doubled. “We are now developing AI-based applications, a blockchain application, and some big data analysis applications on the cloud native platform,” says Zhang. + image: + + - type: 2 + content: 'We are now developing AI-based applications, a blockchain application, and some big data analysis applications' + author: 'Katherine Martinez' + + - title: Testimonial + content: With the Kubernetes platform, delivery efficiency has increased 3-4x, and resource utilization has doubled. “We are now developing AI-based applications, a blockchain application, and some big data analysis applications on the cloud native platform,” says Zhang. + image: + + rightPart: + icon: /images/case/aqara-detail.jpg + list: + - title: INDUSTRY + content: Financial Services + - title: LOCATION + content: China + - title: CLOUD TYPE + content: Hybrid + - title: CHALLENGES + content: Availability, Efficiency, Velocity + - title: ADOPTED FEATURES + content: Hosted + +--- \ No newline at end of file diff --git a/layouts/case/list.html b/layouts/case/list.html index 79368c4f3..1bd53b74e 100644 --- a/layouts/case/list.html +++ b/layouts/case/list.html @@ -18,7 +18,7 @@

{{ .content }}

- {{ $tip }} + {{ $tip }}
{{ end }} diff --git a/layouts/case/single.html b/layouts/case/single.html new file mode 100644 index 000000000..543127d52 --- /dev/null +++ b/layouts/case/single.html @@ -0,0 +1,60 @@ +{{ define "main" }} + +
+ {{ with .Params.section1}} + +
+

{{ .title }}

+

{{ .content }}

+
+ {{ end }} +
+ +
+ {{ with .Params.section2 }} +
+ +
+ {{ with .rightPart}} + +
    + {{ range .list }} +
  • +

    {{ .title }}

    +

    {{ .content }}

    +
    • + {{ end }} +
+ {{ end }} +
+
+ + {{ end }} +
+{{ end }} \ No newline at end of file diff --git a/layouts/index.html b/layouts/index.html index ea416b722..50f01d6ea 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -2,7 +2,7 @@ {{ $data := index .Site.Data .Site.Language.Lang }}
{{ with .Params.section1 }} - +
diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 31d89c440..4fa203433 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -6,6 +6,7 @@ + {{ $common := resources.Get "scss/common.scss" | toCSS | minify | fingerprint }} diff --git a/static/fonts/ProximaNova/ProximaNova-Bold.ttf b/static/fonts/ProximaNova/ProximaNova-Bold.ttf new file mode 100644 index 000000000..0cc21c76d Binary files /dev/null and b/static/fonts/ProximaNova/ProximaNova-Bold.ttf differ diff --git a/static/fonts/ProximaNova/ProximaNova-Bold.woff b/static/fonts/ProximaNova/ProximaNova-Bold.woff new file mode 100644 index 000000000..466cf8481 Binary files /dev/null and b/static/fonts/ProximaNova/ProximaNova-Bold.woff differ diff --git a/static/fonts/ProximaNova/ProximaNova-Bold.woff2 b/static/fonts/ProximaNova/ProximaNova-Bold.woff2 new file mode 100644 index 000000000..ee760d265 Binary files /dev/null and b/static/fonts/ProximaNova/ProximaNova-Bold.woff2 differ diff --git a/static/fonts/ProximaNova/ProximaNova-Light.ttf b/static/fonts/ProximaNova/ProximaNova-Light.ttf new file mode 100644 index 000000000..d6143b622 Binary files /dev/null and b/static/fonts/ProximaNova/ProximaNova-Light.ttf differ diff --git a/static/fonts/ProximaNova/ProximaNova-Light.woff b/static/fonts/ProximaNova/ProximaNova-Light.woff new file mode 100644 index 000000000..3a3f30465 Binary files /dev/null and b/static/fonts/ProximaNova/ProximaNova-Light.woff differ diff --git a/static/fonts/ProximaNova/ProximaNova-Light.woff2 b/static/fonts/ProximaNova/ProximaNova-Light.woff2 new file mode 100644 index 000000000..5b070339f Binary files /dev/null and b/static/fonts/ProximaNova/ProximaNova-Light.woff2 differ diff --git a/static/fonts/ProximaNova/ProximaNova-Regular.ttf b/static/fonts/ProximaNova/ProximaNova-Regular.ttf new file mode 100644 index 000000000..7ba3fafab Binary files /dev/null and b/static/fonts/ProximaNova/ProximaNova-Regular.ttf differ diff --git a/static/fonts/ProximaNova/ProximaNova-Regular.woff b/static/fonts/ProximaNova/ProximaNova-Regular.woff new file mode 100644 index 000000000..930ecd1ec Binary files /dev/null and b/static/fonts/ProximaNova/ProximaNova-Regular.woff differ diff --git a/static/fonts/ProximaNova/ProximaNova-Regular.woff2 b/static/fonts/ProximaNova/ProximaNova-Regular.woff2 new file mode 100644 index 000000000..e40db9120 Binary files /dev/null and b/static/fonts/ProximaNova/ProximaNova-Regular.woff2 differ diff --git a/static/fonts/ProximaNova/ProximaNova-Regular_1.ttf b/static/fonts/ProximaNova/ProximaNova-Regular_1.ttf new file mode 100644 index 000000000..7ba3fafab Binary files /dev/null and b/static/fonts/ProximaNova/ProximaNova-Regular_1.ttf differ diff --git a/static/fonts/ProximaNova/ProximaNova-Regular_1.woff b/static/fonts/ProximaNova/ProximaNova-Regular_1.woff new file mode 100644 index 000000000..930ecd1ec Binary files /dev/null and b/static/fonts/ProximaNova/ProximaNova-Regular_1.woff differ diff --git a/static/fonts/ProximaNova/ProximaNova-Regular_1.woff2 b/static/fonts/ProximaNova/ProximaNova-Regular_1.woff2 new file mode 100644 index 000000000..e40db9120 Binary files /dev/null and b/static/fonts/ProximaNova/ProximaNova-Regular_1.woff2 differ diff --git a/static/fonts/ProximaNova/ProximaNova-Semibold.ttf b/static/fonts/ProximaNova/ProximaNova-Semibold.ttf new file mode 100644 index 000000000..35f373b79 Binary files /dev/null and b/static/fonts/ProximaNova/ProximaNova-Semibold.ttf differ diff --git a/static/fonts/ProximaNova/ProximaNova-Semibold.woff b/static/fonts/ProximaNova/ProximaNova-Semibold.woff new file mode 100644 index 000000000..edb86c5b0 Binary files /dev/null and b/static/fonts/ProximaNova/ProximaNova-Semibold.woff differ diff --git a/static/fonts/ProximaNova/ProximaNova-Semibold.woff2 b/static/fonts/ProximaNova/ProximaNova-Semibold.woff2 new file mode 100644 index 000000000..d1b48bc6c Binary files /dev/null and b/static/fonts/ProximaNova/ProximaNova-Semibold.woff2 differ diff --git a/static/fonts/ProximaNova/ProximaNova-SemiboldIt.ttf b/static/fonts/ProximaNova/ProximaNova-SemiboldIt.ttf new file mode 100644 index 000000000..bb8c81110 Binary files /dev/null and b/static/fonts/ProximaNova/ProximaNova-SemiboldIt.ttf differ diff --git a/static/fonts/ProximaNova/ProximaNova-SemiboldIt.woff b/static/fonts/ProximaNova/ProximaNova-SemiboldIt.woff new file mode 100644 index 000000000..ecd17b72c Binary files /dev/null and b/static/fonts/ProximaNova/ProximaNova-SemiboldIt.woff differ diff --git a/static/fonts/ProximaNova/ProximaNova-SemiboldIt.woff2 b/static/fonts/ProximaNova/ProximaNova-SemiboldIt.woff2 new file mode 100644 index 000000000..f41a6dbeb Binary files /dev/null and b/static/fonts/ProximaNova/ProximaNova-SemiboldIt.woff2 differ diff --git a/static/fonts/ProximaNova/stylesheet.css b/static/fonts/ProximaNova/stylesheet.css new file mode 100644 index 000000000..f37c9f60d --- /dev/null +++ b/static/fonts/ProximaNova/stylesheet.css @@ -0,0 +1,54 @@ +@font-face { + font-family: 'Proxima Nova'; + src: url('./ProximaNova-Bold.woff2') format('woff2'), + url('./ProximaNova-Bold.woff') format('woff'), + url('./ProximaNova-Bold.ttf') format('truetype'); + font-weight: bold; + font-style: normal; +} + +@font-face { + font-family: 'Proxima Nova'; + src: url('./ProximaNova-Light.woff2') format('woff2'), + url('./ProximaNova-Light.woff') format('woff'), + url('./ProximaNova-Light.ttf') format('truetype'); + font-weight: 300; + font-style: normal; +} + +@font-face { + font-family: 'Proxima Nova'; + src: url('./ProximaNova-Regular.woff2') format('woff2'), + url('./ProximaNova-Regular.woff') format('woff'), + url('./ProximaNova-Regular.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Proxima Nova'; + src: url('./ProximaNova-Semibold.woff2') format('woff2'), + url('./ProximaNova-Semibold.woff') format('woff'), + url('./ProximaNova-Semibold.ttf') format('truetype'); + font-weight: 600; + font-style: normal; +} + +@font-face { + font-family: 'Proxima Nova'; + src: url('./ProximaNova-SemiboldIt.woff2') format('woff2'), + url('./ProximaNova-SemiboldIt.woff') format('woff'), + url('./ProximaNova-SemiboldIt.ttf') format('truetype'); + font-weight: 600; + font-style: italic; +} + +@font-face { + font-family: 'Proxima Nova'; + src: url('./ProximaNova-Regular_1.woff2') format('woff2'), + url('./ProximaNova-Regular_1.woff') format('woff'), + url('./ProximaNova-Regular_1.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + diff --git a/static/images/case/aqara-1.jpg b/static/images/case/aqara-1.jpg new file mode 100644 index 000000000..133f1e6d0 Binary files /dev/null and b/static/images/case/aqara-1.jpg differ diff --git a/static/images/case/aqara-detail.jpg b/static/images/case/aqara-detail.jpg new file mode 100644 index 000000000..53d64e2dd Binary files /dev/null and b/static/images/case/aqara-detail.jpg differ diff --git a/static/images/case/case-detail-bg.png b/static/images/case/case-detail-bg.png new file mode 100644 index 000000000..3136027c7 Binary files /dev/null and b/static/images/case/case-detail-bg.png differ diff --git a/static/images/case/ic-quote-right.svg b/static/images/case/ic-quote-right.svg new file mode 100644 index 000000000..e3905fa00 --- /dev/null +++ b/static/images/case/ic-quote-right.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/static/images/home/74.png b/static/images/home/74.png index df17c4ead..5333a147b 100644 Binary files a/static/images/home/74.png and b/static/images/home/74.png differ diff --git a/static/images/home/bg.jpg b/static/images/home/bg.jpg new file mode 100644 index 000000000..bbef32583 Binary files /dev/null and b/static/images/home/bg.jpg differ