You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dubbo.apache.org by al...@apache.org on 2022/11/19 01:00:58 UTC

[dubbo-website] branch refactor/next updated: Refactor to next (#1605)

This is an automated email from the ASF dual-hosted git repository.

albumenj pushed a commit to branch refactor/next
in repository https://gitbox.apache.org/repos/asf/dubbo-website.git


The following commit(s) were added to refs/heads/refactor/next by this push:
     new ebb2c6787bb Refactor to next (#1605)
ebb2c6787bb is described below

commit ebb2c6787bbd023203f869d4bcc6535c936f1712
Author: Albumen Kevin <jh...@gmail.com>
AuthorDate: Sat Nov 19 09:00:53 2022 +0800

    Refactor to next (#1605)
---
 assets/scss/_base.scss                             | 885 +++++++++++++++++++++
 assets/scss/_case-studies.scss                     | 143 ++++
 assets/scss/_custom.scss                           | 853 ++++++++++++++++++++
 assets/scss/_desktop.scss                          |  99 +++
 assets/scss/_reset.scss                            |  49 ++
 assets/scss/_size.scss                             |  28 +
 assets/scss/_skin.scss                             |   5 +
 assets/scss/_styles_project.scss                   |  51 ++
 assets/scss/_tablet.scss                           | 214 +++++
 assets/scss/_variables_project.scss                |   2 +-
 assets/scss/main.scss                              |  10 +-
 config.toml                                        |   2 +-
 content/en/_common-resources/images/blocks.svg     |   1 +
 .../images/dubbo-hangzhou-meetup.jpg               | Bin 0 -> 321249 bytes
 content/en/_common-resources/images/flower.svg     |   1 +
 .../images/kub_video_banner_homepage.jpg           | Bin 0 -> 709415 bytes
 content/en/_common-resources/images/scalable.svg   |   1 +
 content/en/_common-resources/images/suitcase.svg   |   1 +
 content/en/_common-resources/index.md              |   3 +
 content/zh/_common-resources/images/blocks.svg     |   1 +
 content/zh/_common-resources/images/flower.svg     |   1 +
 .../images/kub_video_banner_homepage.jpg           | Bin 0 -> 709415 bytes
 content/zh/_common-resources/images/scalable.svg   |   1 +
 content/zh/_common-resources/images/suitcase.svg   |   1 +
 content/zh/_common-resources/index.md              |   3 +
 content/zh/_index.html                             | 186 +++--
 content/zh/docs3-v2/_index.md                      |   3 -
 content/zh/docs3-v2/java-sdk/_index.md             |  14 +-
 content/zh/docs3-v2/java-sdk/home/_index.md        |  26 +
 .../java-sdk/home/supported-doc-versions.md        |  18 +
 content/zh/overview/_index.md                      |  39 +-
 content/zh/overview/core-features/_index.md        |   8 +
 content/zh/overview/core-features/configuration.md |  11 +
 content/zh/overview/core-features/ecosystem.md     |  11 +
 content/zh/overview/core-features/extensibility.md |  11 +
 content/zh/overview/core-features/load-balance.md  |   7 +
 content/zh/overview/core-features/observability.md |  12 +
 content/zh/overview/core-features/protocols.md     |  11 +
 content/zh/overview/core-features/security.md      |  11 +
 .../overview/core-features/service-definition.md   |  11 +
 .../zh/overview/core-features/service-discovery.md |  12 +
 content/zh/overview/core-features/service-mesh.md  |  11 +
 .../overview/core-features/traffic-management.md   |  11 +
 content/zh/overview/history-version/_index.md      |  38 -
 content/zh/overview/home/_index.md                 |  53 ++
 content/zh/overview/mannual/Java.md                |   2 +-
 content/zh/overview/mannual/_index.md              |  12 +-
 content/zh/overview/quickstart/_index.md           |   4 +-
 content/zh/overview/tasks/_index.md                |   6 +-
 content/zh/overview/tasks/api-management/_index.md |   8 +
 content/zh/overview/tasks/ecosystem/_index.md      |   6 +-
 content/zh/overview/tasks/kubernetes/_index.md     |  10 +-
 content/zh/overview/tasks/mesh/_index.md           |   6 +-
 .../zh/overview/tasks/microservice-demo/_index.md  |   8 +
 content/zh/overview/tasks/migration/_index.md      |   6 +-
 .../zh/overview/tasks/traffic-management/_index.md |   6 +-
 content/zh/overview/tasks/triple/_index.md         |   6 +-
 content/zh/overview/what/_index.md                 |   6 +-
 content/zh/overview/what/extensibility.md          |   2 +-
 content/zh/overview/what/observability.md          |   6 +
 content/zh/overview/what/overview.md               |   4 +-
 .../zh/overview/what/{dubbo3.md => performance.md} |   6 +-
 .../what/{ecosystem.md => traffic-management.md}   |   6 +-
 .../what/{architecture.md => usability.md}         |   6 +-
 content/zh/overview/what/usecases.md               |   9 -
 data/announcements/scheduled.yaml                  |  43 +
 data/contacts.yaml                                 |  20 +
 data/i18n/en/en.toml                               | 278 +++++++
 data/i18n/zh/zh.toml                               | 286 +++++++
 i18n/en.toml                                       | 278 +++++++
 i18n/zh.toml                                       | 286 +++++++
 layouts/_default/baseof.html                       |  42 +
 layouts/_default/search.html                       |  55 ++
 layouts/blog/baseof.html                           |  55 ++
 layouts/docs/baseof.html                           |  55 ++
 layouts/partials/announcement.html                 |  34 +
 layouts/partials/blog-meta-links.html              |  13 +
 layouts/partials/blog-sidebar.html                 |  99 +++
 layouts/partials/css.html                          |  36 +
 layouts/partials/deprecation-warning.html          |  18 +
 layouts/partials/docs/browse.html                  |  53 ++
 layouts/partials/docs/content-page.html            |   6 +
 layouts/partials/docs/docs-portal-card.html        |  29 +
 layouts/partials/docs/glossary-terms.html          |  13 +
 layouts/partials/docs/side-menu.html               |  24 +
 layouts/partials/docs/thirdparty-disclaimer.html   |   3 +
 layouts/partials/docs/top-section-page.html        |   1 +
 layouts/partials/favicons.html                     |   4 +
 layouts/partials/feedback.html                     |  53 ++
 layouts/partials/footer.html                       |   0
 layouts/partials/handle-version-switch-404.html    |  11 +
 layouts/partials/head.html                         |  76 +-
 layouts/partials/navbar-lang-selector.html         |  10 +
 layouts/partials/navbar-version-selector.html      |  10 +
 layouts/partials/navbar.html                       |   5 +-
 layouts/partials/page-meta-links.html              |  45 ++
 layouts/partials/sidebar-tree.html                 |  94 +++
 layouts/partials/toc.html                          |   8 +
 layouts/shortcodes/blocks/__common.html            |  15 +
 layouts/shortcodes/blocks/case-studies.html        |  25 +
 layouts/shortcodes/blocks/contact-us.html          |  15 +
 layouts/shortcodes/blocks/cover.html               |   2 +-
 layouts/shortcodes/blocks/dubbo-features.html      |  36 +
 layouts/shortcodes/blocks/feature.html             |  15 +
 layouts/shortcodes/blocks/lead.html                |  19 +
 layouts/shortcodes/blocks/section.html             |  11 +
 layouts/shortcodes/docs/content_box.md             |  11 +-
 layouts/shortcodes/docs/document_box.md            |  24 +
 static/css/README.md                               |  12 +
 static/css/bootstrap-4.3.1.min.css                 |   7 +
 static/css/case-studies-gradient.css               | 413 ++++++++++
 static/css/community.css                           | 425 ++++++++++
 static/css/contactus.css                           | 425 ++++++++++
 static/css/feature-states.css                      |  39 +
 static/css/fontawesome-4.7.0.min.css               |   4 +
 static/css/glossary.css                            |  60 ++
 static/css/gridpage.css                            | 349 ++++++++
 static/css/images/Ui-icons_222222_256x240.png      | Bin 0 -> 4193 bytes
 static/css/legacy_community.css                    | 858 ++++++++++++++++++++
 static/css/new-case-studies.css                    | 182 +++++
 static/css/style_amadeus.css                       | 420 ++++++++++
 static/css/style_ancestry.css                      | 403 ++++++++++
 static/css/style_apiref.css                        | 229 ++++++
 static/css/style_blablacar.css                     | 413 ++++++++++
 static/css/style_blackrock.css                     | 407 ++++++++++
 static/css/style_box.css                           | 391 +++++++++
 static/css/style_buffer.css                        | 400 ++++++++++
 static/css/style_case_studies.css                  | 403 ++++++++++
 static/css/style_crowdfire.css                     | 413 ++++++++++
 static/css/style_golfnow.css                       | 397 +++++++++
 static/css/style_haufegroup.css                    | 411 ++++++++++
 static/css/style_huawei.css                        | 411 ++++++++++
 static/css/style_peardeck.css                      | 399 ++++++++++
 static/css/style_wink.css                          | 394 +++++++++
 static/css/style_zalando.css                       | 407 ++++++++++
 static/css/training.css                            | 224 ++++++
 static/imgs/blog/2022/website/background.png       | Bin 0 -> 1008393 bytes
 static/imgs/blog/2022/website/doc10.png            | Bin 0 -> 1048233 bytes
 static/imgs/blog/2022/website/doc11.png            | Bin 0 -> 146201 bytes
 static/imgs/blog/2022/website/doc2.png             | Bin 0 -> 878647 bytes
 static/imgs/blog/2022/website/doc3.png             | Bin 0 -> 628692 bytes
 static/imgs/blog/2022/website/doc4.png             | Bin 0 -> 963035 bytes
 static/imgs/blog/2022/website/doc5.png             | Bin 0 -> 764277 bytes
 static/imgs/blog/2022/website/doc6.png             | Bin 0 -> 750074 bytes
 static/imgs/blog/2022/website/doc8.png             | Bin 0 -> 994411 bytes
 static/imgs/blog/2022/website/doc9.png             | Bin 0 -> 987290 bytes
 static/imgs/blog/2022/website/statistics.png       | Bin 0 -> 32622 bytes
 static/imgs/contacts/dingtalk.jpg                  | Bin 0 -> 130877 bytes
 static/imgs/contacts/github.png                    | Bin 0 -> 30026 bytes
 static/imgs/contacts/twitter.png                   | Bin 0 -> 7235 bytes
 static/imgs/contacts/wechat-account.jpg            | Bin 0 -> 27895 bytes
 static/imgs/contacts/wechat-account1.png           | Bin 0 -> 5393994 bytes
 static/js/README.md                                |  11 +
 static/js/bootstrap-4.3.1.min.js                   |   7 +
 static/js/glossary.js                              | 181 +++++
 static/js/jquery-3.3.1.min.js                      |   2 +
 static/js/jquery.scrollTo-2.1.2.min.js             |   7 +
 static/js/popper-1.14.3.min.js                     |   5 +
 static/js/redirects.js                             |  46 ++
 static/js/script.js                                | 489 ++++++++++++
 static/js/scroll-apiref.js                         | 196 +++++
 static/js/search.js                                |  97 +++
 static/js/sweetalert-2.1.2.min.js                  |   1 +
 static/manifest.webmanifest                        |  22 +
 164 files changed, 14942 insertions(+), 218 deletions(-)

diff --git a/assets/scss/_base.scss b/assets/scss/_base.scss
new file mode 100755
index 00000000000..aae3dd6bc63
--- /dev/null
+++ b/assets/scss/_base.scss
@@ -0,0 +1,885 @@
+@import "reset";
+
+// header
+$full-width-paddingX: 20px;
+
+$main-width: 100%;
+$main-max-width: 100%;
+
+$header-height: 80px;
+
+$logo-width: 180px;
+
+$nav-buttons-margin-left: 30px;
+
+$hamburger-size: 50px;
+
+// main nav
+$main-nav-padding: 140px 0 30px;
+$main-nav-h5-margin-bottom: 1em;
+$main-nav-h3-margin-bottom: 0.6em;
+$nav-box-width: 20%;
+$nav-box-sibling-margin-left: calc(20% / 3);
+$main-nav-main-sibling-margin-top: 60px;
+$main-nav-left-button-size: 50px;
+$main-nav-left-button-font-size: 18px;
+
+// hero
+$hero-padding-top: 80px;
+$headline-wrapper-margin-bottom: 40px;
+$quickstart-button-padding: 0 50px;
+$vendor-strip-height: 88px;
+$vendor-strip-font-size: 16px;
+
+// video
+$video-section-height: 200px;
+
+@import "size";
+
+////////////////////////////////////////////////////////////////////////////////////////////////////
+////////////////////////////////////////////////////////////////////////////////////////////////////
+////////////////////////////////////////////////////////////////////////////////////////////////////
+
+body {
+  background-color: white;
+
+  a {
+    color: $blue;
+  }
+}
+
+section {
+  position: relative;
+  background-color: white;
+}
+
+section,
+header,
+footer {
+  .main-section {
+    position: relative;
+    margin: auto;
+  }
+
+  p {
+    font-size: 14px;
+    font-weight: 400;
+  }
+
+  .button {
+    display: inline-block;
+    border-radius: 6px;
+    padding: 6px 20px;
+    line-height: 1.3rem;
+    color: white;
+    background-color: $blue;
+    text-decoration: none;
+    font-size: 1rem;
+    border: 0px;
+  }
+
+  #cellophane {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: none;
+  }
+}
+
+main {
+  .button {
+    display: inline-block;
+    border-radius: 6px;
+    padding: 6px 20px;
+    line-height: 1.3rem;
+    color: white;
+    background-color: $blue;
+    text-decoration: none;
+    font-size: 1rem;
+    border: 0px;
+  }
+}
+
+// HEADER
+
+#hamburger {
+  display: inline-block;
+  position: relative;
+  margin-left: auto;
+  vertical-align: middle;
+  padding: 0;
+  border: 0;
+  background: none;
+
+  div,
+  &:before,
+  &:after {
+    position: absolute;
+    left: 15%;
+    width: 70%;
+    height: 2px;
+    background-color: $blue;
+    transition: 0.3s;
+    content: "";
+  }
+
+  div {
+    top: calc(50% - 1px);
+  }
+
+  &:before {
+    top: 24%;
+  }
+
+  &:after {
+    bottom: 24%;
+  }
+
+  &:hover {
+    div,
+    &:before,
+    &:after {
+      background-color: white;
+    }
+  }
+}
+
+// HERO
+.header-hero {
+  background-image: url(/images/texture.png);
+  background-color: $blue;
+  text-align: center;
+  padding-left: 0;
+  padding-right: 0;
+  margin-bottom: 0;
+  position: relative;
+
+  &.bot-bar:after {
+    display: block;
+    margin-bottom: -24px;
+    height: 8px;
+    width: 100%;
+    background-color: transparentize(white, 0.9);
+    content: "";
+  }
+
+  &.no-sub {
+    h5 {
+      display: none;
+    }
+
+    h1 {
+      margin-bottom: 20px;
+    }
+  }
+}
+
+.td-home .header-hero:after {
+  display: none;
+}
+
+.header-hero {
+  background-color: $blue;
+
+  h5 {
+    margin: 20px 0;
+    line-height: 28px;
+  }
+}
+
+#vendorStrip {
+  position: relative;
+
+  ul {
+    float: left;
+  }
+
+  li {
+    display: inline-block;
+    height: 100%;
+  }
+
+  a {
+    display: block;
+    height: 100%;
+    color: white;
+    font-size: 0.75em;
+    font-weight: bold;
+  }
+
+  li + li {
+    margin-left: 0;
+  }
+}
+
+.pi-accordion {
+  & > .container:first-child > .item:first-child > .title:first-child {
+    padding-left: 0;
+    font-size: 1.5em;
+    font-weight: 700;
+  }
+
+  & > .container:first-child > .item.yah:first-child > .title:first-child {
+    margin-left: -20px !important;
+  }
+
+  .item {
+    overflow: hidden;
+  }
+
+  .title {
+    color: $dark-grey;
+    position: relative;
+    padding: 7.5px 10px 7.5px 18px;
+    cursor: pointer;
+    transition: 0.3s;
+
+    &:hover {
+      color: $blue;
+    }
+  }
+
+  a.item > .title {
+    color: black;
+
+    &:hover {
+      color: $blue;
+    }
+  }
+
+  div.item > .title {
+    &:before {
+      content: "";
+      position: absolute;
+      top: 12px;
+      left: 2px;
+      border-style: solid;
+      border-width: 5px 0 5px 8px;
+      border-color: transparent transparent transparent $blue;
+      transform: rotate(0deg);
+      transition: 0.3s;
+    }
+  }
+
+  .wrapper {
+    position: relative;
+    width: 100%;
+    transition: height 0.3s;
+  }
+
+  .content {
+    padding-left: 20px;
+    opacity: 0;
+    transition: 0.3s;
+  }
+
+  .item.on {
+    & > .title:before {
+      transform: rotate(90deg);
+    }
+
+    & > .wrapper > .content {
+      opacity: 1;
+    }
+  }
+}
+
+dt {
+  margin-bottom: 8px;
+}
+
+dd {
+  margin-bottom: 16px;
+}
+
+.pi-pushmenu {
+  display: none;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  transition: opacity 0.3s;
+
+  &.on {
+    opacity: 1;
+  }
+
+  .overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.4);
+  }
+
+  .sled {
+    position: absolute;
+    top: 0;
+    width: 0;
+    height: 100%;
+    background-color: white;
+    overflow: auto;
+    transition: 0.3s;
+  }
+
+  &.on .sled {
+    width: 400px;
+    max-width: 100vw;
+  }
+
+  .top-bar {
+    height: 0;
+    line-height: 60px;
+    background-color: #444;
+  }
+
+  ul {
+    margin-top: 25px;
+  }
+
+  li {
+    position: relative;
+    display: block;
+    width: 100%;
+    min-height: 45px;
+    padding: 0 60px 0 20px;
+    border-bottom: 1px solid #cccccc;
+  }
+
+  a {
+    display: inline-block;
+    width: 100%;
+    height: 45px;
+    line-height: 45px;
+    font-size: 20px;
+    color: $blue;
+  }
+
+  .button {
+    background: none;
+    padding: 0;
+  }
+
+  ul ul {
+    padding: 0 20px;
+
+    li {
+      min-height: 40px;
+    }
+
+    a {
+      height: 40px;
+      line-height: 40px;
+      font-size: 18px;
+      color: lighten(#222222, 20%);
+    }
+  }
+}
+
+.push-menu-close-button {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 50px;
+  height: 50px;
+
+  &:before,
+  &:after {
+    content: "";
+    position: absolute;
+    top: calc(50% - 1px);
+    left: 25%;
+    width: 50%;
+    height: 2px;
+    background-color: black;
+  }
+
+  &:before {
+    transform: rotate(45deg);
+  }
+
+  &:after {
+    transform: rotate(-45deg);
+  }
+}
+
+// ocean nodes
+$ocean-nodes-padding-Y: 60px;
+$ocean-nodes-padding-top: 20px;
+$ocean-nodes-padding-bottom: 50px;
+$ocean-nodes-main-margin-bottom: 60px;
+$ocean-nodes-h3-margin-bottom: 30px;
+
+// video
+$video-section-height: 200px;
+
+// features
+$features-h3-margin-bottom: 20px;
+$feature-box-div-width: 100%;
+$feature-box-margin-bottom: 0;
+$feature-box-div-margin-bottom: 40px;
+
+// Home-specific
+
+.td-home {
+  &.flip-nav,
+  &.open-nav {
+    .logo {
+      background-image: url(/images/nav_logo2.svg);
+    }
+  }
+}
+
+.header-hero {
+  margin-bottom: 0;
+  padding-bottom: 1px;
+
+  .main-section {
+    padding: 0 10px;
+    margin-bottom: 30px;
+  }
+
+  #vendorStrip {
+    display: none;
+  }
+}
+
+// Add logo to CNCF section
+section#cncf {
+  padding-top: 60px;
+  padding-bottom: 140px;
+  background-image: url(/images/cncf-color.svg);
+  background-position: center 100px;
+  background-repeat: no-repeat;
+  background-size: 300px;
+}
+
+// OCEAN NODES
+#oceanNodes {
+  padding-top: $ocean-nodes-padding-top;
+  padding-bottom: $ocean-nodes-padding-Y;
+  //background-color: #f8f9fa;
+
+  p {
+    font-size: 0.9em
+  }
+
+  a {
+    color: $blue;
+  }
+
+  .main-section {
+    margin-bottom: $ocean-nodes-padding-bottom;
+    min-height: 160px;
+  }
+
+  .image-wrapper {
+    max-width: 75%;
+    margin: 0 auto 20px;
+    text-align: center;
+
+    img {
+      width: 100%;
+      max-width: 160px;
+    }
+  }
+
+  .main-section:first-child {
+    .image-wrapper {
+      max-width: 100%;
+
+      img {
+        max-width: 491px;
+      }
+    }
+  }
+
+  h3 {
+    margin-bottom: $ocean-nodes-h3-margin-bottom;
+  }
+}
+
+// Video thingy
+#video {
+  height: $video-section-height;
+}
+
+#video {
+  width: 100%;
+  position: relative;
+  background-position: center center;
+  background-size: cover;
+
+  & > .light-text {
+    display: none;
+    // position: absolute;
+    // top: 50%;
+    // left: 75%;
+    width: 500px;
+    padding-top: 2rem;
+    // transform: translate(-50%, -50%);
+    color: white;
+  }
+
+  h2 {
+    font-size: 32px;
+    line-height: 44px;
+    margin-bottom: 20px;
+  }
+
+  p {
+    margin-bottom: 20px;
+  }
+
+  #desktopKCButton {
+    position: absolute;
+    font-size: 18px;
+    background-color: $dark-grey;
+    border-radius: 8px;
+    color: $white;
+    padding: 20px 10px 20px 10px;
+  }
+
+  #desktopShowVideoButton {
+    position: relative;
+    font-size: 24px;
+    background-color: white;
+    border-radius: 8px;
+    color: $blue;
+    padding: 15px 30px 15px 80px;
+    margin-bottom: 15px;
+
+    &:before {
+      content: "";
+      position: absolute;
+      @include pureCenter(40px);
+      width: 0;
+      height: 0;
+      border-style: solid;
+      border-width: 10px 0 10px 20px;
+      border-color: transparent transparent transparent $blue;
+    }
+  }
+
+  #mobileShowVideoButton {
+    @include pureCenter;
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    background-color: transparent;
+    border: 5px solid rgba(255, 255, 255, 0.2);
+    overflow: visible;
+
+    &:after {
+      @include pureCenter;
+      left: 40px;
+      content: "";
+      width: 0;
+      height: 0;
+      border-style: solid;
+      border-width: 20px 0 20px 30px;
+      border-color: transparent transparent transparent #ffffff;
+    }
+  }
+}
+
+#videoPlayer {
+  @include fullScreen;
+  background-color: rgba(0, 0, 0, 0.9);
+  display: none;
+
+  iframe {
+    @include pureCenter;
+    @include maintain-aspect-ratio;
+  }
+
+  #closeButton {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    width: 50px;
+    height: 50px;
+    border: 2px solid transparent;
+    transition: 0.3s;
+
+    &:before,
+    &:after {
+      content: "";
+      position: absolute;
+      top: calc(50% - 1px);
+      left: 10%;
+      width: 80%;
+      height: 2px;
+      background-color: white;
+    }
+
+    &:before {
+      transform: rotate(45deg);
+    }
+
+    &:after {
+      transform: rotate(-45deg);
+    }
+
+    &:hover {
+      border-color: white;
+    }
+  }
+}
+
+// KubeWeekly
+#kubeweekly {
+  background-color: $light-grey;
+  padding-top: 30px;
+  padding-bottom: 80px;
+  background-size: auto;
+  font-size: 24px;
+  // font-weight: bold;
+
+  h5 {
+    font-size: 20px;
+  }
+}
+
+.subscribe-button {
+  border-radius: 6px;
+  padding: 0 20px;
+  line-height: 31px;
+  color: white;
+  background-color: blue;
+  text-decoration: none;
+  font-size: 14px;
+}
+
+// Features
+#features {
+  padding-top: 140px;
+  background-color: $light-grey;
+  background-image: url(/imgs/dubbo_colorful.png);
+  background-position: center 60px;
+  background-repeat: no-repeat;
+  background-size: 200px;
+}
+
+.feature-box {
+  //padding: 50px 0
+  width: 100%;
+  overflow: hidden;
+  clear: both;
+
+  h4 {
+    line-height: normal;
+    margin-bottom: 15px;
+  }
+
+  & > div:first-child {
+    float: left;
+  }
+
+  & > div:last-child {
+    float: right;
+  }
+}
+
+#features {
+  h3 {
+    margin-bottom: $features-h3-margin-bottom;
+  }
+
+  .feature-box {
+    margin-bottom: $feature-box-margin-bottom;
+
+    & > div {
+      width: $feature-box-div-width;
+      margin-bottom: $feature-box-div-margin-bottom;
+    }
+  }
+}
+
+// Talk to us
+#talkToUs {
+  h3,
+  h4 {
+    text-align: center;
+  }
+
+  h3 {
+    margin-bottom: 15px;
+  }
+
+  h4 {
+    line-height: normal;
+    margin-bottom: 50px;
+
+    br {
+      display: none;
+    }
+  }
+
+  #bigSocial {
+    overflow: hidden;
+
+    div {
+      width: 100%;
+      float: left;
+      padding: 30px;
+      padding-top: 110px;
+      background-position: center top;
+      background-size: auto;
+      background-repeat: no-repeat;
+    }
+
+    div:nth-child(1) {
+      background-image: url(/images/twitter_icon.png);
+    }
+
+    div:nth-child(2) {
+      background-image: url(/images/github_icon.png);
+    }
+
+    div:nth-child(3) {
+      background-image: url(/images/slack_icon.png);
+    }
+
+    div:nth-child(4) {
+      background-image: url(/images/stackoverflow_icon.png);
+    }
+
+    div + div {
+      margin-top: 20px;
+      margin-left: 0;
+    }
+
+    a {
+      display: inline-block;
+      color: $blue;
+      font-size: 24px;
+      font-weight: 400;
+      text-decoration: none;
+      margin-bottom: 15px;
+    }
+
+    a,
+    p {
+      text-align: center;
+      width: 100%;
+    }
+  }
+}
+
+.td-home {
+  #talkToUs {
+    .main-section {
+      padding: 30px 0;
+    }
+
+    h5 {
+      font-size: 20px;
+    }
+  }
+
+  #caseStudiesWrapper {
+    position: relative;
+    text-align: center;
+    margin-bottom: 30px;
+
+    img {
+      padding-bottom: 1rem;
+    }
+
+    div {
+      position: relative;
+      display: inline-block;
+      vertical-align: top;
+      width: 100%;
+      min-height: 230px;
+      margin-bottom: 60px;
+      padding-right: 1rem;
+      background-position: top center;
+    }
+
+    p {
+      font-size: 20px;
+    }
+
+    a {
+      position: absolute;
+      bottom: -30px;
+      left: 50%;
+      transform: translateX(-50%);
+      color: $blue;
+      font-weight: 400;
+    }
+  }
+}
+
+// Header filler size adjustment
+
+.header-hero.filler {
+  height: $hero-padding-top;
+}
+
+// Docs specific
+
+#editPageButton {
+  position: absolute;
+  top: 50px;
+  right: 25px;
+  width: 50px;
+  height: 50px;
+  line-height: 50px;
+  border-radius: 50%;
+  white-space: nowrap;
+  text-indent: 50px;
+  overflow: hidden;
+  background: $blue url(/images/icon-pencil.svg) no-repeat;
+  background-position: 12px 10px;
+  background-size: 29px 29px;
+}
+
+.feedback--response__hidden {
+  display: none;
+}
+
+// GitHub info/edit buttons
+#pre-footer {
+  margin-top: 2rem;
+
+  .button {
+    font-size: 1.1rem;
+
+    &:first-of-type {
+      margin-right: 0.75rem;
+    }
+  }
+
+  .lastedit {
+    margin-top: 1rem;
+    font-size: 1rem;
+  }
+}
+
+/* DOCUMENTATION */
+
+// nav-tabs and tab-content
+.nav-tabs {
+  border-bottom: none !important;
+}
+
+.td-content .tab-content .highlight {
+  margin: 0;
+}
+
+.tab-pane {
+  border-radius: 0.25rem;
+  padding: 0 16px 16px;
+
+  border: 1px solid #dee2e6;
+  &:first-of-type.active {
+    border-top-left-radius: 0;
+  }
+}
diff --git a/assets/scss/_case-studies.scss b/assets/scss/_case-studies.scss
new file mode 100755
index 00000000000..4f448641275
--- /dev/null
+++ b/assets/scss/_case-studies.scss
@@ -0,0 +1,143 @@
+// SASS for Case Studies pages go here:
+
+hr {
+  background-color: #999999;
+  margin-top: 0;
+}
+
+h2 {
+  margin-bottom: 15px !important;
+}
+
+.subhead {
+  padding-bottom: 2% !important;
+  padding-top: 0.75em !important;
+}
+
+.details {
+  margin-left: 1.9%;
+  padding-right: 5%;
+  font-size: 16px !important;
+  padding-bottom: 2% !important;
+}
+
+.section1 {
+  margin-bottom: 3%;
+
+  .cols {
+    width: 80% !important;
+    margin-left: 6.8%;
+    padding-top: 1.5%;
+
+    .col1 {
+      width: 52% !important;
+      font-weight: 300 !important;
+    }
+
+    .col2 {
+      width: 46% !important;
+    }
+  }
+}
+
+.banner2text {
+  width: 63%;
+  padding-top: 10%;
+  padding-left: 0% !important;
+  float: initial !important;
+  text-align: center;
+  margin: 0 auto;
+  position: relative;
+}
+
+.banner3text,
+.banner4text,
+.banner5text {
+  width: 63%;
+  padding-left: 0% !important;
+  float: initial !important;
+  text-align: center;
+  margin: 0 auto;
+  position: relative;
+}
+
+.fullcol {
+  float: initial !important;
+}
+
+body footer {
+  background-color: #585858 !important;
+}
+
+.section1 {
+  float: left !important;
+}
+
+.banner1 {
+  padding-left: 11.9% !important;
+}
+
+.banner2 {
+  float: initial !important;
+  padding-bottom: 2% !important;
+}
+
+footer {
+  padding: 0% 7%;
+}
+
+.banner4,
+.banner3,
+.banner5 {
+  float: initial !important;
+}
+
+@media screen and (max-width: 910px) {
+  .banner2text {
+    width: 47%;
+    padding-top: 45%;
+  }
+
+  .details {
+    margin-left: 0%;
+    margin-bottom: 3%;
+  }
+
+  .subhead {
+    padding-bottom: 0% !important;
+    padding-top: 0% !important;
+  }
+
+  .banner3 {
+    width: 100% !important;
+  }
+}
+
+@media screen and (max-width: 780px) {
+  .section1 .cols {
+    width: 100% !important;
+    margin-left: 0%;
+    padding-top: 5%;
+
+    .col1,
+    .col2 {
+      width: 100% !important;
+      margin-left: 0% !important;
+
+      .fullcol {
+        width: 90% !important;
+        margin-left: 5% !important;
+
+        .banner1 {
+          padding-left: 10% !important;
+          margin-bottom: 6% !important;
+
+          .banner2text {
+            padding-top: 60% !important;
+            padding-bottom: 2% !important;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/assets/scss/_custom.scss b/assets/scss/_custom.scss
new file mode 100755
index 00000000000..4d11be21d9d
--- /dev/null
+++ b/assets/scss/_custom.scss
@@ -0,0 +1,853 @@
+$announcement-size-adjustment: 8px;
+
+/* GLOBAL */
+.td-main {
+  .row {
+    margin: 0;
+  }
+
+  main {
+    *:not(figure) > img {
+      max-width: 100%;
+    }
+
+    @media only screen and (min-width: 768px) {
+      padding-top: 2rem !important;
+    }
+  }
+
+  .ui-widget {
+    font-family: inherit;
+    font-size: inherit;
+  }
+
+  .ui-widget-content a {
+    color: $blue;
+  }
+}
+
+.header-hero #quickstartButton.button {
+  margin-top: 1em;
+}
+
+section {
+  .main-section {
+    @media only screen and (min-width: 1024px) {
+      max-width: 1200px;
+    }
+  }
+}
+
+body {
+  header + .td-outer {
+    min-height: 50vh;
+    height: auto;
+  }
+}
+
+
+/* Emphasize first paragraph of running text on site front page */
+body.td-home main[role="main"] > section:first-of-type .content p:first-child {
+  line-height: 1.3em;
+  font-size: 1.4em;
+  margin-bottom: 1.5em;
+}
+
+#desktopShowVideoButton {
+  border: none
+}
+
+#videoPlayer {
+  #closeButton {
+    background: transparent;
+  }
+}
+
+body.td-404 main .error-details {
+  max-width: 1100px;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 4em;
+  margin-bottom: 0;
+}
+
+/* Global - Mermaid.js diagrams */
+
+.mermaid {
+  overflow-x: auto;
+  max-width: 80%;
+  border: 1px solid rgb(222, 226, 230);
+  border-radius: 5px;
+  margin-bottom: 1rem;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+
+  // mermaid diagram - sequence diagram
+  .actor {
+    fill: #326ce5 !important;
+  }
+  text.actor {
+    font-size: 18px !important;
+    stroke: white !important;
+    fill: white !important;
+  }
+  .activation0 {
+    fill: #c9e9ec !important;
+  }
+}
+
+/* HEADER */
+
+.td-navbar {
+  position: fixed !important;
+  width: 100%;
+  padding-bottom: 1rem !important;
+  background: transparent !important;
+  transition: 0.3s;
+
+  .navbar-brand {
+    position: absolute;
+    width: 45px;
+    height: 44px;
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-image: url("/images/favicon.png");
+  }
+
+  #hamburger {
+    &:focus {
+      outline: none;
+    }
+  }
+
+  @media only screen and (min-width: 768px) {
+    .navbar-brand {
+      background-image: url("/images/nav_logo.svg");
+      top: 1.5rem;
+      width: 180px;
+      margin-left: 1rem;
+    }
+  }
+}
+
+.td-navbar-nav-scroll {
+  overflow: visible !important;
+  display: none;
+
+  .navbar-nav {
+    overflow: visible !important;
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+
+    .nav-item {
+      position: relative;
+      height: 10%;
+
+      .active::after {
+        position: absolute;
+        width: 100%;
+        height: 2px;
+        content: "";
+        bottom: -4px;
+        left: 0;
+        background: #fff;
+      }
+    }
+  }
+
+  @media only screen and (min-width: 768px) {
+    display: block;
+    margin-top: 3.5rem !important;
+  }
+
+  @media only screen and (min-width: 1075px) {
+    margin-top: 1rem !important;
+  }
+}
+
+// Flip-Nav
+.flip-nav .td-navbar {
+  background-color: white !important;
+  box-shadow: 0 1px 2px $medium-grey;
+
+  .navbar-nav {
+    .nav-item {
+      &.show .nav-link,
+      .nav-link {
+        color: $dark-grey;
+
+        &:hover {
+          color: $medium-grey;
+        }
+      }
+
+      .dropdown {
+        &:hover {
+          color: $medium-grey;
+        }
+      }
+    }
+  }
+
+  .navbar-nav .nav-item .active {
+    color: $dark-grey;
+
+    &::after {
+      background: $dark-grey;
+    }
+  }
+
+  #hamburger:hover {
+    div,
+    &:before,
+    &:after {
+      background-color: $blue;
+    }
+  }
+
+  @media only screen and (min-width: 768px) {
+    .navbar-brand {
+      background-image: url("/images/nav_logo2.svg");
+    }
+  }
+}
+
+/* FOOTER */
+footer {
+  background-color: #303030;
+  background-image: url("/images/texture.png");
+  padding: 1rem !important;
+  min-height: initial !important;
+
+  > div, > p {
+    max-width: 95%;
+    @media only screen and (min-width: 768px) {
+      max-width: calc(min(80rem,90vw)); // avoid spreading too wide
+    }
+  }
+
+  > .footer__links {
+    margin: auto;
+    padding-bottom: 1rem;
+
+    nav a {
+      display: block;
+      text-align: center;
+    }
+
+    @media only screen and (min-width: 768px) {
+      max-width: calc(min(60rem,90vw)); // avoid spreading too wide
+
+      nav {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-around;
+      }
+    }
+  }
+
+  small {
+    color: $light-grey;
+    font-size: 0.64rem;
+
+    a {
+      text-decoration: inherit;
+      color: inherit;
+
+      &:hover {
+        color: inherit;
+      }
+    }
+  }
+}
+
+/* SIDE-DRAWER MENU */
+
+.pi-pushmenu .sled {
+  .content ul {
+    padding: 0;
+
+    li {
+      &:first-child {
+        display: none;
+      }
+
+      a.nav-link {
+        padding: 0;
+      }
+    }
+  }
+  .push-menu-close-button {
+    background: transparent;
+    border: none;
+
+    &:focus {
+      outline: none;
+    }
+  }
+}
+
+/* DOCS */
+
+.launch-cards {
+  button {
+    cursor: pointer;
+    box-sizing: border-box;
+    background: none;
+    margin: 0;
+    border: 0;
+  }
+
+  ul,
+  li {
+    list-style: none;
+    padding-left: 0;
+  }
+}
+
+// table of contents
+.td-toc {
+  padding-top: 1.5rem !important;
+  top: 5rem !important;
+
+  @supports (position: sticky) {
+    position: sticky !important;
+    height: calc(100vh - 10rem);
+    overflow-y: auto;
+  }
+
+  #TableOfContents {
+    padding-top: 1rem;
+  }
+}
+
+main {
+  .td-content table code,
+  .td-content>table td {
+    word-break: break-word;
+  }
+
+  table.no-word-break td,
+  table.no-word-break code {
+    word-break: normal;
+  }
+}
+
+
+// blockquotes and callouts
+
+body {
+  .alert {
+    // Override Docsy styles
+    padding: 0.4rem 0.4rem 0.4rem 1rem;
+    border-top: 1px solid #eee;
+    border-bottom: 1px solid #eee;
+    border-right: 1px solid #eee;
+    border-radius: 0.25em;
+    border-left-width: 0.5em; // fallback in case calc() is missing
+    background: #fff;
+    color: #000;
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
+  }
+  // Set minimum width and radius for alert color
+  .alert {
+      border-left-width: calc(max(0.5em, 4px));
+      border-top-left-radius: calc(max(0.5em, 4px));
+      border-bottom-left-radius: calc(max(0.5em, 4px));
+  }
+  .alert.callout.caution {
+    border-left-color: #f0ad4e;
+  }
+  .alert.callout.note {
+    border-left-color: #428bca;
+  }
+  .alert.callout.warning {
+    border-left-color: #d9534f;
+  }
+  .alert.third-party-content {
+    border-left-color: #444;
+  }
+
+  h1:first-of-type + .alert.callout {
+    margin-top: 1.5em;
+  }
+}
+
+// Special color for third party content disclaimers
+.alert.third-party-content { border-left-color: #222 };
+
+// Highlight disclaimer when targeted as a fragment
+
+#third-party-content-disclaimer {
+  color: #000;
+  background: #f8f9fa;
+  transition: all 0.5s ease;
+}
+
+@keyframes disclaimer-highlight {
+  from { background: #f8f922; color: #000; }
+  50% { background: #f8f944; color: #000; }
+  to { background: #f8f9cb; color: #000; }
+}
+
+#third-party-content-disclaimer:target {
+  color: #000;
+  animation: disclaimer-highlight 1.25s ease;
+  background: #f8f9cb;
+}
+
+.deprecation-warning, .pageinfo.deprecation-warning {
+    padding: clamp(10px, 2vmin, 20px);
+    margin: clamp(10px, 1vh, 20px) 0;
+    background-color: #faf5b6;
+    color: #000;
+}
+
+.deprecation-warning.outdated-blog, .pageinfo.deprecation-warning.outdated-blog {
+    background-color: $blue;
+    color: $white;
+}
+
+body.td-home .deprecation-warning, body.td-blog .deprecation-warning, body.td-documentation .deprecation-warning {
+    border-radius: 3px;
+}
+
+.deprecation-warning p:only-child {
+  margin-bottom: 0;
+}
+
+.td-documentation .td-content > .highlight {
+  max-width: initial;
+  width: 100%;
+}
+
+body.td-home #deprecation-warning {
+    max-width: 1000px;
+    margin-top: 2.5rem;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+#caseStudies body > #deprecation-warning, body.cid-casestudies > #deprecation-warning, body.cid-community > #deprecation-warning {
+    display: inline-block;
+    vertical-align: top;
+    position: relative;
+    background-color: #326ce5; // Kubernetes blue
+    color: #fff;
+    padding: 0;
+    margin: 0;
+    width: 100vw;
+}
+#caseStudies body > #deprecation-warning, body.cid-casestudies > #deprecation-warning {
+    padding-top: 32px;
+}
+body.cid-partners > #deprecation-warning {
+    padding: 0;
+    margin-right: 0;
+    margin-left: 0;
+    margin-top: 0;
+    width: 100vw;
+}
+body.cid-partners > #deprecation-warning > .content {
+    width: 100%;
+    max-width: initial;
+    margin-right: 0;
+    margin-left: 0;
+    margin-top: 0;
+    padding-left: 5vw;
+    padding-right: 5vw;
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+}
+body.cid-community > #deprecation-warning > .deprecation-warning {
+    margin-left: 20px;
+    margin-right: 20px;
+    color: #faf5b6;
+    background-color: inherit;
+}
+body.cid-community > #deprecation-warning > .deprecation-warning > * {
+    color: inherit;
+    background-color: inherit;
+}
+
+#caseStudies body > #deprecation-warning > .deprecation-warning, body.cid-casestudies > #deprecation-warning > .deprecation-warning {
+    color: inherit;
+    background: inherit;
+    width: 80%;
+    margin: 0;
+    margin-top: 120px;
+    margin-left: auto;
+    margin-right: auto;
+    border-radius: initial;
+}
+#deprecation-warning > .deprecation-warning a {
+    background: transparent;
+    color: inherit;
+    text-decoration: underline;
+}
+
+// search & sidebar
+.td-sidebar {
+  @media only screen and (min-width: 768px) {
+    padding-top: 1.5rem !important;
+
+    .td-sidebar__inner {
+      top: 8.5rem;
+
+      @media only screen and (min-width: 1075px) {
+        top: 6.5rem;
+      }
+    }
+  }
+}
+
+.td-sidebar-nav {
+  & > .td-sidebar-nav__section {
+    padding-top: .5rem;
+    padding-left: 1.5rem;
+  }
+}
+
+.td-sidebar__inner {
+  form.td-sidebar__search {
+
+    .td-sidebar__toggle {
+      &:hover {
+        color: #000000;
+      }
+
+      color: $blue;
+      margin: 1rem;
+    }
+  }
+}
+
+.no-underline {
+  text-decoration: none !important;
+}
+
+.hide {
+  display: none !important;
+}
+
+.td-sidebar-link__page {
+  &#m-docs-search {
+    display: none;
+  }
+
+  &#m-docs-test {
+    display: none;
+  }
+}
+
+//Tutorials
+main.content {
+  position: inherit;
+}
+
+/* BLOG */
+
+.td-blog {
+
+  .widget-link {
+    margin-bottom: 1rem;
+
+    .svg-inline--fa {
+      width: 25px;
+    }
+
+    span {
+      margin-left: 0.5rem;
+    }
+  }
+}
+
+/* COMMUNITY legacy styles */
+/* Leave these in place until localizations are caught up */
+
+.newcommunitywrapper {
+  .news {
+    margin-left: 0;
+
+    @media screen and (min-width: 768px) {
+      margin-left: 10%;
+    }
+  }
+}
+
+/* CASE-STUDIES */
+
+// Many of the case studies have small variations in markup and styles;
+// some issues cannot be addressed due to inlined !important rules.
+#caseStudies {
+  section .cols {
+    margin-left: 11%;
+
+    div {
+      width: initial !important;
+      h2 {
+        margin-top: 1rem;
+      }
+    }
+  }
+}
+
+/* DOCUMENTATION */
+
+/* Don't show lead text */
+body.td-documentation {
+  main {
+    @media only screen {
+       > * {
+         > .lead:first-of-type {
+         display: none;
+        }
+      }
+    }
+  }
+}
+
+/* glossary tooltip */
+.glossary-tooltip {
+  display: inline-block;
+  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
+  color: black;
+  text-decoration: none !important;
+}
+
+@media print {
+  /* Do not print announcements */
+  #announcement {
+    display: none;
+  }
+}
+
+#announcement {
+  > * {
+    color: inherit;
+    background: transparent;
+  }
+
+  a {
+    color: inherit;
+    border-bottom: 1px solid #fff;
+  }
+
+  a:hover {
+    color: inherit;
+    border-bottom: none;
+  }
+}
+
+.header-hero {
+  padding-top: 40px;
+}
+
+#announcement {
+  .announcement-main {
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: 0px;
+
+    // for padding-top see _size.scss
+    padding-bottom: calc(max(2em, 2rem));
+
+    max-width: calc(min(1200px - 8em, 80vw));
+  }
+
+
+  /* always white */
+  h1, h2, h3, h4, h5, h6, p * {
+    color: #ffffff;
+    background: transparent;
+
+    img.event-logo {
+      display: inline-block;
+      max-height: calc(min(80px, 8em));
+      max-width: calc(min(240px, 33vw));
+      float: right;
+    }
+  }
+}
+
+#announcement + .header-hero {
+  padding-top: 2em;
+}
+
+// Extra padding for anything except wide viewports
+@media (min-width: 992px) {
+  #announcement aside { // more specific
+    .announcement-main {
+      padding-top: calc(max(8em, 8rem));
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  #announcement {
+    padding-top: 4rem;
+    padding-bottom: 4rem;
+    .announcement-main, aside .announcement-main {
+      padding-top: calc(min(2rem,2em));
+    }
+  }
+}
+
+@media (max-width: 480px) {
+  #announcement {
+    padding-bottom: 0.5em;
+  }
+  #announcement aside {
+    h1, h2, h3, h4, h5, h6 {
+      img.event-logo {
+        margin-left: auto;
+        margin-right: auto;
+        margin-bottom: 0.75em;
+        display: block;
+        max-height: initial;
+        max-width: calc(min(calc(100vw - 2em), 240px));
+        float: initial;
+      }
+    }
+  }
+}
+
+#announcement + .header-hero.filler {
+  display: none;
+}
+
+@media (min-width: 768px) {
+  #announcement + .header-hero {
+    display: none;
+  }
+}
+
+figure {
+  > figcaption {
+    padding-top: 1em;
+    margin-bottom: 3em;
+  }
+}
+
+// Clamp size for release logos
+figure.release-logo {
+  > figcaption {
+    font-size: 1.8em;
+  }
+  > img {
+    max-width: 100%;
+    max-height: calc(max(40em,min(80vh,70em)));
+    height: auto;
+    width: auto;
+  }
+}
+
+
+// Match Docsy-imposed max width on text body
+@media (min-width: 1200px) {
+  body.td-blog main .td-content > figure {
+    max-width: 80%;
+  }
+}
+
+.td-content {
+  table code {
+    background-color: inherit !important;
+    color: inherit !important;
+    font-size: inherit !important;
+  }
+}
+
+/* Force size constraints on figures */
+figure {
+  &.diagram-small img {
+    max-height: clamp(20mm,12em,80vh);
+    margin-left: auto;
+    margin-right: auto;
+    display: block;
+  }
+  &.diagram-medium img {
+    max-height: clamp(25mm,20em,80vh);
+    margin-left: auto;
+    margin-right: auto;
+    display: block;
+  }
+  &.diagram-large img {
+    max-width: clamp(0vw, 95vw, 100%);
+    max-height: calc(80vh - 8rem);
+  }
+
+  figure + noscript > *{
+    max-width: calc(max(100%, 100vw));
+  }
+}
+
+@media only screen and (min-width: 768px) {
+  figure {
+    &.diagram-small, &.diagram-medium {
+      max-width: 80%;
+    }
+    &.diagram-large {
+      max-width: 100%;
+      width: 100%;
+    }
+    &.diagram-small img {
+      max-width: clamp(30rem, 45ch, 100mm);
+    }
+    &.diagram-medium img {
+      max-width: clamp(50rem, 20ch, 160mm);
+    }
+    &.diagram-large img {
+      max-width: clamp(25vw, 95vw, 100%);
+      max-height: calc(100vh - 10rem);
+    }
+  }
+  figure + noscript > * {
+    max-width: 80%;
+  }
+}
+
+// Indent definition lists
+dl {
+  padding-left: 1.5em;
+
+  // Add vertical space before definitions
+  > *:not(dt) + dt, dt:first-child {
+    margin-top: 1.5em;
+  }
+}
+
+.release-details {
+  padding-left: 2em;
+
+  > :not(p) {
+    font-size: 1.125em;
+  }
+
+  .release-inline-heading, .release-inline-value {
+    display: inline-block
+  }
+
+  .release-inline-value {
+    padding-left: 0.25em;
+  }
+
+  p {
+     margin-top: 1em;
+     margin-bottom: 1em;
+  }
+}
+
+.no-js .mermaid {
+  display: none;
+}
+
+div.alert > em.javascript-required {
+  display: inline-block;
+  min-height: 1.5em;
+  margin: calc(max(4em, ( 8vh + 4em ) / 2)) 0 0.25em 0;
+}
diff --git a/assets/scss/_desktop.scss b/assets/scss/_desktop.scss
new file mode 100755
index 00000000000..abff764d2ff
--- /dev/null
+++ b/assets/scss/_desktop.scss
@@ -0,0 +1,99 @@
+$main-max-width: 1200px;
+$vendor-strip-height: 44px;
+$video-section-height: 550px;
+
+@media screen and (min-width: 1024px) {
+
+  .td-home {
+    .header-hero {
+      #vendorStrip {
+        display: block;
+      }
+    }
+  }
+
+  .td-home {
+
+    section,
+    header,
+    footer {
+      .main-section {
+        max-width: 1000px;
+      }
+    }
+  }
+
+  #oceanNodes {
+    .main-section {
+      position: relative;
+
+      &:nth-child(1) {
+        max-width: 1000px;
+        padding-right: 475px;
+
+        h3,
+        p {
+          text-align: left
+        }
+
+        .image-wrapper {
+          position: absolute;
+          max-width: 48%;
+          transform: translateY(-50%);
+        }
+
+        img {
+          width: 425px;
+        }
+      }
+    }
+  }
+
+  #video {
+    height: $video-section-height;
+    position: relative;
+    background-position: center center;
+    background-size: cover;
+
+    &>.light-text {
+      margin-right: 10%;
+    }
+  }
+
+
+
+  #talkToUs {
+    h4 {
+      br {
+        display: block;
+      }
+    }
+
+    #bigSocial {
+      div {
+        width: calc(25% - 18px);
+      }
+
+      div+div {
+        margin-left: 20px;
+      }
+    }
+
+    .td-home #bigSocial {
+      div {
+        width: calc(33% - 15px);
+      }
+
+      div:nth-child(3) {
+        margin-top: inherit;
+      }
+    }
+  }
+
+  .td-home #caseStudiesWrapper {
+    div {
+      width: 24%;
+      min-height: 260px;
+    }
+  }
+}
\ No newline at end of file
diff --git a/assets/scss/_reset.scss b/assets/scss/_reset.scss
new file mode 100755
index 00000000000..7e3c0bbd3ac
--- /dev/null
+++ b/assets/scss/_reset.scss
@@ -0,0 +1,49 @@
+// CONVENIENCE
+.clear {
+  display: block;
+  clear: both;
+}
+
+.light-text {
+  color: white;
+}
+
+.right {
+  float: right;
+}
+
+.left {
+  float: left;
+}
+
+.center {
+  text-align: center;
+}
+
+//mixins
+@mixin fullScreen {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+}
+
+@mixin pureCenter($left: 50%, $top: 50%) {
+  position: absolute;
+  top: $top;
+  left: $left;
+  transform: translate(-50%, -50%);
+}
+
+@mixin maintain-aspect-ratio(
+  $width-factor: 16,
+  $height-factor: 9,
+  $target-width: 80vw,
+  $target-height: 80vh
+) {
+  width: $target-width;
+  height: $target-width * ($height-factor / $width-factor);
+  max-width: $target-height * ($width-factor / $height-factor);
+  max-height: $target-height;
+}
diff --git a/assets/scss/_size.scss b/assets/scss/_size.scss
new file mode 100755
index 00000000000..14d56201c30
--- /dev/null
+++ b/assets/scss/_size.scss
@@ -0,0 +1,28 @@
+section,
+#vendorStrip {
+  padding-left: $full-width-paddingX;
+  padding-right: $full-width-paddingX;
+}
+
+#hamburger {
+  width: $hamburger-size;
+  height: $hamburger-size;
+}
+
+.header-hero {
+  padding-top: $hero-padding-top;
+}
+
+#vendorStrip {
+  height: $vendor-strip-height;
+  line-height: $vendor-strip-height;
+  font-size: $vendor-strip-font-size;
+}
+
+#announcement {
+  min-height: $hero-padding-top;
+
+  .announcement-main {
+    padding-top: calc(max(8em, 8rem, #{$hero-padding-top} / 3));
+  }
+}
diff --git a/assets/scss/_skin.scss b/assets/scss/_skin.scss
new file mode 100755
index 00000000000..32c94b9dc52
--- /dev/null
+++ b/assets/scss/_skin.scss
@@ -0,0 +1,5 @@
+$blue: #3371e3;
+$light-grey: #f7f7f7;
+$dark-grey: #303030;
+$medium-grey: #4c4c4c;
+$white: #ffffff;
diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss
index d4d505426bd..3f2b3eb770d 100644
--- a/assets/scss/_styles_project.scss
+++ b/assets/scss/_styles_project.scss
@@ -46,3 +46,54 @@ assets/scss/_styles_project.scss
 .card-bottom {
   margin-bottom: 20px;
 }
+
+// Docsy includes the site name by default. This is in place
+// to hide the span text, leaving only the logo svg
+.td-navbar .navbar-brand span:last-child {
+  display: none;
+}
+
+#whyDubbo {
+  padding-top: 90px;
+  padding-bottom: 40px;
+
+  p {
+    line-height: 1.5em;
+    font-size: 0.9em;
+  }
+}
+
+#whyDubbo2 {
+  padding-top: 30px;
+  padding-bottom: 20px;
+
+  p {
+    line-height: 1.5em;
+    font-size: 0.9em;
+  }
+}
+
+.home--top-section {
+  text-align: center;
+}
+
+.c-contacts {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  align-items: center;
+  margin-bottom: -3rem;
+}
+
+.c-contact {
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  padding-bottom: 3rem;
+}
+
+.contact-picture {
+  max-height: 4rem;
+  max-width: 100%;
+}
\ No newline at end of file
diff --git a/assets/scss/_tablet.scss b/assets/scss/_tablet.scss
new file mode 100755
index 00000000000..58149a7dc2e
--- /dev/null
+++ b/assets/scss/_tablet.scss
@@ -0,0 +1,214 @@
+// header
+$full-width-paddingX: 20px;
+
+$main-width: 100%;
+$main-max-width: 100%;
+
+$header-height: 80px;
+
+$logo-width: 180px;
+
+$nav-buttons-margin-left: 30px;
+
+$hamburger-size: 50px;
+
+// main nav
+$main-nav-padding: 140px 0 30px;
+$main-nav-h5-margin-bottom: 1em;
+$main-nav-h3-margin-bottom: 0.6em;
+$nav-box-width: 20%;
+$nav-box-sibling-margin-left: calc(20% / 3);
+$main-nav-main-sibling-margin-top: 60px;
+$main-nav-left-button-size: 50px;
+$main-nav-left-button-font-size: 18px;
+
+// hero
+$hero-padding-top: 116px;
+$headline-wrapper-margin-bottom: 40px;
+$quickstart-button-padding: 0 50px;
+$vendor-strip-font-size: 16px;
+
+//video
+$video-section-height: 400px;
+
+//features
+$features-h3-margin-bottom: 40px;
+$feature-box-margin-bottom: 60px;
+$feature-box-div-margin-bottom: 0;
+$feature-box-div-width: 45%;
+
+////////////////////////////////////////////////////////////////////////////////////////////////////
+////////////////////////////////////////////////////////////////////////////////////////////////////
+////////////////////////////////////////////////////////////////////////////////////////////////////
+
+@media screen and (min-width: 768px) {
+  @import "size";
+
+  #hamburger {
+    display: none;
+  }
+
+  .td-home {
+    #viewDocs,
+    #tryKubernetes {
+      display: inline-block;
+    }
+  }
+
+  #vendorStrip {
+    display: block;
+    text-align: center;
+
+    img {
+      max-height: 24px;
+      vertical-align: middle;
+      margin: 0 30px;
+    }
+  }
+
+  #oceanNodes {
+    h3 {
+      text-align: left;
+      margin-bottom: 18px;
+    }
+
+    main,
+    .main-section {
+      position: relative;
+      clear: both;
+      display: table;
+
+      .content {
+        display: table-cell;
+        position: relative;
+        vertical-align: middle;
+      }
+
+      .image-wrapper {
+        position: absolute;
+        top: 50%;
+        max-width: 25%;
+        max-height: 100%;
+        transform: translateY(-50%);
+        width: 100%;
+      }
+
+      &:nth-child(odd) {
+        padding-right: 210px;
+
+        .image-wrapper {
+          right: 0;
+          text-align: right;
+        }
+      }
+
+      &:nth-child(even) {
+        padding-left: 210px;
+
+        .image-wrapper {
+          left: 0;
+          text-align: left;
+        }
+      }
+
+      &:nth-child(1) {
+        padding-right: 0;
+
+        h3,
+        p {
+          text-align: center;
+        }
+
+        .image-wrapper {
+          position: relative;
+          display: block;
+          float: none;
+          text-align: center;
+          max-width: 100%;
+          transform: none;
+        }
+
+        .content {
+          display: block;
+        }
+      }
+
+      img {
+        width: 100%;
+      }
+    }
+  }
+
+  #video {
+    height: $video-section-height;
+    display: block;
+    height: 500px;
+
+    & > .light-text {
+      display: block;
+      float: right;
+      text-align: left;
+      margin-right: 5%;
+    }
+  }
+
+  #mobileShowVideoButton {
+    display: none;
+  }
+
+  #features {
+    padding-bottom: 60px;
+
+    .feature-box {
+      margin-bottom: 30px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    h3 {
+      margin-bottom: $features-h3-margin-bottom;
+    }
+
+    .feature-box {
+      & > div {
+        width: $feature-box-div-width;
+        margin-bottom: $feature-box-div-margin-bottom;
+      }
+    }
+  }
+
+  #talkToUs {
+    #bigSocial {
+      div {
+        width: calc(50% - 15px);
+      }
+
+      div + div {
+        margin-top: 0;
+      }
+
+      div:nth-child(2) {
+        margin-left: 20px;
+      }
+
+      div:nth-child(4) {
+        margin-left: 20px;
+      }
+
+      a {
+        display: inline-block;
+        color: $blue;
+        font-weight: 400;
+        text-decoration: none;
+      }
+    }
+  }
+
+  .td-home #caseStudiesWrapper {
+    div {
+      width: 48%;
+    }
+  }
+}
diff --git a/assets/scss/_variables_project.scss b/assets/scss/_variables_project.scss
index 12630f6fc70..d8828977350 100644
--- a/assets/scss/_variables_project.scss
+++ b/assets/scss/_variables_project.scss
@@ -1,5 +1,5 @@
 $primary: #2ba3de;
