From 3061d302af2e6fb48b4dced8de400da11cd87b41 Mon Sep 17 00:00:00 2001 From: liuboaibc Date: Wed, 27 May 2020 14:18:39 +0800 Subject: [PATCH] refine firsr version --- assets/scss/case.scss | 45 +- assets/scss/contribution.scss | 3 + assets/scss/index.scss | 4 + assets/scss/partner.scss | 96 +++- content/en/_index.md | 9 + content/en/case/_index.md | 6 + content/en/contribution/_index.md | 2 +- content/en/partner/_index.md | 42 +- content/zh/conferences/_index.md | 37 ++ content/zh/conferences/csi.md | 1 - content/zh/conferences/jenkins-x.md | 1 - content/zh/conferences/logging.md | 1 - content/zh/conferences/porter.md | 1 - i18n/zh.yaml | 10 +- layouts/case/list.html | 5 + layouts/contribution/list.html | 7 +- layouts/index.html | 4 +- layouts/partner/list.html | 32 +- static/images/case/left.svg | 18 + static/images/common/hexagon.svg | 26 + static/images/home/80.svg | 735 ++++++++++++++++++++++++++ static/images/home/applications.jpg | Bin 567598 -> 0 bytes static/images/home/applications.png | Bin 0 -> 808867 bytes static/images/partner/background1.svg | 9 + static/images/partner/background2.svg | 9 + static/images/partner/partner10.jpg | Bin 0 -> 20517 bytes static/images/partner/partner8.jpg | Bin 0 -> 21359 bytes static/images/partner/partner9.jpg | Bin 0 -> 27708 bytes static/images/partner/qingcloud.svg | 10 + static/images/partner/radore.jpg | Bin 0 -> 7566 bytes 30 files changed, 1061 insertions(+), 52 deletions(-) create mode 100644 static/images/case/left.svg create mode 100644 static/images/common/hexagon.svg create mode 100644 static/images/home/80.svg delete mode 100644 static/images/home/applications.jpg create mode 100644 static/images/home/applications.png create mode 100644 static/images/partner/background1.svg create mode 100644 static/images/partner/background2.svg create mode 100644 static/images/partner/partner10.jpg create mode 100644 static/images/partner/partner8.jpg create mode 100644 static/images/partner/partner9.jpg create mode 100644 static/images/partner/qingcloud.svg create mode 100644 static/images/partner/radore.jpg diff --git a/assets/scss/case.scss b/assets/scss/case.scss index a77cf60ea..c88a83f52 100644 --- a/assets/scss/case.scss +++ b/assets/scss/case.scss @@ -37,6 +37,7 @@ } .section-2 { + position: relative; .cases-ul { display: flex; flex-wrap: wrap ; @@ -45,6 +46,7 @@ top: -60px; width: 1160px; margin: 0 auto; + z-index: 2; li { width: 373px; @@ -84,9 +86,17 @@ } } } + + & > img { + position: absolute; + bottom: 30px; + right: 50%; + transform: translateX(-520px); + } } .section-3 { + position: relative; background-image: url('/images/case/oval-4.svg'); background-position: center top; background-repeat: no-repeat; @@ -115,17 +125,24 @@ background-color: #ffffff; li { - margin-left: 60px; + padding: 8px 16px; + border-radius: 20px; + margin-left: 30px; height: 24px; font-size: 16px; line-height: 1.5; color: #36435c; cursor: pointer; + transition: all ease 0.2s; + + &:hover { + box-shadow: 0 8px 16px 0 rgba(101, 193, 148, 0.2), 0 0 50px 0 rgba(101, 193, 148, 0.1); + background-color: #55bc8a; + color: #ffffff; + } } .active { - padding: 8px 16px; - border-radius: 20px; box-shadow: 0 8px 16px 0 rgba(101, 193, 148, 0.2), 0 0 50px 0 rgba(101, 193, 148, 0.1); background-color: #55bc8a; color: #ffffff; @@ -133,8 +150,10 @@ } #case-children { + position: relative; + z-index: 2; display: flex; - flex-wrap: wrap ; + flex-wrap: wrap; li { margin-top: 20px; margin-right: 21px; @@ -152,5 +171,23 @@ box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06), 0 8px 16px 0 rgba(36, 46, 66, 0.05); } } + + & > p { + margin-top: 40px; + text-align: center; + + a { + color: #00a971; + } + } + } + + + & > img { + width: 152px; + position: absolute; + bottom: -20px; + left: 50%; + transform: translateX(500px); } } \ No newline at end of file diff --git a/assets/scss/contribution.scss b/assets/scss/contribution.scss index 5c488bda2..230a82e73 100644 --- a/assets/scss/contribution.scss +++ b/assets/scss/contribution.scss @@ -462,6 +462,9 @@ line-height: 1.33; a { color: #00a971; + &:hover { + color: #008a5c; + } } } } diff --git a/assets/scss/index.scss b/assets/scss/index.scss index 8fae28062..1c7fc5b85 100644 --- a/assets/scss/index.scss +++ b/assets/scss/index.scss @@ -504,6 +504,10 @@ section { font-weight: 600; line-height: 1.71; color: #00a971; + + &:hover { + color: #008a5c; + } } } diff --git a/assets/scss/partner.scss b/assets/scss/partner.scss index 4272dcda6..b53becdfd 100644 --- a/assets/scss/partner.scss +++ b/assets/scss/partner.scss @@ -38,14 +38,24 @@ } .section-2 { + position: relative; + & > img { + width: 152px; + position: absolute; + right: 50%; + bottom: -40px; + transform: translateX(-490px); + } & > div { display: flex; position: relative; + z-index: 2; top: -40px; width: 1160px; margin: 0 auto; box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06); .left-div { + position: relative; width: 470px; height: 298px; border-radius: 10px 0 0 10px; @@ -62,6 +72,16 @@ height: 160px; margin-left: 40px; } + .img-1 { + position: absolute; + top: 0; + left: 0; + } + .img-2 { + position: absolute; + bottom: 0; + right: 0; + } } .right-div { position: relative; @@ -70,7 +90,7 @@ border-radius: 0 10px 10px 0; background-color: #3d3e49; - img { + & > img { margin-top: 107px; margin-left: 45px; } @@ -86,6 +106,45 @@ border-radius: 100px; box-shadow: 0 2px 8px 0 rgba(250, 164, 66, 0.5); background-image: linear-gradient(107deg, #fdba39 20%, #f2635e 99%); + cursor: pointer; + + &:hover { + & > div { + display: block; + } + } + + div { + display: none; + position: absolute; + top: -60px; + left: 50%; + width: 140px; + height: 50px; + transform: translateX(-50%); + border-radius: 10px; + background: #ffffff; + + img { + width: 95px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + + &::after { + content: ''; + width: 0; + height: 0; + position: absolute; + border: 4px solid transparent; + border-top-color: #ffffff; + bottom: -8px; + left: 50%; + transform: translateX(-50%); + } + } } .div-1 { @@ -139,6 +198,7 @@ } p { + height: 128px; margin-left: 40px; margin-right: 40px; @include common-p-style; @@ -169,21 +229,16 @@ } ul { - @include common-flex-style; margin-top: 20px; + font-size: 0; - .intro { - background-image: radial-gradient(circle at -23% -21%, #cdf6d5, #089566 75%); - - p { - margin: 40px 30px; - font-size: 14px; - line-height: 1.71; - color: #ffffff; - } + li:nth-child(4n + 1) { + margin-left: 0; } li { + display: inline-block; + margin-left: 20px; position: relative; width: 274px; height: 200px; @@ -193,7 +248,7 @@ background-color: #ffffff; &:hover { - div { + .content { display: block; } } @@ -205,8 +260,7 @@ object-fit: contain; } - div { - display: none; + .type { position: absolute; top: 10px; right: 0; @@ -221,6 +275,20 @@ box-shadow: 0 2px 8px 0 rgba(250, 164, 66, 0.5); background-image: linear-gradient(108deg, #fdba39 20%, #f2635e 99%); } + + .content { + display: none; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + padding: 40px 30px; + background-image: radial-gradient(circle at -23% -21%, #cdf6d5, #089566 75%); + font-size: 14px; + line-height: 1.71; + color: #ffffff; + } } } } diff --git a/content/en/_index.md b/content/en/_index.md index f04a56993..3d1803b3c 100644 --- a/content/en/_index.md +++ b/content/en/_index.md @@ -65,6 +65,15 @@ section3: - content: Better track, route and optimize communications within Kubernetes for cloud native apps - content: Easy-to-use web terminal and graphical panel, satisfying the habits of different users + - name: User + content: Running and using Apps on Kubernetes has never been so easy + icon: /images/home/80.svg + children: + - content: Deploy and upgrade Apps in one click, without underlying infrastructure consideration + - content: Provide on-demand container resources and HPA, hardening the reliabity and flexibility of your applications + - content: Import any Helm repository in seconds to visually deploy and upgrade applications + - content: Support operation in application store, including metering and billing for applications (coming soon) + section4: title: Key Features content: If you want to use an open source project, but act like a commercial product, KubeSphere is your choice.
The Roadmap listed the planning features, you can raise a proposal to submit your ideas with us. diff --git a/content/en/case/_index.md b/content/en/case/_index.md index f0212e395..ce53082f0 100644 --- a/content/en/case/_index.md +++ b/content/en/case/_index.md @@ -10,6 +10,7 @@ section1: section2: tip: Read Case Study → + icon: images/case/left.svg caseList: - icon: "images/case/case1.jpg" content: "KubeSphere is trusted by various enterprises and organizations to the innovators driving the future @@ -44,6 +45,7 @@ section2: section3: title: 'Various Industries are Powered by KubeSphere' tip: ALL + icon: images/common/hexagon.svg caseType: - name: 'Financial' children: @@ -72,4 +74,8 @@ section3: icon: 'images/case/v7.jpg' - name: 'anchnet' icon: 'images/case/v8.jpg' + bottomContent: + content: Want your logo up there? Just + linkContent: submit a pull request, or email you company's logo to us → + link: --- \ No newline at end of file diff --git a/content/en/contribution/_index.md b/content/en/contribution/_index.md index 6bc5bd4fe..ce999db64 100644 --- a/content/en/contribution/_index.md +++ b/content/en/contribution/_index.md @@ -100,7 +100,7 @@ section3: link: '' linkContent: 'Join SIG - App store →' children: - - icon: '' + - icon: '/images/contribution/calicq1.jpg' - icon: '' - icon: '' diff --git a/content/en/partner/_index.md b/content/en/partner/_index.md index 3d2ca5baf..4a4d67882 100644 --- a/content/en/partner/_index.md +++ b/content/en/partner/_index.md @@ -12,52 +12,60 @@ section2: title: 'Together, build partnership for success all over the world' content: 'KubeSphere partners play a critical role in KubeSphere go-to-market strategy. KubeSphere partners are located all over the world, we are looking forward to the global cooperation, your success is our success.' name1: 'USA' + icon1: '' name2: 'European' + icon2: 'images/partner/radore.jpg' name3: 'China' + icon3: 'images/partner/qingcloud.svg' mapImage: 'images/partner/map.svg' - + bg1: 'images/common/hexagon.svg' + bg2: 'images/partner/background1.svg' + bg3: 'images/partner/background2.svg' section3: title: 'Partner Types' tip: Request now → partnerType: - title: "App Providers" - content: "KubeSphere Application Store is a great place to showcase your application, KubeSphere bring your applications to tens of thousands of users, making them deploy your App to Kubernetes with one click." + content: "KubeSphere Application Store is a great place to showcase your application, KubeSphere bring your applications to tens of thousands of users, making them deploy your App to Kubernetes with one click." link: "" - title: "Consulting" - content: "KubeSphere Application Store is a great place to showcase your application, users can quickly deploy your application to Kubernetes using KubeSphere. Submit your application to KubeSphere Application Store now!" + content: If agencies and consultancies want to help clients easily adopt Kubernetes and deliver applications using modern, open source technologies, KubeSphere is the best choice for your team. link: "" - title: "Cloud Providers" - content: "KubeSphere Application Store is a great place to showcase your application, users can quickly deploy your application to Kubernetes using KubeSphere. Submit your application to KubeSphere Application Store now!" + content: For any cloud providers who want to tightly integrate KubeSphere as a catalog or application in their application market for Kubernetes-based solution, do not hesitate to use KubeSphere to extend your ecosystem. link: "" - title: "Go-To-Market" - content: "KubeSphere Application Store is a great place to showcase your application, users can quickly deploy your application to Kubernetes using KubeSphere. Submit your application to KubeSphere Application Store now!" + content: KubeSphere is 100% open source and free, you are able to localize KubeSphere, translate it into local languages, build local communities and develop local markets. GTM partners from around the globe that are tightly aligned with KubeSphere. link: "" section4: title: 'Featured Partners' - content: 'KubeSphere is trusted by various enterprises and organizations to the innovators driving the future of software.' featuredPartnerList: + - icon: "images/partner/partner5.jpg" + partnerType: "technology" + content: 'KubeSphere is trusted by various enterprises and organizations to the innovators driving the future of software.' + - icon: "images/partner/partner1.jpg" partnerType: "Go-To-Market" + content: - - icon: "images/partner/partner2.jpg" - partnerType: "Go-To-Market" - - - icon: "images/partner/partner3.jpg" + - icon: "images/partner/partner10.jpg" partnerType: "Go-To-Market" + content: - icon: "images/partner/partner4.jpg" - partnerType: "Go-To-Market" + partnerType: "technology" + content: - - icon: "images/partner/partner5.jpg" - partnerType: "Go-To-Market" + - icon: "images/partner/partner8.jpg" + partnerType: "technology" + content: - - icon: "images/partner/partner6.jpg" - partnerType: "Go-To-Market" + - icon: "images/partner/partner9.jpg" + partnerType: "technology" + content: - - icon: "images/partner/partner7.jpg" - partnerType: "Go-To-Market" --- \ No newline at end of file diff --git a/content/zh/conferences/_index.md b/content/zh/conferences/_index.md index eca526915..19807baf6 100644 --- a/content/zh/conferences/_index.md +++ b/content/zh/conferences/_index.md @@ -1,4 +1,41 @@ --- title: "page1" css: "scss/conferences.scss" + +viewDetail: 查看详情 + +list: + - name: KubeCon 大会 + content: KubeSphere 团队在 KubeCon + CloudNativeCon 2019 Shanghai 上的技术主题分享。 + icon: images/conferences/kubecon.svg + bg: images/conferences/kubecon-bg.svg + children: + - name: 基于 Kubernetes 的 Serverless Jenkins — Jenkins X + summary: 在云原生时代，应用模块不断被拆分，使得模块的数量不断上涨并且关系也越加复杂。企业在落地云原生技术的时候同事也需要有强大的 DevOps 手段，没有 DevOps 的云原生不可能是成功的。Jenkins X 是 CDF（持续交付基金会）与 + author: 夏润泽 + link: jenkins-x + image: + + - name: 云原生可观察性之日志管理 + summary: 日志通常含有非常有价值的信息，日志管理是云原生可观察性的重要组成部分。不同于物理机或虚拟机，在容器与 Kubernetes 环境中，日志有标准的输出方式(stdout… + author: 霍秉杰，马丹 + link: logging + image: + + - name: Porter-面向裸金属环境的 Kubernetes 开源负载均衡器 + summary: 我们知道，在 Kubernetes 集群中可以使用 “LoadBalancer” 类型的服务将后端工作负载暴露在外部。云厂商通常为 Kubernetes 提供云上的 LB 插件，但这需要将集群部署在特定 IaaS 平台上。然而，许多企业用户通常都将 Kubernetes… + author: 宋雪涛 + link: porter + image: + + - name: QCon 全球软件开发大会 + content: + icon: images/conferences/qcon.svg + bg: images/conferences/qcon-bg.svg + children: + - name: 基于 CSI Kubernetes 存储插件的开发实践 + summary: 现在很多用户都会将自己的应用迁移到 Kubernetes 容器平台中。在 Kubernetes 容器平台中，存储是支撑用户应用的基石。随着用户不断的将自己的应用深度部署在 K8S 容器平台中，但是我们现有的 Kubernetes… + author: 王欣 + link: csi + image: --- \ No newline at end of file diff --git a/content/zh/conferences/csi.md b/content/zh/conferences/csi.md index 99fda9f07..45e5be9ef 100644 --- a/content/zh/conferences/csi.md +++ b/content/zh/conferences/csi.md @@ -1,6 +1,5 @@ --- title: '基于 CSI Kubernetes 存储插件的开发实践' -type: 'QCon' author: '王欣' createTime: '2019-12-04' snapshot: 'https://pek3b.qingstor.com/kubesphere-docs/png/20190930112634.png' diff --git a/content/zh/conferences/jenkins-x.md b/content/zh/conferences/jenkins-x.md index b416fb45c..754dc49eb 100644 --- a/content/zh/conferences/jenkins-x.md +++ b/content/zh/conferences/jenkins-x.md @@ -1,6 +1,5 @@ --- title: '基于 Kubernetes 的 Serverless Jenkins — Jenkins X' -type: 'KubeCon' author: '夏润泽' createTime: '2019-06-24' snapshot: 'https://pek3b.qingstor.com/kubesphere-docs/png/20190930095450.png' diff --git a/content/zh/conferences/logging.md b/content/zh/conferences/logging.md index e86c75ce9..6b1cb2292 100644 --- a/content/zh/conferences/logging.md +++ b/content/zh/conferences/logging.md @@ -1,6 +1,5 @@ --- title: '云原生可观察性之日志管理' -type: 'KubeCon' author: '霍秉杰，马丹' createTime: '2019-06-25' snapshot: 'https://pek3b.qingstor.com/kubesphere-docs/png/20190930095954.png' diff --git a/content/zh/conferences/porter.md b/content/zh/conferences/porter.md index ecd435b34..d2718e263 100644 --- a/content/zh/conferences/porter.md +++ b/content/zh/conferences/porter.md @@ -1,6 +1,5 @@ --- title: 'Porter-面向裸金属环境的 Kubernetes 开源负载均衡器' -type: 'KubeCon' author: '宋雪涛' createTime: '2019-06-24' snapshot: 'https://pek3b.qingstor.com/kubesphere-docs/png/20190930095713.png' diff --git a/i18n/zh.yaml b/i18n/zh.yaml index 81ddfb02c..838e95145 100644 --- a/i18n/zh.yaml +++ b/i18n/zh.yaml @@ -1,9 +1,17 @@ - id: introduction1 translation: 技术博客 +- id: introduction2 + translation: " " - id: introduction3 translation: 发布于 - id: introduction4 - translation: 技术博客 + translation: KubeCon & QCon +- id: introduction5 + translation: 订阅 +- id: introduction6 + translation: 请输入你的邮箱地址 +- id: introduction7 + translation: " " - id: introduction8 translation: 欢迎使用 KubeSphere 文档 - id: introduction9 diff --git a/layouts/case/list.html b/layouts/case/list.html index 64fe6c45f..79368c4f3 100644 --- a/layouts/case/list.html +++ b/layouts/case/list.html @@ -23,6 +23,7 @@ {{ end }} + {{ end }} @@ -46,7 +47,11 @@ {{ end }} {{ end }} + {{ with .bottomContent }} +

{{ .content }} {{ .linkContent }}

+ {{ end }} + {{ end }}