-$secondary: #835be3;
+$secondary: #7faef7;
 
 $enable-gradients: false;
 $enable-rounded: true;
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
index 7dc275e0bf3..935b180de5f 100644
--- a/assets/scss/main.scss
+++ b/assets/scss/main.scss
@@ -73,4 +73,12 @@ footer {
     }
 }
 
-@import "styles_project";
\ No newline at end of file
+@import "styles_project";
+@import "skin";
+@import "base";
+@import "case-studies";
+@import "custom";
+@import "tablet";
+@import "desktop";
+@import "reset";
+@import "size";
\ No newline at end of file
diff --git a/config.toml b/config.toml
index 3700a12f919..dad876f9eff 100644
--- a/config.toml
+++ b/config.toml
@@ -1,4 +1,4 @@
-baseURL = "https://dubbo.apache.org/"
+baseURL = "https://chickenlj.github.io/incubator-dubbo-website/"
 languageCode = "en-us"
 title = "Apache Dubbo"
 theme = ["docsy"]
diff --git a/content/en/_common-resources/images/blocks.svg b/content/en/_common-resources/images/blocks.svg
new file mode 100755
index 00000000000..a129531bec8
--- /dev/null
+++ b/content/en/_common-resources/images/blocks.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 214 210"><defs><style>.cls-1{fill:#316ce6;}.cls-2{fill:#09c1d1;}.cls-3{fill:#c9e9ec;}</style></defs><title>kubernetes_icons</title><rect class="cls-1" x="10.24" y="8.775" width="33.6" height="33.6" rx="4.158"/><rect class="cls-1" x="10.24" y="46.975" width="33.6" height="33.6" rx="4.158"/><rect class="cls-1" x="170.2" y="8.775" width="33.6" height="33.6" rx="4.158"/><rect class="cls-1" x="90.18" y="86.9 [...]
\ No newline at end of file
diff --git a/content/en/_common-resources/images/dubbo-hangzhou-meetup.jpg b/content/en/_common-resources/images/dubbo-hangzhou-meetup.jpg
new file mode 100644
index 00000000000..c604e35592d
Binary files /dev/null and b/content/en/_common-resources/images/dubbo-hangzhou-meetup.jpg differ
diff --git a/content/en/_common-resources/images/flower.svg b/content/en/_common-resources/images/flower.svg
new file mode 100755
index 00000000000..fd287a8889c
--- /dev/null
+++ b/content/en/_common-resources/images/flower.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 210"><defs><style>.cls-1{fill:#c8e8eb;}.cls-2{fill:#fff;}.cls-3{fill:#466bb2;}.cls-4{fill:#1fbdce;}.cls-5{fill:#414141;}.cls-6{fill:#fcfdff;}.cls-7{fill:#d9eff1;}.cls-8,.cls-9{fill:#316ce6;}.cls-9{stroke:#fff;stroke-miterlimit:10;stroke-width:0.89286px;}</style></defs><title>kubernetes_icons</title><circle class="cls-1" cx="482.47419" cy="105.36268" r="70.91195"/><rect class="cls-2" x="446.55791" y= [...]
\ No newline at end of file
diff --git a/content/en/_common-resources/images/kub_video_banner_homepage.jpg b/content/en/_common-resources/images/kub_video_banner_homepage.jpg
new file mode 100755
index 00000000000..e40d92a5036
Binary files /dev/null and b/content/en/_common-resources/images/kub_video_banner_homepage.jpg differ
diff --git a/content/en/_common-resources/images/scalable.svg b/content/en/_common-resources/images/scalable.svg
new file mode 100755
index 00000000000..d8c475146e1
--- /dev/null
+++ b/content/en/_common-resources/images/scalable.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 214 210"><defs><style>.cls-1{fill:#316ce6;}.cls-2{fill:#08c1d1;}.cls-3{fill:#fff;}</style></defs><title>kubernetes_icons</title><rect class="cls-1" x="24.43837" y="69.59095" width="68.66984" height="68.66984" rx="2.37703" transform="translate(-56.27239 71.99817) rotate(-45)"/><rect class="cls-1" x="122.20077" y="69.59095" width="68.66984" height="68.66984" rx="2.37703" transform="translate(-27.63844 141 [...]
\ No newline at end of file
diff --git a/content/en/_common-resources/images/suitcase.svg b/content/en/_common-resources/images/suitcase.svg
new file mode 100755
index 00000000000..2393fa8bcb1
--- /dev/null
+++ b/content/en/_common-resources/images/suitcase.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 214 186"><defs><style>.cls-1{fill:#316ce6;}.cls-2{fill:#09c1d1;}</style></defs><title>kubernetes_icons</title><path class="cls-1" d="M85.0934,25.22919a5.15854,5.15854,0,0,1,5.14346-5.14333h32.4639a5.15854,5.15854,0,0,1,5.14346,5.14333v9.98237h11.86532V24.51681a14.57554,14.57554,0,0,0-14.5328-14.53274H87.94924A14.57555,14.57555,0,0,0,73.41643,24.51681V35.21156h11.677Z"/><path class="cls-1" d="M33.62391,3 [...]
\ No newline at end of file
diff --git a/content/en/_common-resources/index.md b/content/en/_common-resources/index.md
new file mode 100755
index 00000000000..ca03031f1ee
--- /dev/null
+++ b/content/en/_common-resources/index.md
@@ -0,0 +1,3 @@
+---
+headless: true
+---
diff --git a/content/zh/_common-resources/images/blocks.svg b/content/zh/_common-resources/images/blocks.svg
new file mode 100755
index 00000000000..a129531bec8
--- /dev/null
+++ b/content/zh/_common-resources/images/blocks.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 214 210"><defs><style>.cls-1{fill:#316ce6;}.cls-2{fill:#09c1d1;}.cls-3{fill:#c9e9ec;}</style></defs><title>kubernetes_icons</title><rect class="cls-1" x="10.24" y="8.775" width="33.6" height="33.6" rx="4.158"/><rect class="cls-1" x="10.24" y="46.975" width="33.6" height="33.6" rx="4.158"/><rect class="cls-1" x="170.2" y="8.775" width="33.6" height="33.6" rx="4.158"/><rect class="cls-1" x="90.18" y="86.9 [...]
\ No newline at end of file
diff --git a/content/zh/_common-resources/images/flower.svg b/content/zh/_common-resources/images/flower.svg
new file mode 100755
index 00000000000..fd287a8889c
--- /dev/null
+++ b/content/zh/_common-resources/images/flower.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 210"><defs><style>.cls-1{fill:#c8e8eb;}.cls-2{fill:#fff;}.cls-3{fill:#466bb2;}.cls-4{fill:#1fbdce;}.cls-5{fill:#414141;}.cls-6{fill:#fcfdff;}.cls-7{fill:#d9eff1;}.cls-8,.cls-9{fill:#316ce6;}.cls-9{stroke:#fff;stroke-miterlimit:10;stroke-width:0.89286px;}</style></defs><title>kubernetes_icons</title><circle class="cls-1" cx="482.47419" cy="105.36268" r="70.91195"/><rect class="cls-2" x="446.55791" y= [...]
\ No newline at end of file
diff --git a/content/zh/_common-resources/images/kub_video_banner_homepage.jpg b/content/zh/_common-resources/images/kub_video_banner_homepage.jpg
new file mode 100755
index 00000000000..e40d92a5036
Binary files /dev/null and b/content/zh/_common-resources/images/kub_video_banner_homepage.jpg differ
diff --git a/content/zh/_common-resources/images/scalable.svg b/content/zh/_common-resources/images/scalable.svg
new file mode 100755
index 00000000000..d8c475146e1
--- /dev/null
+++ b/content/zh/_common-resources/images/scalable.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 214 210"><defs><style>.cls-1{fill:#316ce6;}.cls-2{fill:#08c1d1;}.cls-3{fill:#fff;}</style></defs><title>kubernetes_icons</title><rect class="cls-1" x="24.43837" y="69.59095" width="68.66984" height="68.66984" rx="2.37703" transform="translate(-56.27239 71.99817) rotate(-45)"/><rect class="cls-1" x="122.20077" y="69.59095" width="68.66984" height="68.66984" rx="2.37703" transform="translate(-27.63844 141 [...]
\ No newline at end of file
diff --git a/content/zh/_common-resources/images/suitcase.svg b/content/zh/_common-resources/images/suitcase.svg
new file mode 100755
index 00000000000..2393fa8bcb1
--- /dev/null
+++ b/content/zh/_common-resources/images/suitcase.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 214 186"><defs><style>.cls-1{fill:#316ce6;}.cls-2{fill:#09c1d1;}</style></defs><title>kubernetes_icons</title><path class="cls-1" d="M85.0934,25.22919a5.15854,5.15854,0,0,1,5.14346-5.14333h32.4639a5.15854,5.15854,0,0,1,5.14346,5.14333v9.98237h11.86532V24.51681a14.57554,14.57554,0,0,0-14.5328-14.53274H87.94924A14.57555,14.57555,0,0,0,73.41643,24.51681V35.21156h11.677Z"/><path class="cls-1" d="M33.62391,3 [...]
\ No newline at end of file
diff --git a/content/zh/_common-resources/index.md b/content/zh/_common-resources/index.md
new file mode 100755
index 00000000000..ca03031f1ee
--- /dev/null
+++ b/content/zh/_common-resources/index.md
@@ -0,0 +1,3 @@
+---
+headless: true
+---
diff --git a/content/zh/_index.html b/content/zh/_index.html
index d487cbc9e8e..fd86b65e4bf 100644
--- a/content/zh/_index.html
+++ b/content/zh/_index.html
@@ -1,69 +1,165 @@
 +++
 title = "Apache Dubbo"
 linkTitle = "Apache Dubbo Website"
-
 +++
-<script>
-    document.getElementById("docsearch").style.display="none";
-</script>
-{{< blocks/cover title="Apache Dubbo" image_anchor="top" height="full" color="secondary" >}}
+
+{{< blocks/cover title="Apache Dubbo" image_anchor="top" height="max" color="secondary" >}}
+
 <div class="mx-auto">
-    <div id="docsearch_zh_home" class="btn btn-lg mr-3 mb-4"></div>
-    <a class="btn btn-lg btn-primary mr-3 mb-4" href='{{< relref "/overview/quickstart/" >}}'>
-        快速开始 <i class="fas fa-arrow-alt-circle-right ml-2"></i>
+    <p class="display-4 lead font-weight-light">一款易用的、提供高性能 RPC 通信及服务治理能力的微服务开发框架</p>
+</div>
+
+<div class="mx-auto mt-3">
+    <!--    <div id="docsearch_zh_home" class="btn btn-lg mr-3 mb-4"></div>-->
+    <a class="btn btn-lg btn-secondary mr-3 mb-4 mt-5" href='{{< relref "/overview/quickstart/" >}}'>
+        了解更多 <i class="fas fa-arrow-alt-circle-right ml-2"></i>
     </a>
-    <a class="btn btn-lg btn-success mr-3 mb-4" href='{{< relref "/overview/what/dubbo3/index.html" >}}'>
-        Dubbo3 速览<i class="fas fa-book-open ml-2"></i>
+    <br/><br/>
+    <div class="mt-2 mb-3 font-weight-normal">选择编程语言后快速体验!</div>
+    <a class="btn btn-lg btn-secondary mr-3 font-weight-normal" href='{{< relref "/docs3-v2/java-sdk/home/" >}}'>
+        Java
     </a>
-    <a class="btn btn-lg btn-secondary mr-3 mb-4" href="https://github.com/apache/dubbo">
-        GITHUB <i class="fab fa-github ml-2 "></i>
+    <a class="btn btn-lg btn-secondary mr-3 font-weight-normal" href='{{< relref "/docs3-v2/golang-sdk/" >}}'>
+        Go
+    </a>
+    <a class="btn btn-lg btn-secondary mr-3 font-weight-normal" href='{{< relref "/docs3-v2/rust-sdk/" >}}'>
+        Rust
+    </a>
+    <a class="btn btn-lg btn-secondary mr-3 font-weight-normal" href='{{< relref "/docs3-v2/erlang-sdk/" >}}'>
+        Node
+    </a>
+    <a class="btn btn-lg btn-secondary mr-3 font-weight-normal" href='{{< relref "/docs3-v2/dubbo-go-pixiu/" >}}'>
+        Python
+    </a>
+    <a class="btn btn-lg btn-secondary mr-3 font-weight-normal" href='{{< relref "/docs3-v2/dubbo-go-pixiu/" >}}'>
+       更多
     </a>
-    <p class="lead mt-5 font-weight-bold">Apache Dubbo 是一款微服务框架,为大规模微服务实践提供高性能 RPC 通信、流量治理、可观测性等解决方案,<br/>
-        涵盖 Java、Golang 等多种语言 SDK 实现。</p>
-</div>
-{{< blocks/link-down color="white" >}}
 {{< /blocks/cover >}}
 
-{{% blocks/lead color="white" %}}
-<h2>下一代云原生微服务框架 - Dubbo3</h2>
+{{% blocks/lead color="white" height="min" id="whyDubbo" %}}
+<h1 class="font-weight-normal">Why Dubbo?</h1>
 <br/>
+<!--<p class="font-weight-light">-->
+<!--    Apache Dubbo 首先是一款 rpc 框架,通过可扩展的传输协议(二进制、基于 HTTP/2 的流式通信、HTTP+JSON 等)为微服务组件提供高性能通信,并通过 SDK 为每种语言提供易于使用的微服务配置、API 与编程范式。孵化于阿里巴巴电商应用场景,Dubbo 核心架构充分考虑了超大规模微服务集群实践诉求,历经众多行业标杆企业生产级流量考验,其构建的企业级微服务治理能力如服务发现、流量治理、可观测、认证鉴权、Service Mesh部署方案可以很好的解决企业微服务实践问题。-->
+<!--</p>-->
 <p class="font-weight-light">
-    3.0 版本的正式发布,标志着 Apache Dubbo 正式进入云原生时代。3.0 在通信协议、服务发现、部署架构、服务治理上都对云原生基础设施进行了全面适配,
-    提供了Triple、应用级服务发现、Dubbo Mesh等核心特性。
-</p>
-<p class="font-weight-light">
-    Dubbo3 已被阿里巴巴、饿了么、钉钉、工商银行、小米等在生产环境广泛采用,学习更多<a href='{{< relref "/users/" >}}'>用户案例</a>
-    {{% /blocks/lead %}}
+    Apache Dubbo 是一款支持多语言的、易用的 web 和 rpc 框架,同时为构建企业级微服务提供服务发现、流量治理、可观测、认证鉴权等能力、工具与最佳实践。
 </p>
+{{% /blocks/lead %}}
 
-{{< blocks/section color="100" >}}
-{{% blocks/feature icon="fas fa-exchange-alt" title="下一代RPC协议 - Triple" url="./docs/concepts/rpc-protocol/" %}}
-Triple 协议是基于 HTTP/2 之上定义的下一代 RPC 通信协议,相比于上一代 Dubbo2 协议,它具有更好的穿透性、通用性、以及面向网关代理场景的高性能表现,
-提供了 Reactive Stream 数据交换模型。Triple 实现了对 gRPC 的完全兼容。
-{{% /blocks/feature %}}
+<!--{{% blocks/lead color="white" height="min" id="whyDubbo2" %}}-->
+<!--<h2>Why Dubbo?</h2>-->
+<!--&lt;!&ndash;<br/>&ndash;&gt;-->
+<!--&lt;!&ndash;<p class="font-weight-light">&ndash;&gt;-->
+<!--&lt;!&ndash;    Apache Dubbo 首先是一款 rpc 框架,通过可扩展的传输协议(二进制、基于 HTTP/2 的流式通信、HTTP+JSON 等)为微服务组件提供高性能通信,并通过 SDK 为每种语言提供易于使用的微服务配置、API 与编程范式。孵化于阿里巴巴电商应用场景,Dubbo 核心架构充分考虑了超大规模微服务集群实践诉求,历经众多行业标杆企业生产级流量考验,其构建的企业级微服务治理能力如服务发现、流量治理、可观测、认证鉴权、Service Mesh部署方案可以很好的解决企业微服务实践问题。&ndash;&gt;-->
+<!--&lt;!&ndash;</p>&ndash;&gt;-->
+<!--&lt;!&ndash;<p class="font-weight-light">&ndash;&gt;-->
+<!--&lt;!&ndash;    gRPC is a modern open source high performance Remote Procedure Call (RPC) framework that can run in any environment. It can efficiently connect services in and across data centers with pluggable support for load balancing, tracing, health checking and authentication. It is also applicable in last mile of distributed computing to connect devices, mobile applications and browsers to backend services.&ndash;&gt;-->
+<!--&lt;!&ndash;    <a href='{{< relref "/users/" >}}'>用户案例</a>&ndash;&gt;-->
+<!--&lt;!&ndash;</p>&ndash;&gt;-->
+<!--{{% /blocks/lead %}}-->
 
-{{% blocks/feature icon="fas fa-share-alt" title="应用级服务发现" url="./docs/concepts/service-discovery/" %}}
-从服务/接口粒度到应用粒度的升级,使得 Dubbo 在集群可伸缩性、连接异构微服务体系上更具优势。应用粒度能以更低的资源消耗支持超百万实例规模集群;
-实现与 Spring Cloud、Kubernetes Service 等异构微服务体系的互联互通。
-{{% /blocks/feature %}}
+{{< blocks/section id="oceanNodes" >}}
+{{% blocks/feature image="flower" %}}
+#### 快速上手,让开发者专注微服务业务开发
 
-{{% blocks/feature icon="fa fa-share-alt" title="Mesh 解决方案" %}}
-依赖 Dubbo Mesh 将 Dubbo 纳入 Istio 等开源 Mesh 治理体系,
-3.0 同时支持 ThinSDK + Sidecar 与 FatSDK(Proxyless)的部署模式,为 Mesh 架构提供了更多选择,尤其对于面临迁移或混合部署的场景,
-Dubbo 提供了统一控制面的能力。
+多语言 SDK 以贴合各自语言特性的方式定义了服务配置、API 与编程范式,通过丰富的生态组件、配套工具等,轻松解决微服务 day0 到 day1 的问题,让开发者专注在微服务业务开发上。
 {{% /blocks/feature %}}
-{{< /blocks/section >}}
 
-{{< blocks/section color="primary" >}}
-{{% blocks/feature icon="far fa-envelope" title="订阅邮件组" %}}
-dev@dubbo.apache.org 参与社区的讨论
+{{% blocks/feature image="scalable" icon="fas fa-share-alt" %}}
+#### 服务治理,随时监测和管控微服务集群状态
+
+提供服务发现、动态配置等基础微服务套件,支持导出多维度的可观测指标并与接入可视化系统如 Dubbo Admin,通过自定义及接入开源 Service Mesh 体系提供强大的流量管控能力。
 {{% /blocks/feature %}}
 
-{{% blocks/feature icon="fab fa-github" title="欢迎参与贡献!" url="https://github.com/apache/dubbo#contributing" %}}
-我们通过 [Pull Request](https://github.com/apache/dubbo/pulls) 在 **GitHub** 上协作。我们期待您的加入!
+{{% blocks/feature image="blocks" icon="fa fa-share-alt" title="Mesh 解决方案" %}}
+#### 超高性能,面向百万实例、QPS 微服务集群设计
+
+以高性能的二进制与 HTTP 通信协议,提供超低延迟的数据传输与高吞吐量 Streaming 通信模型;横向可扩展的、面向百万集群规模调优的地址推送、连接管理、流量调度实现。
 {{% /blocks/feature %}}
 
-{{% blocks/feature icon="fas fa-bullhorn" title="请关注我们的技术博客!" url="/zh/blog" %}}
-我们会在第一时间分享 Dubbo 新发布的特性和使用心得
+{{% blocks/feature image="blocks" icon="fa fa-share-alt" title="Mesh 解决方案" %}}
+#### 企业级解决方案,多年标杆企业生产环境检验
+
+用户群体遍布各行各业,典型代表包括阿里巴巴、工商银行、携程、海尔、金蝶等,云厂商如阿里云、腾讯云、华为云等也推出了基于 Dubbo 的托管云产品。值得关注的是 Dubbo3 在阿里巴巴已全面取代 HSF 实现了框架统一。
 {{% /blocks/feature %}}
+
 {{< /blocks/section >}}
+
+{{< blocks/section id="video" background-image="kub_video_banner_homepage" >}}
+<div class="light-text">
+    <h2>快速掌握基于 Apache Dubbo 的微服务开发与治理</h2>
+    <p>By 刘军,Apache Dubbo PMC Chair</p>
+    <button id="desktopShowVideoButton" onclick="kub.showVideo()">观看视频</button>
+    <br>
+    <br>
+    <a href="#" button id="desktopKCButton">了解 Dubbo3 及多语言体系!</a>
+    <br>
+    <br>
+    <br>
+    <br>
+    <a href="#" button id="desktopKCButton">探索 Dubbo 生态、社区动态并参与线下活动!</a>
+</div>
+<div id="videoPlayer">
+    <iframe data-url="https://www.bilibili.com/video/BV1vB4y1C7wL?t=62.0" frameborder="0" allowfullscreen></iframe>
+    <button id="closeButton"></button>
+</div>
+{{< /blocks/section >}}
+
+{{< blocks/dubbo-features >}}
+
+<div id="resources" class="community-section">
+    <h2>关注社区</h2>
+
+    <p class="community-simple">请通过以下任一或多个渠道关注社区动态,与社区开发者保持密切沟通.</p>
+
+    <div class="container">
+        <div class="community-resource">
+            <a href="">
+                <img src="/imgs/contacts/wechat-account.jpg" alt="Wechat">
+            </a>
+            <a href="">微信公众号</a>
+            <p>官方微信公众号(Apache Dubbo)</p>
+        </div>
+        <div id="slack" class="community-resource">
+            <a href="">
+                <img src="/imgs/contacts/dingtalk.jpg" alt="Dingtalk">
+            </a>
+            <a href="">钉钉群组</a>
+            <p>定期举办线上社区会议或开发者双周会</p>
+        </div>
+        <div id="twitter" class="community-resource">
+            <a href="https://twitter.com/apachedubbo">
+                <img src="/imgs/contacts/twitter.png" alt="Twitter">
+            </a>
+            <a href="https://twitter.com/apachedubbo">Twitter&nbsp;&#9654;</a>
+            <p><em>#apachedubbo</em></p>
+            <p>关于 Apache Dubbo 项目的国际社区动态与业界国际资讯</p>
+        </div>
+
+        <div id="github" class="community-resource">
+            <a href="https://github.com/apache/dubbo-awesome">
+                <img src="/imgs/contacts/github.png" alt="GitHub">
+            </a>
+            <a href="https://github.com/apache/dubbo-awesome">GitHub&nbsp;&#9654;</a>
+            <p>找到对应语言实现或生态项目的 GitHub 地址,即刻参与 Dubbo 项目源码贡献</p>
+        </div>
+    </div>
+</div>
+
+<!--{{< blocks/contact-us >}}-->
+
+
+<!--{{< blocks/section color="primary" >}}-->
+<!--{{% blocks/feature icon="far fa-envelope" title="订阅邮件组" %}}-->
+<!--dev@dubbo.apache.org 参与社区的讨论-->
+<!--{{% /blocks/feature %}}-->
+
+<!--{{% blocks/feature icon="fab fa-github" title="欢迎参与贡献!" url="https://github.com/apache/dubbo#contributing" %}}-->
+<!--我们通过 [Pull Request](https://github.com/apache/dubbo/pulls) 在 **GitHub** 上协作。我们期待您的加入!-->
+<!--{{% /blocks/feature %}}-->
+
+<!--{{% blocks/feature icon="fas fa-bullhorn" title="请关注我们的技术博客!" url="/zh/blog" %}}-->
+<!--我们会在第一时间分享 Dubbo 新发布的特性和使用心得-->
+<!--{{% /blocks/feature %}}-->
+<!--{{< /blocks/section >}}-->
diff --git a/content/zh/docs3-v2/_index.md b/content/zh/docs3-v2/_index.md
index 3b3fe7cf495..26d176de4de 100755
--- a/content/zh/docs3-v2/_index.md
+++ b/content/zh/docs3-v2/_index.md
@@ -5,9 +5,6 @@ title: "SDK 手册"
 linkTitle: "SDK 手册"
 no_list: true
 hide_summary: true
-menu:
-  main:
-    weight: 10
 ---
 > 本文档基于 Dubbo3 编写,由于 Dubbo3 完全兼容 2.7 版本用法,因此文档中的通用功能(除 3.x 版本特有功能外)同样适用于 2.7 版本用户。
 >
diff --git a/content/zh/docs3-v2/java-sdk/_index.md b/content/zh/docs3-v2/java-sdk/_index.md
index e45190f1b12..09d8a96dce0 100755
--- a/content/zh/docs3-v2/java-sdk/_index.md
+++ b/content/zh/docs3-v2/java-sdk/_index.md
@@ -5,16 +5,6 @@ title: "Java"
 weight: 10
 #no_list: true
 #hide_summary: true
-content:
-  - 快速开始:
-    - "[Spring Boot 快速开发 Dubbo 服务](quick-start/spring-boot/)"
-    - "[配置参考手册](reference-manual/config/)"
-  - 高级特性:
-    - "[扩展 Filter、Router 拦截流量](concepts-and-architecture/service-invocation/)"
-  - 参考手册:
-    - "[注册中心配置指南](reference-manual/registry/)"
-  - 升级与兼容性:
-    - "[3.0 迁移指南](upgrades-and-compatibility/)"
+manualLinkRelref: ./home/
+_build: { render: link }
 ---
-
-{{% docs/content_box %}}
diff --git a/content/zh/docs3-v2/java-sdk/home/_index.md b/content/zh/docs3-v2/java-sdk/home/_index.md
new file mode 100755
index 00000000000..1265ada3bf5
--- /dev/null
+++ b/content/zh/docs3-v2/java-sdk/home/_index.md
@@ -0,0 +1,26 @@
+---
+type: docs
+title: "Java 文档主页"
+linkTitle: "主页"
+weight: 1
+no_list: true
+hide_summary: true
+hide_feedback: true
+content:
+  - 快速开始:
+    - name: "[Spring Boot 快速开发 Dubbo 服务](quick-start/spring-boot/)"
+      description: 快速体验 Dubbo Java 微服务开发
+    - name: "[配置参考手册](reference-manual/config/)"
+      description: 配置参考手册
+  - 高级特性:
+    - name: "[扩展 Filter、Router 拦截流量](concepts-and-architecture/service-invocation/)"
+      description: 扩展 Filter、Router 拦截流量
+  - 参考手册:
+    - name: "[注册中心配置指南](reference-manual/registry/)"
+      description: 注册中心配置指南
+  - 升级与兼容性:
+    - name: "[3.0 迁移指南](upgrades-and-compatibility/)"
+      description: 3.0 迁移指南
+---
+
+{{% docs/content_box %}}
diff --git a/content/zh/docs3-v2/java-sdk/home/supported-doc-versions.md b/content/zh/docs3-v2/java-sdk/home/supported-doc-versions.md
new file mode 100755
index 00000000000..eb94a6e3cba
--- /dev/null
+++ b/content/zh/docs3-v2/java-sdk/home/supported-doc-versions.md
@@ -0,0 +1,18 @@
+---
+title: Dubbo Java 文档版本列表
+type: docs
+linkTitle: Dubbo Java 文档版本列表
+weight: 1
+description: "关于 Dubbo 推荐版本及支持计划的更多描述。"
+---
+
+## 最新版本
+* [v3.2.0](#) (本文档)
+
+## 3.x 版本
+* [v3.1.x](../../../docs/)
+* v3.0.x
+
+## 2.x 版本
+* [v2.7.x](../../../docsv2.7/)
+* v2.6.x 及以前
\ No newline at end of file
diff --git a/content/zh/overview/_index.md b/content/zh/overview/_index.md
index eb2cfb9c9c9..88eba59fd36 100755
--- a/content/zh/overview/_index.md
+++ b/content/zh/overview/_index.md
@@ -1,38 +1,5 @@
-
 ---
+title: Dubbo 文档
 type: docs
-title: "入门文档"
-linkTitle: "入门文档"
-no_list: true
-hide_summary: true
-menu:
-  main:
-    weight: 1
----
-> 本文档基于 Dubbo3 编写,由于 Dubbo3 完全兼容 2.7 版本用法,因此文档中的通用功能(除 3.x 版本特有功能外)同样适用于 2.7 版本用户。
->
-> 点此可查看[老版本文档](../docsv2.7)
-> 
-
-
-Dubbo 是一款包含多种语言实现(Java、Golang等)的 RPC 服务框架,在这里可以查看 Dubbo 核心概念以及每种语言实现的 Demo、用户手册等。
-
-* **如果你是第一次接触 Dubbo**,可以通过以下链接快速了解 Dubbo:
-  * [什么是 Dubbo](what/overview)
-  * [用户案例与生态](/zh/users/)
-  * 通过 [**快速开始**](quickstart/) 体验 Dubbo
-* 想了解更多 Dubbo 特性与使用细节?
-  * 选择相应 [**多语言 SDK 实现**](mannual/),并参考**高级特性**或**参考手册**
-* 老用户,想快速了解 **Dubbo 3.0** 相关知识
-  * [3.0 特性一览](what/dubbo3/)
-  * 查看相应[多语言 SDK 实现](mannual/),了解升级与兼容性
-
-#### 相关链接
-Dubbo 的多语言实现及文档:
-
-Language | OS | Compilers/SDK | 参考文档 |
--- | -- | -- | -- |
-Go|Windows, Linux, macOS |Go 1.13+ | [Go](../docs3-v2/golang-sdk) |
-Java|Windows, Linux, macOS |Java 8+ | [Java](../docs3-v2/java-sdk/) |
-Rust | Windwos, Linux, macOS | Rust 2021 edition | [Rust](../docs3-v2/rust-sdk) |
-
+linkTitle: "文档"
+---
\ No newline at end of file
diff --git a/content/zh/overview/core-features/_index.md b/content/zh/overview/core-features/_index.md
new file mode 100755
index 00000000000..ecae677e97c
--- /dev/null
+++ b/content/zh/overview/core-features/_index.md
@@ -0,0 +1,8 @@
+
+---
+type: docs
+title: "核心特性"
+linkTitle: "功能"
+weight: 30
+no_list: true
+---
\ No newline at end of file
diff --git a/content/zh/overview/core-features/configuration.md b/content/zh/overview/core-features/configuration.md
new file mode 100644
index 00000000000..383c132d91b
--- /dev/null
+++ b/content/zh/overview/core-features/configuration.md
@@ -0,0 +1,11 @@
+---
+type: docs
+title: "配置管理"
+linkTitle: "配置管理"
+weight: 31
+description: ""
+feature:
+  title: 配置管理
+  description: >
+    配置管理
+---
\ No newline at end of file
diff --git a/content/zh/overview/core-features/ecosystem.md b/content/zh/overview/core-features/ecosystem.md
new file mode 100644
index 00000000000..9e859d4afd0
--- /dev/null
+++ b/content/zh/overview/core-features/ecosystem.md
@@ -0,0 +1,11 @@
+---
+type: docs
+title: "微服务生态"
+linkTitle: "微服务生态"
+weight: 70
+description: ""
+feature:
+  title: 丰富生态
+  description: >
+    在以下微服务领域提供了众多官方生态适配,包括注册中心、配置中心、网关、限流降级、负载均衡、一致性事务、异步消息、Tracing、可观测等。
+---
\ No newline at end of file
diff --git a/content/zh/overview/core-features/extensibility.md b/content/zh/overview/core-features/extensibility.md
new file mode 100644
index 00000000000..733721d5127
--- /dev/null
+++ b/content/zh/overview/core-features/extensibility.md
@@ -0,0 +1,11 @@
+---
+type: docs
+title: "扩展适配"
+linkTitle: "扩展适配"
+weight: 50
+description: ""
+feature:
+  title: 可扩展性
+  description: >
+    以插件形式定义所有关键微服务组件,用户可基于 Filter、Router、Service Discovery、Configuration 等扩展点对接、适配自建或开源微服务生态。
+---
\ No newline at end of file
diff --git a/content/zh/overview/core-features/load-balance.md b/content/zh/overview/core-features/load-balance.md
new file mode 100644
index 00000000000..421b990aa65
--- /dev/null
+++ b/content/zh/overview/core-features/load-balance.md
@@ -0,0 +1,7 @@
+---
+type: docs
+title: "负载均衡"
+linkTitle: "负载均衡"
+weight: 20
+description: ""
+---
\ No newline at end of file
diff --git a/content/zh/overview/core-features/observability.md b/content/zh/overview/core-features/observability.md
new file mode 100644
index 00000000000..5221be558d2
--- /dev/null
+++ b/content/zh/overview/core-features/observability.md
@@ -0,0 +1,12 @@
+---
+type: docs
+title: "观测服务"
+linkTitle: "观测服务"
+weight: 60
+description: ""
+feature:
+  title: 可观测性
+  description: >
+    多维度的可观测指标(Metrics、Tracing、Access Logs)帮助了解服务运行状态,为持续定位、维护和优化服务提供依据,Admin 控制台帮助实现数据指标可视化展示
+
+---
\ No newline at end of file
diff --git a/content/zh/overview/core-features/protocols.md b/content/zh/overview/core-features/protocols.md
new file mode 100644
index 00000000000..924ce46275e
--- /dev/null
+++ b/content/zh/overview/core-features/protocols.md
@@ -0,0 +1,11 @@
+---
+type: docs
+title: "通信协议"
+linkTitle: "通信协议"
+weight: 40
+description: ""
+feature:
+  title: 多种通信协议
+  description: >
+    根据技术栈与业务需求选择合适的通信协议,如 gRPC/Triple (HTTP/2)、TCP 二进制、HTTP+JSON 等,切换协议只需要修改一行配置,同时支持单个端口上的多协议发布
+---
\ No newline at end of file
diff --git a/content/zh/overview/core-features/security.md b/content/zh/overview/core-features/security.md
new file mode 100644
index 00000000000..05c2d683c10
--- /dev/null
+++ b/content/zh/overview/core-features/security.md
@@ -0,0 +1,11 @@
+---
+type: docs
+title: "认证鉴权"
+linkTitle: "认证鉴权"
+weight: 80
+description: ""
+feature:
+  title: 认证鉴权
+  description: >
+    支持基于 TLS 的传输链路认证与加密通信、基于 token 的请求级别认证,支持基于服务来源和目的地的鉴权检查,可结合证书分发等分布式组件构建零信任分布式体系。
+---
\ No newline at end of file
diff --git a/content/zh/overview/core-features/service-definition.md b/content/zh/overview/core-features/service-definition.md
new file mode 100644
index 00000000000..68ea877e4e0
--- /dev/null
+++ b/content/zh/overview/core-features/service-definition.md
@@ -0,0 +1,11 @@
+---
+type: docs
+title: "定义服务"
+linkTitle: "定义服务"
+weight: 1
+description: ""
+feature:
+  title: 定义服务
+  description: >
+    定义服务
+---
\ No newline at end of file
diff --git a/content/zh/overview/core-features/service-discovery.md b/content/zh/overview/core-features/service-discovery.md
new file mode 100644
index 00000000000..82f83e498db
--- /dev/null
+++ b/content/zh/overview/core-features/service-discovery.md
@@ -0,0 +1,12 @@
+---
+type: docs
+title: "服务发现"
+linkTitle: "服务发现"
+weight: 10
+description: ""
+feature:
+  title: 服务发现
+  description: >
+     服务地址注册与发现是构建微服务体系的关键,Dubbo 默认提供 Nacos、Zookeeper 等注册中心并支持自定义扩展;Dubbo3 应用级服务发现模型解决 Dubbo2 规模瓶颈问题的同时,实现了与 Kubernetes Native Service 及 Spring Cloud 等微服务体系的互通。
+---
+
diff --git a/content/zh/overview/core-features/service-mesh.md b/content/zh/overview/core-features/service-mesh.md
new file mode 100644
index 00000000000..f31e942ba72
--- /dev/null
+++ b/content/zh/overview/core-features/service-mesh.md
@@ -0,0 +1,11 @@
+---
+type: docs
+title: "服务网格"
+linkTitle: "服务网格"
+weight: 90
+description: ""
+feature:
+  title: 服务网格(Service Mesh)
+  description: >
+    多种形态数据面支持,包括以 Thin SDK 模式与 Envoy 等一起部署或以 Proxyless 模式独立部署,所有模式均可以开源标准方式无缝接入 Istio、Consul 等服务治理体系。
+---
\ No newline at end of file
diff --git a/content/zh/overview/core-features/traffic-management.md b/content/zh/overview/core-features/traffic-management.md
new file mode 100644
index 00000000000..3d0802fec3c
--- /dev/null
+++ b/content/zh/overview/core-features/traffic-management.md
@@ -0,0 +1,11 @@
+---
+type: docs
+title: "流量管控"
+linkTitle: "流量管控"
+weight: 30
+description: ""
+feature:
+  title: 流量管控
+  description: >
+    Dubbo 支持通过一系列流量规则控制服务与服务之间的流量分布与行为,基于这些规则可以实现基于权重流量分布、流量灰度验证、金丝雀发布、按请求参数的路由、超时、限流降级等能力。
+---
\ No newline at end of file
diff --git a/content/zh/overview/history-version/_index.md b/content/zh/overview/history-version/_index.md
deleted file mode 100644
index 4de40519479..00000000000
--- a/content/zh/overview/history-version/_index.md
+++ /dev/null
@@ -1,38 +0,0 @@
-
----
-type: docs
-title: "查看历史版本文档"
-linkTitle: "查看历史版本文档"
-weight: 100000
----
-
-{{< blocks/section color="white" height="auto">}}
-<div class="td-content list-page">
-    <div class="lead"></div><header class="article-meta">
-    </header><div class="row">
-    <div class="col-sm col-md-6 mb-4 mb-md-0">
-        <div class="h-100 card shadow" href="#">
-            <div class="card-body">
-                <h4 class="card-title">
-                    <a target="_blank" href='{{< relref "../../docs/" >}}'>Early 3.0 Version</a>
-                </h4>
-                <p>早期 3.0 版本文档</p>
-            </div>
-        </div>
-    </div>
-    <div class="col-sm col-md-6 mb-4 mb-md-0">
-        <div class="h-100 card shadow">
-            <div class="card-body">
-                <h4 class="card-title">
-                    <a target="_blank" href='{{< relref "../../docsv2.7/" >}}'>2.7.x Version</a>
-                </h4>
-                <p>2.7.x 版本文档</p>
-            </div>
-        </div>
-    </div>
-
-</div>
-<hr>
-</div>
-
-{{< /blocks/section >}}
\ No newline at end of file
diff --git a/content/zh/overview/home/_index.md b/content/zh/overview/home/_index.md
new file mode 100644
index 00000000000..44d052e7c1e
--- /dev/null
+++ b/content/zh/overview/home/_index.md
@@ -0,0 +1,53 @@
+---
+title: Dubbo 文档
+noedit: true
+type: docs
+linkTitle: "主页"
+main_menu: true
+weight: 10
+hide_feedback: true
+no_list: true
+hide_summary: true
+menu:
+  main:
+    name: "文档"
+    weight: 1
+description: Apache Dubbo 是一款支持多语言的、易用的 web 和 rpc 框架,同时为构建企业级微服务提供服务发现、流量治理、可观测、认证鉴权等能力、工具与最佳实践。
+content:
+  - 快速开始:
+    - name: "[了解 Dubbo](quick-start/spring-boot/)"
+      description: aaa
+      links:
+        - "[aaa](reference-manual/config/)"
+    - name: "[尝试用 Dubbo 开发](quick-start/spring-boot/)"
+      description: aaa
+      links:
+        - "[aaa](reference-manual/config/)"
+    - name: "[体验 Dubbo 服务治理](quick-start/spring-boot/)"
+      description: aaa
+      links:
+        - "[aaa](reference-manual/config/)"
+    - name: "[Dubbo 微服务生态](quick-start/spring-boot/)"
+      description: aaa
+      links:
+        - "[aaa](reference-manual/config/)"
+    - name: "[用 Admin 观测服务](quick-start/spring-boot/)"
+      description: aaa
+      links:
+        - "[aaa](reference-manual/config/)"
+    - name: "[Mesh 架构下的 Dubbo](quick-start/spring-boot/)"
+      description: aaa
+      links:
+        - "[aaa](reference-manual/config/)"
+---
+* **如果你是第一次接触 Dubbo**,可以通过以下链接快速了解 Dubbo:
+  * [什么是 Dubbo](what/overview)
+  * [用户案例与生态](/zh/users/)
+  * 通过 [**快速开始**](quickstart/) 体验 Dubbo
+* 想了解更多 Dubbo 特性与使用细节?
+  * 选择相应 [**多语言 SDK 实现**](mannual/),并参考**高级特性**或**参考手册**
+* 老用户,想快速了解 **Dubbo 3.0** 相关知识
+  * [3.0 特性一览](what/dubbo3/)
+  * 查看相应[多语言 SDK 实现](mannual/),了解升级与兼容性
+
+{{% docs/document_box %}}
diff --git a/content/zh/overview/mannual/Java.md b/content/zh/overview/mannual/Java.md
index d8afd3a153b..1664014a4d9 100644
--- a/content/zh/overview/mannual/Java.md
+++ b/content/zh/overview/mannual/Java.md
@@ -4,7 +4,7 @@ title: "Java SDK"
 linkTitle: "Java"
 description: ""
 weight: 1
-manualLinkRelref: ../../docs3-v2/java-sdk/
+manualLinkRelref: ../../docs3-v2/java-sdk/home/
 manualLinkTarget: _blank
 _build: { render: link }
 ---
diff --git a/content/zh/overview/mannual/_index.md b/content/zh/overview/mannual/_index.md
index c461b563de4..4962d47e5d2 100755
--- a/content/zh/overview/mannual/_index.md
+++ b/content/zh/overview/mannual/_index.md
@@ -1,10 +1,14 @@
 
 ---
 type: docs
-title: "用户手册"
-linkTitle: "用户手册"
-weight: 5
+title: "SDK 用户手册"
+linkTitle: "SDK"
+weight: 50
 no_list: true
+feature:
+  title: 多语言 SDK
+  description: >
+    Dubbo3 提供了 Java、Golang、Rust、Node.js、Python 等多语言 SDK 实现,支持基于 IDL 的跨语言服务定义和基于 Protobuf、Json 的数据编码
 ---
 
 
@@ -17,7 +21,7 @@ no_list: true
             <div class="h-100 card shadow" href="#">
                 <div class="card-body">
                     <h4 class="card-title">
-                        <a target="_blank" href='{{< relref "../../docs3-v2/java-sdk" >}}'>Java SDK</a>
+                        <a target="_blank" href='{{< relref "../../docs3-v2/java-sdk/home/" >}}'>Java SDK</a>
                     </h4>
                     <p>Java SDK</p>
                 </div>
diff --git a/content/zh/overview/quickstart/_index.md b/content/zh/overview/quickstart/_index.md
index 3a017a36144..fcb827412a3 100755
--- a/content/zh/overview/quickstart/_index.md
+++ b/content/zh/overview/quickstart/_index.md
@@ -2,8 +2,8 @@
 ---
 type: docs
 title: "快速开始"
-linkTitle: "快速开始"
-weight: 2
+linkTitle: "入门"
+weight: 15
 ---
 
 {{< blocks/section color="white" height="auto">}}
diff --git a/content/zh/overview/tasks/_index.md b/content/zh/overview/tasks/_index.md
index 302f98ae523..79463ab4850 100755
--- a/content/zh/overview/tasks/_index.md
+++ b/content/zh/overview/tasks/_index.md
@@ -1,10 +1,10 @@
 
 ---
 type: docs
-title: "示例实践"
-linkTitle: "示例实践"
+title: "跟随示例任务学习 Dubbo"
+linkTitle: "任务"
 description: ""
-weight: 4
+weight: 40
 ---
 
 
diff --git a/content/zh/overview/tasks/api-management/_index.md b/content/zh/overview/tasks/api-management/_index.md
new file mode 100755
index 00000000000..0921f3d55a4
--- /dev/null
+++ b/content/zh/overview/tasks/api-management/_index.md
@@ -0,0 +1,8 @@
+---
+type: docs
+title: "API管理"
+linkTitle: "API管理"
+description: ""
+weight: 20
+no_list: true
+---
diff --git a/content/zh/overview/tasks/ecosystem/_index.md b/content/zh/overview/tasks/ecosystem/_index.md
index a1e1f331eb8..78a6aaa6ddb 100755
--- a/content/zh/overview/tasks/ecosystem/_index.md
+++ b/content/zh/overview/tasks/ecosystem/_index.md
@@ -1,10 +1,10 @@
 
 ---
 type: docs
-title: "微服务治理"
-linkTitle: "微服务治理"
+title: "服务治理"
+linkTitle: "服务治理"
 description: "演示如何解决 Dubbo 微服务治理问题,如事务、全链路跟踪、限流降级等。"
-weight: 6
+weight: 40
 no_list: true
 ---
 
diff --git a/content/zh/overview/tasks/kubernetes/_index.md b/content/zh/overview/tasks/kubernetes/_index.md
index a9d49bb72c7..59edd416e0c 100755
--- a/content/zh/overview/tasks/kubernetes/_index.md
+++ b/content/zh/overview/tasks/kubernetes/_index.md
@@ -1,11 +1,15 @@
 
 ---
 type: docs
-title: "Kubernetes 部署方案"
-linkTitle: "Kubernetes 部署方案"
+title: "Kubernetes"
+linkTitle: "Kubernetes"
 description: "演示如何将 Dubbo 部署到 Kubernetes 并复用 Kubernetes Native Service。"
-weight: 2
+weight: 60
 no_list: true
+feature:
+  title: 云原生友好
+  description: >
+    Kubernetes 部署、Kubernetes 原生服务、Service Mesh。
 ---
 
 {{< blocks/section color="white" height="auto">}}
diff --git a/content/zh/overview/tasks/mesh/_index.md b/content/zh/overview/tasks/mesh/_index.md
index 2b4b8ace935..e4508705895 100755
--- a/content/zh/overview/tasks/mesh/_index.md
+++ b/content/zh/overview/tasks/mesh/_index.md
@@ -1,10 +1,10 @@
 
 ---
 type: docs
-title: "Mesh 部署方案"
-linkTitle: "Mesh 部署方案"
+title: "服务网格"
+linkTitle: "服务网格"
 description: "演示多种部署形态的 Dubbo Mesh 解决方案,以及 Dubbo Mesh 如何帮助用户实现架构的平滑迁移。 "
-weight: 2
+weight: 70
 no_list: true
 ---
 
diff --git a/content/zh/overview/tasks/microservice-demo/_index.md b/content/zh/overview/tasks/microservice-demo/_index.md
new file mode 100755
index 00000000000..e385bd0fc4b
--- /dev/null
+++ b/content/zh/overview/tasks/microservice-demo/_index.md
@@ -0,0 +1,8 @@
+---
+type: docs
+title: "示例初始化"
+linkTitle: "示例初始化"
+description: ""
+weight: 10
+no_list: true
+---
diff --git a/content/zh/overview/tasks/migration/_index.md b/content/zh/overview/tasks/migration/_index.md
index 826b7eb2e7d..fc8a16a4aad 100755
--- a/content/zh/overview/tasks/migration/_index.md
+++ b/content/zh/overview/tasks/migration/_index.md
@@ -1,10 +1,10 @@
 
 ---
 type: docs
-title: "如何平滑的迁移到 Dubbo3 的新功能"
-linkTitle: "迁移到 Dubbo3"
+title: "版本迁移"
+linkTitle: "版本迁移"
 description: "演示如何以最小代价迁移到 Dubbo3 并开启各项新特性。"
-weight: 5
+weight: 80
 no_list: true
 ---
 
diff --git a/content/zh/overview/tasks/traffic-management/_index.md b/content/zh/overview/tasks/traffic-management/_index.md
index 45a76d86d64..d47b46f992e 100755
--- a/content/zh/overview/tasks/traffic-management/_index.md
+++ b/content/zh/overview/tasks/traffic-management/_index.md
@@ -1,10 +1,10 @@
 
 ---
 type: docs
-title: "流量治理"
-linkTitle: "流量治理"
+title: "流量管控"
+linkTitle: "流量管控"
 description: "演示 Dubbo 流量治理特性的使用方式。"
-weight: 1
+weight: 30
 no_list: true
 ---
 
diff --git a/content/zh/overview/tasks/triple/_index.md b/content/zh/overview/tasks/triple/_index.md
index 43f1c11d5a1..4ee14bc3ca4 100755
--- a/content/zh/overview/tasks/triple/_index.md
+++ b/content/zh/overview/tasks/triple/_index.md
@@ -1,10 +1,10 @@
 
 ---
 type: docs
-title: "Triple 使用示例"
-linkTitle: "Triple 使用示例"
+title: "通信协议"
+linkTitle: "通信协议"
 description: "演示 Triple 跨语言通信、Streaming 等能力"
-weight: 2
+weight: 50
 no_list: true
 ---
 
diff --git a/content/zh/overview/what/_index.md b/content/zh/overview/what/_index.md
index e20641ef598..160a87107ab 100644
--- a/content/zh/overview/what/_index.md
+++ b/content/zh/overview/what/_index.md
@@ -1,8 +1,8 @@
 ---
 type: docs
-title: "什么是 Dubbo"
-linkTitle: "什么是 Dubbo"
-weight: 1
+title: "了解 Dubbo 概念及优势"
+linkTitle: "介绍"
+weight: 20
 description: ""
 ---
     
diff --git a/content/zh/overview/what/extensibility.md b/content/zh/overview/what/extensibility.md
index cbb3eed6305..2e7538c2af5 100644
--- a/content/zh/overview/what/extensibility.md
+++ b/content/zh/overview/what/extensibility.md
@@ -2,7 +2,7 @@
 type: docs
 title: "可扩展性"
 linkTitle: "可扩展性"
-weight: 4
+weight: 60
 ---
 
 ## 扩展设计理念
diff --git a/content/zh/overview/what/observability.md b/content/zh/overview/what/observability.md
new file mode 100644
index 00000000000..b7318cf4151
--- /dev/null
+++ b/content/zh/overview/what/observability.md
@@ -0,0 +1,6 @@
+---
+type: docs
+title: "可观测性"
+linkTitle: "可观测性"
+weight: 50
+---
\ No newline at end of file
diff --git a/content/zh/overview/what/overview.md b/content/zh/overview/what/overview.md
index d7c60499df4..b78694f04cd 100644
--- a/content/zh/overview/what/overview.md
+++ b/content/zh/overview/what/overview.md
@@ -1,8 +1,8 @@
 ---
 type: docs
-title: "Dubbo 简介"
+title: "了解 Dubbo 特点"
 linkTitle: "了解 Dubbo"
-weight: 1
+weight: 10
 description: ""
 ---
 
diff --git a/content/zh/overview/what/dubbo3.md b/content/zh/overview/what/performance.md
similarity index 99%
rename from content/zh/overview/what/dubbo3.md
rename to content/zh/overview/what/performance.md
index d79254b66e3..c5c122190f6 100644
--- a/content/zh/overview/what/dubbo3.md
+++ b/content/zh/overview/what/performance.md
@@ -1,9 +1,9 @@
 
 ---
 type: docs
-title: "3.0 速览"
-linkTitle: "3.0 速览"
-weight: 2
+title: "高性能"
+linkTitle: "高性能"
+weight: 30
 ---
 
 本文将带你快速了解 Dubbo3 的设计背景、总体架构与核心特性、与典型用户如阿里巴巴 HSF2 的关系等。也可以通过如下部分了解更多:
diff --git a/content/zh/overview/what/ecosystem.md b/content/zh/overview/what/traffic-management.md
similarity index 96%
rename from content/zh/overview/what/ecosystem.md
rename to content/zh/overview/what/traffic-management.md
index 52bb0e32af7..ea8295dcd12 100644
--- a/content/zh/overview/what/ecosystem.md
+++ b/content/zh/overview/what/traffic-management.md
@@ -1,8 +1,8 @@
 ---
 type: docs
-title: "Dubbo 生态"
-linkTitle: "生态系统"
-weight: 5
+title: "流量治理"
+linkTitle: "流量治理"
+weight: 40
 ---
 
 ### Dashboard
diff --git a/content/zh/overview/what/architecture.md b/content/zh/overview/what/usability.md
similarity index 99%
rename from content/zh/overview/what/architecture.md
rename to content/zh/overview/what/usability.md
index 78e63cac2eb..8e6560d654c 100644
--- a/content/zh/overview/what/architecture.md
+++ b/content/zh/overview/what/usability.md
@@ -1,8 +1,8 @@
 ---
 type: docs
-title: "概念与架构"
-linkTitle: "概念与架构"
-weight: 3
+title: "易用性"
+linkTitle: "易用性"
+weight: 20
 ---
 ## RPC 通信
 Dubbo3 的 Triple 协议构建在 HTTP/2 协议之上,因此具有更好的穿透性与通用性,Triple 协议兼容 gRPC,提供 Request Response、Request Streaming、Response Streaming、Bi-directional Streaming 等通信模型;从 Triple 协议开始,Dubbo 还支持基于 IDL 的服务定义。
diff --git a/content/zh/overview/what/usecases.md b/content/zh/overview/what/usecases.md
deleted file mode 100644
index 8f17c6c042d..00000000000
--- a/content/zh/overview/what/usecases.md
+++ /dev/null
@@ -1,9 +0,0 @@
----
-type: docs
-title: "用户案例"
-linkTitle: "用户案例"
-weight: 6
-manualLinkRelref: ../../../users/
-manualLinkTarget: _blank
-_build: { render: link }
----
\ No newline at end of file
diff --git a/data/announcements/scheduled.yaml b/data/announcements/scheduled.yaml
new file mode 100755
index 00000000000..1225e838328
--- /dev/null
+++ b/data/announcements/scheduled.yaml
@@ -0,0 +1,43 @@
+---
+# For an example of the format, see commented structure below.
+#
+# Changes require approval from @kubernetes/steering-committee
+
+# The order matters: if two schedules overlap, the announcement
+# that comes FIRST in the following list takes precedence.
+#
+#announcements:
+#  - startTime: 2020-01-01T00:00:00
+#    # startTime is optional
+#    endTime: 2021-04-01T00:00:00
+#    # endTime is required
+#    style: >-
+#      color: #fff; background: #000;
+#    # style is optional; if using, set both color and background
+#    # choose a dark color for the background
+#    title: "Sample 1 announcement"
+#    # title is optional
+#    message: |
+#      Message *one*.
+#      [Hyperlink](https://en.wikipedia.org/wiki/Hyperlink).
+#    # message is required. You can use Markdown.
+#  - name: Sample 2
+#    startTime: 2020-01-01T00:00:00
+#    endTime: 2021-04-01T00:00:00
+#    message: |
+#      Message *two*.
+
+# leave the "announcements" key in place
+announcements:
+- name: Dubbo Meetup Shanghai
+  startTime: 2022-10-10T00:00:00
+  endTime: 2022-10-20T18:00:00
+  style: >-
+    background: linear-gradient(90deg, rgb(253, 225, 203) 0%, rgb(236, 107, 67) 75%, rgb(236, 107, 67) 100%);
+    color: #000;
+  title: |
+    <img src ="/imgs/announcements/meetup-1130.svg" style="float: right; height: 80px;" />
+    <a href= "#">Dubbo Meetup Shanghai</a> <em>《Dubbo 规划》</em>.
+  message: |
+    地点上海,今年首次线下 Meetup,欢迎关注!<br />
+    2022-11-30.
diff --git a/data/contacts.yaml b/data/contacts.yaml
new file mode 100644
index 00000000000..c2ee9711b5a
--- /dev/null
+++ b/data/contacts.yaml
@@ -0,0 +1,20 @@
+- name: Apache Dubbo Wechat
+  link: dubbo.apache.org
+  image: apache-dubbo-wechat-account.png
+  quote: >
+    The Apache Dubbo official Wechat account.
+- name: Apache Dubbo Dingtalk Group
+  link: dubbo.apache.org
+  image: apache-dubbo-dingtalk-group.png
+  quote: >
+    The Apache Dubbo official Dingtalk group.
+- name: Apache Dubbo Twitter Account
+  link: dubbo.apache.org
+  image: apache-dubbo-twitter.png
+  quote: >
+    The Apache Dubbo official Twitter account.
+- name: Apache Dubbo Github Repositories
+  link: https://github.com/apache/dubbo-awesome/
+  image: apache-dubbo-github.png
+  quote: >
+    The Apache Dubbo Github Repository.
\ No newline at end of file
diff --git a/data/i18n/en/en.toml b/data/i18n/en/en.toml
new file mode 100755
index 00000000000..d25202b89cc
--- /dev/null
+++ b/data/i18n/en/en.toml
@@ -0,0 +1,278 @@
+# i18n strings for the English (main) site.
+# NOTE: Please keep the entries in alphabetical order when editing
+[caution]
+other = "Caution:"
+
+[cleanup_heading]
+other = "Cleaning up"
+
+[community_events_calendar]
+other = "Events Calendar"
+
+[community_forum_name]
+other = "Forum"
+
+[community_github_name]
+other = "GitHub"
+
+[community_slack_name]
+other = "Slack"
+
+[community_stack_overflow_name]
+other = "Stack Overflow"
+
+[community_twitter_name]
+other = "Twitter"
+
+[community_youtube_name]
+other = "YouTube"
+
+[deprecation_title]
+other = "You are viewing documentation for Kubernetes version:"
+
+[deprecation_warning]
+other = " documentation is no longer actively maintained. The version you are currently viewing is a static snapshot. For up-to-date documentation, see the "
+
+[deprecation_file_warning]
+other = "Deprecated"
+
+[dockershim_message]
+other = """Dockershim has been removed from the Kubernetes project as of release 1.24. Read the <a href="/dockershim">Dockershim Removal FAQ</a> for further details."""
+
+[docs_label_browse]
+other = "Browse Docs"
+
+[docs_label_contributors]
+other = "Contributors"
+
+[docs_label_i_am]
+other = "I AM..."
+
+[docs_label_users]
+other = "Users"
+
+[docs_version_current]
+other = "(this documentation)"
+
+[docs_version_latest_heading]
+other = "Latest version"
+
+[docs_version_other_heading]
+other = "Older versions"
+
+[end_of_life]
+other = "End of Life:"
+
+[envvars_heading]
+other = "Environment variables"
+
+[error_404_were_you_looking_for]
+other = "Were you looking for:"
+
+[examples_heading]
+other = "Examples"
+
+[feature_state]
+other = "FEATURE STATE:"
+
+[feedback_heading]
+other = "Feedback"
+
+[feedback_no]
+other = "No"
+
+[feedback_question]
+other = "Was this page helpful?"
+
+[feedback_yes]
+other = "Yes"
+
+[inline_list_separator]
+other = ","
+
+[input_placeholder_email_address]
+other = "email address"
+
+[javascript_required]
+other = "JavaScript must be [enabled](https://www.enable-javascript.com/) to view this content"
+
+[latest_release]
+other = "Latest Release:"
+
+[latest_version]
+other = "latest version."
+
+[layouts_blog_pager_prev]
+other = "<< Prev"
+
+[layouts_blog_pager_next]
+other = "Next >>"
+
+[layouts_case_studies_list_tell]
+other = "Tell your story"
+
+[layouts_docs_glossary_aka]
+other = "Also known as"
+
+[layouts_docs_glossary_description]
+other = "This glossary is intended to be a comprehensive, standardized list of Kubernetes terminology. It includes technical terms that are specific to Kubernetes, as well as more general terms that provide useful context."
+
+[layouts_docs_glossary_deselect_all]
+other = "Deselect all"
+
+[layouts_docs_glossary_click_details_after]
+other = "indicators below to get a longer explanation for any particular term."
+
+[layouts_docs_glossary_click_details_before]
+other = "Click on the"
+
+[layouts_docs_glossary_filter]
+other = "Filter terms according to their tags"
+
+[layouts_docs_glossary_select_all]
+other = "Select all"
+
+[layouts_docs_partials_feedback_improvement]
+other = "suggest an improvement"
+
+[layouts_docs_partials_feedback_issue]
+other = "Open an issue in the GitHub repo if you want to "
+
+[layouts_docs_partials_feedback_or]
+other = "or"
+
+[layouts_docs_partials_feedback_problem]
+other = "report a problem"
+
+[layouts_docs_partials_feedback_thanks]
+other = "Thanks for the feedback. If you have a specific, answerable question about how to use Kubernetes, ask it on"
+
+[layouts_docs_search_fetching]
+other = "Fetching results..."
+
+[main_by]
+other = "by"
+
+[main_cncf_project]
+other = """We are a <a href="https://cncf.io/">CNCF</a> graduated project</p>"""
+
+[main_community_explore]
+other = "Explore the community"
+
+[main_contribute]
+other = "Contribute"
+
+[main_copyright_notice]
+other = """The Linux Foundation &reg;. All rights reserved. The Linux Foundation has registered trademarks and uses trademarks. For a list of trademarks of The Linux Foundation, please see our <a href="https://www.linuxfoundation.org/trademark-usage" class="light-text">Trademark Usage page</a>"""
+
+[main_documentation_license]
+other = """The Kubernetes Authors | Documentation Distributed under <a href="https://git.k8s.io/website/LICENSE" class="light-text">CC BY 4.0</a>"""
+
+[main_github_invite]
+other = "Interested in hacking on the core Kubernetes code base?"
+
+[main_github_view_on]
+other = "View On GitHub"
+
+[main_dubbo_features]
+other = "Core Features"
+
+[main_kubeweekly_baseline]
+other = "Interested in receiving the latest Kubernetes news? Sign up for KubeWeekly."
+
+[main_kubernetes_past_link]
+other = "View past newsletters"
+
+[main_kubeweekly_signup]
+other = "Subscribe"
+
+[main_page_history]
+other ="Page History"
+
+[main_page_last_modified_on]
+other = "Page last modified on"
+
+[main_read_about]
+other = "Read about"
+
+[main_read_more]
+other = "Read more"
+
+[not_applicable]
+# Localization teams: it's OK to use a longer text here
+other = "n/a"
+
+[note]
+other = "Note:"
+
+[objectives_heading]
+other = "Objectives"
+
+[options_heading]
+other = "Options"
+
+[outdated_blog__message]
+other = "This article is more than one year old. Older articles may contain outdated content. Check that the information in the page has not become incorrect since its publication."
+
+[post_create_issue]
+other = "Create an issue"
+
+[prerequisites_heading]
+other = "Before you begin"
+
+[previous_patches]
+other = "Patch Releases:"
+
+[release_date_after]
+other = ")"
+
+[release_date_before]
+other = "(released: "
+
+# See https://gohugo.io/functions/format/#gos-layout-string
+# Use a suitable format for your locale
+[release_date_format]
+other = "2006-01-02"
+
+[seealso_heading]
+other = "See Also"
+
+[subscribe_button]
+other = "Subscribe"
+
+[synopsis_heading]
+other = "Synopsis"
+
+[thirdparty_message]
+other = """This section links to third party projects that provide functionality required by Kubernetes. The Kubernetes project authors aren't responsible for these projects, which are listed alphabetically. To add a project to this list, read the <a href="/docs/contribute/style/content-guide/#third-party-content">content guide</a> before submitting a change. <a href="#third-party-content-disclaimer">More information.</a>"""
+
+[thirdparty_message_edit_disclaimer]
+other="""Third party content advice"""
+
+
+[thirdparty_message_single_item]
+other = """&#128711; This item links to a third party project or product that is not part of Kubernetes itself. <a class="alert-more-info" href="#third-party-content-disclaimer">More information</a>"""
+
+[thirdparty_message_disclaimer]
+other = """<p>Items on this page refer to third party products or projects that provide functionality required by Kubernetes. The Kubernetes project authors aren't responsible for those third-party products or projects. See the <a href="https://github.com/cncf/foundation/blob/master/website-guidelines.md" target="_blank">CNCF website guidelines</a> for more details.</p><p>You should read the <a href="/docs/contribute/style/content-guide/#third-party-content">content guide</a> before prop [...]
+
+[ui_search_placeholder]
+other = "Search"
+
+[version_check_mustbe]
+other = "Your Kubernetes server must be version "
+
+[version_check_mustbeorlater]
+other = "Your Kubernetes server must be at or later than version "
+
+[version_check_tocheck]
+other = "To check the version, enter "
+
+[version_menu]
+other = "Versions"
+
+[warning]
+other = "Warning:"
+
+[whatsnext_heading]
+other = "What's next"
diff --git a/data/i18n/zh/zh.toml b/data/i18n/zh/zh.toml
new file mode 100755
index 00000000000..0ac632c0344
--- /dev/null
+++ b/data/i18n/zh/zh.toml
@@ -0,0 +1,286 @@
+# i18n strings for the Chinese version of the site (https://kubernetes.io/zh/)
+# 注意:修改此文件时请维持字符串名称的字母顺序并与英文版保持一致
+
+[caution]
+other = "注意:"
+
+[cleanup_heading]
+other = "清理现场"
+
+[community_events_calendar]
+other = "事件日历"
+
+[community_forum_name]
+other = "论坛"
+
+[community_github_name]
+other = "GitHub"
+
+[community_slack_name]
+other = "Slack"
+
+[community_stack_overflow_name]
+other = "Stack Overflow"
+
+[community_twitter_name]
+other = "Twitter"
+
+[community_youtube_name]
+other = "YouTube"
+
+[deprecation_title]
+other = "您正在查看 Kubernetes 版本的文档:"
+
+[deprecation_warning]
+other = " 版本的文档已不再维护。您现在看到的版本来自于一份静态的快照。如需查阅最新文档,请点击"
+
+[deprecation_file_warning]
+other = "已过时"
+
+[docs_label_browse]
+other = "浏览文档"
+
+[docs_label_contributors]
+other = "贡献者"
+
+[docs_label_i_am]
+other = "我是..."
+
+[docs_label_users]
+other = "用户"
+
+[docs_version_current]
+other = "(本文档)"
+
+[docs_version_latest_heading]
+other = "最新版本"
+
+[docs_version_other_heading]
+other = "较老版本"
+
+[end_of_life]
+other = "不再支持:"
+
+[envvars_heading]
+other = "环境变量"
+
+[error_404_were_you_looking_for]
+other = "你是否在搜索:"
+
+[examples_heading]
+other = "示例"
+
+[feature_state]
+other = "特性状态:"
+
+[feedback_heading]
+other = "反馈"
+
+[feedback_no]
+other = "否"
+
+[feedback_question]
+other = "此页是否对您有帮助?"
+
+[feedback_yes]
+other = "是"
+
+[inline_list_separator]
+other = "、"
+
+[input_placeholder_email_address]
+other = "电子邮件地址"
+
+[javascript_required]
+other = "必须[启用](https://www.enable-javascript.com/) JavaScript 才能查看此页内容"
+
+[latest_release]
+other = "最新发行版本:"
+
+
+[latest_version]
+other = "最新版本。"
+
+[layouts_blog_pager_prev]
+other = "<< 前一篇"
+
+[layouts_blog_pager_next]
+other = "后一篇 >>"
+
+[layouts_case_studies_list_tell]
+other = "分享您的故事"
+
+[layouts_docs_glossary_aka]
+other = "亦称作"
+
+[layouts_docs_glossary_description]
+other = "此术语表旨在提供 Kubernetes 术语的完整、标准列表。其中包含特定于 Kubernetes 的技术术语以及能够构造有用的语境的一般性术语。"
+
+[layouts_docs_glossary_deselect_all]
+other = "全不选"
+
+[layouts_docs_glossary_click_details_after]
+other = "下面的指示符号获取特定术语的更为完整的描述。"
+
+[layouts_docs_glossary_click_details_before]
+other = "点击"
+
+[layouts_docs_glossary_filter]
+other = "根据标签过滤术语"
+
+[layouts_docs_glossary_select_all]
+other = "全选"
+
+[layouts_docs_partials_feedback_improvement]
+other = "提出改进建议"
+
+[layouts_docs_partials_feedback_issue]
+other = "在 GitHub 仓库上登记新的问题"
+
+[layouts_docs_partials_feedback_or]
+other = "或者"
+
+[layouts_docs_partials_feedback_problem]
+other = "报告问题"
+
+[layouts_docs_partials_feedback_thanks]
+other = "感谢反馈。如果您有一个关于如何使用 Kubernetes 的特定的、需要答案的问题,可以访问"
+
+[layouts_docs_search_fetching]
+other = "检索结果中.."
+
+[main_by]
+other = "由:"
+
+[main_cncf_project]
+other = """我们是 <a href="https://cncf.io/">CNCF</a> 毕业项目</p>"""
+
+[main_community_explore]
+other = "了解社区"
+
+[main_contribute]
+other = "贡献"
+
+[main_copyright_notice]
+other = """Linux 基金会&reg;。保留所有权利。Linux 基金会已注册并使用商标。如需了解 Linux 基金会的商标列表,请访问<a href="https://www.linuxfoundation.org/trademark-usage" class="light-text">商标使用页面</a>"""
+
+[main_documentation_license]
+other = """The Kubernetes 作者 | 文档发布基于 <a href="https://git.k8s.io/website/LICENSE" class="light-text">CC BY 4.0</a> 授权许可"""
+
+[main_edit_this_page]
+other = "修改本页面"
+
+[main_github_create_an_issue]
+other = "报告 GitHub 问题"
+
+[main_github_invite]
+other = "想要修改 Kubernetes 的核心源代码?"
+
+[main_github_view_on]
+other = "在 GitHub 上查看"
+
+[main_dubbo_features]
+other = "核心特性"
+
+[main_kubeweekly_baseline]
+other = "想要获取最新的 Kubernetes 新闻么?请订阅 KubeWeekly。"
+
+[main_kubernetes_past_link]
+other = "浏览往期的周报"
+
+[main_kubeweekly_signup]
+other = "订阅"
+
+[main_page_history]
+other ="页面历史"
+
+[main_page_last_modified_on]
+other = "页面最后一次修改于"
+
+[main_read_about]
+other = "了解"
+
+[main_read_more]
+other = "进一步了解"
+
+[not_applicable]
+# Localization teams: it's OK to use a longer text here
+other = "不适用"
+
+[note]
+other = "说明:"
+
+[objectives_heading]
+other = "教程目标"
+
+[options_heading]
+other = "选项"
+
+[outdated_blog__message]
+other = "Kubernetes 项目认为此文章已经过时,因为该页面已经超过一年未修订。请检查页面中的信息是否从发表以来尚未变得不正确。"
+
+[outdated_blog__title]
+other = "过时的文章"
+
+[post_create_child_page]
+other = "创建子页面"
+
+[post_create_issue]
+other = "登记问题"
+
+[prerequisites_heading]
+other = "准备开始"
+
+[previous_patches]
+other = "补丁版本:"
+
+[release_date_after]
+other = ")"
+
+# See https://gohugo.io/functions/format/#gos-layout-string
+# Use a suitable format for your locale
+[release_date_format]
+other = "2006-01-02"
+
+[seealso_heading]
+other = "另请参见"
+
+[subscribe_button]
+other = "订阅"
+
+[synopsis_heading]
+other = "简介"
+
+[thirdparty_message]
+other = """本部分链接到提供 Kubernetes 所需功能的第三方项目。Kubernetes 项目作者不负责这些项目。此页面遵循<a href="https://github.com/cncf/foundation/blob/master/website-guidelines.md" target="_blank">CNCF 网站指南</a>,按字母顺序列出项目。要将项目添加到此列表中,请在提交更改之前阅读<a href="/docs/contribute/style/content-guide/#third-party-content">内容指南</a>。"""
+
+[thirdparty_message_edit_disclaimer]
+other="""第三方内容建议"""
+
+[thirdparty_message_single_item]
+other = """&#128711; 本条目指向第三方项目或产品,而该项目(产品)不是 Kubernetes 的一部分。<a class="alert-more-info" href="#third-party-content-disclaimer">更多信息</a>"""
+
+[thirdparty_message_disclaimer]
+other = """<p>本页面中的条目引用了第三方产品或项目,这些产品(项目)提供了 Kubernetes 所需的功能。Kubernetes 项目的开发人员不对这些第三方产品(项目)负责。请参阅<a href="https://github.com/cncf/foundation/blob/master/website-guidelines.md" target="_blank">CNCF 网站指南</a>了解更多细节。</p><p>在提交更改建议,向本页添加新的第三方链接之前,你应该先阅读<a href="/zh/docs/contribute/style/content-guide/#third-party-content">内容指南。</p>"""
+
+[ui_search_placeholder]
+other = "搜索"
+
+[version_check_mustbe]
+other = "您的 Kubernetes 服务器版本必须是 "
+
+[version_check_mustbeorlater]
+other = "您的 Kubernetes 服务器版本必须不低于版本 "
+
+[version_check_tocheck]
+other = "要获知版本信息,请输入 "
+
+[version_menu]
+other = "版本列表"
+
+[warning]
+other = "警告:"
+
+[whatsnext_heading]
+other = "接下来"
+
diff --git a/i18n/en.toml b/i18n/en.toml
new file mode 100755
index 00000000000..d25202b89cc
--- /dev/null
+++ b/i18n/en.toml
@@ -0,0 +1,278 @@
+# i18n strings for the English (main) site.
+# NOTE: Please keep the entries in alphabetical order when editing
+[caution]
+other = "Caution:"
+
+[cleanup_heading]
+other = "Cleaning up"
+
+[community_events_calendar]
+other = "Events Calendar"
+
+[community_forum_name]
+other = "Forum"
+
+[community_github_name]
+other = "GitHub"
+
+[community_slack_name]
+other = "Slack"
+
+[community_stack_overflow_name]
+other = "Stack Overflow"
+
+[community_twitter_name]
+other = "Twitter"
+
+[community_youtube_name]
+other = "YouTube"
+
+[deprecation_title]
+other = "You are viewing documentation for Kubernetes version:"
+
+[deprecation_warning]
+other = " documentation is no longer actively maintained. The version you are currently viewing is a static snapshot. For up-to-date documentation, see the "
+
+[deprecation_file_warning]
+other = "Deprecated"
+
+[dockershim_message]
+other = """Dockershim has been removed from the Kubernetes project as of release 1.24. Read the <a href="/dockershim">Dockershim Removal FAQ</a> for further details."""
+
+[docs_label_browse]
+other = "Browse Docs"
+
+[docs_label_contributors]
+other = "Contributors"
+
+[docs_label_i_am]
+other = "I AM..."
+
+[docs_label_users]
+other = "Users"
+
+[docs_version_current]
+other = "(this documentation)"
+
+[docs_version_latest_heading]
+other = "Latest version"
+
+[docs_version_other_heading]
+other = "Older versions"
+
+[end_of_life]
+other = "End of Life:"
+
+[envvars_heading]
+other = "Environment variables"
+
+[error_404_were_you_looking_for]
+other = "Were you looking for:"
+
+[examples_heading]
+other = "Examples"
+
+[feature_state]
+other = "FEATURE STATE:"
+
+[feedback_heading]
+other = "Feedback"
+
+[feedback_no]
+other = "No"
+
+[feedback_question]
+other = "Was this page helpful?"
+
+[feedback_yes]
+other = "Yes"
+
+[inline_list_separator]
+other = ","
+
+[input_placeholder_email_address]
+other = "email address"
+
+[javascript_required]
+other = "JavaScript must be [enabled](https://www.enable-javascript.com/) to view this content"
+
+[latest_release]
+other = "Latest Release:"
+
+[latest_version]
+other = "latest version."
+
+[layouts_blog_pager_prev]
+other = "<< Prev"
+
+[layouts_blog_pager_next]
+other = "Next >>"
+
+[layouts_case_studies_list_tell]
+other = "Tell your story"
+
+[layouts_docs_glossary_aka]
+other = "Also known as"
+
+[layouts_docs_glossary_description]
+other = "This glossary is intended to be a comprehensive, standardized list of Kubernetes terminology. It includes technical terms that are specific to Kubernetes, as well as more general terms that provide useful context."
+
+[layouts_docs_glossary_deselect_all]
+other = "Deselect all"
+
+[layouts_docs_glossary_click_details_after]
+other = "indicators below to get a longer explanation for any particular term."
+
+[layouts_docs_glossary_click_details_before]
+other = "Click on the"
+
+[layouts_docs_glossary_filter]
+other = "Filter terms according to their tags"
+
+[layouts_docs_glossary_select_all]
+other = "Select all"
+
+[layouts_docs_partials_feedback_improvement]
+other = "suggest an improvement"
+
+[layouts_docs_partials_feedback_issue]
+other = "Open an issue in the GitHub repo if you want to "
+
+[layouts_docs_partials_feedback_or]
+other = "or"
+
+[layouts_docs_partials_feedback_problem]
+other = "report a problem"
+
+[layouts_docs_partials_feedback_thanks]
+other = "Thanks for the feedback. If you have a specific, answerable question about how to use Kubernetes, ask it on"
+
+[layouts_docs_search_fetching]
+other = "Fetching results..."
+
+[main_by]
+other = "by"
+
+[main_cncf_project]
+other = """We are a <a href="https://cncf.io/">CNCF</a> graduated project</p>"""
+
+[main_community_explore]
+other = "Explore the community"
+
+[main_contribute]
+other = "Contribute"
+
+[main_copyright_notice]
+other = """The Linux Foundation &reg;. All rights reserved. The Linux Foundation has registered trademarks and uses trademarks. For a list of trademarks of The Linux Foundation, please see our <a href="https://www.linuxfoundation.org/trademark-usage" class="light-text">Trademark Usage page</a>"""
+
+[main_documentation_license]
+other = """The Kubernetes Authors | Documentation Distributed under <a href="https://git.k8s.io/website/LICENSE" class="light-text">CC BY 4.0</a>"""
+
+[main_github_invite]
+other = "Interested in hacking on the core Kubernetes code base?"
+
+[main_github_view_on]
+other = "View On GitHub"
+
+[main_dubbo_features]
+other = "Core Features"
+
+[main_kubeweekly_baseline]
+other = "Interested in receiving the latest Kubernetes news? Sign up for KubeWeekly."
+
+[main_kubernetes_past_link]
+other = "View past newsletters"
+
+[main_kubeweekly_signup]
+other = "Subscribe"
+
+[main_page_history]
+other ="Page History"
+
+[main_page_last_modified_on]
+other = "Page last modified on"
+
+[main_read_about]
+other = "Read about"
+
+[main_read_more]
+other = "Read more"
+
+[not_applicable]
+# Localization teams: it's OK to use a longer text here
+other = "n/a"
+
+[note]
+other = "Note:"
+
+[objectives_heading]
+other = "Objectives"
+
+[options_heading]
+other = "Options"
+
+[outdated_blog__message]
+other = "This article is more than one year old. Older articles may contain outdated content. Check that the information in the page has not become incorrect since its publication."
+
+[post_create_issue]
+other = "Create an issue"
+
+[prerequisites_heading]
+other = "Before you begin"
+
+[previous_patches]
+other = "Patch Releases:"
+
+[release_date_after]
+other = ")"
+
+[release_date_before]
+other = "(released: "
+
+# See https://gohugo.io/functions/format/#gos-layout-string
+# Use a suitable format for your locale
+[release_date_format]
+other = "2006-01-02"
+
+[seealso_heading]
+other = "See Also"
+
+[subscribe_button]
+other = "Subscribe"
+
+[synopsis_heading]
+other = "Synopsis"
+
+[thirdparty_message]
+other = """This section links to third party projects that provide functionality required by Kubernetes. The Kubernetes project authors aren't responsible for these projects, which are listed alphabetically. To add a project to this list, read the <a href="/docs/contribute/style/content-guide/#third-party-content">content guide</a> before submitting a change. <a href="#third-party-content-disclaimer">More information.</a>"""
+
+[thirdparty_message_edit_disclaimer]
+other="""Third party content advice"""
+
+
+[thirdparty_message_single_item]
+other = """&#128711; This item links to a third party project or product that is not part of Kubernetes itself. <a class="alert-more-info" href="#third-party-content-disclaimer">More information</a>"""
+
+[thirdparty_message_disclaimer]
+other = """<p>Items on this page refer to third party products or projects that provide functionality required by Kubernetes. The Kubernetes project authors aren't responsible for those third-party products or projects. See the <a href="https://github.com/cncf/foundation/blob/master/website-guidelines.md" target="_blank">CNCF website guidelines</a> for more details.</p><p>You should read the <a href="/docs/contribute/style/content-guide/#third-party-content">content guide</a> before prop [...]
+
+[ui_search_placeholder]
+other = "Search"
+
+[version_check_mustbe]
+other = "Your Kubernetes server must be version "
+
+[version_check_mustbeorlater]
+other = "Your Kubernetes server must be at or later than version "
+
+[version_check_tocheck]
+other = "To check the version, enter "
+
+[version_menu]
+other = "Versions"
+
+[warning]
+other = "Warning:"
+
+[whatsnext_heading]
+other = "What's next"
diff --git a/i18n/zh.toml b/i18n/zh.toml
new file mode 100755
index 00000000000..0ac632c0344
--- /dev/null
+++ b/i18n/zh.toml
@@ -0,0 +1,286 @@
+# i18n strings for the Chinese version of the site (https://kubernetes.io/zh/)
+# 注意:修改此文件时请维持字符串名称的字母顺序并与英文版保持一致
+
+[caution]
+other = "注意:"
+
+[cleanup_heading]
+other = "清理现场"
+
+[community_events_calendar]
+other = "事件日历"
+
+[community_forum_name]
+other = "论坛"
+
+[community_github_name]
+other = "GitHub"
+
+[community_slack_name]
+other = "Slack"
+
+[community_stack_overflow_name]
+other = "Stack Overflow"
+
+[community_twitter_name]
+other = "Twitter"
+
+[community_youtube_name]
+other = "YouTube"
+
+[deprecation_title]
+other = "您正在查看 Kubernetes 版本的文档:"
+
+[deprecation_warning]
+other = " 版本的文档已不再维护。您现在看到的版本来自于一份静态的快照。如需查阅最新文档,请点击"
+
+[deprecation_file_warning]
+other = "已过时"
+
+[docs_label_browse]
+other = "浏览文档"
+
+[docs_label_contributors]
+other = "贡献者"
+
+[docs_label_i_am]
+other = "我是..."
+
+[docs_label_users]
+other = "用户"
+
+[docs_version_current]
+other = "(本文档)"
+
+[docs_version_latest_heading]
+other = "最新版本"
+
+[docs_version_other_heading]
+other = "较老版本"
+
+[end_of_life]
+other = "不再支持:"
+
+[envvars_heading]
+other = "环境变量"
+
+[error_404_were_you_looking_for]
+other = "你是否在搜索:"
+
+[examples_heading]
+other = "示例"
+
+[feature_state]
+other = "特性状态:"
+
+[feedback_heading]
+other = "反馈"
+
+[feedback_no]
+other = "否"
+
+[feedback_question]
+other = "此页是否对您有帮助?"
+
+[feedback_yes]
+other = "是"
+
+[inline_list_separator]
+other = "、"
+
+[input_placeholder_email_address]
+other = "电子邮件地址"
+
+[javascript_required]
+other = "必须[启用](https://www.enable-javascript.com/) JavaScript 才能查看此页内容"
+
+[latest_release]
+other = "最新发行版本:"
+
+
+[latest_version]
+other = "最新版本。"
+
+[layouts_blog_pager_prev]
+other = "<< 前一篇"
+
+[layouts_blog_pager_next]
+other = "后一篇 >>"
+
+[layouts_case_studies_list_tell]
+other = "分享您的故事"
+
+[layouts_docs_glossary_aka]
+other = "亦称作"
+
+[layouts_docs_glossary_description]
+other = "此术语表旨在提供 Kubernetes 术语的完整、标准列表。其中包含特定于 Kubernetes 的技术术语以及能够构造有用的语境的一般性术语。"
+
+[layouts_docs_glossary_deselect_all]
+other = "全不选"
+
+[layouts_docs_glossary_click_details_after]
+other = "下面的指示符号获取特定术语的更为完整的描述。"
+
+[layouts_docs_glossary_click_details_before]
+other = "点击"
+
+[layouts_docs_glossary_filter]
+other = "根据标签过滤术语"
+
+[layouts_docs_glossary_select_all]
+other = "全选"
+
+[layouts_docs_partials_feedback_improvement]
+other = "提出改进建议"
+
+[layouts_docs_partials_feedback_issue]
+other = "在 GitHub 仓库上登记新的问题"
+
+[layouts_docs_partials_feedback_or]
+other = "或者"
+
+[layouts_docs_partials_feedback_problem]
+other = "报告问题"
+
+[layouts_docs_partials_feedback_thanks]
+other = "感谢反馈。如果您有一个关于如何使用 Kubernetes 的特定的、需要答案的问题,可以访问"
+
+[layouts_docs_search_fetching]
+other = "检索结果中.."
+
+[main_by]
+other = "由:"
+
+[main_cncf_project]
+other = """我们是 <a href="https://cncf.io/">CNCF</a> 毕业项目</p>"""
+
+[main_community_explore]
+other = "了解社区"
+
+[main_contribute]
+other = "贡献"
+
+[main_copyright_notice]
+other = """Linux 基金会&reg;。保留所有权利。Linux 基金会已注册并使用商标。如需了解 Linux 基金会的商标列表,请访问<a href="https://www.linuxfoundation.org/trademark-usage" class="light-text">商标使用页面</a>"""
+
+[main_documentation_license]
+other = """The Kubernetes 作者 | 文档发布基于 <a href="https://git.k8s.io/website/LICENSE" class="light-text">CC BY 4.0</a> 授权许可"""
+
+[main_edit_this_page]
+other = "修改本页面"
+
+[main_github_create_an_issue]
+other = "报告 GitHub 问题"
+
+[main_github_invite]
+other = "想要修改 Kubernetes 的核心源代码?"
+
+[main_github_view_on]
+other = "在 GitHub 上查看"
+
+[main_dubbo_features]
+other = "核心特性"
+
+[main_kubeweekly_baseline]
+other = "想要获取最新的 Kubernetes 新闻么?请订阅 KubeWeekly。"
+
+[main_kubernetes_past_link]
+other = "浏览往期的周报"
+
+[main_kubeweekly_signup]
+other = "订阅"
+
+[main_page_history]
+other ="页面历史"
+
+[main_page_last_modified_on]
+other = "页面最后一次修改于"
+
+[main_read_about]
+other = "了解"
+
+[main_read_more]
+other = "进一步了解"
+
+[not_applicable]
+# Localization teams: it's OK to use a longer text here
+other = "不适用"
+
+[note]
+other = "说明:"
+
+[objectives_heading]
+other = "教程目标"
+
+[options_heading]
+other = "选项"
+
+[outdated_blog__message]
+other = "Kubernetes 项目认为此文章已经过时,因为该页面已经超过一年未修订。请检查页面中的信息是否从发表以来尚未变得不正确。"
+
+[outdated_blog__title]
+other = "过时的文章"
+
+[post_create_child_page]
+other = "创建子页面"
+
+[post_create_issue]
+other = "登记问题"
+
+[prerequisites_heading]
+other = "准备开始"
+
+[previous_patches]
+other = "补丁版本:"
+
+[release_date_after]
+other = ")"
+
+# See https://gohugo.io/functions/format/#gos-layout-string
+# Use a suitable format for your locale
+[release_date_format]
+other = "2006-01-02"
+
+[seealso_heading]
+other = "另请参见"
+
+[subscribe_button]
+other = "订阅"
+
+[synopsis_heading]
+other = "简介"
+
+[thirdparty_message]
+other = """本部分链接到提供 Kubernetes 所需功能的第三方项目。Kubernetes 项目作者不负责这些项目。此页面遵循<a href="https://github.com/cncf/foundation/blob/master/website-guidelines.md" target="_blank">CNCF 网站指南</a>,按字母顺序列出项目。要将项目添加到此列表中,请在提交更改之前阅读<a href="/docs/contribute/style/content-guide/#third-party-content">内容指南</a>。"""
+
+[thirdparty_message_edit_disclaimer]
+other="""第三方内容建议"""
+
+[thirdparty_message_single_item]
+other = """&#128711; 本条目指向第三方项目或产品,而该项目(产品)不是 Kubernetes 的一部分。<a class="alert-more-info" href="#third-party-content-disclaimer">更多信息</a>"""
+
+[thirdparty_message_disclaimer]
+other = """<p>本页面中的条目引用了第三方产品或项目,这些产品(项目)提供了 Kubernetes 所需的功能。Kubernetes 项目的开发人员不对这些第三方产品(项目)负责。请参阅<a href="https://github.com/cncf/foundation/blob/master/website-guidelines.md" target="_blank">CNCF 网站指南</a>了解更多细节。</p><p>在提交更改建议,向本页添加新的第三方链接之前,你应该先阅读<a href="/zh/docs/contribute/style/content-guide/#third-party-content">内容指南。</p>"""
+
+[ui_search_placeholder]
+other = "搜索"
+
+[version_check_mustbe]
+other = "您的 Kubernetes 服务器版本必须是 "
+
+[version_check_mustbeorlater]
+other = "您的 Kubernetes 服务器版本必须不低于版本 "
+
+[version_check_tocheck]
+other = "要获知版本信息,请输入 "
+
+[version_menu]
+other = "版本列表"
+
+[warning]
+other = "警告:"
+
+[whatsnext_heading]
+other = "接下来"
+
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
new file mode 100644
index 00000000000..9c352cd8102
--- /dev/null
+++ b/layouts/_default/baseof.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<html lang="{{ .Site.Language.Lang }}" class="{{.Params.class}} no-js">
+{{- if eq hugo.Environment "preview" -}}
+  <!-- deploy preview -->
+{{- end -}}
+  <head {{- if hugo.IsProduction -}}class="live-site"{{- end -}}>
+    {{ partial "head.html" . }}
+  </head>
+  <body class="td-{{ .Kind }}{{- if ne (lower .Params.cid) "" -}}{{- printf " cid-%s" (lower .Params.cid) -}}{{- end -}}">
+    <header>
+      {{ partial "navbar.html" . }}
+      {{ block "announcement" . }}
+        {{ partial "announcement.html" . }}
+      {{ end }}
+		{{ block "hero" . }}
+		<!--  HERO  -->
+<!--		<section class="header-hero text-white pb-4 light-text">-->
+<!--			<div class="main-section">-->
+<!--				<div id="headlineWrapper">-->
+<!--					<h1>{{ block "hero-title" . }}{{ .Params.bigheader | default .Title }}{{ end }}</h1>-->
+<!--				</div>-->
+<!--				{{ block "hero-more" . }}{{ end }}-->
+<!--			</div>-->
+<!--		</section>-->
+		{{ block "post-hero" . }}
+    </header>
+      {{ block "deprecated" . }}
+        {{ if or .IsHome ( eq .Params.cid "partners" ) ( eq .Params.cid "community" ) }}
+          {{ partial "deprecation-warning.html" . }}
+        {{ end }}
+      {{ end }}
+    {{ end }}
+		{{ end }}
+    <div class="td-outer">
+      <main role="main" class="td-main">
+        {{ block "main" . }}{{ end }}
+      </main>
+    </div>
+    {{ partialCached "footer.html" . }}
+    {{ partialCached "scripts.html" . }}
+  </body>
+</html>
\ No newline at end of file
diff --git a/layouts/_default/search.html b/layouts/_default/search.html
new file mode 100644
index 00000000000..e8aa22ba295
--- /dev/null
+++ b/layouts/_default/search.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<html lang="{{ .Site.Language.Lang }}" class="{{.Params.class}} no-js">
+  <head>
+    {{ partial "head.html" . }}
+  </head>
+  <body class="td-search {{- if ne (lower .Params.cid) "" -}}{{- printf " cid-%s" (lower .Params.cid) -}}{{- end -}}">
+    <header>
+      {{ partial "navbar.html" . }}
+      {{ block "announcement" . }}
+        {{ partial "announcement.html" . }}
+      {{ end }}
+      {{ block "hero" . }}
+        <section class="header-hero filler">
+        </section>
+         {{ block "hero-more" . }}{{ end }}
+      {{ end }}
+    </header>
+    <div class="td-outer">
+      <main role="main" class="td-main">
+        <section class="row td-search-result">
+          <div class="col-12 col-md-4 offset-md-2">
+            <form class="td-sidebar__search d-flex align-items-center">
+              {{ partial "search-input.html" . }}
+            </form>
+          </div>
+          <div class="col-12 col-md-8 offset-md-2">
+              <h2 class="ml-4">{{ .Title }}</h2>
+          {{ if .Site.Params.gcs_engine_id }}
+          <script>
+            (function() {
+            var cx = '{{ . }}';
+            var gcse = document.createElement('script');
+            gcse.type = 'text/javascript';
+            gcse.async = true;
+            gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
+            var s = document.getElementsByTagName('script')[0];
+            s.parentNode.insertBefore(gcse, s);
+            })();
+          </script>
+          <gcse:searchresults-only></gcse:searchresults-only>
+          {{ else if .Site.Params.k8s_search }}
+          <script src="{{ "js/search.js" | relURL }}"></script>
+          <gcse:searchresults-only linktarget="_parent">
+            <div id="bing-results-container">{{ T "layouts_docs_search_fetching" }}</div>
+            <div id="bing-pagination-container"></div>
+          </gcse:searchresults-only>
+          {{ end }}
+          </div>
+        </section>
+      </main>
+    </div>
+    {{ partial "footer.html" . }}
+    {{ partialCached "scripts.html" . }}
+  </body>
+</html>
diff --git a/layouts/blog/baseof.html b/layouts/blog/baseof.html
new file mode 100755
index 00000000000..b3c2729df2e
--- /dev/null
+++ b/layouts/blog/baseof.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<html lang="{{ .Site.Language.Lang }}" class="no-js">
+  <head>
+    {{ partial "head.html" . }}
+    <title>{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ with .Title }}{{ . }} | {{ end }}{{ .Site.Title }}{{ end }}</title>
+  </head>
+  <body class="td-{{ .Kind }} td-documentation">
+    <header>
+      {{ partial "navbar.html" . }}
+      {{ partial "announcement.html" . }}
+      {{ block "hero" . }}
+      <section class="header-hero text-white pb-4 light-text ">
+        {{ if not .Params.notitle }}
+        <h1>{{ .Title }}</h1>
+        {{ end }}
+      </section>
+         {{ block "hero-more" . }}{{ end }}
+      {{ end }}
+    </header>
+    <div class="container-fluid td-outer">
+      <div class="td-main">
+        <div class="row flex-md-nowrap">
+          <div class="col-12 col-md-3 col-xl-2 td-sidebar d-print-none">
+            {{ partial "sidebar.html" . }}
+          </div>
+          <main class="col-12 col-md-9 col-xl-8 pl-md-5" role="main">
+            {{ if not .Site.Params.ui.breadcrumb_disable }}{{ partial "breadcrumb.html" . }}{{ end }}
+            {{ block "deprecated" . }}
+              {{ partial "deprecation-warning.html" . }}
+            {{ end }}
+              {{ block "main" . }}{{ end }}
+              {{- if .HasShortcode "thirdparty-content" -}}
+                {{ block "thirdparty-disclaimer" . }}
+                  {{ partial "docs/thirdparty-disclaimer.html" . }}
+                {{- end -}}
+              {{- end -}}
+            {{ if (and (not .Params.hide_feedback) (.Site.Params.ui.feedback.enable) (.Site.GoogleAnalytics)) }}
+              {{ partial "feedback.html" .Site.Params.ui.feedback }}
+            {{ end }}
+            {{ partial "page-meta-lastmod.html" . }}
+            {{ if (.Site.DisqusShortname) }}
+              <br />
+              {{ partial "disqus-comment.html" . }}
+            {{ end }}
+          </main>
+          <div class="d-none d-xl-block col-xl-2 td-toc d-print-none">
+            {{ partial "toc.html" . }}
+          </div>
+        </div>
+      </div>
+    </div>
+    {{ partial "footer.html" . }}
+    {{ partial "scripts.html" . }}
+  </body>
+</html>
diff --git a/layouts/docs/baseof.html b/layouts/docs/baseof.html
new file mode 100755
index 00000000000..f2386ae5e19
--- /dev/null
+++ b/layouts/docs/baseof.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<html lang="{{ .Site.Language.Lang }}" class="no-js">
+  <head>
+    {{ partial "head.html" . }}
+    <title>{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ with .Title }}{{ . }} | {{ end }}{{ .Site.Title }}{{ end }}</title>
+  </head>
+  <body class="td-{{ .Kind }} td-documentation">
+    <header>
+      {{ partial "navbar.html" . }}
+      {{ partial "announcement.html" . }}
+      {{ block "hero" . }}
+      <section class="header-hero text-white pb-4 light-text ">
+        {{ if not .Params.notitle }}
+        <h1>{{ .Title }}</h1>
+        {{ end }}
+      </section>
+         {{ block "hero-more" . }}{{ end }}
+      {{ end }}
+    </header>
+    <div class="container-fluid td-outer">
+      <div class="td-main">
+        <div class="row flex-md-nowrap">
+          <div class="col-12 col-md-3 col-xl-2 td-sidebar d-print-none">
+            {{ partial "sidebar.html" . }}
+          </div>
+          <main class="col-12 col-md-9 col-xl-8 pl-md-5" role="main">
+            {{ if not .Site.Params.ui.breadcrumb_disable }}{{ partial "breadcrumb.html" . }}{{ end }}
+            {{ block "deprecated" . }}
+              {{ partial "deprecation-warning.html" . }}
+            {{ end }}
+              {{ block "main" . }}{{ end }}
+              {{- if .HasShortcode "thirdparty-content" -}}
+                {{ block "thirdparty-disclaimer" . }}
+                  {{ partial "docs/thirdparty-disclaimer.html" . }}
+                {{- end -}}
+              {{- end -}}
+<!--            {{ if (and (not .Params.hide_feedback) (.Site.Params.ui.feedback.enable) (.Site.GoogleAnalytics)) }}-->
+<!--              {{ partial "feedback.html" .Site.Params.ui.feedback }}-->
+<!--            {{ end }}-->
+<!--            {{ partial "page-meta-lastmod.html" . }}-->
+            {{ if (.Site.DisqusShortname) }}
+              <br />
+              {{ partial "disqus-comment.html" . }}
+            {{ end }}
+          </main>
+          <div class="d-none d-xl-block col-xl-2 td-toc d-print-none">
+            {{ partial "toc.html" . }}
+          </div>
+        </div>
+      </div>
+    </div>
+    {{ partial "footer.html" . }}
+    {{ partial "scripts.html" . }}
+  </body>
+</html>
diff --git a/layouts/partials/announcement.html b/layouts/partials/announcement.html
new file mode 100755
index 00000000000..bff71bfe4ca
--- /dev/null
+++ b/layouts/partials/announcement.html
@@ -0,0 +1,34 @@
+{{ $dateRegExp := "^[0-9]{4}-1[0-2]|0[1-9]-(?:3[01]|0[1-9]|[12][0-9])T(?:2[0-3]|[01][0-9]):(?:[0-5][0-9]):(?:60|[0-5][0-9])$" }}
+{{ $announcementShown := false }}
+{{ range $.Site.Data.announcements }}
+  {{ range .announcements }}
+  {{ if or ( eq .endTime nil ) ( eq .message nil ) }}
+    {{ errorf "Invalid announcement: %#v" . }}
+  {{ end }}
+  {{ if and (ne .startTime nil ) (lt ( len ( findRE $dateRegExp .startTime ) ) 1 ) }}
+    {{ errorf "Invalid announcement start time: %#v" .startTime }}
+  {{ end }}
+  {{ if lt ( len ( findRE $dateRegExp .endTime ) ) 1 }}
+    {{ errorf "Invalid announcement end time: %#v" .endTime }}
+  {{ end }}
+  {{ if or (eq .startTime nil ) (lt ( time .startTime ) now ) }}
+    {{- if or (eq .endTime nil ) (gt ( time .endTime ) now ) -}}
+      {{- if not $announcementShown -}}
+      {{- $announcementShown = true -}}
+  <div lang="en" id="announcement" style="background-color: #3371e3; color: #fff; {{ .style | safeCSS }}">
+    <aside>
+      <div class="announcement-main" data-nosnippet>
+        {{ if .title }}
+        <h4>
+            {{ .title | markdownify }}
+        </h4>
+        {{ end }}
+        <p>{{ .message | markdownify }}</p>
+      </div>
+    </aside>
+  </div>
+      {{- end -}}
+      {{- end -}}
+    {{- end -}}
+  {{ end }}
+{{ end }}
\ No newline at end of file
diff --git a/layouts/partials/blog-meta-links.html b/layouts/partials/blog-meta-links.html
new file mode 100755
index 00000000000..f9a6c71c3ff
--- /dev/null
+++ b/layouts/partials/blog-meta-links.html
@@ -0,0 +1,13 @@
+<div class="td-page-blog-meta ml-2 pb-1 pt-2 mb-4">
+  {{ with site.Home.OutputFormats.Get "rss" -}}
+  <link rel="{{ .Rel }}" type="{{ .MediaType.Type }}" href="{{ .Permalink | safeURL }}" title="{{ site.Title }}">
+  <a class="widget-link" href="{{ .Permalink | safeURL }}"><div> <i class="fas fa-rss fab-icon"> </i> <span class="widget-link-text">RSS Feed</span></div> </a>
+  {{ end -}}
+  <a class="widget-link" href="https://kubernetes.io/docs/contribute/new-content/blogs-case-studies/"><div> <i class="fa fa-edit fab-icon"></i> <span class="widget-link-text">Submit a Post</span></div></a>
+  <a class="widget-link" href="https://twitter.com/kubernetesio"><div> <i class="fab fa-twitter-square fab-icon"> </i> <span class="widget-link-text"> @Kubernetesio</span></div></a>
+  <a class="widget-link" href="https://github.com/kubernetes/kubernetes"><div> <i class="fab fa-github-square fab-icon"></i> <span class="widget-link-text"> on GitHub </span></div></a>
+  <a class="widget-link" href="http://slack.k8s.io"><div><i class="fab fa-slack fab-icon"> </i> <span class="widget-link-text">#kubernetes-users </span></div></a>
+  <a class="widget-link" href="https://stackoverflow.com/questions/tagged/kubernetes"><div><i class="fab fa-stack-overflow fab-icon"></i> <span class="widget-link-text"> Overflow</span></div></a>
+  <a class="widget-link" href="https://discuss.kubernetes.io"><div> <i class="fab fa-discourse fab-icon"></i><span class="widget-link-text"> Forum </span></div></a>
+  <a class="widget-link" href="https://kubernetes.io/docs/setup"><div><i class="fa fa-download fab-icon"></i> <span class="widget-link-text"> Kubernetes</span></div></a>
+</div>
diff --git a/layouts/partials/blog-sidebar.html b/layouts/partials/blog-sidebar.html
new file mode 100755
index 00000000000..bbdbd823304
--- /dev/null
+++ b/layouts/partials/blog-sidebar.html
@@ -0,0 +1,99 @@
+{{/* The blog nav organizes posts grouped by year, which represents a customized version of the 
+sidebar-tree in use elsewhere on the site. */}}
+
+{{/* We cache this partial for bigger sites and set the active class client side. */}}
+{{ $shouldDelayActive := ge (len .Site.Pages) 2000 }}
+
+<div id="td-sidebar-menu" class="td-sidebar__inner{{ if $shouldDelayActive }} d-none{{ end }}">
+
+  <form class="td-sidebar__search d-flex align-items-center">
+    {{ partial "search-input.html" . }}
+    <button class="btn btn-link td-sidebar__toggle d-md-none p-0 ml-3 fas fa-bars" type="button" data-toggle="collapse" data-target="#td-section-nav" aria-controls="td-docs-nav" aria-expanded="false" aria-label="Toggle section navigation">
+    </button>
+  </form>
+  
+  <nav class="collapse td-sidebar-nav pt-2 pl-4" id="td-section-nav">
+    <!-- {{ if  (gt (len .Site.Home.Translations) 0) }}
+    <div class="nav-item dropdown d-block d-lg-none">
+      {{ partial "navbar-lang-selector.html" . }}
+    </div>
+    {{ end }} -->
+    {{ template "blog-nav-section" (dict "page" . "section" .FirstSection "delayActive" $shouldDelayActive)  }}
+  </nav>
+</div>
+
+{{ define "blog-nav-section" }}
+
+{{ $shouldDelayActive := .delayActive }}
+{{ $sid := .section.RelPermalink | anchorize }}
+{{ $postsByYear := .section.Pages.GroupByDate "2006" }}
+
+  {{ range $postsByYear }}
+
+  {{ $year := .Key }}
+  {{ $p := $.page }}
+  {{ $active := eq ($p.Date.Format "2006") $year }}
+
+  {{ $firstPost := .Pages | first 1 }}
+    <ul class="td-sidebar-nav__section pr-md-3">
+      <li class="td-sidebar-nav__section-title">
+        <a  href="{{range $firstPost}}{{ .RelPermalink }}{{end}}" class="align-left pl-0 pr-2{{ if not $active }} collapsed{{ end }}{{ if $active}} active{{ end }} td-sidebar-link td-sidebar-link__section">
+          {{ $year }}
+        </a>
+
+      </li>
+      {{ $firstPages := .Pages | first 10 }}
+      {{ $remainingPages := .Pages | after 10 }}
+      {{ $displayRemainingPages := false }}
+      <ul>
+        {{ range $firstPages }}
+          {{ if .IsPage }}
+            <li class="blog-post collapse {{ if $active }}show{{ end }}" data-year={{$year}}>
+              {{ $mid := printf "m-%s" (.RelPermalink | anchorize) }}
+              {{ $active := eq . $p }}
+              <a class="td-sidebar-link td-sidebar-link__page {{ if and (not $shouldDelayActive) $active }} active{{ end }}" id="{{ $mid }}" href="{{ .RelPermalink }}">
+                {{ .LinkTitle }}
+              </a>
+            </li>
+          {{ end }}
+        {{ end }}
+        <li class="more-posts collapse {{ if $active }}show{{ end }}" data-year="{{$year}}">
+          <a class="td-sidebar-link" id="more-posts" href="">Show More Posts...</a>
+        </li>
+        {{ range $remainingPages }}
+          {{ if .IsPage }}
+            <li class="blog-post hidden collapse" data-year={{$year}}>
+              {{ $mid := printf "m-%s" (.RelPermalink | anchorize) }}
+              {{ $active := eq . $p }}
+              <a class="td-sidebar-link td-sidebar-link__page {{ if and (not $shouldDelayActive) $active }} active{{ end }}" id="{{ $mid }}" href="{{ .RelPermalink }}">
+                {{ .LinkTitle }}
+              </a>
+            </li>
+          {{ end }}
+        {{ end }}
+      </ul>
+    </ul>
+
+  {{ end }}
+
+{{ end }}
+
+{{/* Reveal the remaining blog posts and hide the clicked link */}}
+<script>
+let morePosts = document.querySelectorAll(".more-posts");
+let year = "";
+morePosts.forEach(link => {
+  link.onclick = (e) => {
+    e.preventDefault();
+    year = link.dataset.year;
+    console.log(year);
+    let hiddenPosts = document.querySelectorAll(`.blog-post.hidden[data-year="${year}"]`);
+    console.log(hiddenPosts);
+    hiddenPosts.forEach(post => {
+      post.classList.add('show');
+      post.classList.remove("hidden");
+    });
+    link.style.display = "none";
+  }
+});
+</script>
\ No newline at end of file
diff --git a/layouts/partials/css.html b/layouts/partials/css.html
new file mode 100755
index 00000000000..19951b88392
--- /dev/null
+++ b/layouts/partials/css.html
@@ -0,0 +1,36 @@
+<!-- All former base stylesheet links commented out as we are using Docsy for styles. -->
+
+{{ $inServerMode := site.IsServer }}
+
+{{- if .Params.case_study_styles }}
+  {{ $cssOutput := "css/case-studies.css" }}
+  {{ $caseStudiesCSS := resources.Get "scss/_case-studies.scss" | resources.ToCSS }}
+  {{ if $inServerMode }}
+    <link rel="stylesheet" href="{{ $caseStudiesCSS.RelPermalink }}">
+  {{ else }}
+    {{ $prodCaseStudiesCSS := $caseStudiesCSS | fingerprint }}
+    <link rel="stylesheet" href="{{ $prodCaseStudiesCSS.RelPermalink }}" integrity="{{ $prodCaseStudiesCSS.Data.Integrity }}">
+  {{ end }}
+{{- end }}
+
+<link rel="stylesheet" href="{{ "css/feature-states.css" | relURL }}">
+
+{{- if or (eq .Params.class "gridPage") (eq .Params.class "gridPage gridPageHome") }}
+  <link rel="stylesheet" href="{{ "css/gridpage.css" | relURL }}">
+{{- end }}
+
+{{- if eq .Params.class "training" }}
+  <link rel="stylesheet" href="{{ "css/training.css" | relURL }}">
+{{- end }}
+
+{{- if .Params.new_case_study_styles }}
+  <link rel="stylesheet" href="{{ "css/new-case-studies.css" | relURL }}">
+{{- end}}
+
+{{- with .Params.css }}
+  {{- $extraCss := split . "," }}
+  {{- range $extraCss }}
+    {{- $url := trim . " " | relURL }}
+    <link rel="stylesheet" href="{{ $url }}"><!-- custom css added -->
+  {{- end }}
+{{- end }}
diff --git a/layouts/partials/deprecation-warning.html b/layouts/partials/deprecation-warning.html
new file mode 100755
index 00000000000..588a1cad9fd
--- /dev/null
+++ b/layouts/partials/deprecation-warning.html
@@ -0,0 +1,18 @@
+{{ if (.Site.Param "deprecated") }}
+<section id="deprecation-warning">
+  <div class="content deprecation-warning pageinfo">
+    <h3>
+      {{ T "deprecation_title" }} {{ .Param "version" }}
+    </h3>
+    <p> Kubernetes {{ .Param "version" }} {{ T "deprecation_warning" }}
+      <a href="{{ site.Params.currentUrl }}">{{ T "latest_version" }}</a>
+    </p>
+  </div>
+</section>
+{{ else if and (eq .Section "blog") (not .Params.evergreen) .Date (.Date.Before (now.AddDate -1 0 0)) -}}
+<section id="deprecation-warning">
+  <div class="content deprecation-warning pageinfo outdated-blog">
+    <p>{{ T "outdated_blog__message" }}</p>
+  </div>
+</section>
+{{ end }}
\ No newline at end of file
diff --git a/layouts/partials/docs/browse.html b/layouts/partials/docs/browse.html
new file mode 100755
index 00000000000..e6049397b54
--- /dev/null
+++ b/layouts/partials/docs/browse.html
@@ -0,0 +1,53 @@
+
+<div id='browsedocsWrapper'>
+<div class="browseheader" id="browsedocs">
+    <a name="browsedocs">{{ T "docs_label_browse" }}</a>
+  </div>
+<div class="browsedocs">
+{{ template "docs-browse-section" (dict "ctx" . "page" .) }}
+</div><!-- end browsedocs -->
+
+{{ define "docs-browse-section" }}
+{{ $pages := .page.Pages }}
+{{ $sections := .page.Sections }}
+{{ with site.Params.language_alternatives }}
+  {{ range . }} 
+    {{ with (where $.page.Translations ".Lang" . ) }}
+    {{ $p := index . 0 }}
+    {{ $pages =  $pages | lang.Merge $p.Pages }}
+    {{ $sections =  $sections | lang.Merge $p.Sections }}
+    {{ end }}
+  {{ end }}
+{{ end }}
+{{ $pages := where $pages ".Params.toc_hide" "!=" true }}
+{{ $sections := where $sections ".Params.toc_hide" "!=" true }}
+{{ if not .page.Parent.IsHome }}
+<div class="browsesection">
+  <div class="docstitle">
+    <h3><a href="{{ .page.RelPermalink }}">{{ .page.Params.bigheader | default .page.Title }}</a></h3>
+  </div>
+  {{ if ge (len $pages) 1 }}
+  <div class="pages">
+  {{ $num_pages := len $pages }}
+  {{ if gt $num_pages 0 }}
+  {{ $column_size :=  (div $num_pages 3.0) | math.Ceil | int | default 1 }}
+  {{  range $i, $e := $pages.ByWeight }}
+    {{ $offset := mod $i $column_size |  add 1 }}
+    {{ if eq $offset 1 }}
+      <div class="browsecolumn">
+    {{ end }}
+    {{ $isForeignLanguage := (ne .Lang $.ctx.Lang)}}
+    <a href="{{ .RelPermalink }}"{{ if $isForeignLanguage }} target="_blank" {{ end }}>{{ printf "%02d - %s" (add $i 1) .LinkTitle }}{{ if $isForeignLanguage }} <small>({{ .Lang | upper }})</small>{{ end }}</a><br>
+    {{ if or (eq $offset $column_size) (eq (add $i 1) $num_pages)}}
+      </div>
+    {{ end }}
+  {{ end }}
+  {{ end }}
+  </div><!-- end pages -->
+  {{ end }}
+</div><!-- end browsesection -->
+{{ end }}
+{{ range $sections.ByWeight }}
+{{ template "docs-browse-section" (dict "ctx" $.ctx "page" .)  }}
+{{ end }}
+{{ end }}
diff --git a/layouts/partials/docs/content-page.html b/layouts/partials/docs/content-page.html
new file mode 100755
index 00000000000..02430aa9d33
--- /dev/null
+++ b/layouts/partials/docs/content-page.html
@@ -0,0 +1,6 @@
+{{ if not .page.Params.notitle }}
+  <h1>{{ .page.Title }}</h1>
+  {{ $desc := .page.Description }}
+  {{ with .page.Params.description }}<div class="lead">{{ $desc | markdownify }}</div>{{ end }}
+{{ end }}
+{{ .page.Content }}
diff --git a/layouts/partials/docs/docs-portal-card.html b/layouts/partials/docs/docs-portal-card.html
new file mode 100755
index 00000000000..c203573e134
--- /dev/null
+++ b/layouts/partials/docs/docs-portal-card.html
@@ -0,0 +1,29 @@
+{{ range .Params.cards }}
+<div class="launch-card">
+    <h2 id="{{ replace .title " " "-" | lower }}">{{ .title }}</h2>
+    <p>{{ .description }}</p>
+    <ul>
+    {{ $name := .name }}
+    {{ range where ($.Site.Pages.ByParam "card.weight") ".Params.card" "!=" nil }}
+        {{ if eq .Params.card.name $name }}
+        {{ $p := . }}
+        {{ if (isset .Params.card "anchors") }}
+            {{ range .Params.card.anchors }}
+            <li><a href="{{ $p.Permalink }}{{ .anchor }}">{{ .title }}</a></li>
+            {{ end }}
+        {{ else }}
+            <li><a href={{ .Permalink }}>
+            {{ if (isset .Params.card "title") }}{{ .Params.card.title }}{{ else }}{{ .LinkTitle }}{{ end }}
+            </a></li>
+        {{ end }}
+        {{ end }}
+    {{ end }}
+    </ul>
+    {{ if .button }}
+      <br>
+      <button id="btn-concepts" class="button" onClick="location.href='{{ .button_path | relLangURL }}';" aria-label="{{ .title }}">{{ .button }}</button>
+      <br>
+      <br>
+    {{ end }}
+</div>
+{{ end }}
\ No newline at end of file
diff --git a/layouts/partials/docs/glossary-terms.html b/layouts/partials/docs/glossary-terms.html
new file mode 100755
index 00000000000..13afe1b16b9
--- /dev/null
+++ b/layouts/partials/docs/glossary-terms.html
@@ -0,0 +1,13 @@
+{{ $glossaryBundle := site.GetPage "page" "docs/reference/glossary" }}
+{{- if $glossaryBundle -}}
+  {{ $pages := $glossaryBundle.Resources.ByType "page" }}
+  {{- range site.Params.language_alternatives -}}
+    {{- with (where $glossaryBundle.Translations ".Lang" . ) -}}
+      {{- $p := (index . 0) -}}
+      {{- $pages = $pages | lang.Merge ($p.Resources.ByType "page") -}}
+    {{- end -}}
+  {{ end }}
+  {{- $.Scratch.Set "glossary_items"  $pages -}}
+{{- else -}}
+{{- errorf "[%s] Glossary Bundle not found for language. Create at least an index.md file inside docs/reference/glossary" site.Language.Lang -}}
+{{- end -}}
diff --git a/layouts/partials/docs/side-menu.html b/layouts/partials/docs/side-menu.html
new file mode 100755
index 00000000000..fb5e949645d
--- /dev/null
+++ b/layouts/partials/docs/side-menu.html
@@ -0,0 +1,24 @@
+<div id="docsToc">
+     <div class="pi-accordion">
+    	{{/* This can be any page in the docs tree. Need to find the correct ancestor. 
+                  In a roundabout way. This will improve when Go templates gets assignment and break support (both in Go 1.11).
+         */}}
+        {{ $p := . }}
+        {{ .Scratch.Set "section" .CurrentSection }}
+        {{ .Scratch.Set "sectionFound" false }}
+        {{ $docs := site.GetPage "section" "docs" }}
+        {{ if ne .CurrentSection $docs }}
+         {{ range $docs.Sections }}
+             {{ if not ($.Scratch.Get "sectionFound") }}
+                 {{ if $p.IsDescendant . }}
+                          {{ $.Scratch.Set "section" . }}
+                          {{ $.Scratch.Set "sectionFound" true }}
+                 {{ end }}
+             {{ end }}
+         {{ end }}
+         {{ end }}
+        {{ $section := (.Scratch.Get "section") }}
+        {{ partialCached "tree.html" $section $section.RelPermalink }}
+     </div> <!-- /pi-accordion -->
+    <button class="push-menu-close-button" onclick="kub.toggleToc()"></button>
+</div> <!-- /docsToc -->
diff --git a/layouts/partials/docs/thirdparty-disclaimer.html b/layouts/partials/docs/thirdparty-disclaimer.html
new file mode 100755
index 00000000000..0eca49d0716
--- /dev/null
+++ b/layouts/partials/docs/thirdparty-disclaimer.html
@@ -0,0 +1,3 @@
+<div class="pageinfo pageinfo-secondary" id="third-party-content-disclaimer">
+{{ T "thirdparty_message_disclaimer" | safeHTML }}
+</div>
diff --git a/layouts/partials/docs/top-section-page.html b/layouts/partials/docs/top-section-page.html
new file mode 100755
index 00000000000..69834b3c539
--- /dev/null
+++ b/layouts/partials/docs/top-section-page.html
@@ -0,0 +1 @@
+{{ .page.Content }}
diff --git a/layouts/partials/favicons.html b/layouts/partials/favicons.html
new file mode 100755
index 00000000000..d32fcd92160
--- /dev/null
+++ b/layouts/partials/favicons.html
@@ -0,0 +1,4 @@
+<link rel="shortcut icon" type="image/png" href="{{ "images/favicon.png" | relURL }}">
+<link rel="apple-touch-icon" href="{{ "favicons/apple-touch-icon-180x180.png" | relURL }}" sizes="180x180">
+<link rel="manifest" href="/manifest.webmanifest">
+<link rel="apple-touch-icon" href="/images/kubernetes-192x192.png">
\ No newline at end of file
diff --git a/layouts/partials/feedback.html b/layouts/partials/feedback.html
new file mode 100644
index 00000000000..f062cd84724
--- /dev/null
+++ b/layouts/partials/feedback.html
@@ -0,0 +1,53 @@
+{{ if not .Params.hide_feedback }}
+<div id="pre-footer">
+  <h2>{{ T "feedback_heading" }}</h2>
+    <p class="feedback--prompt">{{ T "feedback_question" }} </p>
+    <button class="btn btn-primary mb-4 feedback--yes">{{ T "feedback_yes" }}</button>
+    <button class="btn btn-primary mb-4 feedback--no">{{ T "feedback_no" }}</button>
+    <p class="feedback--response feedback--response__hidden">
+      {{ T "layouts_docs_partials_feedback_thanks" }}
+      <a target="_blank" rel="noopener"
+        href="https://stackoverflow.com/questions/tagged/kubernetes">
+        Stack Overflow</a>.
+      {{ T "layouts_docs_partials_feedback_issue" }}
+      <a class="feedback--link" target="_blank" rel="noopener"
+        href="https://github.com/kubernetes/website/issues/new?title=Issue%20with%20k8s.io">
+        {{ T "layouts_docs_partials_feedback_problem" }}</a>
+      {{ T "layouts_docs_partials_feedback_or" }}
+      <a class="feedback--link" target="_blank" rel="noopener"
+        href="https://github.com/kubernetes/website/issues/new?title=Improvement%20for%20k8s.io">
+        {{ T "layouts_docs_partials_feedback_improvement" }}</a>.
+    </p>
+  </div>  
+  <script>
+    const yes = document.querySelector('.feedback--yes');
+    const no = document.querySelector('.feedback--no');
+    document.querySelectorAll('.feedback--link').forEach(link => {
+      link.href = link.href + window.location.pathname;
+    });
+    const sendFeedback = (value) => {
+      if (!gtag) { console.log('!gtag'); }
+      gtag('event', 'click', {
+        'event_category': 'Helpful',
+        'event_label': window.location.pathname,
+        value
+      });
+    };
+    const disableButtons = () => {
+      yes.disabled = true;
+      yes.classList.add('feedback--button__disabled');
+      no.disabled = true;
+      no.classList.add('feedback--button__disabled');
+    };
+    yes.addEventListener('click', () => {
+      sendFeedback(1);
+      disableButtons();
+      document.querySelector('.feedback--response').classList.remove('feedback--response__hidden');
+    });
+    no.addEventListener('click', () => {
+      sendFeedback(0);
+      disableButtons();
+      document.querySelector('.feedback--response').classList.remove('feedback--response__hidden');
+    });
+  </script>
+{{ end }}
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
old mode 100644
new mode 100755
diff --git a/layouts/partials/handle-version-switch-404.html b/layouts/partials/handle-version-switch-404.html
new file mode 100755
index 00000000000..d2130bf49fc
--- /dev/null
+++ b/layouts/partials/handle-version-switch-404.html
@@ -0,0 +1,11 @@
+{{/*
+If a 404 occurs and the referrer is a different version of the Kubernetes documentation,
+don't show the regular 404 error page, but instead redirect to the site root
+*/}}
+<script type="text/javascript">
+  var sameBaseUrlRegExp = new RegExp("^" + location.protocol + "//" + location.host.replace(".", "\\.") + "/.*", "i");
+  var kubernetesDocumentationUrlRegExp = new RegExp("^https?://(.+\\.)?kubernetes.io/.*", "i");
+  if (!sameBaseUrlRegExp.test(document.referrer) && kubernetesDocumentationUrlRegExp.test(document.referrer)) {
+    location.replace("/");
+  }
+</script>
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
old mode 100644
new mode 100755
index e99e00b7750..ea6efb807dc
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -1,11 +1,20 @@
+{{- $isBlogPost := eq .Section "blog" }}
+{{- $ogType := cond (.IsHome) "website" "article" }}
+<!-- per-page robot indexing controls -->
+{{- if hugo.IsProduction -}}
+<meta name="ROBOTS" content="INDEX, FOLLOW">
+{{- else -}}
+<meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
+{{- end -}}
+<!-- alternative translations -->
+{{ range .Translations -}}
+<link rel="alternate" hreflang="{{ .Language.Lang }}" href="{{ .Permalink }}">
+{{ end -}}
+
+<!-- Docsy head.html begins here -->
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 {{ hugo.Generator }}
-{{ if eq (getenv "HUGO_ENV") "production" }}
-<META NAME="ROBOTS" CONTENT="INDEX, FOLLOW">
-{{ else }}
-<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
-{{ end }}
 {{ range .AlternativeOutputFormats -}}
 <link rel="{{ .Rel }}" type="{{ .MediaType.Type }}" href="{{ .Permalink | safeURL }}">
 {{ end -}}
@@ -15,22 +24,55 @@
 {{- template "_internal/google_news.html" . -}}
 {{- template "_internal/schema.html" . -}}
 {{- template "_internal/twitter_cards.html" . -}}
-{{ if eq (getenv "HUGO_ENV") "production" }}
+{{- if hugo.IsProduction -}}
 {{ template "_internal/google_analytics_async.html" . }}
 {{ end }}
 {{ partialCached "head-css.html" . "asdf" }}
 <script
-  src="/js/jquery-3.5.1.min.js"
-  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
-  crossorigin="anonymous"></script>
-{{ if .Site.Params.offlineSearch }}
+        src="/js/jquery-3.5.1.min.js"
+        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
+        crossorigin="anonymous"></script>
+{{ if and (.Site.Params.offlineSearch) (not .Site.Params.gcs_engine_id) }}
 <script
-  src="/js/lunr.min.js"
-  integrity="sha384-vRQ9bDyE0Wnu+lMfm57BlYLO0/XauFuKpVsZPs7KEDwYKktWi5+Kz3MP8++DFlRY"
-  crossorigin="anonymous"></script>
+        src="/js/lunr.min.js"
+        integrity="sha384-vRQ9bDyE0Wnu+lMfm57BlYLO0/XauFuKpVsZPs7KEDwYKktWi5+Kz3MP8++DFlRY"
+        crossorigin="anonymous"></script>
+<script src="/js/offline-search.js"></script>
 {{end}}
-{{ with .Site.Params.prism_syntax_highlighting }}
-<!-- stylesheet for Prism -->
-<link rel="stylesheet" href="/css/prism.css" />
-{{ end }}
 {{ partial "hooks/head-end.html" . }}
+
+<!-- Docsy head.html ends here -->
+<meta name="theme-color" content="#326ce5">
+{{ partial "css.html" . }}
+<!-- Content for social media sharing previews -->
+<!-- Facebook uses the og: stuff, while Twitter and others use twitter: -->
+<meta name="description" content="{{ if .Params.description }}{{ .Params.description }}{{ else }}{{ .Summary }}{{ end }}">
+<meta property="og:description" content="{{ if .Params.description }}{{ .Params.description }}{{ else }}{{ .Summary }}{{ end }}">
+<meta name="twitter:description" content="{{ if .Params.description }}{{ .Params.description }}{{ else }}{{ .Summary }}{{ end }}">
+<meta property="og:url" content="{{ .Permalink }}">
+<meta property="og:title" content="{{ if .Params.title }}{{ .Title }}{{ else }}{{ .Summary | truncate 10 }}{{ end }}">
+<meta name="twitter:title" content="{{ if .Params.title }}{{ .Title }}{{ else }}{{ .Summary | truncate 10 }}{{ end }}">
+<meta name="twitter:image" content="https://kubernetes.io/images/favicon.png" />
+<!-- Alt text for the site image -->
+<meta name="twitter:image:alt" content="{{ site.Title }}">
+{{ if $isBlogPost }}
+{{ with findRE "<img.*?>" .Content 1 }}
+<meta property="og:image" content="{{ index . 0 | replaceRE ".*src=\"(.+?)\".*" "$1" }}">
+{{ end }}
+{{ else }}
+<meta property="og:image" content="{{ "/images/kubernetes-horizontal-color.png" | relURL }}">
+{{ end }}
+<meta property="og:type" content="{{ $ogType }}">
+
+{{ if .HasShortcode "mermaid" }}
+<!-- Copied from https://unpkg.com/mermaid@8.11.2/dist/mermaid.min.js -->
+<script async src="{{ "js/mermaid.min.js" | relURL }}"></script>
+{{ end }}
+
+<link href="/css/community.css" rel="stylesheet">
+<link href="/css/contactus.css" rel="stylesheet">
+
+<!--<script defer src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>-->
+<script src="{{ "js/script.js" | relURL }}"></script>
+{{ with .Params.js }}{{ range (split . ",") }}<script src="{{ (trim . " ") | relURL }}"></script><!-- custom js added -->
+{{ end }}{{ else }}<!-- no custom js detected -->{{ end }}
diff --git a/layouts/partials/navbar-lang-selector.html b/layouts/partials/navbar-lang-selector.html
new file mode 100755
index 00000000000..6f8bfc42f46
--- /dev/null
+++ b/layouts/partials/navbar-lang-selector.html
@@ -0,0 +1,10 @@
+{{/* Link directly to documentation etc., if possible. */}}
+{{ $langPage := cond (gt (len .Translations) 0) . .Site.Home }}
+<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+	{{ $langPage.Language.LanguageName }}
+</a>
+<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
+	{{ range $langPage.Translations }}
+	<a class="dropdown-item" href="{{ .RelPermalink }}">{{ .Language.LanguageName }}</a>
+	{{ end }}
+</div>
diff --git a/layouts/partials/navbar-version-selector.html b/layouts/partials/navbar-version-selector.html
new file mode 100755
index 00000000000..48424056950
--- /dev/null
+++ b/layouts/partials/navbar-version-selector.html
@@ -0,0 +1,10 @@
+<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+	{{ T "version_menu" }}
+</a>
+<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
+	{{ $p := . }}
+	<a class="dropdown-item" href="/releases">Release Information</a>
+	{{ range .Site.Params.versions }}
+	<a class="dropdown-item" href="{{ .url }}{{ $p.RelPermalink }}">{{ .version }}</a>
+	{{ end }}
+</div>
\ No newline at end of file
diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html
old mode 100644
new mode 100755
index 12814da0463..0679add0f85
--- a/layouts/partials/navbar.html
+++ b/layouts/partials/navbar.html
@@ -1,7 +1,6 @@
 {{ $cover := .HasShortcode "blocks/cover" }}
-<nav class="js-navbar-scroll navbar navbar-expand navbar-dark {{ if $cover}} td-navbar-cover {{ end }}flex-column flex-md-row td-navbar">
-        <a class="navbar-brand" href="{{ .Site.Home.RelPermalink }}">
-		<span class="navbar-logo">{{ if .Site.Params.ui.navbar_logo }}{{ with resources.Get "icons/logo.svg" }}{{ ( . | minify).Content | safeHTML }}{{ end }}{{ end }}</span><span class="text-uppercase font-weight-bold">{{ .Site.Title }}</span>
+<nav class="js-navbar-scroll navbar navbar-expand navbar-dark {{ if $cover}} td-navbar-cover {{ end }} flex-column flex-md-row td-navbar" data-auto-burger="primary">
+	<a class="navbar-brand" href="{{ .Site.Home.RelPermalink }}">		<span class="navbar-logo">{{ if .Site.Params.ui.navbar_logo }}{{ with resources.Get "icons/logo.svg" }}{{ ( . | minify).Content | safeHTML }}{{ end }}{{ end }}</span><span class="text-uppercase font-weight-bold">{{ .Site.Title }}</span>
 	</a>
 	<div class="td-navbar-nav-scroll ml-md-auto" id="main_navbar">
 		<ul class="navbar-nav mt-2 mt-lg-0">
diff --git a/layouts/partials/page-meta-links.html b/layouts/partials/page-meta-links.html
new file mode 100755
index 00000000000..83571db5257
--- /dev/null
+++ b/layouts/partials/page-meta-links.html
@@ -0,0 +1,45 @@
+{{/* template adapted from Docsy theme */}}
+{{ if .Path }}
+  {{ $pathFormatted := replace .Path "\\" "/" }}
+  {{ $gh_repo := ($.Param "github_repo") }}
+  {{ $gh_subdir := ($.Param "github_subdir") }}
+  {{ $gh_project_repo := ($.Param "github_project_repo") }}
+  {{ $gh_branch := (default "main" ($.Param "github_branch")) }}
+  <div class="td-page-meta ml-2 pb-1 pt-2 mb-0">
+  {{ if $gh_repo }}
+    {{ $gh_repo_path := printf "%s/content/%s" $gh_branch $pathFormatted }}
+    {{ if and ($gh_subdir) (.Site.Language.Lang) }}
+      {{ $gh_repo_path = printf "%s/%s/content/%s/%s" $gh_branch $gh_subdir ($.Site.Language.Lang) $pathFormatted }}
+    {{ else if .Site.Language.Lang }}
+      {{ $gh_repo_path = printf "%s/content/%s/%s" $gh_branch ($.Site.Language.Lang) $pathFormatted }}
+    {{ else if $gh_subdir }}
+      {{ $gh_repo_path = printf "%s/%s/content/%s" $gh_branch $gh_subdir $pathFormatted }}
+    {{ end }}
+    {{ $editURL := printf "%s/edit/%s" $gh_repo $gh_repo_path }}
+    {{ $createURL := printf "%s/edit/%s" $gh_repo $gh_repo_path }}
+    {{ $issuesURL := printf "%s/issues/new?title=%s" $gh_repo (htmlEscape $.Title )}}
+    {{ $newPageStub := resources.Get "stubs/new-page-template.md" }}
+    {{ $newPageQS := querify "value" $newPageStub.Content "filename" "change-me.md" | safeURL }}
+    {{ $newPageURL := printf "%s/new/%s?%s"  $gh_repo $gh_repo_path $newPageQS }}
+
+    {{ if not (.Param "auto_generated") }}
+    <a href="{{ $editURL }}" target="_blank"><i class="fa fa-edit fa-fw"></i> {{ T "post_edit_this" }}</a>
+    {{- if .HasShortcode "thirdparty-content" -}}
+    <a href="#third-party-content-disclaimer" class="third-party-disclaimer-link"><i class="fa fa-icon-circle fa-fw"></i> {{ T "thirdparty_message_edit_disclaimer" | safeHTML }}</a>
+    {{- end }}
+
+    <a href="{{ $newPageURL }}" target="_blank"><i class="fa fa-edit fa-fw"></i> {{ T "post_create_child_page" }}</a>
+    {{ end }}
+
+    <a href="{{ $issuesURL }}" target="_blank"><i class="fab fa-github fa-fw"></i> {{ T "post_create_issue" }}</a>
+    {{ if $gh_project_repo }}
+      {{ $project_issueURL := printf "%s/issues/new" $gh_project_repo }}
+      <a href="{{ $project_issueURL }}" target="_blank"><i class="fas fa-tasks fa-fw"></i> {{ T "post_create_project_issue" }}</a>
+    {{ end }}
+
+  {{ end }}
+  {{ with .CurrentSection.AlternativeOutputFormats.Get "print" }}
+    <a id="print" href="{{ .Permalink | safeURL }}"><i class="fa fa-print fa-fw"></i> {{ T "print_entire_section" }}</a>
+  {{ end }}
+  </div>
+{{ end }}
diff --git a/layouts/partials/sidebar-tree.html b/layouts/partials/sidebar-tree.html
new file mode 100755
index 00000000000..3b246d86f1d
--- /dev/null
+++ b/layouts/partials/sidebar-tree.html
@@ -0,0 +1,94 @@
+{{/* We cache this partial for bigger sites and set the active class client side. */}}
+{{ $sidebarCacheLimit := cond (isset .Site.Params.ui "sidebar_cache_limit") .Site.Params.ui.sidebar_cache_limit 2000 -}}
+{{ $shouldDelayActive := ge (len .Site.Pages) $sidebarCacheLimit -}}
+<div id="td-sidebar-menu" class="td-sidebar__inner{{ if $shouldDelayActive }} d-none{{ end }}">
+  {{ if not .Site.Params.ui.sidebar_search_disable -}}
+  <form class="td-sidebar__search d-flex align-items-center">
+    {{ partial "search-input.html" . }}
+    <button class="btn btn-link td-sidebar__toggle d-md-none p-0 ml-3 fas fa-bars" type="button" data-toggle="collapse" data-target="#td-section-nav" aria-controls="td-docs-nav" aria-expanded="false" aria-label="Toggle section navigation">
+    </button>
+  </form>
+  {{ else -}}
+  <div id="content-mobile">
+  <form class="td-sidebar__search d-flex align-items-center">
+    {{ partial "search-input.html" . }}
+    <button class="btn btn-link td-sidebar__toggle d-md-none p-0 ml-3 fas fa-bars" type="button" data-toggle="collapse" data-target="#td-section-nav" aria-controls="td-docs-nav" aria-expanded="false" aria-label="Toggle section navigation">
+    </button>
+  </form>
+  </div>
+  <div id="content-desktop"></div>
+  {{ end -}}
+  <nav class="collapse td-sidebar-nav{{ if .Site.Params.ui.sidebar_menu_foldable }} foldable-nav{{ end }}" id="td-section-nav">
+    <!-- {{ if  (gt (len .Site.Home.Translations) 0) }}
+    <div class="nav-item dropdown d-block d-lg-none">
+      {{ partial "navbar-lang-selector.html" . }}
+    </div>
+    {{ end }} -->
+    <!-- {{ $navRoot := cond (and (ne .Params.toc_root true) (eq .Site.Home.Type "docs")) .Site.Home .FirstSection }} -->
+    {{ $ulNr := 0 -}}
+    {{ $ulShow := cond (isset .Site.Params.ui "ul_show") .Site.Params.ui.ul_show 1 -}}
+    {{ $sidebarMenuTruncate := cond (isset .Site.Params.ui "sidebar_menu_truncate") .Site.Params.ui.sidebar_menu_truncate 50 -}}
+    {{ $currentLang := .Site.Language -}}
+    <ul class="td-sidebar-nav__section pr-md-3 ul-{{ $ulNr }}">
+      {{ template "section-tree-nav-section" (dict "page" . "section" .FirstSection "shouldDelayActive" $shouldDelayActive "sidebarMenuTruncate" $sidebarMenuTruncate "ulNr" $ulNr "ulShow" (add $ulShow 1) "currentLang" $currentLang)  }}
+    </ul>
+  </nav>
+</div>
+{{ define "section-tree-nav-section" -}}
+  {{ $s := .section -}}
+  {{ $p := .page -}}
+  {{ $shouldDelayActive := .shouldDelayActive -}}
+  {{ $sidebarMenuTruncate := .sidebarMenuTruncate -}}
+  {{ $treeRoot := cond (eq .ulNr 0) true false -}}
+  {{ $ulNr := .ulNr -}}
+  {{ $ulShow := .ulShow -}}
+  {{ $active := and (not $shouldDelayActive) (eq $s $p) -}}
+  {{ $activePath := and (not $shouldDelayActive) ($p.IsDescendant $s) -}}
+  {{ $show := cond (or (lt $ulNr $ulShow) $activePath (and (not $shouldDelayActive) (eq $s.Parent $p.Parent)) (and (not $shouldDelayActive) (eq $s.Parent $p)) (and (not $shouldDelayActive) ($p.IsDescendant $s.Parent))) true false -}}
+  {{ $mid := printf "m-%s" ($s.RelPermalink | anchorize) -}}
+  {{ $pages_tmp := where (union $s.Pages $s.Sections).ByWeight ".Params.toc_hide" "!=" true -}}
+  {{ $pages := $pages_tmp | first $sidebarMenuTruncate -}}
+  {{ $withChild := gt (len $pages) 0 -}}
+  {{ $manualLink := cond (isset $s.Params "manuallink") $s.Params.manualLink ( cond (isset $s.Params "manuallinkrelref") (relref $s $s.Params.manualLinkRelref) $s.RelPermalink) -}}
+  {{ $manualLinkTitle := cond (isset $s.Params "manuallinktitle") $s.Params.manualLinkTitle $s.Title -}}
+
+  <li class="td-sidebar-nav__section-title td-sidebar-nav__section{{ if $withChild }} with-child{{ else }} without-child{{ end }}{{ if $activePath }} active-path{{ end }}{{ if (not (or $show $p.Site.Params.ui.sidebar_menu_foldable )) }} collapse{{ end }}" id="{{ $mid }}-li">
+    {{ if (and $p.Site.Params.ui.sidebar_menu_foldable (ge $ulNr 1)) -}}
+      <input type="checkbox" id="{{ $mid }}-check"{{ if $activePath}} checked{{ end }}/>
+      <label for="{{ $mid }}-check"><a href="{{ $manualLink }}"{{ if ne $s.LinkTitle $manualLinkTitle }} title="{{ $manualLinkTitle }}"{{ end }}{{ with $s.Params.manualLinkTarget }} target="{{ . }}"{{ if eq . "_blank" }} rel="noopener"{{ end }}{{ end }} class="align-left pl-0 {{ if $active}} active{{ end }} td-sidebar-link{{ if $s.IsPage }} td-sidebar-link__page{{ else }} td-sidebar-link__section{{ end }}{{ if $treeRoot }} tree-root{{ end }}" id="{{ $mid }}">{{ with $s.Params.Icon}}<i cl [...]
+    {{ else -}}
+      {{ if not $treeRoot }}
+      <a href="{{ $manualLink }}"{{ if ne $s.LinkTitle $manualLinkTitle }} title="{{ $manualLinkTitle }}"{{ end }}{{ with $s.Params.manualLinkTarget }} target="{{ . }}"{{ if eq . "_blank" }} rel="noopener"{{ end }}{{ end }} class="align-left pl-0{{ if $active}} active{{ end }} td-sidebar-link{{ if $s.IsPage }} td-sidebar-link__page{{ else }} td-sidebar-link__section{{ end }}" id="{{ $mid }}">{{ with $s.Params.Icon}}<i class="{{ . }}"></i>{{ end }}<span class="{{ if $active }}td-sidebar-n [...]
+      {{ end -}}
+    {{ end -}}
+    {{ if $withChild -}}
+      {{ $ulNr := add $ulNr 1 -}}
+      <ul class="ul-{{ $ulNr }}{{ if (gt $ulNr 1)}} foldable{{end}}">
+        {{ $pages := where (union $s.Pages $s.Sections).ByWeight ".Params.toc_hide" "!=" true -}}
+        {{ with site.Params.language_alternatives -}}
+          {{ range . }}
+            {{ with (where $.section.Translations ".Lang" . ) -}}
+              {{ $p := index . 0 -}}
+              {{ $pages = where ( $pages | lang.Merge (union $p.Pages $p.Sections)) ".Params.toc_hide" "!=" true -}}
+            {{ end -}}
+          {{ end -}}
+        {{ end -}}
+        {{ $pages := $pages | first 50 -}}
+        {{ range $pages -}}
+          {{ if (not (and (eq $s $p.Site.Home) (eq .Params.toc_root true)) ) -}}
+            {{ $mid := printf "m-%s" (.RelPermalink | anchorize) -}}
+            {{ $active := eq . $p -}}
+            {{ $isForeignLanguage := (ne (string .Lang) (string $.currentLang)) -}}
+            {{ if (and $isForeignLanguage  ($p.IsDescendant $s)) -}}
+              <a class="td-sidebar-link td-sidebar-link__page {{ if and (not $shouldDelayActive) $active }} active{{ end }}" id="{{ $mid }}" {{ if $isForeignLanguage }}target="_blank"{{ end }}  href="{{ .RelPermalink }}">
+                {{ .LinkTitle }}{{ if $isForeignLanguage }} <small>({{ .Lang | upper }})</small>{{ end -}}
+              </a>
+            {{ else -}}
+              {{ template "section-tree-nav-section" (dict "page" $p "section" . "currentLang" $.currentLang "shouldDelayActive" $shouldDelayActive "sidebarMenuTruncate" $sidebarMenuTruncate "ulNr" $ulNr "ulShow" $ulShow) }}
+            {{- end }}
+          {{- end }}
+        {{- end }}
+      </ul>
+    {{- end }}
+  </li>
+{{- end }}
diff --git a/layouts/partials/toc.html b/layouts/partials/toc.html
new file mode 100755
index 00000000000..a57cad567ba
--- /dev/null
+++ b/layouts/partials/toc.html
@@ -0,0 +1,8 @@
+{{ partial "page-meta-links.html" . }}
+{{ if not .Params.notoc }}
+{{ with .TableOfContents }}
+{{ if ge (len .) 100 }}
+{{ . }}
+{{ end }}
+{{ end }}
+{{ end }}
\ No newline at end of file
diff --git a/layouts/shortcodes/blocks/__common.html b/layouts/shortcodes/blocks/__common.html
new file mode 100755
index 00000000000..4a395a77cfe
--- /dev/null
+++ b/layouts/shortcodes/blocks/__common.html
@@ -0,0 +1,15 @@
+{{/* This file contains some common template definitions used in the blocks shortcodes. 
+The reasoning behind the long and hard-to-remember template names is that these templates are global. */}}
+{{ define "shortcodes-blocks_getimage" }}
+{{- $cr := site.GetPage "/_common-resources" -}}
+{{- with $cr -}}
+{{- $image := $cr.Resources.GetMatch (printf "images/**%s*" $.name ) -}}
+{{- with $image -}}
+{{- $.ctx.Scratch.Set $.target $image -}}
+{{- else -}}
+{{- errorf "Image matching %q not found _common-resources" $.name -}}
+{{- end -}}
+{{- else -}}
+{{ errorf "[%s] No resource bundle found. Create an empty headless bundle; create content/%s/_common-resources/index.md with \"headless: true\" in front matter. See https://gohugo.io/content-management/page-bundles/#headless-bundle"  $.ctx.Page.Lang $.ctx.Page.Lang }}
+{{- end -}}
+{{- end -}}
diff --git a/layouts/shortcodes/blocks/case-studies.html b/layouts/shortcodes/blocks/case-studies.html
new file mode 100755
index 00000000000..af6b6a229e2
--- /dev/null
+++ b/layouts/shortcodes/blocks/case-studies.html
@@ -0,0 +1,25 @@
+{{ $caseStudiesSection := site.GetPage "case-studies" }}
+{{ if not $caseStudiesSection }}
+{{ errorf "[%s] No case-studies section found. Create content/%s/case-studies/_index.md"  $.Page.Lang $.Page.Lang }}
+{{ else }}
+{{ $caseStudiesPages := where $caseStudiesSection.Pages "Params.featured" true | first 4 }}
+<section id="talkToUs">
+  <div class="main-section">
+    <h3>{{ $caseStudiesSection.Title }}</h3>
+    <div id="caseStudiesWrapper">
+      {{ range $caseStudiesPages }}
+			{{ $logo := .Resources.GetMatch "**{feature,logo}*.svg" }}
+			{{ if not $logo }}
+				{{ $logo = .Resources.GetMatch "**logo*.png" }}
+			{{ end }}
+      <div>
+        {{ with $logo }}<img src="{{ .RelPermalink }}" alt="{{ .Title }}">{{ end }}
+        <p>"{{ .Params.quote | truncate 100 }}"</p>
+        <a href="{{ .RelPermalink }}">{{ T "main_read_more" }}</a>
+      </div>
+      {{ end }}  
+    </div>
+    <h5 style="text-align: center"><a href="/case-studies/" style="color: #3371E3; font-weight: 400">{{ $caseStudiesSection.LinkTitle }}</a></h5>
+  </div>
+</section>
+{{ end }}
diff --git a/layouts/shortcodes/blocks/contact-us.html b/layouts/shortcodes/blocks/contact-us.html
new file mode 100644
index 00000000000..d9190eff06d
--- /dev/null
+++ b/layouts/shortcodes/blocks/contact-us.html
@@ -0,0 +1,15 @@
+{{ $contacts := site.Data.contacts -}}
+
+<section class="home--top-section">
+<h2>联系社区</h2>
+<div class="c-contacts">
+  {{ range $contacts -}}
+  {{ $img := printf "img/contacts/%s" .image | relURL -}}
+    <div class="c-contact">
+      <a href="{{ .link }}" aria-label="{{ .name }}" target="_blank" rel="noopener">
+        <img class="contact-picture" src="{{ $img }}" alt="{{ .name }} logo">
+      </a>
+    </div>
+  {{- end }}
+</div>
+</section>
\ No newline at end of file
diff --git a/layouts/shortcodes/blocks/cover.html b/layouts/shortcodes/blocks/cover.html
index 3acba85b14e..7791c1ee4bd 100644
--- a/layouts/shortcodes/blocks/cover.html
+++ b/layouts/shortcodes/blocks/cover.html
@@ -29,7 +29,7 @@
     <div class="row">
       <div class="col-12">
         <div class="text-center">
-          {{ with .Get "title" }}<h1 class="display-1 mt-0 mt-md-5 pb-4">{{ $title := . }}{{ with $logo_image }}{{ $logo_image_resized := (.Fit (printf "70x70 %s" $logo_anchor)) }}<img class="td-cover-logo" src="{{ $logo_image_resized.RelPermalink }}" alt="{{ $title | html }} Logo">{{ end }}{{ $title | html }}</h1>{{ end }}
+          {{ with .Get "title" }}<h1 style="font-size: 5rem;" class="display-1 mt-0 mt-md-5">{{ $title := . }}{{ with $logo_image }}{{ $logo_image_resized := (.Fit (printf "70x70 %s" $logo_anchor)) }}<img class="td-cover-logo" src="{{ $logo_image_resized.RelPermalink }}" alt="{{ $title | html }} Logo">{{ end }}{{ $title | html }}</h1>{{ end }}
           {{ with .Get "subtitle" }}<p class="display-2 text-uppercase mb-0">{{ . | html }}</p>{{ end }}
           <div class="pt-3 lead">
             {{ .Inner | markdownify}}
diff --git a/layouts/shortcodes/blocks/dubbo-features.html b/layouts/shortcodes/blocks/dubbo-features.html
new file mode 100755
index 00000000000..59729684ed1
--- /dev/null
+++ b/layouts/shortcodes/blocks/dubbo-features.html
@@ -0,0 +1,36 @@
+{{/* 
+
+This shortcode lists pages that have a "feature" section configured in front matter. 
+
+This creates a set of feature boxes as seen on the home page.
+
+See /content/en/docs/concepts/services-networking/service.md for an example:
+
+feature:
+  title: Service discovery and load balancing
+  description: >
+    No need to modify your application to use an unfamiliar service discovery mechanism. Kubernetes gives containers their own IP addresses and a single DNS name for a set of containers, and can load-balance across them.
+
+Note that markdown can be used in the description.
+
+ */}}
+<section id="features">
+    <div class="main-section">
+        <h3 class="center">{{ T "main_dubbo_features" }}</h3>
+        {{ $pages := where site.Pages ".Params.feature" "!=" nil }}
+        {{range $i, $p := $pages }}
+        {{ if and (gt $i 0) (modBool $i 2) }}</div>{{ end }}
+        {{ if modBool $i 2 }}
+        <div class="feature-box">
+            {{ end }}
+            <div>
+                {{ with .Params.feature }}
+                <h4><a href="{{ $p.RelPermalink}}{{ with .anchor }}#{{ . | anchorize }}{{ end }}">{{ .title }}</a></h4>
+                {{ $description := .description | default $p.Params.description }}
+                {{ $description | markdownify }}
+                {{ end }}
+            </div>
+     
+        {{ end }}
+    </div>
+</section>
diff --git a/layouts/shortcodes/blocks/feature.html b/layouts/shortcodes/blocks/feature.html
new file mode 100755
index 00000000000..39fab4f20bf
--- /dev/null
+++ b/layouts/shortcodes/blocks/feature.html
@@ -0,0 +1,15 @@
+{{/* 
+This shortcode renders a main feature as seen on the top of the Kubernetes home page.
+
+It can be given a "image" parameter with a name partially matching a file in the images folder of the _common-resources bundle.
+
+ */}}
+{{- $imageName := $.Get "image" | default "flower" -}}
+{{ if  $imageName }}{{- template "shortcodes-blocks_getimage" (dict "name" $imageName "ctx" . "target" "feature-image") -}}{{ end }}
+{{- $image := $.Scratch.Get "feature-image" -}}
+<div class="main-section">
+	{{ with $image }}<div class="image-wrapper"><img src="{{ .RelPermalink }}" alt="{{ .Title }}"></div>{{ end }}
+	<div class="content">
+		{{ $.Inner }}
+	</div>
+</div>
diff --git a/layouts/shortcodes/blocks/lead.html b/layouts/shortcodes/blocks/lead.html
new file mode 100755
index 00000000000..99910ec0c29
--- /dev/null
+++ b/layouts/shortcodes/blocks/lead.html
@@ -0,0 +1,19 @@
+{{- $class := .Get "class" -}}
+{{- $style := .Get "style" -}}
+{{- $id := .Get "id" | default (printf "section-%d" .Ordinal) -}}
+{{- $bg := .Get "background-image" -}}
+{{- if $bg -}}
+	{{ template "shortcodes-blocks_getimage" (dict "name" $bg "ctx" . "target" "bg") }}
+{{- end -}}
+{{- $image := $.Scratch.Get "bg" -}}
+<section id="{{ $id }}"{{ with $class }} class="{{ . }}"{{ end }}>
+	<div class="container text-center td-arrow-down">
+		<span class="h4 mb-0">
+			{{ if eq .Page.File.Ext "md" }}
+				{{ .Inner | markdownify }}
+			{{ else }}
+				{{ .Inner | htmlUnescape | safeHTML }}
+			{{ end }}
+		</span>
+	</div>
+</section>
diff --git a/layouts/shortcodes/blocks/section.html b/layouts/shortcodes/blocks/section.html
new file mode 100755
index 00000000000..49e6d664be8
--- /dev/null
+++ b/layouts/shortcodes/blocks/section.html
@@ -0,0 +1,11 @@
+{{- $class := .Get "class" -}}
+{{- $style := .Get "style" -}}
+{{- $id := .Get "id" | default (printf "section-%d" .Ordinal) -}}
+{{- $bg := .Get "background-image" -}}
+{{- if $bg -}}
+	{{ template "shortcodes-blocks_getimage" (dict "name" $bg "ctx" . "target" "bg") }}
+{{- end -}}
+{{- $image := $.Scratch.Get "bg" -}}
+<section id="{{ $id }}"{{ with $class }} class="{{ . }}"{{ end }} style="{{ with $image }}background-image: url({{ .Permalink }}); {{ end }}{{ with $style }}{{ . | safeCSS }}{{ end }}">
+	{{ $.Inner }}
+</section>
diff --git a/layouts/shortcodes/docs/content_box.md b/layouts/shortcodes/docs/content_box.md
index 85fd54a2f41..eda4035e2cd 100644
--- a/layouts/shortcodes/docs/content_box.md
+++ b/layouts/shortcodes/docs/content_box.md
@@ -1,22 +1,17 @@
-{{ $lang := lower ($.Page.Params.language | default $.Page.Params.title) -}}
-{{ $src_repo_url := $.Page.Params.src_repo | default (printf "https://github.com/apache/dubbo-%s" $lang) -}}
-{{ $src_repo_link := printf "[dubbo-%s repo](%s)" $lang $src_repo_url -}}
-
 {{ with .Page.Params.content -}}
 <div class="row">
 {{ range $list_entry := . }}
 {{ range $heading, $items := $list_entry }}
-{{ $hd := printf "### %s" (humanize $heading) -}}
 
 {{ range $items }}
 <div class="col-sm col-md-6 mb-4">
   <div class="h-100 card shadow" href="#">
     <div class="card-body">
-  {{ $item := replace . "$src_repo_url" $src_repo_url }}
-  {{ $item = replace $item "$src_repo_link" $src_repo_link }}
+  {{ $item :=. }}
   <h4 class="card-title">
-    {{ $item | $.Page.RenderString }}
+    {{ $item.name | $.Page.RenderString }}
   </h4>
+  <p>{{ $item.description }}</p>
     </div>
   </div>
 </div>
diff --git a/layouts/shortcodes/docs/document_box.md b/layouts/shortcodes/docs/document_box.md
new file mode 100644
index 00000000000..be49c5da68f
--- /dev/null
+++ b/layouts/shortcodes/docs/document_box.md
@@ -0,0 +1,24 @@
+{{ with .Page.Params.content -}}
+<div class="row">
+{{ range $list_entry := . }}
+{{ range $heading, $items := $list_entry }}
+
+{{ range $items }}
+<div class="col-sm col-md-6 mb-4">
+  <div class="h-100 card shadow" href="#">
+    <div class="card-body">
+  {{ $item := . }}
+  {{ $name := $item.name }}
+  {{ $links := $item.links }}
+  <h4 class="card-title">
+    {{ $item.name | $.Page.RenderString }}
+  </h4>
+    <ul>{{ range $links }}{{ $link := . }}<li>{{ $link | $.Page.RenderString }}</li>{{ end }}</ul>
+    </div>
+  </div>
+</div>
+{{ end }}
+{{ end }}
+{{ end }}
+</div>
+{{ end -}}
diff --git a/static/css/README.md b/static/css/README.md
new file mode 100755
index 00000000000..1b7f01d417f
--- /dev/null
+++ b/static/css/README.md
@@ -0,0 +1,12 @@
+# NOTE
+
+
+This directory contains stylesheet files referenced by different sections of
+the website. Please use caution when moving/renaming them.
+
+## Style Sheets used by API reference
+
+- bootstrap-4.3.1.min.css
+- fontawesome-4.7.0.min.css
+- style_apiref.css
+
diff --git a/static/css/bootstrap-4.3.1.min.css b/static/css/bootstrap-4.3.1.min.css
new file mode 100755
index 00000000000..92e3fe87129
--- /dev/null
+++ b/static/css/bootstrap-4.3.1.min.css
@@ -0,0 +1,7 @@
+/*!
+ * Bootstrap v4.3.1 (https://getbootstrap.com/)
+ * Copyright 2011-2019 The Bootstrap Authors
+ * Copyright 2011-2019 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ */:root{--blue:#007bff;--indigo:#6610f2;--purple:#6f42c1;--pink:#e83e8c;--red:#dc3545;--orange:#fd7e14;--yellow:#ffc107;--green:#28a745;--teal:#20c997;--cyan:#17a2b8;--white:#fff;--gray:#6c757d;--gray-dark:#343a40;--primary:#007bff;--secondary:#6c757d;--success:#28a745;--info:#17a2b8;--warning:#ffc107;--danger:#dc3545;--light:#f8f9fa;--dark:#343a40;--breakpoint-xs:0;--breakpoint-sm:576px;--breakpoint-md:768px;--breakpoint-lg:992px;--breakpoint-xl:1200px;--font-family-sans-serif:-apple-s [...]
+/*# sourceMappingURL=bootstrap.min.css.map */
\ No newline at end of file
diff --git a/static/css/case-studies-gradient.css b/static/css/case-studies-gradient.css
new file mode 100755
index 00000000000..274c0502e81
--- /dev/null
+++ b/static/css/case-studies-gradient.css
@@ -0,0 +1,413 @@
+.flip-nav ul.global-nav li a, .open-nav ul.global-nav li a {
+  color:#303030 !important;
+}
+
+
+.article {
+  width:100%;
+  border:1px solid grey;
+  display: inline-block;
+  vertical-align: top;
+  position: relative;
+  font-weight:300;
+  color:#ffffff;
+  padding-top:10%;
+  padding-bottom:0.5%;
+  padding-left:10%;
+  font-size:1.2em;
+  background:linear-gradient(to right, #2635e4, #c72f6c);
+  background-size:100% auto;
+  background-repeat:no-repeat;
+}
+
+.image {
+padding-top:5% !important;
+}
+
+.overlay:before{
+  position: absolute;
+  content:" ";
+  top:0;
+  left:0;
+  width:100%;
+  height:100%;
+  display: block;
+  z-index:0;
+  background:linear-gradient(to right, #2635e4, #c72f6c);
+  opacity:0.8;
+}
+
+
+.article * {
+    position: relative;
+    /* hack */
+}
+
+.quoteauthortext {
+  font-size:14px;
+  letter-spacing:2px;
+  text-transform:uppercase;
+
+}
+
+
+#caseStudyTitle {
+    margin-top: 1em !important;
+}
+
+p {
+  padding-bottom:1%;
+  padding-top:1%;
+  font-weight:300;
+  line-height:1.4em;
+  letter-spacing:0.03em;
+}
+
+section {
+  font-weight:300;
+  line-height:1.4em;
+  letter-spacing:0.03em;
+  padding:0px !important
+}
+
+.header_logo {
+  width:23%;
+  margin-bottom:-0.6%;
+  margin-left:10px;
+}
+
+a {
+  text-decoration:none;
+  color:#3366ff;
+}
+
+body {
+  margin:0;
+}
+
+h1 {
+  font-weight:bold;
+  letter-spacing:0.025em;
+  font-size:42px;
+  padding-bottom:1%;
+  margin-top:5%;
+}
+
+.subhead {
+  font-size:26px;
+  font-weight:300;
+  line-height:1.4em;
+  padding-bottom:2%;
+  padding-right:10%;
+  width:80%;
+  letter-spacing:0.02em;
+  padding-top:0.5%;
+}
+
+.banner1 {
+  font-weight:300;
+  color:#ffffff;
+  padding-top:12%;
+  padding-bottom:0.5%;
+  padding-left:10%;
+  font-size:32px;
+  background-size:100% auto;
+}
+
+.greybanner {
+  font-weight:300;
+  color:#ffffff;
+  padding-left:5%;
+  padding-right:5%;
+  padding-top:4%;
+  padding-bottom:2%;
+  font-size:24px;
+  letter-spacing:0.03em;
+  line-height:34px;
+  background-size:100% auto;
+  background-color:#666666;
+}
+
+.quotetext {
+  font-weight:300;
+  color:#ffffff;
+  padding-top:0%;
+  margin-top:0;
+  padding-bottom:3%;
+  width:80%;
+  font-size:1.3em;
+  line-height:1.4em;
+  letter-spacing:0.03em;
+  padding-right:10%;
+  text-align:center;
+  margin:0 auto;
+}
+
+.greyquotetext {
+  font-weight:300;
+  color:#ffffff;
+  width:75%;
+  text-align:center;
+  margin:0 auto;
+}
+
+h2 {
+  font-weight:300;
+  font-size:24px;
+  line-height:1.4em;
+  padding-top:1.5%;
+  padding-bottom:1%;
+  color:#3366ff;
+}
+
+h4 {
+  font-weight:300;
+  font-size:24px;
+  line-height:1.4em;
+  padding-top:1.5%;
+  padding-bottom:2%;
+  color:#3366ff;
+}
+
+.quote {
+  font-weight:300;
+  font-size:22px;
+  line-height:32px;
+  color:#3366ff;
+}
+
+.details {
+  font-weight:300;
+  font-size:1.2em !important;
+  color:#3366ff;
+  letter-spacing:0.03em;
+  padding-bottom:2% !important;
+  padding-top:2%;
+  margin-left:0;
+  padding-left:10%;
+}
+
+hr {
+  border-bottom:0px solid;
+  width:100%;
+  opacity:0.3;
+  background-color:#999999;
+  height:1px;
+}
+
+.col1 {
+  color:#606060;
+  letter-spacing:0.03em;
+  width:100%;
+}
+
+.col2 {
+  font-weight:300;
+  color:#606060;
+  letter-spacing:0.03em;
+
+}
+
+.fullcol {
+  width:77%;
+  margin-left:11%;
+  margin-right:10%;
+  margin-top:4%;
+  margin-bottom:4%;
+  font-weight:300;
+  color:#606060;
+  letter-spacing:0.03em;
+}
+
+
+
+
+.colsgradient {
+  width:80%;
+  margin-left:10%;
+  margin-top:2%;
+  margin-bottom:4%;
+}
+
+.video {
+  text-align: center;
+  height: auto;
+}
+
+@media screen and (max-width: 910px) {
+
+  .fullcol {
+    padding-top:2%;
+    padding-bottom:2%;
+    width:90%;
+    margin-left:5%;
+  }
+
+  .quotetext{
+    width:90%;
+    margin-left:2%;
+    font-size:1em;
+    padding-top:8%;
+    padding-bottom:8%;
+    padding-right:5%;
+  }
+
+  .greyquotetext{
+    width:85%;
+    margin-left:%;
+    font-size:0.8em;
+    line-height:1.4em;
+  }
+
+  h1 {
+    font-weight: bold;
+    line-height: 36px;
+    letter-spacing: 0.03em;
+    font-size: 30px !important;
+    padding-bottom: 0px;
+    width: 80%;
+    margin-top:20%;
+  }
+
+  .header_logo {
+    width: 35%;
+    margin-bottom: -.5%;
+    margin-left: 10px;
+  }
+
+  .subhead {
+    font-size:1em;
+    font-weight: 300;
+    line-height: 1.3em;
+    letter-spacing:0.02em;
+    padding-top:1%;
+    width:90%;
+    padding-bottom:4%;
+  }
+
+  .details {
+    font-weight: 300;
+    font-size: 1em !important;
+    color: #3366ff;
+    letter-spacing: 0.03em;
+    padding-bottom: 0%;
+    line-height: 1.6em;
+    padding-top: 1em;
+    padding-left: 10%;
+    padding-right:5%;
+  }
+
+ .logo {
+      width: 8%;
+  }
+
+  .col1 {
+    width: 90%;
+    margin-left:5%;
+    color: #606060;
+    letter-spacing: 0.03em;
+  }
+
+  .col2 {
+    width: 95%;
+    padding-top: 2%;
+    padding-bottom: 5%;
+    font-weight: 300;
+    line-height: 20px;
+    color: #606060;
+    letter-spacing: 0.03em;
+    font-size: 14px;
+  }
+
+  .fullcol {
+    margin-top: 6%;
+    width:80%;
+    margin-left:10%;
+    margin-bottom: 8%;
+
+  }
+
+  .quote {
+    font-size: 18px;
+    line-height: 24px;
+  }
+
+  .logo {
+    width: 35%;
+  }
+
+  .article {
+    width:100%;
+    border:1px solid grey;
+    display: inline-block;
+    vertical-align: top;
+    position: relative;
+    font-weight:300;
+    color:#ffffff;
+    padding-top:20%;
+    padding-bottom:0.5%;
+    padding-left:10%;
+    font-size:1.2em;
+    background:linear-gradient(to right, #2635e4, #c72f6c);
+    background-size:100% auto;
+    background-repeat:no-repeat;
+  }
+
+  .image {
+  padding-top:2% !important
+  }
+
+  .overlay:before{
+    position: absolute;
+    content:" ";
+    top:0;
+    left:0;
+    width:100%;
+    height:100%;
+    display: block;
+    z-index:0;
+    background:linear-gradient(to right, #2635e4, #c72f6c);
+    opacity:0.8;
+  }
+
+  .colsgradient {
+    width:90%;
+    margin-left:5%;
+    margin-bottom:10%;
+  }
+
+  p {
+    padding-bottom:2%;
+    padding-top:2%;
+    font-size:1em;
+    font-weight:300;
+    line-height:1.4em;
+    letter-spacing:0.03em;
+  }
+
+  section {
+    font-weight:300;
+    line-height:1.4em;
+    letter-spacing:0.03em;
+    padding:0px !important
+  }
+
+  .quoteauthortext {
+    line-height:1.5em;
+  }
+
+  h2 {
+    padding-top:6%;
+  }
+}
+
+@media screen and (max-width: 580px){
+
+  .header_logo {
+    width:60%;
+    margin-bottom:1%;
+    margin-left:0%;
+    margin-top:2%;
+
+  }
+}
diff --git a/static/css/community.css b/static/css/community.css
new file mode 100755
index 00000000000..99ad2948fae
--- /dev/null
+++ b/static/css/community.css
@@ -0,0 +1,425 @@
+body.cid-community #banner {
+  aspect-ratio: 1500 / 293; /* match source image */
+  display: block;
+  width: 100%;
+  margin: 0 0 2.5em 0;
+  max-height: min(calc(2.5vw + min(24em, calc(2 * 293px))), 50vh);
+  object-fit: cover;
+  overflow: clip;
+}
+
+body.cid-community .community-section #h2 {
+  font-weight: 200;
+  margin-top: 1em;
+  margin-bottom: 0.5em;
+  text-align: center;
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+}
+
+body.cid-community .community-section h2:before,
+body.cid-community .community-section h2:after {
+  background-color: #aaaaaa;
+  content: "";
+  display: inline-block;
+  height: 1px;
+  position: relative;
+  vertical-align: middle;
+  width: 35%;
+}
+
+body.cid-community .community-section h2:before {
+  right: 0.5em;
+  margin-left: -50%;
+}
+
+body.cid-community .community-section h2:after {
+  left: 0.5em;
+  margin-right: -50%;
+}
+
+body.cid-community .community-section, body.cid-community #navigation-items {
+  max-width: min(85vw,100em);
+  margin-left: auto;
+  margin-right: auto;
+}
+
+body.cid-community .community-section {
+  margin-top: 1em;
+  margin-bottom: 1em;
+  padding: 0.5em 0;
+  justify-content: space-evenly;
+  align-items: baseline;
+  align-content: space-between;
+  min-height: 10em;
+  text-align: center; /* overridden for paragraphs */
+}
+
+body.cid-community .community-section:first-child {
+  padding-top: max(3vh,1.5em);
+}
+
+body.cid-community #navigation-items {
+  padding: 0.25em;
+
+  width: 100vw;
+  max-width: initial;
+
+  margin-top: 2.5em;
+  margin-bottom: 2.5em;
+
+  gap: 1.25em;
+
+  border-bottom: 1px solid #aaaaaa;
+  border-top: 1px solid #aaaaaa;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+/* Allow fallback if calc() fails */
+body.cid-community #navigation-items {
+  padding-left: calc((100vw - min(85vw,120em))/2);
+  padding-right: calc((100vw - min(85vw,120em))/2);
+}
+
+body.cid-community #navigation-items .community-nav-item {
+  flex-grow: 1;
+  text-align: center;
+  letter-spacing: 0.08em;
+  padding-top: 0.2em;
+  padding-bottom: 0.2em;
+  word-spacing: initial;
+  text-decoration: none;
+  text-transform: uppercase;
+  font-weight: 400;
+  color: #303030;
+  background: #ffffff;
+  font-size: 1.1em;
+  padding: 0.2em;
+  margin: 0;
+  max-width: 75vw;
+  min-width: 10%;
+  min-height: 2em;
+}
+
+body.cid-community .community-section > p:not(.community-simple) {
+  line-height: 1.5em;
+  text-align: initial;
+}
+
+body.cid-community .community-section#introduction,
+body.cid-community .community-section#introduction > p {
+  line-height: 1.75em;
+  font-weight: 300;
+  letter-spacing: 0.04em;
+}
+
+body.cid-community #gallery {
+  display: flex;
+  max-width: 100vw;
+  gap: 0.75rem;
+  justify-content: center;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+body.cid-community #gallery img {
+  display: block;
+  flex-basis: 0;
+  flex-grow: 0;
+  height: min(20em, 90vh);
+}
+
+/* see media queries later in file */
+body.cid-community #gallery img.community-gallery-mobile {
+  display: none;
+}
+
+
+
+
+body.cid-community .community-section#events {
+  width: 100vw;
+  max-width: initial;
+  margin-bottom: 0;
+
+  /* no events
+  background-image: url('/images/community/event-bg.jpg');
+  background-size: 100% auto;
+  background-position: center;
+  color: #fff;
+  */
+  display: none;
+}
+
+body.cid-community .community-section#values {
+  width: 100vw;
+  max-width: initial;
+  background-image: url('/images/community/event-bg.jpg');
+  color: #fff;
+  padding: 2em;
+  margin-top: 3em;
+}
+body.cid-community .community-section#values {
+  padding-left: calc((100vw - min(75vw,120em))/2);
+  padding-right: calc((100vw - min(75vw,120em))/2);
+}
+
+body.cid-community .community-section#meetups {
+  width: 100vw;
+  max-width: initial;
+  margin-top: 0;
+
+  background: url('/images/community/kubernetes-community-final.jpg'), url('/images/community/kubernetes-community-column.png');
+  background-position: 80% center, left center;
+  background-repeat: no-repeat, repeat;
+  background-size: auto 100%, cover;
+  color: #fff;
+
+  width: 100vw;
+  /* fallback in case calc() fails */
+  padding: 5vw;
+  padding-bottom: 1em;
+  min-height: min(24em,50vh);
+}
+
+body.cid-community .community-section#meetups {
+  padding-left: calc((100vw - min(75vw,100em))/2);
+  padding-right: calc((100vw - min(75vw,100em))/2);
+}
+
+body.cid-community a.community-cta-button {
+  appearance: button;
+  display: inline-block;
+  margin: 0.75em auto 0 auto; /* gap before button */
+
+  background-color: #0662EE;
+  color: white;
+
+  border-radius: 6px;
+  padding: 0.75em;
+  min-height: 3em;
+  min-width: max(5vw, 9em);
+
+  text-align: center;
+}
+
+body.cid-community a.community-cta-button > span.community-cta {
+  color: inherit;
+  background: transparent;
+
+  letter-spacing: 0.02em;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+
+body.cid-community .fullbutton {
+  appearance: button;
+  display: inline-block;
+  margin: auto;
+  margin-top: 2rem;
+  background-color: #0662EE;
+  color: white;
+  font-size: 1.5em;
+  border-radius: 0.3333em;
+  padding: 0.5em;
+  letter-spacing: 0.07em;
+  font-weight: bold;
+}
+
+body.cid-community #videos {
+  width: 100vw;
+  max-width: initial;
+  padding: 0.5em 5vw 5% 5vw; /* fallback in case calc() fails */
+  background-color: #eeeeee;
+  margin-top: 4em;
+}
+
+body.cid-community #videos {
+  padding-left: calc((100vw - min(95vw,160em))/2);
+  padding-right: calc((100vw - min(95vw,160em))/2);
+}
+
+body.cid-community #videos .container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: max(12px,2em);
+  max-width: 95vw;
+  justify-content: center;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+
+body.cid-community .video {
+  width: min(80vw,max(31%, 24em));
+  flex-basis: 31%;
+  flex-shrink: 1;
+}
+
+body.cid-community .video .videocta {
+  display: block;
+  margin: 0.25em 0 0em 0;
+  text-align: center;
+  padding: 0.25em;
+  padding-bottom: 2em;
+  text-align: center;
+  color: #0662EE;
+  text-transform: uppercase;
+  font-weight: bold;
+  letter-spacing: 0.06em;
+  line-height: 1.25em;
+  clear: both;
+}
+
+body.cid-community .video iframe {
+  min-width: 95%;
+  height: auto;
+  aspect-ratio: 16 / 9;
+}
+
+body.cid-community #resources {
+  margin-top: 5%;
+  margin-bottom: 3%;
+}
+
+body.cid-community #resources .container {
+  width: 100%;
+  display: flex;
+  flex-wrap: none;
+  gap: 2em;
+  justify-content: center;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+
+body.cid-community #resources .container > .community-resource {
+  flex-basis: auto;
+  width: 100%;
+  flex-shrink: 1;
+}
+
+body.cid-community #resources .container > .community-resource img {
+  max-height: min(6em, 50vh);
+  width: auto;
+  display: block;
+  margin: 1em auto 0.75em auto;
+}
+
+body.cid-community #resources .container > .community-resource a {
+  text-transform: uppercase;
+}
+
+body.cid-community .resourcebox {
+  height: 100%;
+  min-height: 370px;
+}
+
+
+
+
+body.cid-community .community-section.community-frame {
+  width: 100vw;
+}
+
+body.cid-community .community-section.community-frame .twittercol1 {
+  width: 100%;
+}
+
+body.cid-community details > summary {
+  color: #303030;
+}
+
+body.cid-community #cncf-code-of-conduct-intro,
+body.cid-community #cncf-code-of-conduct {
+  max-width: min(90vw, 100em);
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+body.cid-community #cncf-code-of-conduct {
+  padding-bottom: 8em;
+  padding-top: 0.25em;
+  margin-top: 0;
+}
+
+/* duplication not needed */
+body.cid-community #values-legacy h1 {
+  display: none;
+}
+
+body.cid-community #values-legacy h2,
+body.cid-community #cncf-code-of-conduct h2 {
+  margin-top: 0.25em;
+  margin-bottom: 1em;
+  color: #0662EE;
+}
+
+body.cid-community #values-legacy h2:before,
+body.cid-community #values-legacy h2:after,
+body.cid-community #cncf-code-of-conduct h2:before,
+body.cid-community #cncf-code-of-conduct h2:after {
+  display: none; /* skip decoration */
+}
+
+
+@media only screen and (max-width: 640px) {
+  body.cid-community #navigation-items {
+    justify-content: flex-start;
+    text-align: left;
+    gap: min(2px,0.125em);
+  }
+  body.cid-community #navigation-items div.community-nav-item {
+    width: 100%;
+    text-align: left;
+    min-height: initial;
+    flex-shrink: 0;
+  }
+  body.cid-community .video {
+    max-width: 80vw;
+    flex-basis: auto;
+  }
+  body.cid-community #resources .container {
+    flex-wrap: wrap;
+  }
+  body.cid-community #resources .container .community-resource {
+    max-width: min(80vw, 24rem);
+  }
+  body.cid-community a.community-cta-button {
+    font-size: 1.5rem;
+  }
+}
+
+@media only screen and (max-width: 1024px) {
+  body.cid-community #gallery img.community-gallery-desktop {
+    display: none;
+  }
+  body.cid-community #gallery img.community-gallery-mobile {
+    display: initial;
+    max-width: 95vw;
+    height: auto;
+  }
+  body.cid-community .video {
+    flex-basis: max(30em,80vw);
+    max-width: max(32em, 75vw);
+  }
+  body.cid-community .video .videocta {
+    padding-bottom: 0.5em;
+  }
+}
+
+@media only screen and (min-width: 1024px) {
+  body.cid-community br.optional {
+    display: none;
+  }
+  body.cid-community .community-section:not(:first-of-type) {
+    min-height: max(20em,18vh);
+  }
+  body.cid-community .community-section#meetups p:last-of-type {
+   margin-bottom: 6em; /* extra space for background */
+  }
+}
\ No newline at end of file
diff --git a/static/css/contactus.css b/static/css/contactus.css
new file mode 100755
index 00000000000..8cbce385169
--- /dev/null
+++ b/static/css/contactus.css
@@ -0,0 +1,425 @@
+#banner {
+  aspect-ratio: 1500 / 293; /* match source image */
+  display: block;
+  width: 100%;
+  margin: 0 0 2.5em 0;
+  max-height: min(calc(2.5vw + min(24em, calc(2 * 293px))), 50vh);
+  object-fit: cover;
+  overflow: clip;
+}
+
+.community-section #h2 {
+  font-weight: 200;
+  margin-top: 1em;
+  margin-bottom: 0.5em;
+  text-align: center;
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+}
+
+.community-section h2:before,
+.community-section h2:after {
+  background-color: #aaaaaa;
+  content: "";
+  display: inline-block;
+  height: 1px;
+  position: relative;
+  vertical-align: middle;
+  width: 35%;
+}
+
+.community-section h2:before {
+  right: 0.5em;
+  margin-left: -50%;
+}
+
+.community-section h2:after {
+  left: 0.5em;
+  margin-right: -50%;
+}
+
+.community-section, #navigation-items {
+  max-width: min(85vw,100em);
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.community-section {
+  margin-top: 1em;
+  margin-bottom: 1em;
+  padding: 0.5em 0;
+  justify-content: space-evenly;
+  align-items: baseline;
+  align-content: space-between;
+  min-height: 10em;
+  text-align: center; /* overridden for paragraphs */
+}
+
+.community-section:first-child {
+  padding-top: max(3vh,1.5em);
+}
+
+#navigation-items {
+  padding: 0.25em;
+
+  width: 100vw;
+  max-width: initial;
+
+  margin-top: 2.5em;
+  margin-bottom: 2.5em;
+
+  gap: 1.25em;
+
+  border-bottom: 1px solid #aaaaaa;
+  border-top: 1px solid #aaaaaa;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+/* Allow fallback if calc() fails */
+#navigation-items {
+  padding-left: calc((100vw - min(85vw,120em))/2);
+  padding-right: calc((100vw - min(85vw,120em))/2);
+}
+
+#navigation-items .community-nav-item {
+  flex-grow: 1;
+  text-align: center;
+  letter-spacing: 0.08em;
+  padding-top: 0.2em;
+  padding-bottom: 0.2em;
+  word-spacing: initial;
+  text-decoration: none;
+  text-transform: uppercase;
+  font-weight: 400;
+  color: #303030;
+  background: #ffffff;
+  font-size: 1.1em;
+  padding: 0.2em;
+  margin: 0;
+  max-width: 75vw;
+  min-width: 10%;
+  min-height: 2em;
+}
+
+.community-section > p:not(.community-simple) {
+  line-height: 1.5em;
+  text-align: initial;
+}
+
+.community-section#introduction,
+.community-section#introduction > p {
+  line-height: 1.75em;
+  font-weight: 300;
+  letter-spacing: 0.04em;
+}
+
+#gallery {
+  display: flex;
+  max-width: 100vw;
+  gap: 0.75rem;
+  justify-content: center;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+#gallery img {
+  display: block;
+  flex-basis: 0;
+  flex-grow: 0;
+  height: min(20em, 90vh);
+}
+
+/* see media queries later in file */
+#gallery img.community-gallery-mobile {
+  display: none;
+}
+
+
+
+
+.community-section#events {
+  width: 100vw;
+  max-width: initial;
+  margin-bottom: 0;
+
+  /* no events
+  background-image: url('/images/community/event-bg.jpg');
+  background-size: 100% auto;
+  background-position: center;
+  color: #fff;
+  */
+  display: none;
+}
+
+.community-section#values {
+  width: 100vw;
+  max-width: initial;
+  background-image: url('/images/community/event-bg.jpg');
+  color: #fff;
+  padding: 2em;
+  margin-top: 3em;
+}
+.community-section#values {
+  padding-left: calc((100vw - min(75vw,120em))/2);
+  padding-right: calc((100vw - min(75vw,120em))/2);
+}
+
+.community-section#meetups {
+  width: 100vw;
+  max-width: initial;
+  margin-top: 0;
+
+  background: url('/images/community/kubernetes-community-final.jpg'), url('/images/community/kubernetes-community-column.png');
+  background-position: 80% center, left center;
+  background-repeat: no-repeat, repeat;
+  background-size: auto 100%, cover;
+  color: #fff;
+
+  width: 100vw;
+  /* fallback in case calc() fails */
+  padding: 5vw;
+  padding-bottom: 1em;
+  min-height: min(24em,50vh);
+}
+
+.community-section#meetups {
+  padding-left: calc((100vw - min(75vw,100em))/2);
+  padding-right: calc((100vw - min(75vw,100em))/2);
+}
+
+a.community-cta-button {
+  appearance: button;
+  display: inline-block;
+  margin: 0.75em auto 0 auto; /* gap before button */
+
+  background-color: #0662EE;
+  color: white;
+
+  border-radius: 6px;
+  padding: 0.75em;
+  min-height: 3em;
+  min-width: max(5vw, 9em);
+
+  text-align: center;
+}
+
+a.community-cta-button > span.community-cta {
+  color: inherit;
+  background: transparent;
+
+  letter-spacing: 0.02em;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+
+.fullbutton {
+  appearance: button;
+  display: inline-block;
+  margin: auto;
+  margin-top: 2rem;
+  background-color: #0662EE;
+  color: white;
+  font-size: 1.5em;
+  border-radius: 0.3333em;
+  padding: 0.5em;
+  letter-spacing: 0.07em;
+  font-weight: bold;
+}
+
+#videos {
+  width: 100vw;
+  max-width: initial;
+  padding: 0.5em 5vw 5% 5vw; /* fallback in case calc() fails */
+  background-color: #eeeeee;
+  margin-top: 4em;
+}
+
+#videos {
+  padding-left: calc((100vw - min(95vw,160em))/2);
+  padding-right: calc((100vw - min(95vw,160em))/2);
+}
+
+#videos .container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: max(12px,2em);
+  max-width: 95vw;
+  justify-content: center;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+
+.video {
+  width: min(80vw,max(31%, 24em));
+  flex-basis: 31%;
+  flex-shrink: 1;
+}
+
+.video .videocta {
+  display: block;
+  margin: 0.25em 0 0em 0;
+  text-align: center;
+  padding: 0.25em;
+  padding-bottom: 2em;
+  text-align: center;
+  color: #0662EE;
+  text-transform: uppercase;
+  font-weight: bold;
+  letter-spacing: 0.06em;
+  line-height: 1.25em;
+  clear: both;
+}
+
+.video iframe {
+  min-width: 95%;
+  height: auto;
+  aspect-ratio: 16 / 9;
+}
+
+#resources {
+  margin-top: 5%;
+  margin-bottom: 3%;
+}
+
+#resources .container {
+  width: 100%;
+  display: flex;
+  flex-wrap: none;
+  gap: 2em;
+  justify-content: center;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+
+#resources .container > .community-resource {
+  flex-basis: auto;
+  width: 100%;
+  flex-shrink: 1;
+}
+
+#resources .container > .community-resource img {
+  max-height: min(6em, 50vh);
+  width: auto;
+  display: block;
+  margin: 1em auto 0.75em auto;
+}
+
+#resources .container > .community-resource a {
+  text-transform: uppercase;
+}
+
+.resourcebox {
+  height: 100%;
+  min-height: 370px;
+}
+
+
+
+
+.community-section.community-frame {
+  width: 100vw;
+}
+
+.community-section.community-frame .twittercol1 {
+  width: 100%;
+}
+
+details > summary {
+  color: #303030;
+}
+
+#cncf-code-of-conduct-intro,
+#cncf-code-of-conduct {
+  max-width: min(90vw, 100em);
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+#cncf-code-of-conduct {
+  padding-bottom: 8em;
+  padding-top: 0.25em;
+  margin-top: 0;
+}
+
+/* duplication not needed */
+#values-legacy h1 {
+  display: none;
+}
+
+#values-legacy h2,
+#cncf-code-of-conduct h2 {
+  margin-top: 0.25em;
+  margin-bottom: 1em;
+  color: #0662EE;
+}
+
+#values-legacy h2:before,
+#values-legacy h2:after,
+#cncf-code-of-conduct h2:before,
+#cncf-code-of-conduct h2:after {
+  display: none; /* skip decoration */
+}
+
+
+@media only screen and (max-width: 640px) {
+  #navigation-items {
+    justify-content: flex-start;
+    text-align: left;
+    gap: min(2px,0.125em);
+  }
+  #navigation-items div.community-nav-item {
+    width: 100%;
+    text-align: left;
+    min-height: initial;
+    flex-shrink: 0;
+  }
+  .video {
+    max-width: 80vw;
+    flex-basis: auto;
+  }
+  #resources .container {
+    flex-wrap: wrap;
+  }
+  #resources .container .community-resource {
+    max-width: min(80vw, 24rem);
+  }
+  a.community-cta-button {
+    font-size: 1.5rem;
+  }
+}
+
+@media only screen and (max-width: 1024px) {
+  #gallery img.community-gallery-desktop {
+    display: none;
+  }
+  #gallery img.community-gallery-mobile {
+    display: initial;
+    max-width: 95vw;
+    height: auto;
+  }
+  .video {
+    flex-basis: max(30em,80vw);
+    max-width: max(32em, 75vw);
+  }
+  .video .videocta {
+    padding-bottom: 0.5em;
+  }
+}
+
+@media only screen and (min-width: 1024px) {
+  br.optional {
+    display: none;
+  }
+  .community-section:not(:first-of-type) {
+    min-height: max(20em,18vh);
+  }
+  .community-section#meetups p:last-of-type {
+   margin-bottom: 6em; /* extra space for background */
+  }
+}
\ No newline at end of file
diff --git a/static/css/feature-states.css b/static/css/feature-states.css
new file mode 100755
index 00000000000..725cf9e0fc9
--- /dev/null
+++ b/static/css/feature-states.css
@@ -0,0 +1,39 @@
+/* Feature States */
+
+.beta, .stable, .alpha, .deprecated {
+    margin-top: 20px;
+    padding: 15px;
+    background-color: #fafafa;
+    border: 1px solid transparent;
+    border-radius:4px;
+}
+
+.beta {    
+    color: #31708f;
+    border-color: #bce8f1;
+}
+
+
+.stable {    
+    color: #3c763d;
+    border-color: #d6e9c6;
+}
+
+.alpha {    
+    color: #8a6d3b;
+    border-color: #faebcc;
+}
+
+.deprecated {    
+    color: #a94442;
+    border-color: #ebccd1;
+}
+
+.deprecation_file_warning {
+    padding: 20px;
+    margin: 20px 0;
+    border: 1px solid #eee;
+    border-left-color: #d9534f;
+    border-left-width: 5px;
+    border-radius: 3px;
+}
diff --git a/static/css/fontawesome-4.7.0.min.css b/static/css/fontawesome-4.7.0.min.css
new file mode 100755
index 00000000000..540440ce89f
--- /dev/null
+++ b/static/css/fontawesome-4.7.0.min.css
@@ -0,0 +1,4 @@
+/*!
+ *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
+ *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
+ */@font-face{font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.7.0');src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');font-weight:normal;font-style:norma [...]
diff --git a/static/css/glossary.css b/static/css/glossary.css
new file mode 100755
index 00000000000..fbe429b81b0
--- /dev/null
+++ b/static/css/glossary.css
@@ -0,0 +1,60 @@
+.preview-text p {
+  display: inline;
+}
+
+.permalink {
+  background-image: url(../images/link.png);
+  background-repeat: no-repeat;
+  display: inline-block;
+  vertical-align: middle;
+  font-size: 0;
+  color: transparent;
+  width: 17px;
+  height: 17px;
+  margin-left: 10px;
+}
+
+.term-anchor {
+  display: block;
+  position: relative;
+  top: -90px;
+  visibility: hidden;
+}
+
+.tag-option {
+  padding: 5px;
+  margin: 10px;
+  float:left;
+}
+
+.canonical-tag {
+  color: white;
+  background-color: #b7c8e8;
+}
+
+.canonical-tag a {
+  color: inherit;
+  text-decoration: none !important;
+}
+
+.active-tag {
+  background-color: #3371e3;
+}
+
+.invisible {
+  visibility: hidden;
+}
+
+#tag-container {
+  float: left;
+  width: 100%;
+  border-top: 1px solid #8c8c8c;
+  border-bottom: 1px solid #8c8c8c;
+  padding: 7px 0px;
+  margin: 25px 0px;
+}
+
+.tag-description {
+  text-align: center;
+  margin: 5px 0px;
+}
diff --git a/static/css/gridpage.css b/static/css/gridpage.css
new file mode 100755
index 00000000000..4069185e0ed
--- /dev/null
+++ b/static/css/gridpage.css
@@ -0,0 +1,349 @@
+#caseStudyTitle {
+    margin-top: 1em !important;
+}
+
+.gridPage .launch-content {
+    position: relative;
+    margin: 20px auto 50px;
+}
+
+.launch-cards {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    margin-top: 20px;
+}
+
+.launch-card {
+    position: relative;
+    width: 33%;
+    padding: 0 30px 0 0;
+    margin-bottom: 50px;
+    min-height: 152px;
+  
+}
+/* 
+ * Remove the height of the H2 element pseudo-class and set the appropriate spacing 
+ * to avoid mistakenly overriding the styles of other elements 
+ */
+.launch-card h2::before {
+    margin-top: 1rem ;
+    height: 0 ;
+}
+
+.gridPage p {
+    color: rgb(26,26,26);
+    margin-left: 0 !important;
+    padding-left: 0 !important;
+    font-weight: 300 !important;
+}
+
+.gridPage #mainContent {
+    padding: 0;
+}
+
+.gridPage #mainContent .content {
+    padding-top: 0;
+}
+
+.gridPage .main-section {
+    max-width: 1100px !important;
+}
+
+.gridPage .content {
+    position: relative;
+    margin: 0 auto 50px;
+    max-width: 90%;
+}
+
+.gridPage .content p {
+    line-height: 24px !important;
+}
+
+.gridPage .content h3 {
+    padding: 0 !important;
+}
+
+.gridPage #hero h5 {
+    padding-left: 20px;
+    margin: 0;
+}
+
+.case-studies {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    margin-top: 50px;
+}
+
+.case-study {
+    position: relative;
+    width: 50%;
+    padding: 0 40px 0 242px;
+    margin-bottom: 60px;
+    min-height: 152px;
+}
+
+.case-study:nth-child(9), .case-study:nth-child(10) {
+    margin-bottom: 0px;
+}
+
+.case-study img {
+    position: absolute;
+    top: 0;
+    width:215px;
+    left: 0;
+}
+
+.gridPage #mainContent .content .case-study p {
+    font-size: 16px;
+    padding: 0;
+}
+
+p.attrib {
+    font-style: italic;
+}
+
+.gridPage #video {
+    background: #f9f9f9;
+    height: auto;
+    /*height: 340px;*/
+}
+
+.gridPage #video .main-section {
+    position: relative;
+    max-width: 900px !important;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 50px 20px;
+}
+
+.gridPage #video .main-section > div {
+    width: 50%;
+}
+
+.gridPage #video .main-section #zulilyLogo {
+    width: 100px;
+}
+
+.gridPage #video .main-section img {
+    max-width: 100%;
+}
+
+.gridPage #video h3 {
+    font-size: 32px;
+    font-weight: 300;
+    line-height: 38px;
+    max-width: 80%;
+    margin: 0 0 1em 0;
+}
+
+.gridPage #video p {
+    margin: 0;
+}
+
+.gridPage #video p.attrib {
+    margin-bottom: 20px;
+}
+
+.gridPage #video button > h6 {
+    font-size: 18px;
+    font-weight: 500;
+    margin: 1em 0;
+    color: #326de6;
+}
+
+.gridPage #users {
+    padding: 50px;
+}
+
+.gridPage #users .main-section {
+    max-width: 1150px !important;
+}
+
+.gridPage #users .main-section h3 {
+    padding-left: 20px;
+    margin-bottom: 20px;
+}
+
+.gridPage #usersGrid {
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.gridPage #usersGrid a {
+    display: inline-block;
+    margin: 5px;
+}
+
+.gridPage #usersGrid a img {
+    box-shadow: 1px 1px 2px transparent;
+    transition: box-shadow 0.25s;
+}
+
+.gridPage #usersGrid a img:hover {
+    box-shadow: 1px 1px 2px #cccccc;
+}
+
+.gridPage #usersGrid a:last-child img,
+.gridPage #usersGrid a:last-child img:hover {
+    box-shadow: 1px 1px 2px transparent;
+}
+
+.tell-your-story {
+    border: 1px solid #dddddd;
+    border-radius: 6px;
+    box-shadow: 1px 2px 2px #dddddd;
+}
+
+.gridPage .feature {
+    position: relative;
+    padding: 20px 0 20px 242px;
+}
+
+.gridPage .feature img {
+    position: absolute;
+    top: 20px;
+    left: 0;
+}
+
+section.bullets {
+    background-color: #eeeeee;
+    margin-bottom: 50px;
+}
+
+section.bullets .main-section {
+    position: relative;
+    max-width: 1100px;
+    padding: 50px 0;
+}
+
+section.bullets .content {
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    margin-bottom: 0 !important;
+}
+
+.bullet {
+    position: relative;
+    width: 50%;
+    padding: 15px 30px;
+}
+
+.bullet h4 {
+    margin-bottom: 0.5em;
+}
+
+.bullet li {
+    margin-left: 1.25em;
+    list-style: disc;
+    font-weight: 300;
+    color: rgb(26,26,26);
+    line-height: 1.5em;
+    margin-bottom: 0.5em;
+}
+
+.details h4, p {
+    margin-bottom: 0.5em;
+}
+
+.gridPage .feature p.quote {
+    font-size: 20px;
+    line-height: 28px !important;
+}
+
+@media screen and (max-width: 1024px){
+    .case-study {
+        padding: 0 10%;
+        margin-bottom: 50px;
+    }
+
+    .case-study img {
+        position: relative;
+    }
+
+    .case-study p.quote {
+        margin-top: 20px !important;
+    }
+
+    .case-study p.attrib {
+        font-style: italic;
+    }
+}
+
+@media screen and (max-width: 900px){
+    .gridPage #video .main-section {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .gridPage #video .main-section > div {
+        width: 400px;
+    }
+
+    .gridPage #video .main-section > div + div {
+        margin-top: 30px;
+    }
+
+    .gridPage #video h3 {
+        max-width: 100%;
+    }
+}
+
+@media screen and (max-width: 768px){
+  .launch-card {
+    width: 100%;
+    margin-bottom: 30px;
+    padding: 0;
+    min-height: auto;
+  }
+}
+
+@media screen and (max-width: 640px){
+    .case-study {
+        width: 100%;
+    }
+
+    .case-study:nth-child(3) {
+        margin-bottom: 60px;
+    }
+
+    .case-study img {
+        left: 50%;
+        transform: translateX(-50%);
+    }
+
+    .gridPage .feature {
+        margin-top: 50px;
+        padding: 180px 0 0;
+    }
+
+    .gridPage .feature img {
+        top: 0;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+}
+
+@media screen and (max-width: 480px){
+    .gridPage #hero {
+        padding-right: 20px;
+        padding-left: 20px;
+    }
+
+    .gridPage #video .main-section > div {
+        width: 80%;
+        min-width: 280px;
+    }
+
+    .bullet {
+        width: 100%;
+    }
+}
diff --git a/static/css/images/Ui-icons_222222_256x240.png b/static/css/images/Ui-icons_222222_256x240.png
new file mode 100755
index 00000000000..8bc06cbf03b
Binary files /dev/null and b/static/css/images/Ui-icons_222222_256x240.png differ
diff --git a/static/css/legacy_community.css b/static/css/legacy_community.css
new file mode 100755
index 00000000000..80b0404344b
--- /dev/null
+++ b/static/css/legacy_community.css
@@ -0,0 +1,858 @@
+div.community_main h1, h2, h3 {
+  border-bottom: 1px solid #cccccc;
+  margin-bottom: 30px;
+  padding-bottom: 10px;
+  padding-top: 10px;
+}
+
+div.community_main {
+  padding: 50px 100px;
+}
+
+div.community_main ul, 
+div.community_main li {
+  list-style: disc;
+  list-style-position: inside;
+  padding: 10px 0;
+  font-size: 16px;
+  font-weight: 400;
+}
+.SandboxRoot.env-bp-430 .timeline-Tweet-text {
+
+  font-size: 13pt !important;
+}
+
+#section.talkToUs {
+  display: none !important;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+.tablet {
+  display: none;
+
+}
+
+.desktop {
+  display: block;
+}
+
+.mobile {
+  display: none;
+}
+
+.twittercol1 {
+  width: 60%;
+  margin-left: 20%;
+  float: left;
+  padding: 2%
+}
+
+code {
+  font-size: 90%;
+  opacity: 0.95;
+  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace !important;
+}
+
+.fa {
+  font-size: 25px;
+  color: #FFFFFF;
+}
+
+.panel-title {
+  font-size: 25px;
+  color: #FFFFFF;
+  font-family: 'Open Sans', sans-serif;
+}
+
+.panel-heading {
+  background-color: #1da1f2 !important;
+  ;
+  color: #1da1f2 !important;
+  ;
+}
+
+.panel {
+  margin-top: 25px;
+}
+
+p {
+  font-weight: 300 !important;
+}
+
+.mobile {
+
+  display: none;
+
+}
+
+.desktop {
+  display: block;
+
+}
+
+body {
+  line-height: 1.5em;
+  margin-top: 1%;
+  font-weight: 300;
+  /* letter-spacing:0.03em; */
+  /* font-size:15px; */
+  margin: 0;
+
+}
+
+.banner1 {
+  position:relative;
+  float:left;
+  width:100%;
+  padding-left: 0 !important;
+}
+
+
+
+.intro {
+  float: left;
+  width: 75%;
+  margin-left: 12.5%;
+  text-align: left;
+  line-height: 1.6em;
+  margin-bottom: 2%;
+  margin-top: 3%;
+  font-weight: 300;
+  letter-spacing: 0.04em;
+
+}
+
+.community__navbar {
+  text-align: center;
+  padding-top: 2%;
+  padding-bottom: 2%;
+  word-spacing: 3%;
+  text-decoration: none;
+  text-transform: uppercase;
+  font-weight: 400;
+  color: #303030;
+  font-size: 14px;
+  margin-top: 1%;
+  margin-bottom: 4%;
+  width: 100%;
+  float: left;
+  letter-spacing: 0.07em;
+  border-bottom: 1px solid #aaaaaa;
+  border-top: 1px solid #aaaaaa;
+}
+
+a {
+  text-decoration: none;
+  color: #303030;
+}
+
+
+.imagecols {
+  text-align: center;
+  margin: 0 auto;
+  width: 80%;
+  margin-left: 10%;
+  float: left;
+  margin-bottom: 2%;
+
+}
+
+.imagecol {
+  margin-right: 1%;
+  float: left;
+  width: 32%;
+
+}
+
+
+.events {
+  background-image: url('/images/community/event-bg.jpg');
+  float: left;
+  width: 100%;
+  margin-top: 3%;
+
+}
+
+.eventcontainer {
+  width: 80%;
+  margin-top: 5%;
+  margin-bottom: 3%;
+  margin-left: 10%;
+}
+
+.event {
+  width: 23%;
+  color: white !important;
+  font-size: 1.1em !important;
+  padding-top: 1%;
+  padding-bottom: 8%;
+  text-align: center;
+  float: left;
+  margin: 1%;
+}
+
+.event a {
+
+  color: white !important;
+  font-weight: bold !important;
+  display: block;
+  padding-bottom: 2%;
+}
+
+.searchbar {
+  height: 50px;
+  width: 40%;
+  background-color: white;
+  float: left;
+  margin: 0 auto;
+  text-align: center;
+  vertical-align: middle;
+  margin-left: 30%;
+  margin-top: 3%;
+  margin-bottom: 5%;
+}
+
+.meetups {
+  background: url('/images/community/kubernetes-community-final.jpg');
+  background-size: 100% auto;
+  float: left;
+  background-position: center;
+  width: 100%;
+  padding: 5%;
+  padding-bottom: 7%;
+}
+
+.meetupcol {
+  z-index: 99;
+  width: 37%;
+  margin-left: 5%;
+  text-align: left;
+}
+
+.meetuptext {
+  color: white;
+  margin-bottom: 7%;
+
+}
+
+.button {
+  background-color: #0662EE;
+  color: white;
+  font-size: 18px;
+  padding-top: 3%;
+  padding-left: 4%;
+  padding-right: 4%;
+  padding-bottom: 3%;
+  border-radius: 0px;
+  margin-top: 1%;
+  float: left;
+  letter-spacing: 0.07em;
+  font-weight: bold;
+
+}
+
+.fullbutton {
+  display: inline-block;
+  margin: auto;
+  margin-top: 2rem;
+  background-color: #0662EE;
+  color: white;
+  font-size: 18px;
+  padding: 2% 2.5%;
+  letter-spacing: 0.07em;
+  font-weight: bold;
+
+}
+
+
+.newcommunitywrapper h1 {
+  font-size: 42px;
+  font-weight: 300;
+  margin-top: 4%;
+  line-height: 1.1em;
+  margin-bottom: 3%;
+  text-align: center;
+
+}
+
+.videos {
+  float: left;
+  width: 100%;
+  padding-top: 5%;
+  padding-bottom: 5%;
+  background-color: #eeeeee;
+
+}
+
+.videocontainer {
+  float: left;
+  margin-left: 10%;
+  width: 80%;
+
+}
+
+
+.video {
+  margin-right: 2%;
+  float: left;
+  width: 31%;
+
+}
+
+
+.videotext {
+  margin-top: 3%;
+  text-align: center;
+  padding-top: 4%;
+
+}
+
+.videocta {
+  text-align: center;
+  padding: 3%;
+  color: #0662EE;
+  text-transform: uppercase;
+  font-weight: bold;
+  letter-spacing: 0.05em;
+  line-height: 1.3em;
+  padding-top: 5%;
+}
+
+
+
+.resources {
+  width: 100%;
+  margin-top: 5%;
+  margin-bottom: 3%;
+  float: left;
+}
+
+
+.resourcecontainer {
+  width: 90%;
+  margin-top: 3%;
+  margin-left: 10%;
+}
+
+
+.resourcebox {
+  float: left;
+  margin: 1%;
+  border: 1px solid grey;
+  padding: 2%;
+  font-size: 1em;
+  color: #0662EE;
+  height: 100%;
+  vertical-align: middle;
+  text-transform: uppercase;
+  font-weight: bold;
+  line-height: 1.3em;
+  letter-spacing: 0.05em;
+  width: 20%;
+  min-height: 330px;
+  text-align: center;
+
+}
+
+
+.contributor {
+  float: left;
+  width: 100%;
+  background: url('/images/community/kubernetes-community-contributor.jpg');
+  background-size: 100% auto;
+  float: left;
+  background-position: center;
+
+}
+
+.contributortext {
+  color: white;
+  margin-left: 0%;
+  margin-right: 6%;
+  padding: 4%;
+  float: right;
+  width: 40%;
+  text-align: left;
+  margin-bottom: 3%;
+
+}
+
+
+.contributorimage {
+  margin-left: 4%;
+  margin-right: 0%;
+  padding: 3%;
+  float: left;
+  width: 40%;
+  text-align: left;
+
+}
+
+.conduct {
+  float: left;
+  width: 100%;
+  padding-top: 3%;
+  padding-bottom: 3%;
+  text-align: center;
+  font-weight: 300;
+}
+
+.conducttext {
+  float: left;
+  width: 70%;
+  margin-bottom: 3%;
+  margin-left: 15%;
+  text-align: center;
+  font-weight: 300;
+}
+
+
+h2 {
+  overflow: hidden;
+  font-weight: 200;
+  margin-top: 5%;
+  text-align: center;
+  letter-spacing: 0.1em;
+}
+
+h2:before,
+h2:after {
+  background-color: #aaaaaa;
+  content: "";
+  display: inline-block;
+  height: 1px;
+  position: relative;
+  vertical-align: middle;
+  width: 35%;
+}
+
+h2:before {
+  right: 0.5em;
+  margin-left: -50%;
+}
+
+h2:after {
+  left: 0.5em;
+  margin-right: -50%;
+}
+
+
+.news {
+  float: left;
+  width: 80%;
+  padding-top: 3%;
+  padding-bottom: 3%;
+  margin-left: 10%;
+  text-align: center;
+
+}
+
+.newscol {
+  float: left;
+  width: 30%;
+  font-weight: 300;
+}
+
+.resourcebox {
+
+  height: 100%;
+  min-height: 370px;
+}
+
+
+@media (max-width:1500px) and (min-width:1100px) {
+
+
+  .resourcebox {
+    min-height: 320px;
+    height: 100%;
+
+  }
+}
+
+@media (max-width:1500px) and (min-width:800px) {
+
+
+  .tablet {
+    display: block;
+
+  }
+}
+
+@media (max-width:1100px) {
+
+
+  .resourcebox {
+    min-height: 270px;
+    height: 100%;
+
+  }
+
+  .button {
+    background-color: #0662EE;
+    color: white;
+    font-size: 16px;
+    padding: 4% !important;
+    margin-top: 0%;
+    float: none;
+    margin-top: 0%;
+    margin-bottom: 5%;
+    letter-spacing: 0.07em;
+    font-weight: bold;
+
+  }
+  
+}
+
+@media (max-width:1000px) {
+  .desktop {
+    display: none;
+  }
+
+  .mobile {
+    display: block;
+  }
+}
+
+
+@media (min-width:600px) and (max-width:750px) {
+
+  .resourcebox {
+    float: left;
+    margin: 3%;
+    border: 1px solid grey;
+    padding: 1%;
+    font-size: 1.4em;
+    color: #0662EE;
+    vertical-align: middle;
+    text-transform: uppercase;
+    font-weight: bold;
+    min-height: 375px;
+    letter-spacing: 0.01em;
+    width: 43% !important;
+    line-height: 1.5em;
+    text-align: center;
+
+  }
+}
+
+@media (min-width:450px) and (max-width:600px) {
+
+  .resourcebox {
+    float: left;
+    margin: 3%;
+    border: 1px solid grey;
+    padding: 1%;
+    font-size: 1.1em;
+    ;
+    color: #0662EE;
+    vertical-align: middle;
+    text-transform: uppercase;
+    font-weight: bold;
+    min-height: 280px;
+    letter-spacing: 0.01em;
+    width: 43% !important;
+    line-height: 1.5em;
+    text-align: center;
+
+  }
+
+
+}
+
+
+@media (max-width:450px) {
+
+  .resourcebox {
+    float: left;
+    margin: 3%;
+    border: 1px solid grey;
+    padding: 1%;
+    font-size: 1.1em;
+    color: #0662EE;
+    vertical-align: middle;
+    text-transform: uppercase;
+    font-weight: bold;
+    height: 100% !important;
+    letter-spacing: 0.01em;
+    width: 43% !important;
+    line-height: 1.5em;
+    text-align: center;
+
+  }
+
+
+}
+
+@media (max-width:750px) {
+
+
+  .twittercol1 {
+    width: 95%;
+    float: left;
+    padding: 2%
+  }
+
+  .conducttextnobutton {
+    margin-bottom: 4%;
+  }
+
+  .intro {
+    float: left;
+    width: 80%;
+    margin-left: 10%;
+    text-align: center;
+    line-height: 1.6em;
+    margin-bottom: 1%;
+    margin-top: 7%;
+    margin-bottom: 7%;
+    letter-spacing: 0.04em;
+
+  }
+
+  .banner1 {
+    position: relative;
+    height: 300%;
+    float: left;
+
+
+  }
+
+  .mobile {
+
+    display: block;
+
+
+  }
+
+  .desktop {
+
+    display: none;
+
+  }
+
+  h1 {
+    text-align: center !important;
+    /* font-size: 2.1em; */
+    margin-bottom: 5%;
+    margin-top: 7%;
+  }
+
+  body {
+    overflow-x: hidden;
+    margin-top: 1%;
+    letter-spacing: 0.03em;
+    /* font-size: 13px; */
+
+  }
+
+
+  .community__navbar {
+    display: none;
+  }
+
+  .events {
+    float: left;
+    width: 100%;
+    background-color: #eeeeee;
+    margin-top: 3%;
+    padding-bottom: 5%;
+
+  }
+
+  .eventcontainer {
+    width: 100%;
+    margin-top: 5%;
+    margin-bottom: 3%;
+    margin-left: 0%;
+  }
+
+  .event {
+
+    width: 80%;
+    padding-top: 1%;
+    padding-bottom: 1%;
+    color: white;
+    text-align: center;
+    float: left;
+    margin: 1%;
+    font-size: 1.1em;
+    line-height: 1.4em;
+    margin-left: 10%;
+  }
+
+  .meetups {
+    background-color: navy !important;
+    background-size: 100% auto;
+    float: left;
+    background-position: center;
+    width: 100%;
+    padding: 5%;
+  }
+
+  .meetupcol {
+    z-index: 99;
+    width: 90%;
+    margin-left: 5%;
+    text-align: center;
+  }
+
+  .meetuptext {
+    color: white;
+    margin-bottom: 7%;
+
+  }
+
+  .button {
+    background-color: #0662EE;
+    color: white;
+    font-size: 16px;
+    padding: 4%;
+    margin-top: 1%;
+    float: none;
+    margin-bottom: 5%;
+    letter-spacing: 0.07em;
+    font-weight: bold;
+
+  }
+
+  .videos {
+    float: left;
+    width: 100%;
+    padding-top: 5%;
+    padding-bottom: 5%;
+    background-color: #eeeeee;
+
+  }
+
+  .videocontainer {
+    float: left;
+    width: 90%;
+
+  }
+
+
+  .video {
+    margin-right: 2%;
+    margin-left: 0%;
+    float: left;
+    width: 90%;
+
+  }
+
+
+  .videotext {
+    margin-top: 3%;
+    text-align: center;
+    padding-top: 4%;
+    padding-bottom: 2%;
+
+  }
+
+  .videocta {
+    text-align: center;
+    padding: 3%;
+    padding-top: 5%;
+    line-height: 1.3em;
+    color: #0662EE;
+    text-transform: uppercase;
+    font-weight: bold;
+    padding-bottom: 8%;
+    font-size: 1em;
+    letter-spacing: 0.05em;
+  }
+
+  .resources {
+    width: 100%;
+    margin-top: 8%;
+    margin-bottom: 8%;
+    float: left;
+  }
+
+
+  .resourcecontainer {
+    width: 90%;
+    text-align: center;
+    margin-top: 3%;
+    margin-left: 5%;
+  }
+
+  .contributor {
+    float: left;
+    width: 100%;
+    background: url('/images/community/kubernetes-community-contributor.jpg');
+    background-size: 100% auto;
+    float: left;
+    background-position: center;
+
+  }
+
+  .contributortext {
+    color: white;
+    margin-left: 5%;
+    float: left;
+    text-align: center !important;
+    width: 80%;
+    text-align: left;
+    margin-bottom: 3%;
+
+  }
+
+  .conduct {
+    float: left;
+    width: 100%;
+    padding-top: 3%;
+    padding-bottom: 3%;
+    text-align: center;
+    margin-bottom: 12%;
+  }
+
+  .conducttext {
+    float: left;
+    width: 80%;
+    margin-left: 10%;
+    margin-bottom: 2%;
+    text-align: center;
+  }
+
+  .fullbutton {
+    background-color: #0662EE;
+    color: white;
+    font-size: 16px;
+    padding: 4%;
+    margin-top: 8% !important;
+    /* float: none; */
+    /* margin-left: 0%; */
+    margin-bottom: 9%;
+    letter-spacing: 0.07em;
+    font-weight: bold;
+
+
+  }
+
+  .searchbar {
+    height: 50px;
+    width: 85%;
+    background-color: white;
+    float: left;
+    margin: 0 auto;
+    text-align: center;
+    vertical-align: middle;
+    margin-left: 7.5%;
+    margin-top: 5%;
+    margin-bottom: 7%;
+  }
+
+  .resourceboxtext {
+    width: 90% !important;
+    margin-left: 5% !important;
+    font-weight: 400 !important;
+    margin-top: 5% !important;
+    padding: 3%;
+    font-size: 0.7em !important;
+  }
+
+}
\ No newline at end of file
diff --git a/static/css/new-case-studies.css b/static/css/new-case-studies.css
new file mode 100755
index 00000000000..fbc6edb1435
--- /dev/null
+++ b/static/css/new-case-studies.css
@@ -0,0 +1,182 @@
+h1 {
+  font-weight: bold;
+  letter-spacing: 0.025em;
+  font-size: 42px;
+  padding-bottom: 2%;
+  margin-top: 10%;
+  margin-bottom: 0;
+}
+
+h2 {
+  font-size: 24px;
+  font-weight: 300;
+  color: #3366ff;
+  margin-top: 3rem;
+  margin-bottom: 1rem;
+}
+
+h1[id]:before, 
+h2[id]:before, 
+h4[id]:before {
+  display: none;
+}
+
+.content p, .content li {
+  font-size: 14px;
+  font-weight: 300;
+  color: #606060;
+}
+
+.quote + h2, 
+.quote + .lead {
+  margin-top: 0;
+}
+
+.content {
+  width: 76.2%;
+  margin: 0 auto;
+  margin-top: 2%;
+  margin-bottom: 4%;
+}
+
+.heading {
+  margin-right: 0.5em;
+}
+
+.heading-logo {
+  max-height: 1em;
+}
+
+.subheading {
+  display: block;
+  font-size: 26px;
+  font-weight: 300;
+  line-height: 1.4em;
+  margin-top: 0.75em;
+  padding-bottom: 0.5em;
+  letter-spacing: 0.02em;
+}
+
+.banner {
+  width: 100%;
+  position: relative;
+  font-weight: 300;
+  color: #fff;
+  padding-top: 5%;
+  padding-left: 11.9%;
+  padding-right: 11.9%;
+  font-size: 1.2em;
+  background-size: 100% auto;
+  background-color: #666;
+  background-repeat: no-repeat;
+}
+
+.banner * {
+  position: relative;
+}
+
+.overlay:before{
+  position: absolute;
+  content: "";
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: block;
+  z-index: 0;
+  background: linear-gradient(to right, #2635e4, #c72f6c);
+  opacity: 0.6;
+}
+
+.details {
+  font-weight: 300;
+  color: #3366ff;
+  letter-spacing: 0.03em;
+  padding-bottom: 2% !important;
+  padding-top: 2%;
+  margin-left: 0;
+  padding-left: 11.9%;
+  border-bottom: 1px solid #ddd;
+}
+
+.details .item {
+  margin-right: 2em;
+  white-space: nowrap;
+}
+
+.quote {
+  width: 100vw;
+  position: relative;
+  left: 50%;
+  right: 50%;
+  margin-top: 3rem;
+  margin-bottom: 3rem;
+  margin-left: -50vw;
+  margin-right: -50vw;
+}
+
+.content .quote-text {
+  color: #fff;
+  padding-bottom: 5%;
+  width: 74%;
+  font-size: 1.3em;
+  line-height: 1.4em;
+  letter-spacing: 0.03em;
+  text-align: center;
+  margin: 0 auto;
+}
+
+.content .quote-text p {
+  color: #fff;
+  font-size: 100%;
+  line-height: 1.4em;
+  margin-bottom: 0;
+}
+
+.quote-author {
+  display: block;
+  margin-top: 3em;
+  font-size: 14px;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+  line-height: 1.2em;
+}
+
+.lead {
+  font-size: 1.35rem;
+  font-weight: 300;
+  color: #3366ff;
+  margin-top: 3rem;
+  margin-bottom: 3rem;
+  letter-spacing: 0.03em;
+}
+
+.youtube-quote-sm {
+  display: inline-block;
+  width: 380px;
+  height: 215px;
+}
+
+.youtube-quote-sm iframe {
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
+
+@media screen and (max-width: 910px) {
+  h1 {
+    font-size: 32px;
+  }
+
+  .details {
+    font-size: 1em !important;
+  }
+
+  .quote-text {
+    font-size: 1em;
+  }
+
+  .quote-author {
+    font-size: 12px;
+  }
+}
diff --git a/static/css/style_amadeus.css b/static/css/style_amadeus.css
new file mode 100755
index 00000000000..54d8129e6c7
--- /dev/null
+++ b/static/css/style_amadeus.css
@@ -0,0 +1,420 @@
+#caseStudyTitle {
+    margin-top: 1em !important;
+}
+
+p {
+  padding:5%;
+}
+
+.header_logo {
+
+  width:23%;
+  margin-bottom: 1%;
+  margin-left:10px;
+}
+
+a {
+  text-decoration:none;
+  color:#3366ff;
+}
+
+body {
+  margin:0;
+
+}
+
+h1 {
+  font-weight:bold;
+  letter-spacing:0.025em;
+  font-size:42px;
+  padding-bottom:0px;
+}
+
+.subhead {
+  font-size:26px;
+  font-weight:100;
+  line-height:40px;
+  padding-bottom:1%;
+  padding-top:0.5%;
+
+}
+
+.banner1 {
+  font-weight:300;
+  color:#ffffff;
+  padding-top:12%;
+  padding-bottom:0.5%;
+  padding-left:10%;
+  font-size:32px;
+  background: url('/images/case-studies/amadeus/banner1.jpg');
+  background-size:100% auto;
+  background-repeat:no-repeat;
+}
+
+.banner2 {
+  font-weight:300;
+  color:#ffffff;
+  padding-top:4%;
+  padding-bottom:4%;
+  width:100%;
+  font-size:24px;
+  letter-spacing:0.03em;
+  line-height:34px;
+  background-size:100% auto;
+  background-color:#666666;
+  background-repeat:repeat;
+
+}
+
+.banner3 {
+  font-weight:300;
+  color:#ffffff;
+  padding-left:5%;
+  padding-right:5%;
+  padding-top:4%;
+  padding-bottom:4%;
+  font-size:24px;
+  letter-spacing:0.03em;
+  line-height:34px;
+  background: url('/images/case-studies/amadeus/banner3.jpg');
+  background-size:100% auto;
+}
+
+.banner4 {
+  font-weight:300;
+  color:#ffffff;
+  padding-top:5%;
+  padding-bottom:5%;
+  font-size:24px;
+  letter-spacing:0.03em;
+  line-height:34px;
+  background: url('/images/case-studies/amadeus/banner4.jpg');
+  background-size:100% auto;
+}
+
+.banner5 {
+  font-weight:300;
+  color:#ffffff;
+  padding-top:3%;
+  padding-bottom:3%;
+  font-size:24px;
+  letter-spacing:0.03em;
+  line-height:35px;
+  background-size:100% auto;
+  background-color:#666666;
+  background-repeat:no-repeat;
+}
+
+.banner2text {
+  font-weight:300;
+  color:#ffffff;
+  width:70%;
+  text-align:center;
+  margin:0 auto;
+}
+
+.banner3text {
+  font-weight:300;
+  color:#ffffff;
+  width:75%;
+  text-align:center;
+  margin:0 auto;
+}
+
+.banner4text {
+  font-weight:300;
+  color:#ffffff;
+  width:65%;
+  text-align:center;
+  margin:0 auto;
+}
+
+.banner5text {
+  font-weight:300;
+  color:#ffffff;
+  width:68%;
+  text-align:center;
+  margin:0 auto;
+}
+
+
+h2 {
+  font-weight:300;
+  font-size:24px;
+  line-height:34px;
+  color:#3366ff;
+}
+
+.quote {
+  font-weight:300;
+  font-size:22px;
+  line-height:32px;
+  color:#3366ff;
+}
+
+.details {
+  font-weight:300;
+  font-size:18px;
+  color:#3366ff;
+  letter-spacing:0.03em;
+  padding-bottom:1.5%;
+  padding-top:2%;
+  padding-left:10%;
+}
+
+
+hr {
+  border-bottom:0px solid;
+  width:100%;
+  opacity:0.5;
+  background-color:#999999;
+  height:1px;
+}
+
+.col1 {
+  font-weight:100;
+  color:#606060;
+  line-height:20px;
+  letter-spacing:0.03em;
+  font-size:14px;
+
+}
+
+.col2 {
+  font-weight:300;
+  line-height:20px;
+  color:#606060;
+  letter-spacing:0.03em;
+  font-size:14px;
+
+}
+
+.fullcol {
+  width:77%;
+  margin-left:11%;
+  margin-right:10%;
+  margin-top:4%;
+  margin-bottom:4%;
+  font-weight:300;
+  line-height:22px;
+  color:#606060;
+  letter-spacing:0.03em;
+  font-size:14px;
+}
+
+.cols {
+  width:80%;
+  margin-left:10%;
+  margin-top:1%;
+  margin-bottom:4%;
+  font-weight:300;
+}
+
+h4 {
+  font-weight:400;
+  letter-spacing:0.9;
+  font-size:20px;
+  padding-bottom:0px;
+}
+
+@media screen and (max-width: 910px){
+
+  h1 {
+    font-weight:bold;
+    line-height:36px;
+    letter-spacing:0.03em;
+    font-size:30px !important;
+    padding-bottom:0px;
+    width:80%;
+  }
+
+  .header_logo {
+    width:35%;
+    margin-bottom:-.5%;
+    margin-left:10px;
+  }
+
+  .subhead {
+    font-size:18px;
+    font-weight:100;
+    line-height:27px;
+  }
+
+  .details {
+    font-weight:300;
+    font-size:16px;
+    color:#3366ff;
+    letter-spacing:0.03em;
+    padding-bottom:2%;
+    line-height:28px;
+    padding-top:4%;
+    padding-left:10%;
+  }
+
+  .logo {
+      width:8%;
+  }
+
+  .col1 {
+    width: 95%;
+    padding-right:8%;
+    float:left;
+    font-weight:300;
+    color:#606060;
+    line-height:20px;
+    letter-spacing:0.03em;
+    font-size:14px;
+  }
+
+  .col2 {
+    width: 95%;
+    padding-top:2%;
+    padding-bottom:5%;
+    font-weight:300;
+    float:left;
+    line-height:20px;
+    color:#606060;
+    letter-spacing:0.03em;
+    font-size:14px;
+  }
+
+  .banner1 {
+    font-weight:300;
+    color:#ffffff;
+    padding-top:15%;
+    padding-bottom:2%;
+    padding-left:10%;
+    font-size:18px;
+    background: url('/images/case-studies/amadeus/banner1.jpg');
+    background-size:100% auto;
+  }
+
+  .banner2 {
+    font-weight:300;
+    color:#ffffff;
+    padding-top:4%;
+    padding-bottom:4%;
+    font-size:18px;
+    letter-spacing:0.03em;
+    line-height:24px;
+    width:100%;
+    float:left;
+    background:none;
+    background-color:#666666;
+  }
+
+  .banner3 {
+    font-weight:300;
+    color:#ffffff;
+    padding-top:5%;
+    padding-bottom:5%;
+    font-size:16px;
+    letter-spacing:0.03em;
+    line-height:23px;
+    width:90%;
+    float:left;
+    background: url('/images/case-studies/amadeus/banner3.jpg');
+  }
+
+  .banner4 {
+    font-weight:300;
+    color:#ffffff;
+    padding-top:4%;
+    padding-bottom:4%;
+    font-size:18px;
+    letter-spacing:0.03em;
+    line-height:24px;
+    width:100%;
+    float:left;
+    background: url('/images/case-studies/amadeus/banner4.jpg');
+  }
+
+  .banner5 {
+    font-weight:300;
+    color:#ffffff;
+    padding-top:4%;
+    padding-bottom:4%;
+    font-size:16px;
+    letter-spacing:0.03em;
+    line-height:23px;
+    width:100%;
+    float:left;
+    background:none;
+    background-color:#666666;
+  }
+
+  .banner2text {
+    font-weight:300;
+    color:#ffffff;
+    width:90%;
+    padding-left:5%;
+    padding-bottom:1%;
+    padding-top:1%;
+    float:left;
+    text-align:center;
+    color:#ffffff;
+  }
+
+  .banner3text {
+    font-weight:300;
+    color:#ffffff;
+    width:90%;
+    padding-left:5%;
+    padding-top:5%;
+    padding-bottom:5%;
+    text-align:center;
+  }
+
+  .banner4text {
+    font-weight:300;
+    color:#ffffff;
+    width:90%;
+    padding-left:5%;
+    padding-top:3%;
+    padding-bottom:3%;
+    text-align:center;
+  }
+
+  .banner5text {
+    font-weight:300;
+    color:#ffffff;
+    width:90%;
+    padding-left:5%;
+    padding-top:3%;
+    padding-bottom:3%;
+    text-align:center;
+  }
+
+  .fullcol {
+    margin-top:6%;
+    margin-bottom:8%;
+  }
+
+  h2 {
+    line-height:26px;
+    font-size:18px;
+  }
+
+  .quote {
+    font-size:18px;
+    line-height:24px;
+  }
+
+  .logo {
+    width:35%;
+  }
+} /* End Media 910px */
+
+@media screen and (max-width: 580px){
+
+  .header_logo {
+    width:60%;
+    margin-bottom:1%;
+    margin-left:0;
+    margin-top:2%;
+  }
+
+  .banner1 {
+    background: url('/images/case-studies/amadeus/banner_mobile.jpg');
+  }
+}
diff --git a/static/css/style_ancestry.css b/static/css/style_ancestry.css
new file mode 100755
index 00000000000..9ac57f7776b
--- /dev/null
+++ b/static/css/style_ancestry.css
@@ -0,0 +1,403 @@
+#caseStudyTitle {
+    margin-top: 1em !important;
+}
+
+p {
+  padding:5%;
+}
+
+a {
+  text-decoration:none;
+  color:#3366ff;
+}
+
+body {
+  margin:0;
+
+}
+
+h1 {
+  font-weight:bold;
+  letter-spacing:0.025em;
+  font-size:42px;
+  padding-bottom:0px;
+}
+
+.subhead {
+  font-size:26px;
+  font-weight:100;
+  line-height:40px;
+  padding-bottom:1%;
+  padding-top:0.5%;
+
+}
+
+.banner1 {
+  font-weight:300;
+  color:#ffffff;
+  padding-top:12%;
+  padding-bottom:0.5%;
+  padding-left:10.9%;
+  font-size:32px;
+  background: url('/images/case-studies/ancestry/banner1.jpg');
+  background-size:100% auto;
+  background-repeat:no-repeat;
+}
+
+.banner2 {
+  font-weight:300;
+  color:#ffffff;
+  padding-top:3%;
+  padding-bottom:3%;
+  font-size:19px;
+  letter-spacing:0.03em;
+  line-height:28px;
+  background-size:100% auto;
+  background-color:#666666;
+  background-repeat:no-repeat;
+
+}
+
+.banner3 {
+  font-weight:300;
+  color:#ffffff;
+  padding-left:5%;
+  padding-right:5%;
+  padding-top:6%;
+  padding-bottom:6%;
+  font-size:21px;
+  letter-spacing:0.03em;
+  line-height:32px;
+  background: url('/images/case-studies/ancestry/banner3.jpg');
+  background-size:100% auto;
+}
+
+.banner4 {
+  font-weight:300;
+  color:#ffffff;
+  padding-top:5%;
+  padding-bottom:5%;
+  font-size:21px;
+  letter-spacing:0.03em;
+  line-height:32px;
+  background: url('/images/case-studies/ancestry/banner4.jpg');
+  background-size:100% auto;
+}
+
+.banner5 {
+  font-weight:300;
+  color:#ffffff;
+  padding-top:3%;
+  padding-bottom:3%;
+  font-size:21px;
+  letter-spacing:0.03em;
+  line-height:32px;
+  background-size:100% auto;
+  background-color:#666666;
+  background-repeat:no-repeat;
+}
+
+.banner2text {
+  font-weight:300;
+  color:#ffffff;
+  width:65%;
+  text-align:center;
+  margin:0 auto;
+}
+
+.banner3text {
+  font-weight:300;
+  color:#ffffff;
+  width:70%;
+  text-align:center;
+  margin:0 auto;
+}
+
+.banner4text {
+  font-weight:300;
+  color:#ffffff;
+  width:70%;
+  text-align:center;
+  margin:0 auto;
+}
+
+.banner5text {
+  font-weight:300;
+  color:#ffffff;
+  width:65%;
+  text-align:center;
+  margin:0 auto;
+}
+
+
+h2 {
+  font-weight:300;
+  font-size:24px;
+  line-height:34px;
+  color:#3366ff;
+}
+
+.quote {
+  font-weight:300;
+  font-size:22px;
+  line-height:32px;
+  color:#3366ff;
+}
+
+.details {
+  font-weight:300;
+  font-size:18px;
+  color:#3366ff;
+  letter-spacing:0.03em;
+  padding-bottom:1.5%;
+  padding-top:2%;
+  padding-left:11%;
+}
+
+
+hr {
+  border-bottom:0px solid;
+  width:100%;
+  opacity:0.5;
+  background-color:#999999;
+  height:1px;
+}
+
+.col1 {
+  font-weight:100;
+  color:#606060;
+  line-height:20px;
+  letter-spacing:0.03em;
+  font-size:14px;
+
+}
+
+.col2 {
+  font-weight:300;
+  line-height:20px;
+  color:#606060;
+  letter-spacing:0.03em;
+  font-size:14px;
+
+}
+
+.fullcol {
+  width:77%;
+  margin-left:11%;
+  margin-right:10%;
+  margin-top:4%;
+  margin-bottom:6%;
+  font-weight:300;
+  line-height:22px;
+  color:#606060;
+  letter-spacing:0.03em;
+  font-size:14px;
+}
+
+.cols {
+  width:90%;
+  margin-left:6.5%;
+  margin-top:1%;
+  margin-bottom:4%;
+  font-weight:300;
+}
+
+h4 {
+  font-weight:400;
+  letter-spacing:0.9;
+  font-size:20px;
+  padding-bottom:0px;
+}
+
+
+@media screen and (max-width: 910px){
+
+  h1 {
+    font-weight:bold;
+    line-height:36px;
+    letter-spacing:0.03em;
+    font-size:30px !important;
+    padding-bottom:0px;
+    width:80%;
+  }
+
+  .subhead {
+    font-size:18px;
+    font-weight:100;
+    line-height:27px;
+  }
+
+  .details {
+    font-weight:300;
+    font-size:16px;
+    color:#3366ff;
+    letter-spacing:0.03em;
+    padding-bottom:2%;
+    line-height:28px;
+    padding-top:4%;
+    padding-left:10%;
+  }
+
+  .logo {
+      width:8%;
+  }
+
+  .col1 {
+    width: 90%;
+    padding-left:5%;
+    padding-right:8%;
+    float:left;
+    font-weight:300;
+    color:#606060;
+    line-height:20px;
+    letter-spacing:0.03em;
+    font-size:14px;
+  }
+
+  .col2 {
+    width: 90%;
+    padding-left:5%;
+    padding-top:5%;
+    padding-bottom:5%;
+    font-weight:300;
+    float:left;
+    line-height:20px;
+    color:#606060;
+    letter-spacing:0.03em;
+    font-size:14px;
+  }
+
+  .banner1 {
+    font-weight:300;
+    color:#ffffff;
+    padding-top:15%;
+    padding-bottom:2%;
+    padding-left:10%;
+    font-size:18px;
+    background: url('CaseStudy_ancestry_banner1.jpg');
+    background-size:100% auto;
+  }
+
+  .banner2 {
+    font-weight:300;
+    color:#ffffff;
+    padding-top:4%;
+    padding-bottom:4%;
+    padding-left:0%;
+    font-size:18px;
+    letter-spacing:0.03em;
+    line-height:24px;
+    width:100%;
+    float:left;
+    background:none;
+    background-color:#666666;
+  }
+
+  .banner3 {
+    font-weight:300;
+    color:#ffffff;
+    padding-top:5%;
+    padding-bottom:5%;
+    font-size:18px;
+    letter-spacing:0.03em;
+    line-height:24px;
+    width:100%;
+    float:left;
+    background: url('CaseStudy_ancestry_banner3.jpg');
+  }
+
+  .banner4 {
+    font-weight:300;
+    color:#ffffff;
+    padding-top:5%;
+    padding-bottom:5%;
+    font-size:18px;
+    letter-spacing:0.03em;
+    line-height:24px;
+    width:100%;
+    float:left;
+    background: url('CaseStudy_ancestry_banner4.jpg');
+  }
+
+  .banner5 {
+    font-weight:300;
+    color:#ffffff;
+    padding-top:4%;
+    padding-bottom:4%;
+    font-size:18px;
+    letter-spacing:0.03em;
+    line-height:24px;
+    width:100%;
+    float:left;
+    background:none;
+    background-color:#666666;
+  }
+
+  .banner2text {
+    font-weight:300;
+    color:#ffffff;
+    width:80%;
+    padding-left:10%;
+    float:left;
+    text-align:center;
+    color:#ffffff;
+  }
+
+  .banner3text {
+    font-weight:300;
+    color:#ffffff;
+    width:80%;
+    padding-left:5%;
+    padding-top:5%;
+    padding-bottom:5%;
+    text-align:center;
+  }
+
+  .banner4text {
+    font-weight:300;
+    color:#ffffff;
+    width:80%;
+    padding-left:10%;
+    padding-top:3%;
+    padding-bottom:3%;
+    text-align:center;
+  }
+
+  .banner5text {
+    font-weight:300;
+    color:#ffffff;
+    width:80%;
+    padding-left:10%;
+    float:left;
+    text-align:center;
+    color:#ffffff;
+  }
+
+  .fullcol {
+    margin-top:6%;
+  }
+
+  h2 {
+    line-height:26px;
+    font-size:18px;
+  }
+
+  .quote {
+    font-size:18px;
+    line-height:24px;
+  }
+
+  .logo {
+    width:35%;
+  }
+} /* End Media 910px */
+
+@media screen and (max-width: 480px){
+
+  .logo {
+    width:65%;
+    padding-bottom:5%;
+    padding-top:2%;
+  }
+
+}
diff --git a/static/css/style_apiref.css b/static/css/style_apiref.css
new file mode 100755
index 00000000000..cfba8c3be1b
--- /dev/null
+++ b/static/css/style_apiref.css
@@ -0,0 +1,229 @@
+/*
+Kubernetes colors
+
+kubernetes blue - rgb(50, 109, 230)
+dark blue - rgb(51, 113, 227)
+dark grey - rgb(48, 48, 48)
+light grey - rgb(161, 160, 158)
+*/
+
+/* User agent CSS overrides */
+#sidebar-wrapper ul, #sidebar-wrapper li {
+    margin-left: 10px;
+    padding-left: 0;
+}
+
+.body-content hr {
+    margin: 2em 0;
+    border-top: 2px solid dimgrey;
+    border-bottom: 2px solid antiquewhite;
+}
+
+.body-content table {
+    margin-bottom: 1em;
+    overflow: auto;
+}
+
+.body-content table th, .body-content table td {
+    text-align: left;
+    vertical-align: top;
+    line-height: 1.5;
+}
+
+.body-content table th {
+    padding: 15px 20px;
+    border-bottom: 1px solid lightsteelblue;
+    vertical-align: bottom;
+}
+
+.body-content table td {
+    padding: 10px;
+}
+
+.body-content table tr:last-child {
+    border-bottom: 1px solid lightsteelblue;
+}
+
+.body-content table tr:nth-child(odd) > td {
+    background-color: WhiteSmoke;
+}
+
+.body-content table tr:nth-child(even) > td {
+    background-color: Gainsboro;
+}
+
+.body-content dt {
+    font-weight: bold;
+}
+
+.body-content dd {
+    margin-left: 15px;
+}
+
+.body-content p, .body-content li, .body-content dt, .body-content dd {
+    line-height: 1.6;
+    margin-top: 0;
+}
+
+/* Brodoc CSS */
+
+body > #wrapper {
+    display: block;
+    padding-bottom: 500px;
+}
+
... 6509 lines suppressed ...