Merge pull request #3290 from fuchunlan/fix-6752-2

feat: Update home page and add feature page
2025-12-25 15:32:54 +00:00 · 2025-09-23 11:07:58 +08:00 · 2025-09-23 11:07:58 +08:00 · d555aeeccb
parent cdf2206451 efddd2ff25
commit d555aeeccb
65 changed files with 2171 additions and 664 deletions
--- a/assets/scss/common.scss
+++ b/assets/scss/common.scss
@ -16,6 +16,10 @@ html {
  background-color: #f5f8f9;
 }

+main{
+  margin-top: 60px;
+}
+
 section {
  min-width: 1160px;

--- a/assets/scss/content.scss
+++ b/assets/scss/content.scss
@ -6,6 +6,7 @@
 }

 .main-section {
+  margin-top: 60px;
  &>div {
    position: relative;
    padding-top: 93px;
--- a/assets/scss/features.scss
+++ b/assets/scss/features.scss
@ -0,0 +1,91 @@
+@import "variables";
+@import "mixin";
+
+html {
+  background-color: #ffffff;
+}
+
+.section-1 {
+  position: relative;
+  padding-top: 166px;
+  background-image: url("/images/features/banner.jpg");
+
+  .title-div {
+    position: relative;
+
+    padding-bottom: 74px;
+    h1 {
+      width: 100%;
+      text-align: center;
+    }
+  }
+}
+.section-2 {
+  background: #f5f8f9;
+  padding: 80px 0;
+  .title-div {
+    position: relative;
+
+    h1 {
+      color: #171c34;
+      text-align: center;
+      text-shadow: 0 4px 8px rgba(35, 45, 65, 0.1);
+      font-size: 32px;
+      font-weight: 520;
+      line-height: 52px;
+    }
+  }
+  ul {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+    li {
+      position: relative;
+      padding: 24px;
+      width: calc((100% - 60px) / 4);
+      background-color: #fff;
+      border-radius: 10px;
+      box-sizing: border-box;
+      min-height: 250px;
+      img {
+        display: block;
+      }
+      h3 {
+        margin-top: 16px;
+        color: #242e42;
+        font-size: 20px;
+        font-weight: 520;
+        line-height: 28px;
+      }
+      .conetnt {
+        margin-top: 8px;
+        color: #484e58;
+        font-size: 14px;
+        line-height: 24px;
+      }
+      .label {
+        position: absolute;
+        margin-top: 0;
+        top: 0;
+        right: 0;
+        border-radius: 0 8px 0 8px;
+        padding: 4px 10px;
+        font-size: 14px;
+        font-weight: 380;
+        line-height: 20px;
+        &.label-gray {
+          background-color: #e3e9ef;
+          color: #36435c;
+        }
+        &.label-green {
+          color: #3b747a;
+          background-color: #c4e6d4;
+        }
+      }
+    }
+  }
+}
+
+.footer {
+  padding-top: 60px;
+}
--- a/assets/scss/header.scss
+++ b/assets/scss/header.scss
@ -1,4 +1,4 @@
-@import 'variables';
+@import "variables";
 .navigation {
  position: fixed;
  z-index: 10;
@ -6,42 +6,25 @@
  left: 0;
  right: 0;
  color: #ffffff;
-  border-bottom:  1px solid rgba($color: #e3e9ef, $alpha: 0.4);
-  background-image: linear-gradient(to top, rgba(23, 188, 133, 0.18), rgba(0, 169, 113, 0.18));
- 
+  border-bottom: 1px solid rgba($color: #e3e9ef, $alpha: 0.4);
+  background-image: linear-gradient(
+    to top,
+    rgba(23, 188, 133, 0.18),
+    rgba(0, 169, 113, 0.18)
+  );
+
  .join-div {
-    padding: 10px 0;
-    background-image: linear-gradient(to left, #e7d44e, #ecaf24);
-    .content {
-      position: relative;
-      width: 900px;
-      margin: 0 auto;
-      text-align: center;
-      line-height: 20px;
-      font-size: 12px;
-      font-weight: 600;
-      color: #3d3e49;
-      @media only screen and (max-width: $mobile-max-width) {
-        box-sizing: border-box;
-        width: 100%;
-        padding: 0 40px;
-      }
+    height: 60px;
+    background: url("/images/home/banner-cn.png") no-repeat center;
+    background-size: cover;

-      a {
-        color: #3d3e49;
-
-        &:hover {
-          color: #55bc8a;
-        }
-      }
-
-      img {
-        position: absolute;
-        top: 50%;
-        right: 10px;
-        transform: translateY(-50%);
-        cursor: pointer;
-      }
+    &.en {
+      background-image: url("/images/home/banner-en.png");
+    }
+    a {
+      width: 100%;
+      height: 100%;
+      display: block;
    }
  }

@ -65,9 +48,9 @@
  }

  .nav {
-    height:100%;
-    margin-left: 250px;
-    margin-right: 360px;
+    height: 100%;
+    margin-left: 230px;
+    margin-right: 270px;
    line-height: 93px;

    @media only screen and (max-width: $mobile-max-width) {
@ -120,9 +103,9 @@
  .menu-span::after {
    display: inline-block;
    vertical-align: middle;
-    content: '';
+    content: "";
    margin-left: 5px;
-    border:  4px solid transparent;
+    border: 4px solid transparent;
    border-top-color: #fff;
  }

@ -140,7 +123,8 @@
    white-space: nowrap;
    font-size: 0;
    border-radius: 6px;
-    box-shadow: 0 4px 8px 0 rgba(36,46,66,.06),0 8px 16px 0 rgba(36,46,66,.05);
+    box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06),
+      0 8px 16px 0 rgba(36, 46, 66, 0.05);

    li {
      padding: 0 20px;
@ -155,7 +139,6 @@
          color: #55bc8a;
        }
      }
-
    }

    .active {
@ -191,7 +174,7 @@
    & > ul {
      @media only screen and (max-width: $mobile-max-width) {
        display: flex;
-        flex-wrap: wrap ;
+        flex-wrap: wrap;
        justify-content: space-between;
      }

@ -206,8 +189,9 @@
      &:hover {
        padding-bottom: 40px;
      }
-      & > div  {
-        img, span {
+      & > div {
+        img,
+        span {
          display: inline-block;
          vertical-align: middle;
        }
@ -221,7 +205,7 @@
        span::after {
          display: inline-block;
          vertical-align: middle;
-          content: '';
+          content: "";
          margin-left: 5px;
          border: 4px solid transparent;
          border-top-color: #fff;
@ -234,7 +218,7 @@
          padding: 0;
          margin: 0;
          color: #36435c;
-    
+
          &:hover {
            color: #55bc8a;
          }
@ -269,7 +253,6 @@
    }

    .link-li {
-
      @media only screen and (max-width: $mobile-max-width) {
        display: none;
      }
@ -284,29 +267,28 @@
      }

      .link-slack {
-        background-image: url('/images/header/slack.svg');
+        background-image: url("/images/header/slack.svg");

        &:hover {
-          background-image: url('/images/header/slack-hover.svg');
+          background-image: url("/images/header/slack-hover.svg");
        }
      }

      .link-twitter {
-        background-image: url('/images/header/twitter.svg');
+        background-image: url("/images/header/twitter.svg");

        &:hover {
-          background-image: url('/images/header/twitter-hover.svg');
+          background-image: url("/images/header/twitter-hover.svg");
        }
      }

      .link-github {
-        background-image: url('/images/header/github.svg');
+        background-image: url("/images/header/github.svg");

        &:hover {
-          background-image: url('/images/header/github-hover.svg');
+          background-image: url("/images/header/github-hover.svg");
        }
      }
-
    }

    .github-li {
@ -314,24 +296,30 @@
      top: 3px;
    }

-    .github-star {      
+    .github-star {
      display: flex;
      align-items: center;
      margin-left: 10px;
-      background: linear-gradient(180deg, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.1) 96.81%), #FFFFFF;
-      border: 1px solid #CCD3DB;
-      box-shadow: 0px 8px 16px rgba(76, 169, 134, 0.1), 0px 10px 50px rgba(76, 169, 134, 0.05);
+      background: linear-gradient(
+          180deg,
+          rgba(0, 0, 0, 0.0001) 0%,
+          rgba(0, 0, 0, 0.1) 96.81%
+        ),
+        #ffffff;
+      border: 1px solid #ccd3db;
+      box-shadow: 0px 8px 16px rgba(76, 169, 134, 0.1),
+        0px 10px 50px rgba(76, 169, 134, 0.05);
      border-radius: 4px;
      overflow: hidden;
      @media only screen and (max-width: $mobile-max-width) {
        display: none;
      }
      a {
-        color: #3E464C;
+        color: #3e464c;
        font-size: 16px;
        line-height: 16px;
        &:hover {
-          color: #4CA986;
+          color: #4ca986;
        }
      }

@ -346,11 +334,11 @@
          height: 16px;
          background-repeat: no-repeat;
          background-size: contain;
-          background-image: url('/images/header/github-star.svg');
+          background-image: url("/images/header/github-star.svg");
        }
        &:hover {
          .star-img {
-            background-image: url('/images/header/github-star-hover.svg');
+            background-image: url("/images/header/github-star-hover.svg");
          }
        }
      }
@ -380,16 +368,27 @@
  font-size: 14px;
  color: #ffffff;
  cursor: pointer;
-  box-shadow: 0 10px 50px 0 rgba(34, 43, 62, 0.1), 0 8px 16px 0 rgba(33, 43, 61, 0.2);
-  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1) 97%), linear-gradient(to bottom, #242e42, #242e42);
+  box-shadow: 0 10px 50px 0 rgba(34, 43, 62, 0.1),
+    0 8px 16px 0 rgba(33, 43, 61, 0.2);
+  background-image: linear-gradient(
+      to bottom,
+      rgba(0, 0, 0, 0),
+      rgba(0, 0, 0, 0.1) 97%
+    ),
+    linear-gradient(to bottom, #242e42, #242e42);
  &:hover {
    box-shadow: none;
  }
 }

 .navigationScroll {
-  box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06), 0 8px 16px 0 rgba(36, 46, 66, 0.05);
-  background-image: linear-gradient(to bottom, rgba(134, 219, 162, 0.9), rgba(0, 170, 114, 0.9));
+  box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06),
+    0 8px 16px 0 rgba(36, 46, 66, 0.05);
+  background-image: linear-gradient(
+    to bottom,
+    rgba(134, 219, 162, 0.9),
+    rgba(0, 170, 114, 0.9)
+  );
 }

 .navigationHeight {
@ -456,7 +455,6 @@
      &:hover {
        color: #00a971;
      }
-      
    }

    .menu-span::after {
@ -464,7 +462,7 @@
      top: 50%;
      right: 10px;
      display: block;
-      content: '';
+      content: "";
      width: 10px;
      height: 10px;
      border-right: 2px solid #dee0e6;
@ -493,5 +491,3 @@
    }
  }
 }
-
-
--- a/assets/scss/index.scss
+++ b/assets/scss/index.scss
@ -1,5 +1,5 @@
-@import 'variables';
-@import 'mixin';
+@import "variables";
+@import "mixin";

 .section-1 {
  position: relative;
@ -7,6 +7,30 @@
  background-image: linear-gradient(to left, #44bd93, #26a678);
  overflow: hidden;

+  .download-btn2 {
+    min-width: 160px;
+    color: #fff;
+    box-shadow: 0 10px 50px 0 rgba(34, 43, 62, 0.1),
+      0 8px 16px 0 rgba(33, 43, 61, 0.2), 0 10px 50px 0 rgba(76, 169, 134, 0.05);
+    background-image: linear-gradient(
+        to bottom,
+        rgba(14, 10, 10, 0),
+        rgba(0, 0, 0, 0.1) 97%
+      ),
+      linear-gradient(to bottom, #242e42, #242e42);
+  }
+
+  .experiense-btn {
+  }
+  .apply-btn {
+    margin-left: 8px;
+    button {
+      background: linear-gradient(180deg, #fff501 0%, #ffa502 100%), #242e42;
+      color: #242e42;
+      font-weight: 520;
+    }
+  }
+
  & > .img1 {
    position: absolute;
    top: 0;
@ -24,7 +48,7 @@
    position: absolute;
    top: 387px;
    left: 50%;
-    transform: translateX(510px)
+    transform: translateX(510px);
  }

  & > div {
@ -37,46 +61,38 @@
    }

    .p1 {
-      height: 24px;
+      width: 588px;
+      color: #fff;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-      font-size: 16px;
+      font-size: 24px;
      font-weight: 600;
-      line-height: 1.5;
-      letter-spacing: -0.04px;
-      color: #ffffff;
+      line-height: 32px;
+      margin-top: 12px;
    }

    h1 {
-      width: 660px;
-      margin-top: 12px;
+      color: #fff;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-      font-size: 50px;
-      font-weight: bold;
-      line-height: 1.2;
-      letter-spacing: -0.14px;
-      color: #ffffff;
+      font-size: 56px;
+      font-weight: 700;
    }

    .p2 {
-      width: 660px;
-      height: 72px;
-      margin-top: 12px;
-      margin-bottom: 30px;
+      width: 560px;
+      color: #fff;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      font-size: 16px;
-      font-weight: 500;
-      line-height: 1.5;
-      letter-spacing: -0.04px;
-      color: #ffffff;
+      margin-top: 8px;
+      font-weight: 380;
+      line-height: 28px;
+      letter-spacing: -0.044px;
    }

    img {
      position: absolute;
    }

-
- 
-    .img1-div{
+    .img1-div {
      cursor: pointer;
      position: absolute;
      top: 268px;
@ -87,22 +103,21 @@
      object-fit: contain;
      border: 6px solid #ffffff;
      border-radius: 5px;
-      box-shadow: 0 10px 20px 0 rgba(34, 43, 62, 0.1), 0 8px 16px 0 rgba(33, 43, 61, 0.2), 0 10px 30px 0 rgba(34, 43, 62, 0.1);
-    
-    .img1{
-      height: 100%;
-      width: 100%;
-    }
+      box-shadow: 0 10px 20px 0 rgba(34, 43, 62, 0.1),
+        0 8px 16px 0 rgba(33, 43, 61, 0.2), 0 10px 30px 0 rgba(34, 43, 62, 0.1);

+      .img1 {
+        height: 100%;
+        width: 100%;
+      }

-    .play{
-      position: absolute;
-      top:50%;
-      left:50%;
-      transform: translate(-50%,-50%);
-      z-index: 5;
-    }
-
+      .play {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        z-index: 5;
+      }
    }

    .img2 {
@ -114,20 +129,22 @@
      top: 276px;
      left: -311px;
    }
-
  }
  @media only screen and (max-width: $mobile-max-width) {
    height: auto;
    padding-top: 138px;

-    & > .img1, .img2, .img3 {
+    & > .img1,
+    .img2,
+    .img3 {
      display: none;
    }

    & > div {
      padding-top: 0px;

-      .img2, .img4 {
+      .img2,
+      .img4 {
        display: none;
      }

@ -137,7 +154,8 @@
        letter-spacing: -0.08px;
      }

-      h1, .p2 {
+      h1,
+      .p2 {
        width: 100%;
        height: auto;
      }
@ -158,19 +176,98 @@
      }
    }
  }
+
+  .custom-vertical-carousel {
+    position: absolute;
+    top: 208px;
+    right: 0;
+    width: 100%;
+    max-width: 531px;
+    height: 350px;
+    margin: 0 auto;
+    padding: 20px 0;
+  }
+
+  .carousel-inner {
+    position: relative;
+    height: 100%;
+  }
+
+  .carousel-slide {
+    width: 100%;
+    height: 319px;
+    background: #fff;
+    border-radius: 8px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    overflow: hidden;
+  }
+
+  .carousel-slide .slide-content {
+    width: 100%;
+    height: 100%;
+    padding: 4px;
+    font-size: 24px;
+    font-weight: bold;
+    color: #333;
+    text-align: center;
+    img {
+      display: block;
+      width: calc(100% - 8px);
+      height: calc(100% - 8px);
+    }
+  }
+
+  .carousel-slide.active {
+    transform: translateY(0) scale(1);
+    opacity: 1;
+    z-index: 10;
+  }
+
+  .carousel-slide.prev {
+    transform: translateY(-20px) scale(0.95);
+    opacity: 0.5;
+    z-index: 9;
+  }
+
+  .carousel-slide.next {
+    transform: translateY(20px) scale(0.95);
+    opacity: 0.5;
+    z-index: 8;
+  }
+
+  .carousel-slide.hidden {
+    opacity: 0;
+    transform: translateY(50px) scale(0.9);
+    z-index: 1;
+  }
 }

 .section-2 {
  box-sizing: border-box;
-  height: 1079px;
+  height: 3365px;
  position: relative;
-  margin-top: -300px;
+  margin-top: -308px;
  margin-bottom: -300px;
-  padding-top: 300px;
+  padding-top: 308px;
  background-size: 100% 100%;
-  background-repeat: no-repeat; 
-  background-image: url('/images/home/4.png');
+  background-repeat: no-repeat;
+  background-image: url("/images/home/4.png");
  z-index: 2;
+  &.en {
+    height: 3619px;
+    background-image: url("/images/home/4-en.png");
+  }
+
+  .title-black-h2 {
+    margin-top: 107px;
+  }

  & > div {
    text-align: center;
@ -219,10 +316,72 @@
  }
 }

+.section-8 {
+  height: 1778px;
+  background-image: url("/images/home/8.png");
+  margin-top: -308px;
+  &.en {
+    height: 1706px;
+    background-image: url("/images/home/8.png");
+  }
+}
+.tabs {
+  position: relative;
+}
+
+.content-section {
+  position: relative;
+  margin-top: -307px;
+  margin-bottom: -300px;
+  padding-top: 300px;
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  display: none;
+
+  &.active {
+    display: block;
+  }
+  // background-image: url("/images/home/4.png");
+}
+
+.tab-div {
+  position: absolute;
+  top: 272px;
+  width: 100%;
+  // left: 50%;
+  // right: 50%;
+  z-index: 9;
+
+  ul {
+    display: flex;
+    background-color: #f5f8f9;
+    width: fit-content;
+    border-radius: 40px;
+    padding: 4px;
+    position: relative;
+    left: 0;
+    right: 0;
+    margin: auto;
+  }
+  li {
+    cursor: pointer;
+    white-space: nowrap;
+    padding: 16px 48px;
+    border-radius: 26px;
+    font-weight: 520;
+    color: #31383e;
+    &.active {
+      background-color: #55bc8a;
+      color: #fff;
+      box-shadow: 0 8px 16px 0 rgba(33, 43, 61, 0.2),
+        0 10px 50px 0 rgba(34, 43, 62, 0.1), 0 4px 8px 0 rgba(36, 46, 66, 0.06);
+    }
+  }
+}
+
 .section-3 {
  position: relative;
-  padding-top: 300px;
-  padding-bottom: 500px;
+  padding-bottom: 420px;
  background-color: #f5f8f9;
  & > div {
    text-align: center;
@ -234,7 +393,7 @@

    & > div {
      position: relative;
-      margin-top: 76px;
+      margin-top: 104px;
      text-align: left;
      align-items: center;

@ -277,7 +436,8 @@
        width: 919px;
        height: 436px;
        border-radius: 10px;
-        box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06), 0 8px 16px 0 rgba(36, 46, 66, 0.05);
+        box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06),
+          0 8px 16px 0 rgba(36, 46, 66, 0.05);
        background-color: #ffffff;

        & > .top {
@ -317,7 +477,7 @@
          }

          li::before {
-            content: '';
+            content: "";
            display: block;
            position: absolute;
            top: 6px;
@ -337,7 +497,6 @@
        }
      }

-
      & > div:nth-child(2) {
        display: block;
      }
@ -358,7 +517,7 @@
      & > div {
        padding: 0;
        margin: 0;
-        
+
        & > ul {
          width: 100%;
          height: auto;
@ -392,7 +551,7 @@
            margin: 0 auto;
            padding: 18px 16px;
          }
-  
+
          & > ul {
            width: 90%;
            margin: 4px auto 30px;
@ -401,7 +560,7 @@
              margin-left: 16px;
            }
          }
-  
+
          & > img {
            display: none;
          }
@ -414,14 +573,41 @@
 .section-4 {
  position: relative;
  box-sizing: border-box;
-  height: 1281px;
+  height: 1059px;
  margin-top: -300px;
-  margin-bottom: -500px;
-  padding-top: 350px;
+  // margin-bottom: -500px;
+  padding-top: 255px;
  background-size: 100% 100%;
-  background-repeat: no-repeat; 
-  background-image: url('/images/home/5.png');
+  background-repeat: no-repeat;
+  background-image: url("/images/home/5.png");
  overflow: hidden;
+  z-index: 2;
+
+  // &::before {
+  //   content: "";
+  //   position: absolute;
+  //   top: 0;
+  //   left: 0;
+  //   right: 0;
+  //   height: 50vh; /* 占据视口高度的一半 */
+  //   background-color: #f5f8f9; /* 上半部分颜色 */
+  //   z-index: -1;
+  // }
+  // &::after {
+  //   content: "";
+  //   position: absolute;
+  //   bottom: 0;
+  //   left: 0;
+  //   right: 0;
+  //   height: 50vh; /* 占据视口高度的一半 */
+  //   background-color: #f5f8f9; /* 下半部分颜色 */
+  //   z-index: -1;
+  // }
+
+  .title-white-h2 {
+    margin-bottom: 64px;
+    text-align: center;
+  }

  & > .bg-1 {
    position: absolute;
@ -444,11 +630,7 @@
      width: 471px;

      h2 {
-        text-shadow: 0 4px 8px rgba(35, 45, 65, 0.1);
-        font-size: 32px;
-        font-weight: bold;
-        line-height: 1.63;
-        color: #b3ffbd;
+        margin-bottom: 64px;
      }

      & > p {
@ -456,42 +638,28 @@
        opacity: 0.9;
        color: #ffffff;
      }
-
-      ul {
-        margin-top: 60px;
-        li {
-          font-size: 0;
-          margin-bottom: 30px;
-          div {
-            vertical-align: top;
-            width: 414px;
-            margin-left: 16px;
-            display: inline-block;
-            p {
-              opacity: 0.9;
-              color: #ffffff;
-            }
-          }
-        }
-      }
    }

    & > ul {
-      position: absolute;
-      top: -350px;
-      right: 0;
-
+      display: flex;
+      gap: 24px;
      li {
        position: relative;
        width: 573px;
-        height: 173px;
-        margin-bottom: 10px;
+
+        padding: 26px 32px 32px;
+
        border-radius: 10px;
-        box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06), 0 8px 16px 0 rgba(36, 46, 66, 0.05);
+        box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06),
+          0 8px 16px 0 rgba(36, 46, 66, 0.05);
        background-color: #ffffff;

        .top-line {
+          position: absolute;
+          left: 0;
+          top: 0;
          height: 6px;
+          width: 100%;
          border-top-left-radius: 6px;
          border-top-right-radius: 6px;
        }
@ -513,8 +681,8 @@
        }

        .img-span-div {
-          margin-top: 23px;
-          margin-left: 30px;
+          margin-top: 26px;
+          margin-left: 32px;

          span {
            height: 24px;
@ -526,33 +694,17 @@
          }
        }

-        p {
-          width: 372px;
-          margin-top: 10px;
-          margin-left: 30px;
+        .common-content {
+          margin-top: 24px;
+        }
+        .content-p {
+          margin-top: 16px;
+          margin-bottom: 64px;
        }

-        .middle-line {
-          position: absolute;
-          top: 18px;
-          right: 146px;
-          width: 2px;
-          height: 114px;
-          background-color: #e4edf6;
+        .green-a {
+          color: #00a971;
        }
-
-        & > span {
-          position: absolute;
-          top: 71px;
-          right: 20px;
-        }
-
-        & > a {
-          position: absolute;
-          top: 71px;
-          right: 35px;
-        }
-
      }
    }
  }
@ -569,7 +721,7 @@
    & > .bg-1 {
      display: none;
    }
-  
+
    & > .bg-2 {
      display: none;
    }
@ -602,13 +754,13 @@
      }

      & > ul {
+        flex-direction: column;
        position: relative;
        top: 0;
        left: 0;
        width: 100%;

        li {
-          width: 100%;
          height: auto;
          padding-bottom: 20px;

@ -630,7 +782,8 @@
            margin-right: 30px;
          }

-          span, a {
+          span,
+          a {
            position: relative;
            top: 0px;
            left: 0px;
@ -640,26 +793,27 @@
        }
      }
    }
-    
  }
 }

 .section-5 {
  box-sizing: border-box;
-  height: 1909px;
-  padding-top: 700px;
-  background-color: #f5f8f9;
+  // height: 1909px;
+  // padding-top: 700px;

  & > div {
-
    h2 {
      text-align: center;
    }

    & > div {
      position: relative;
-      margin-top: 64px;
+      margin-top: 50px;
      font-size: 0;
+      padding: 24px 12px 12px;
+      margin-right: -12px;
+      margin-left: -12px;
+      background-color: #f5f8f9;

      .front-div {
        width: 280px;
@ -773,7 +927,6 @@
    padding-top: 66px;

    & > div {
-
      & > div {
        margin-top: 30px;

@ -786,7 +939,7 @@

          ul {
            display: flex;
-            flex-wrap: wrap ;
+            flex-wrap: wrap;
            justify-content: space-between;
            li {
              width: 30%;
@ -819,7 +972,7 @@
              display: block;
              margin-left: 0;
              display: flex;
-              flex-wrap: wrap ;
+              flex-wrap: wrap;
              justify-content: space-between;

              li {
@ -846,9 +999,9 @@
      }
    }
  }
- }
+}

- @keyframes scrollUp {
+@keyframes scrollUp {
  0% {
    transform: translateY(0);
  }
@ -862,11 +1015,11 @@
  position: relative;
  box-sizing: border-box;
  margin-top: -300px;
-  padding-top: 300px;
+  padding-top: 225px;
  background-color: #f5f8f9;
  background-size: 100% 100%;
-  background-repeat: no-repeat; 
-  background-image: url('/images/home/6.png');
+  background-repeat: no-repeat;
+  background-image: url("/images/home/6.png");
  overflow-x: hidden;

  .bg-1 {
@ -897,8 +1050,15 @@
      margin-top: 59px;
      margin-bottom: 45px;
      li {
+        cursor: pointer;
        margin-bottom: 16px;
-        box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06), 0 8px 16px 0 rgba(36, 46, 66, 0.05);
+        box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06),
+          0 8px 16px 0 rgba(36, 46, 66, 0.05);
+        background-color: #fff;
+        &:hover {
+          transform: scale(1.1);
+          transition: transform 0.3s ease;
+        }
      }
      img {
        width: 210px;
@ -917,9 +1077,15 @@
      letter-spacing: -0.04px;
      color: #ffffff;
      cursor: pointer;
-      box-shadow: 0 10px 50px 0 rgba(34, 43, 62, 0.1), 0 8px 16px 0 rgba(33, 43, 61, 0.2), 0 10px 50px 0 rgba(34, 43, 62, 0.1);
-      background-image: linear-gradient(to bottom, rgba(85, 188, 138, 0), rgba(85, 188, 138, 0.1) 97%), linear-gradient(to bottom, #55bc8a, #55bc8a);
-    
+      box-shadow: 0 10px 50px 0 rgba(34, 43, 62, 0.1),
+        0 8px 16px 0 rgba(33, 43, 61, 0.2), 0 10px 50px 0 rgba(34, 43, 62, 0.1);
+      background-image: linear-gradient(
+          to bottom,
+          rgba(85, 188, 138, 0),
+          rgba(85, 188, 138, 0.1) 97%
+        ),
+        linear-gradient(to bottom, #55bc8a, #55bc8a);
+
      &:hover {
        box-shadow: none;
      }
@ -934,6 +1100,7 @@
      text-align: center;
      a {
        color: #31383e;
+        font-weight: 450;
        text-decoration: underline;
        &:hover {
          color: #55bc8a;
@ -951,12 +1118,14 @@
      text-align: left;
      border-radius: 12px;
      background-color: #ffffff;
-      box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06), 0 8px 16px 0 rgba(36, 46, 66, 0.05);
+      box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06),
+        0 8px 16px 0 rgba(36, 46, 66, 0.05);

      &:hover {
        background-image: linear-gradient(99deg, #4a499a 29%, #8552c3 80%);

-        .p1, .p2 {
+        .p1,
+        .p2 {
          color: #ffffff;
        }
      }
@ -1001,7 +1170,7 @@
    .bg-1 {
      display: none;
    }
-  
+
    .bg-2 {
      display: none;
    }
@ -1040,6 +1209,19 @@
  }
 }

+.section-7 {
+  background-color: #fff;
+  .title-black-h2 {
+    text-align: center;
+    margin-top: 0;
+    margin-bottom: 50px;
+  }
+
+  img {
+    width: 1160px;
+  }
+}
+
 .meet-div {
  z-index: 100;
  position: fixed;
@ -1053,7 +1235,7 @@
  background-color: #ffffff;
  text-align: center;
  cursor: pointer;
-  background-image: url('/images/home/group-20.svg');
+  background-image: url("/images/home/group-20.svg");

  .close {
    position: absolute;
@ -1093,9 +1275,10 @@
  height: 406px;
  text-align: center;
  background-color: #ffffff;
-  background-image: url('/images/home/modal-bg.svg');
+  background-image: url("/images/home/modal-bg.svg");
  background-size: cover;
-  box-shadow: 0px 8px 16px rgba(36, 46, 66, 0.05), 0px 4px 8px rgba(36, 46, 66, 0.06);
+  box-shadow: 0px 8px 16px rgba(36, 46, 66, 0.05),
+    0px 4px 8px rgba(36, 46, 66, 0.06);
  border-radius: 4px;

  @media (min-width: 768px) {
@ -1114,7 +1297,7 @@
    left: 0;
    right: 0;
  }
-  
+
  .close {
    position: absolute;
    top: 24px;
@ -1130,7 +1313,7 @@
    font-weight: 500;
    font-size: 22px;
    line-height: 22px;
-    color: #242E42;
+    color: #242e42;
  }

  .title {
@ -1143,7 +1326,7 @@
    text-align: left;
    font-size: 14px;
    line-height: 24px;
-    color: #404F68;
+    color: #404f68;
  }

  & > div {
@ -1163,13 +1346,13 @@
      height: 28px;
      text-align: center;
      background: #059669;
-      border: 1px solid #479E88;
+      border: 1px solid #479e88;
      box-sizing: border-box;
      border-radius: 2px;

      a {
        line-height: 28px;
-        color: #FFFFFF;
+        color: #ffffff;
        &:hover {
          text-decoration: underline;
        }
@ -1196,30 +1379,29 @@ footer {
  }
 }

-
-.modal-for-video{
+.modal-for-video {
  display: none;
  z-index: 20;
  position: absolute;
  height: 608px;
  width: 1080px;
  max-width: 1080px;
-  top:50%;
-  left:50%;
-  transform: translate(-50%,-50%);
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
  padding: 0;
  border-radius: 0;
  font-size: 0;
- 
-  .video-div{
+
+  .video-div {
    height: 100%;
    width: 100%;

-    video{
+    video {
      height: 100%;
      width: 100%;
    }
-    iframe{
+    iframe {
      height: 100%;
      width: 100%;
    }
@ -1229,10 +1411,9 @@ footer {
    width: 80%;
    height: 24.5%;
  }
-
 }

-.close-video{
+.close-video {
  cursor: pointer;
  position: absolute;
  z-index: 20;
@ -1244,7 +1425,7 @@ footer {
  top: -10px;
 }

-.shadow{
+.shadow {
  position: absolute;
  overflow: hidden;
  z-index: 18;
@ -1252,8 +1433,6 @@ footer {
  background-color: rgba(0, 0, 0, 0.7);
 }

-
-.test{
+.test {
  position: absolute;
 }
-
--- a/config/_default/config.toml
+++ b/config/_default/config.toml
@ -226,6 +226,11 @@ name = "Community"
    URL = "https://github.com/kubesphere/community/tree/master/sig-advocacy-and-outreach/ospp-2025"
    weight = 6

+# [[languages.en.menu.main]]
+# weight = 6
+# name = "Apply for a Free License"
+# URL = "/" 
+

 [languages.zh]
 weight = 2
@ -403,6 +408,12 @@ weight = 7
 name = "认证"
 URL = "https://kubesphere.cloud/certification/"

+# [[languages.zh.menu.main]]
+# weight = 8
+# name = "申请免费授权"
+# URL = "/" 
+# # TODO: LINK 
+

 # [languages.tr]
 # weight = 3
--- a/content/en/_index.md
+++ b/content/en/_index.md
@ -1,36 +1,55 @@
 ---
-title: Open Source Enterprise Kubernetes Platform | KubeSphere
-description: An open source Kubernetes Platform to manage enterprise-grade Kubernetes across hybrid cloud, multi-cloud and edge. Get started for free!
-
+title: KubeSphere Container Platform-The Kubernetes platform tailored for hybrid multicloud
+topic: KubeSphere <br/>Community Edition
+description: KubeSphere is a distributed operating system for cloud-native application management, using Kubernetes as its kernel. It provides a plug-and-play architecture, allowing third-party applications to be seamlessly integrated into its ecosystem.

 css: scss/index.scss

 section1:
-  title: KubeSphere Container Platform
-  topic: The Kubernetes platform tailored for hybrid multicloud
+  title: KubeSphere <br/>Community Edition
+  topic: KubeSphere Container Platform-The Kubernetes platform tailored for hybrid multicloud
  content: KubeSphere is a distributed operating system for cloud-native application management, using Kubernetes as its kernel. It provides a plug-and-play architecture, allowing third-party applications to be seamlessly integrated into its ecosystem.
+  btns:
+    - content: Get Started
+      link: /
+      # TODO: Community page
+      class: experiense-btn
+    - content: Try Free
+      # TODO: free feature list
+      link: /
+      class: apply-btn
+  carouselItems:
+  carouselItems:
+    - image: /images/home/top-right-en-1.png
+    - image: /images/home/top-right-en-2.png
+    - image: /images/home/top-right-en-3.png
+    - image: /images/home/top-right-en-4.png
+    - image: /images/home/top-right-en-5.png
+
+tabs:
+  children:
+    - title: Free Products
+    - title: Open Source Projects

 section2:
  title: One Kubernetes Platform for Full Stack Solutions
-  content: KubeSphere is also a multi-tenant enterprise-grade open-source Kubernetes container platform with full-stack automated IT operation and streamlined DevOps workflows. It provides developer-friendly wizard web UI, helping enterprises to build out a more robust and feature-rich Kubernetes platform, which includes the most common functionalities needed for enterprise Kubernetes strategies.
+  content: KubeSphere is also a multi-tenant enterprise-grade open-source Kubernetes container platform with full-stack automated IT<br/> operation and streamlined DevOps workflows. It provides developer-friendly wizard web UI, helping enterprises to build out a<br/> more robust and feature-rich Kubernetes platform, which includes the most common functionalities needed for enterprise<br/> Kubernetes strategies.
  children:
-    - name: Open Source
-      icon: /images/home/open-source.svg
-      content: A CNCF-certified Kubernetes platform, 100% open source, built and improved by the community.
+    - name: Free Forever
+      icon: /images/home/free.svg
+      content: Zero-cost, worry-free access to continuously evolved enterprise-grade features, empowering you to build cloud-native foundations effortlessly.

    - name: Easy to Run
      icon: /images/home/easy-to-run.svg
-      content: Can be deployed on an existing Kubernetes cluster or Linux machines, supports online and air-gapped installation.
+      content: Supports deployment on any infrastructure environment, offers online and offline installation, and supports one-click upgrades and cluster scaling.

    - name: Rich Features
      icon: /images/home/feature-rich.svg
-      content: Deliver DevOps, service mesh, <a class='inner-a' target='_blank' href='observability/'>observability</a>, application management, multi-tenancy, storage and networking management in a unified platform.
+      content: Provides multi-tenancy, multi-cluster support, cloud-native observability, application lifecycle management, storage and networking solutions, and DevOps capabilities.

-    - name: Modular & Pluggable
+    - name: Flexible Extensibility
      icon: /images/home/modular-pluggable.svg
-      content: The functionalities are modularized and loosely coupled with the platform. Choose the modules according to your business needs.
-
-
+      content: Built on a pluggable architecture, it seamlessly integrates with any mainstream open-source tools, allowing you to expand platform capabilities on demand, like building with blocks.

 section3:
  title: Benefits of Kubernetes Platform to Different Teams
@ -68,73 +87,30 @@ section3:
      icon: /images/home/80.svg
      children:
        - content: Deploy and upgrade Apps with one click to transparent underlying infrastructure
-        - content: Provide on-demand container resources and HPA, hardening the reliability and flexibility of your applications
+        - content: Provide on-demand container resources, hardening the reliability and flexibility of your applications
        - content: Import any Helm repository in seconds to visually deploy and upgrade applications
-        - content: Support operation in application store, including metering and billing for applications (coming soon)

 section4:
-  title: Key Features of Kubernetes Platform
-  content: If you are seeking an open source project that rivals a commercial product, KubeSphere is your choice. <br> <br>The <a class='inner-a' target='_blank' href='https://github.com/kubesphere/kubesphere/blob/master/docs/roadmap.md'>RoadMap</a> lists the planned features and everyone is welcome to raise a proposal and contribute your ideas.
-  children:
-    - name: Provisioning Kubernetes
-      icon: /images/home/provisioning-kubernetes.svg
-      content: Deploy Kubernetes on any infrastructure out of box, including online and air-gapped installation, and support adding GPU nodes
-
-    - name: K8s Resource Management
-      icon: /images/home/k-8-s-resource-management.svg
-      content: Provide a web console for creating and managing Kubernetes resources with powerful observability
-
-    - name: Multi-tenant Management
-      icon: /images/home/multi-tenant-management.svg
-      content: Provide unified authentication with fine-grained roles and three-tier authorization system, and support AD/LDAP authentication
-
-    - name: Multiple Storage and Networking Solutions 
-      icon: /images/home/multi-tenant-management.svg
-      content: Support GlusterFS, CephRBD, NFS, LocalPV solutions, and provide CSI plugins to consume storage from multiple cloud providers. Provide a <a class='inner-a' target='_blank' href='https://openelb.github.io/'>load balancer OpenELB</a> for bare metal Kubernetes, and offers network policy management, support Calico and Flannel CNI
+  title: Application Scenarios

  features:
-
-    - name: Kubernetes DevOps System
-      icon: /images/home/dev-ops.svg
-      content: Out-of-the-box CI/CD based on Jenkins, and automated <a class='inner-a' target='_blank' href='devops/'>DevOps workflow</a> tools including Source-to-Image & Binary-to-Image
-      link: "devops/"
-      color: orange
-
-    - name: Service Mesh (Istio-based)
-      icon: /images/home/service.svg
-      content: Provide fine-grained traffic management, observability and tracing, and offer visualization for traffic topology
-      link: "service-mesh/"
-      color: red
+    - name: Kubernetes Multi-cluster Mgmt
+      icon: /images/home/management.svg
+      content: Distribute applications across multiple clusters and cloud providers, and provide disaster recovery solutions and cross-cluster observability.
+      link: "https://docs.kubesphere.com.cn/v4.2.0/07-cluster-management/10-multi-cluster-management/"
+      color: grape

    - name: Cloud Native Observability
      icon: /images/home/rich.svg
-      content: Multi-dimensional monitoring, events and audit logs query are supported; multi-tenant log query and collection, alerting and notification are built-in
+      content: Multi-dimensional monitoring, events and audit logs query are supported; multi-tenant log query and collection, alerting and notification are built-in.
      link: "observability/"
+      color: red
+
+    - name: Kubernetes DevOps System
+      icon: /images/home/devops1.svg
+      content: Out-of-the-box CI/CD based on Jenkins, and automated DevOps workflow tools including Source-to-Image & Binary-to-Image.
+      link: "devops/"
      color: green
-    
-    - name: App Store
-      icon: /images/home/store.svg
-      content: Provide an application store for Helm-based applications, and offer application lifecycle management on Kubernetes platform
-      link: "https://docs.kubesphere.com.cn/v4.2.0/11-use-extensions/05-app-store/"
-      color: grape
-
-    - name: Kubernetes Multi-cluster Mgmt
-      icon: /images/home/management.svg
-      content: Distribute applications across multiple clusters and cloud providers, and provide disaster recovery solutions and cross-cluster observability
-      link: "https://docs.kubesphere.com.cn/v4.2.0/07-cluster-management/10-multi-cluster-management/"
-      color: orange
-
-    - name: Edge Computing Platform
-      icon: /images/home/multiple.svg
-      content: KubeSphere integrates <a class='inner-a' target='_blank' href='https://kubeedge.io/en/'>KubeEdge</a> to enable users to deploy applications on the edge devices and view logging and monitoring data of them on the console.
-      link: "https://edgewize-docs.kubesphere.com.cn/"
-      color: grape
-
-    # - name: Metering and Billing
-    #   icon: /images/home/network.svg
-    #   content: Track resource consumption at different levels on a unified dashboard, which helps you make better-informed decisions on planning and reduce the cost.
-    #   link: "/docs/v3.3/toolbox/metering-and-billing/view-resource-consumption/"
-    #   color: green

 section5:
  title: KubeSphere Container Platform with its Cloud Native Architecture
@ -142,7 +118,7 @@ section5:
    title: Front End
    project: KubeSphere Console
    children:
-      - icon: /images/home/mobx.jpg
+      - icon: /images/home/kube-design.jpg
      - icon: /images/home/koa.jpg
      - icon: /images/home/react.png

@ -151,49 +127,107 @@ section5:
    project: KubeSphere System
    group:
      - name: API Server
-      - name: API Gateway
      - name: Controller Manager
-      - name: Account Service
-

 section6:
  title: End User Community
-  content: Tons of enterprises and organizations are using KubeSphere Container Platform for research, production and their commercial products.</br> The <a class='inner-a' target='_blank' href='case/'>Case Studies</a> list more detailed user cases and their cloud native transformation stories.
+  content: Tons of enterprises and organizations are using KubeSphere Container Platform for research, production and their commercial products.
  children:
    - icon: /images/home/section6-anchnet.jpg
-    - icon: /images/home/section6-aviation-industry-corporation-of-china.jpg
+      link: /case/anchnet
    - icon: /images/case/logo-alphaflow.png
-    - icon: /images/home/section6-aqara.jpg   
-    - icon: /images/home/section6-bank-of-beijing.jpg
-    - icon: /images/home/section6-benlai.jpg
-    - icon: /images/home/section6-china-taiping.jpg
-    - icon: /images/home/section6-changqing-youtian.jpg
-    - icon: /images/home/section6-cmft.jpg
-    - icon: /images/home/section6-extreme-vision.jpg
-    - icon: /images/home/section6-guizhou-water-investment.jpg
+      link: /case/alphaflow
+    - icon: /images/case/section6-aqara.jpg
+      link: /case/aqara
    - icon: /images/home/section6-huaxia-bank.jpg
-    - icon: /images/home/section6-inaccel.jpg
-    - icon: /images/home/section6-maxnerva.jpg
-    - icon: /images/home/section6-picc.jpg
-    - icon: /images/case/logo-xdf.png
-    - icon: /images/home/section6-sina.jpg
-    - icon: /images/home/section6-sichuan-airlines.jpg
-    - icon: /images/home/section6-sinopharm.jpg
-    - icon: /images/home/section6-softtek.jpg
-    - icon: /images/home/section6-spd-silicon-valley-bank.jpg
+      link: /case/huaxia-bank
+    - icon: /images/home/section6-benlai.jpg
+      link: /case/benlai
+    - icon: /images/case/uisee.png
+      link: /case/uisee
+    - icon: /images/case/section6-zto.png
+      link: /case/zto
+    - icon: /images/case/section6-hongya.png
+      link: /case/hongyaa
+    - icon: /images/case/chinamobile-iot.png
+      link: /case/chinamobile-iot
+    - icon: /images/case/logo-qunar.png
+      link: /case/qunar
+    - icon: /images/case/logo-turing.png
+      link: /case/turing
+    - icon: /images/case/segmentfault-logo.png
+      link: /case/segmentfault
+    - icon: /images/case/logo-msxf.png
+      link: /case/msxf
+    - icon: /images/case/section6-sinodata.png
+      link: /case/sinodata
    - icon: /images/home/section6-vng.jpg
-    - icon: /images/home/section6-webank.jpg
-    - icon: /images/home/section6-wisdom-world.jpg
-    - icon: /images/home/section6-yiliu.jpg
+      link: /case/vng
+    - icon: /images/case/logo-xdf.png
+      link: /case/xdf
+    - icon: /images/home/section6-extreme-vision.jpg
+      link: /case/extreme-vision
+    - icon: /images/case/section6-vesoft-4.png
+      link: /case/vesoft
+    - icon: /images/case/logo-keyenlinx.png
+      link: /case/keyenlinx
+    - icon: /images/case/logo-yiheda.png
+      link: /case/yiheda
+    - icon: /images/case/logo-eastcom.png
+      link: /case/eastcom
+    - icon: /images/case/logo-gxjtkyy.png
+      link: /case/gxjtkyy
+    - icon: /images/case/section6-maxnerva.jpg
+      link: /case/maxnerva
+    - icon: /images/case/logo-hshc.png
+      link: /case/hshc
+    - icon: /images/case/logo-vsleem.png
+      link: /case/vsleem

-
-
-  btnContent: Case Studies
-  btnLink: case/
  link: mailto:info@kubesphere.io
  linkContent: Want to join our user community and showcase your logo? Just send an email to info@kubesphere.io
  joinTitle: Join the Revolution, Partner with KubeSphere Container Platform
  joinContent: We look forward to your joining KubeSphere partner program to improve both ecosystems and grow your business.
  joinLink: partner/
  image: /images/home/certification.png
+
+section7:
+  title: Capability Architecture
+  image: /images/home/arch-en.svg
+
+section8:
+  title: Stay True to Open Source, Keep Contributing to Cloud Native
+  content: As a pioneer in enterprise-grade Kubernetes platforms, KubeSphere has driven innovation in multi-cluster management, visualized O&M, unified observability, and enterprise-grade DevOps integration, promoting the widespread adoption and implementation of Kubernetes in corporate environments. Meanwhile, the KubeSphere community has incubated open-source projects, such as KubeKey, OpenELB, and Fluent Operator, and has collaborated deeply with ecosystems like Grafana, Loki, and Higress.
+  children:
+    - name: KubeKey
+      icon: /images/home/kube-key.svg
+      content: Rapid installation and maintenance tool that accelerates Kubernetes deployment, adapts to multiple environments, and automates full lifecycle management.
+
+    - name: OpenELB
+      icon: /images/home/open-elb.svg
+      content: Native load balancing solution that fills the gap for bare-metal LB, supports multiple network modes, and eliminates external dependencies.
+
+    - name: KubeEye
+      icon: /images/home/kube-eye.svg
+      content: Kubernetes cluster inspection and diagnostic tool that identifies configuration risks and compliance issues, diagnoses cluster anomalies, and enhances Kubernetes stability and security.
+
+    - name: Fluent Operator
+      icon: /images/home/fluent-operator.svg
+      content: Cloud-native log and data collection engine that unifies log collection and processing, extends Fluentd/Fluent Bit capabilities, enhances operational observability, and has been donated to the CNCF.
+
+    - name: OpenFunction
+      icon: /images/home/open-function.svg
+      content: Cloud-native, open-source FaaS (Function as a Service) framework that focuses on business logic development, abstracts underlying runtime environments to accelerate cloud-native FaaS adoption.
+
+    - name: Notification-Manager
+      icon: /images/home/notification-manager.svg
+      content: Manages notifications in multi-tenant Kubernetes environments, unifies multi-tenant notification channels (email, DingTalk, Feishu, WeCom), and improves notification management efficiency.
+
+    - name: DevOps
+      icon: /images/home/devops.svg
+      content: Provide end-to-end workflows, integrate mainstream CI/CD tools, consolidate CI/CD tools, simplify delivery processes, and enhance iteration efficiency.
+
+    - name: Kube Design
+      icon: /images/home/kube-design.svg
+      content: A suite of components, hooks, and icons. Originally built for KubeSphere Console but it can also be used for developing any other React web apps.
 ---
--- a/content/en/features/_index.md
+++ b/content/en/features/_index.md
@ -0,0 +1,77 @@
+---
+title: "Capability List of Community Edition"
+
+layout: "features"
+
+css: "scss/features.scss"
+
+section1:
+  title: "Capability List of Community Edition"
+  image: /images/features/banner.jpg
+
+section2:
+  children:
+    - icon: /images/features/cluster-management.svg
+      name: Cluster Management
+      content: Centralized visualization management and operation for multiple Kubernetes clusters across clouds and infrastructures
+    - icon: /images/features/multi-tenant-anagement.svg
+      name: Multi-Tenant Management
+      content: Logical resource isolation, network isolation, and fine-grained access control capabilities across clusters and projects
+    - icon: /images/features/app-management.svg
+      name: Application Management
+      content: Unified app lifecycle management capabilities, providing a unified abstraction layer for applications such as Helm and Operator
+    - icon: /images/features/k8s-resource-management.svg
+      name: K8s Resource Management
+      content: Intuitive web console integrated with native Kubernetes API for effortless resource creation and management
+    - icon: /images/features/Extension-management.svg
+      name: Extensions Management
+      content: A microkernel + extensions architecture to customize and extend platform capabilities as needed
+    - icon: /images/features/wiz-telemetry.svg
+      name: WizTelemetry Observability
+      content: Comprehensive insights into performance and health status of applications and infrastructures
+      label: Extension
+    - icon: /images/features/devops.svg
+      name: DevOps
+      content: End-to-end workflows integrating mainstream CI/CD tools
+      label: Extension
+    - icon: /images/features/gateway.svg
+      name: KubeSphere Gateway
+      content: Unified ingress management based on traffic, layer 7 load balancing, and various routing strategies
+      label: Extension
+    - icon: /images/features/gatekeeper.svg
+      name: GateKeeper
+      content: Admission controller with flexible security policy configuration
+      label: extension
+    - icon: /images/features/metrics-server.svg
+      name: Metrics Server
+      content: Scalable and efficient container resource metrics source, serving Kubernetes' built-in auto-scaling pipeline
+      label: Extension
+    - icon: /images/features/nvidia.svg
+      name: NVIDIA GPU Operator
+      content: Create, configure, and manage GPUs on Kubernetes
+      label: Extension
+    - icon: /images/features/deepseek.svg
+      name: DeepSeek
+      content: Run the DeepSeek-R1 model based on Ollama, providing API services externally
+      label: Extension
+    - icon: /images/features/grafana.svg
+      name: Grafana
+      content: Open and composable observability and data visualization platform
+      label: Extension
+    - icon: /images/features/loki.svg
+      name: Loki
+      content: Scalable, highly available, multi-tenant log aggregation system
+      label: Extension
+    - icon: /images/features/higress.svg
+      name: Higress
+      content: API Gateway based on Istio and Envoy
+      label: Extension
+    - icon: /images/features/ob-operator.svg
+      name: OB-Operator
+      content: Manage OceanBase-related resources in Kubernetes clusters
+      label: Extension
+    - icon: /images/features/ob-operator.svg
+      name: OceanBase Dashboard
+      content: OceanBase interactive management application
+      label: Extension
+---
--- a/content/tr/_index.md
+++ b/content/tr/_index.md
@ -2,7 +2,6 @@
 title: KubeSphere | Açık Kaynak Container Platformu
 description: KubeSphere, kurumsal/bireysel uygulama geliştirme ve dağıtımı için Kubernetes tabanlı açık kaynaklı bir konteyner platformudur.

-
 css: scss/index-tr.scss

 section1:
@ -32,7 +31,6 @@ section2:
      icon: /images/home/modular-pluggable.svg
      content: Tüm modüller tak-çıkar yapıya uygun olarak geliştirilmiştir, kolayca yönetilebilir

-
 section3:
  title: Farklı Ekiplere Faydaları
  content: Farklı ekiplerin birbirine entegre olarak çalışmasını sağlar. Geliştiriciler web konsolda tek tıkla kodunu dağıtabilir, Operasyon ekibi için merkezi gözlemlenebilirlik ve güçlü DevOps stratejisine uygun ortamı sunar, Altyapı ekibinin esnek ağ ve çözüm çözümleriyle Kubernetes cluster kurmasına ve korumasına yardımcı olur.
@ -122,7 +120,7 @@ section5:
    title: Front-End
    project: KubeSphere Web Konsol
    children:
-      - icon: /images/home/mobx.jpg
+      - icon: /images/home/kube-design.jpg
      - icon: /images/home/koa.jpg
      - icon: /images/home/react.png

@ -135,7 +133,6 @@ section5:
      - name: Kontroller Yönetimi
      - name: Hesap Yönetimi

-
 section6:
  title: KubeSphere'i Tercih Edenler
  content: Müşteri senaryoları, daha ayrıntılı kullanıcı senaryoları ve bulut yerel dönüşüm hikayelerini sizler için listeledik. </br> Çeşitli işletme ve kuruluşlar araştırma, üretim ve ticari ürünler için KubeSphere Container Platform'u kullanıyor.
--- a/content/zh/_index.md
+++ b/content/zh/_index.md
@ -2,21 +2,40 @@
 title: 面向云原生应用的容器混合云，支持 Kubernetes 多集群管理的 PaaS 容器云平台解决方案 | KubeSphere
 description: KubeSphere 是在 Kubernetes 之上构建的以应用为中心的多租户容器平台，完全开源，提供全栈的 IT 自动化运维的能力，简化企业的 DevOps 工作流。KubeSphere 提供了运维友好的向导式操作界面，帮助企业快速构建一个强大和功能丰富的容器云平台。

-
 css: scss/index.scss

 section1:
-  title: KubeSphere 容器平台
-  topic: 面向云原生应用的<br>容器混合云
-  content: KubeSphere 愿景是打造一个以 Kubernetes 为内核的云原生分布式操作系统，它的架构可以非常方便地使第三方应用与云原生生态组件进行即插即用（plug-and-play）的集成，支持云原生应用在多云与多集群的统一分发和运维管理。
+  title: KubeSphere 社区版
+  topic: 面向云原生应用的容器混合云
+  content: KubeSphere 愿景是打造一个以 Kubernetes 为内核的云原生分布式操作系统，<br/>它的架构可以非常方便地使第三方应用与云原生生态组件进行即插即用（plug-<br/>and-play）的集成，支持云原生应用在多云与多集群的统一分发和运维管理。
+  btns:
+    - content: 即刻体验
+      # TODO: Community page
+      link: /case
+      class: experiense-btn
+    - content: 申请免费授权
+      # TODO: free feature list
+      link: /
+      class: apply-btn
+  carouselItems:
+    - image: /images/home/top-right-cn-1.png
+    - image: /images/home/top-right-cn-2.png
+    - image: /images/home/top-right-cn-3.png
+    - image: /images/home/top-right-cn-4.png
+    - image: /images/home/top-right-cn-5.png
+
+tabs:
+  children:
+    - title: 免费产品
+    - title: 开源项目

 section2:
  title: 全栈的 Kubernetes 容器云 PaaS 解决方案
  content: KubeSphere 是在 Kubernetes 之上构建的以应用为中心的多租户容器平台，提供全栈的 IT 自动化运维的能力，简化企业的 DevOps 工作流。KubeSphere 提供了运维友好的向导式操作界面，帮助企业快速构建一个强大和功能丰富的容器云平台。
  children:
-    - name: 完全开源
-      icon: /images/home/open-source.svg
-      content: 通过 CNCF 一致性认证的 Kubernetes 平台，100% 开源，由社区驱动与开发
+    - name: 永久免费
+      icon: /images/home/free.svg
+      content: 零成本无忧使用，享受持续迭代的企业级功能，助您轻松构建云原生基石

    - name: 简易安装
      icon: /images/home/easy-to-run.svg
@ -24,13 +43,11 @@ section2:

    - name: 功能丰富
      icon: /images/home/feature-rich.svg
-      content: 在一个平台统一纳管 DevOps、云原生可观测性、服务网格、应用生命周期、多租户、多集群、存储与网络
+      content: 提供多租户、多集群、云原生可观测性、应用生命周期、存储与网络、DevOps

-    - name: 模块化 & 可插拔
+    - name: 灵活扩展
      icon: /images/home/modular-pluggable.svg
-      content: 平台中的所有功能都是可插拔与松耦合，您可以根据业务场景可选安装所需功能组件
-
-
+      content: 基于可插拔架构，可无缝集成任何主流开源工具，像搭积木一样按需扩展平台能力

 section3:
  title: 不同团队的受益
@ -42,7 +59,7 @@ section3:
      children:
        - content: 提高资源利用率，减少内部基础设施的成本支出
        - content: 提供安全增强，支持多种存储与网络方案
-        - content: 为企业交付一个通过 CNCF 认证和可信赖的 Kubernetes 发行版
+        - content: 为企业交付可信赖的 Kubernetes 发行版
        - content: 支持 Kubernetes 的多云与多集群管理，提供多云与多可用区的高可用

    - name: 开发者
@ -50,7 +67,7 @@ section3:
      icon: /images/home/74.png
      children:
        - content: 为开发者提供向导式的用户体验，降低上手云原生技术栈的学习曲线
-        - content: 内置常用的自动化部署环境，为应用（Java/NodeJs/Python/Go）部署提供定制化的容器运行环境
+        - content: 内置常用的自动化部署环境，为应用（Java/Node.js/Python/Go）部署提供定制化的容器运行环境
        - content: 提供开箱即用的工具集，帮助开发者将代码快速构建为可运行的容器镜像，提高开发效率
        - content: 提供应用商店和应用生命周期管理，缩短应用上线周期

@ -68,80 +85,38 @@ section3:
      icon: /images/home/80.svg
      children:
        - content: 通过应用商店一键部署与升级应用至 Kubernetes
-        - content: 提供按需容器资源申请，支持设置容器的弹性伸缩（HPA），提升应用的可靠性与灵活性
+        - content: 提供按需容器资源申请，提升应用的可靠性与灵活性
        - content: 支持导入 Helm 应用仓库可视化编辑与部署应用
-        - content: 应用商店将支持运营，提供针对应用的计量与计费（v3.x）

 section4:
-  title: 主要功能
-  content: 如果您在寻找一个可以媲美商业产品的开源项目，KubeSphere 会是您的选择。<br> <br>我们在 <a class='inner-a' target='_blank' href='https://github.com/kubesphere/kubesphere/blob/master/docs/roadmap.md'>RoadMap</a> 列出了下一个版本的规划，欢迎所有人为社区提供您的需求、建议与反馈。
-  children:
-    - name: 安装 Kubernetes 集群
-      icon: /images/home/provisioning-kubernetes.svg
-      content: 支持在任何基础设施上部署 Kubernetes，提供在线与离线安装，支持添加 GPU 节点
-
-    - name: Kubernetes 资源管理
-      icon: /images/home/k-8-s-resource-management.svg
-      content: 提供 Web 控制台对接 Kubernetes 原生 API 快速创建与管理 Kubernetes 资源，内置多维度的可观测性
-
-    - name: 多租户管理
-      icon: /images/home/multi-tenant-management.svg
-      content: 提供统一的认证鉴权与细粒度的基于角色的授权系统，支持对接 AD/LDAP
-
-    - name: 支持多种存储与网络方案
-      icon: /images/home/multi-tenant-management.svg
-      content: 支持 GlusterFS、Ceph、NFS、LocalPV，提供多个 CSI 插件对接公有云与企业级存储；提供面向物理机 Kubernetes 环境的负载均衡器 <a class='inner-a' target='_blank' href='https://openelb.github.io/'>OpenELB</a>，支持网络策略可视化，支持 Calico、Flannel、Cilium、Kube-OVN 等网络插件
+  title: 产品应用场景

  features:
-    - name: Kubernetes DevOps 系统
-      icon: /images/home/dev-ops.svg
-      content: 基于 Jenkins 为引擎打造的 CI/CD，内置 Source-to-Image 和 Binary-to-Image 自动化打包部署工具
-      link: "devops/"
-      color: orange
-
-    - name: 基于 Istio 的微服务治理
-      icon: /images/home/service.svg
-      content: 提供细粒度的流量管理、流量监控、灰度发布、分布式追踪，支持可视化的流量拓扑
-      link: "service-mesh/"
-      color: red
+    - name: Kubernetes 多集群管理
+      icon: /images/home/management.svg
+      content: 跨多云与多集群统一分发应用，提供集群高可用与灾备的最佳实践，支持跨集群的可观测性
+      link: "https://docs.kubesphere.com.cn/v4.2.0/07-cluster-management/10-multi-cluster-management/"
+      color: grape

    - name: 丰富的云原生可观测性
      icon: /images/home/rich.svg
      content: 提供多维度与多租户的监控、日志、事件、审计搜索，支持多种告警策略与通知渠道，支持日志转发
      link: "observability/"
+      color: red
+
+    - name: Kubernetes DevOps 系统
+      icon: /images/home/devops1.svg
+      content: 基于 Jenkins 为引擎打造的 CI/CD，内置 Source-to-Image 和 Binary-to-Image 自动化打包部署工具
+      link: "devops/"
      color: green

-    - name: 云原生应用商店
-      icon: /images/home/store.svg
-      content: 提供基于 Helm 的应用商店与应用仓库，内置多个应用模板，支持应用生命周期管理
-      link: "https://docs.kubesphere.com.cn/v4.2.0/11-use-extensions/05-app-store/"
-      color: grape
-
-    - name: Kubernetes 多集群管理
-      icon: /images/home/management.svg
-      content: 跨多云与多集群统一分发应用，提供集群高可用与灾备的最佳实践，支持跨级群的可观测性
-      link: "https://docs.kubesphere.com.cn/v4.2.0/07-cluster-management/10-multi-cluster-management/"
-      color: orange
-
-    - name: Kubernetes 边缘节点管理
-      icon: /images/home/network.svg
-      content: 基于 KubeEdge 实现应用与工作负载在云端与边缘节点的统一分发与管理，解决在海量边、端设备上完成应用交付、运维、管控的需求
-      link: "https://edgewize-docs.kubesphere.com.cn/"
-      color: green
-
-    # - name: 多维度计量与计费
-    #   icon: /images/home/multiple.svg
-    #   content: 提供基于集群与租户的多维度资源计量与计费的监控报表，让 Kubernetes 运营成本更透明
-    #   link: "/docs/v3.3/toolbox/metering-and-billing/view-resource-consumption/"
-    #   color: grape
-
 section5:
  title: 面向云原生的架构，前后端分离
  frontEnd:
    title: Front End
    project: KubeSphere Console
    children:
-      - icon: /images/home/mobx.jpg
+      - icon: /images/home/kube-design.jpg
      - icon: /images/home/koa.jpg
      - icon: /images/home/react.png

@ -150,47 +125,107 @@ section5:
    project: KubeSphere System
    group:
      - name: API Server
-      - name: API Gateway
      - name: Controller Manager
-      - name: Account Service
-

 section6:
-  title: 用户社区
-  content: 已有来自全球的大量知名企业与组织将 KubeSphere 容器平台广泛应用在科研、生产环境以及他们的商业产品中，</br> 点击<a class='inner-a' target='_blank' href='case/'>案例学习</a>查看更详细的典型用户的实践案例文章。
+  title: 用户案例
+  content: 已有来自全球的大量知名企业与组织将 KubeSphere 容器平台广泛应用在科研、生产环境以及他们的商业产品中。
  children:
    - icon: /images/home/section6-anchnet.jpg
-    - icon: /images/home/section6-aviation-industry-corporation-of-china.jpg
+      link: /case/anchnet
    - icon: /images/case/logo-alphaflow.png
-    - icon: /images/home/section6-aqara.jpg
-    - icon: /images/home/section6-bank-of-beijing.jpg
-    - icon: /images/home/section6-benlai.jpg
-    - icon: /images/home/section6-china-taiping.jpg
-    - icon: /images/home/section6-changqing-youtian.jpg
-    - icon: /images/home/section6-cmft.jpg
-    - icon: /images/home/section6-extreme-vision.jpg
-    - icon: /images/home/section6-guizhou-water-investment.jpg
+      link: /case/alphaflow
+    - icon: /images/case/section6-aqara.jpg
+      link: /case/aqara
    - icon: /images/home/section6-huaxia-bank.jpg
-    - icon: /images/home/section6-inaccel.jpg
-    - icon: /images/home/section6-maxnerva.jpg
-    - icon: /images/home/section6-picc.jpg
-    - icon: /images/case/logo-xdf.png
-    - icon: /images/home/section6-sina.jpg
-    - icon: /images/home/section6-sichuan-airlines.jpg
-    - icon: /images/home/section6-sinopharm.jpg
-    - icon: /images/home/section6-softtek.jpg
-    - icon: /images/home/section6-spd-silicon-valley-bank.jpg
+      link: /case/huaxia-bank
+    - icon: /images/home/section6-benlai.jpg
+      link: /case/benlai
+    - icon: /images/case/uisee.png
+      link: /case/uisee
+    - icon: /images/case/section6-zto.png
+      link: /case/zto
+    - icon: /images/case/section6-hongya.png
+      link: /case/hongyaa
+    - icon: /images/case/chinamobile-iot.png
+      link: /case/chinamobile-iot
+    - icon: /images/case/logo-qunar.png
+      link: /case/qunar
+    - icon: /images/case/logo-turing.png
+      link: /case/turing
+    - icon: /images/case/segmentfault-logo.png
+      link: /case/segmentfault
+    - icon: /images/case/logo-msxf.png
+      link: /case/msxf
+    - icon: /images/case/section6-sinodata.png
+      link: /case/sinodata
    - icon: /images/home/section6-vng.jpg
-    - icon: /images/home/section6-webank.jpg
-    - icon: /images/home/section6-wisdom-world.jpg
-    - icon: /images/home/section6-yiliu.jpg
+      link: /case/vng
+    - icon: /images/case/logo-xdf.png
+      link: /case/xdf
+    - icon: /images/home/section6-extreme-vision.jpg
+      link: /case/extreme-vision
+    - icon: /images/case/section6-vesoft-4.png
+      link: /case/vesoft
+    - icon: /images/case/logo-keyenlinx.png
+      link: /case/keyenlinx
+    - icon: /images/case/logo-yiheda.png
+      link: /case/yiheda
+    - icon: /images/case/logo-eastcom.png
+      link: /case/eastcom
+    - icon: /images/case/logo-gxjtkyy.png
+      link: /case/gxjtkyy
+    - icon: /images/case/section6-maxnerva.jpg
+      link: /case/maxnerva
+    - icon: /images/case/logo-hshc.png
+      link: /case/hshc
+    - icon: /images/case/logo-vsleem.png
+      link: /case/vsleem

-  btnContent: 案例学习
-  btnLink: case/
  link: mailto:info@kubesphere.io
  linkContent: 希望加入用户社区并在 KubeSphere 官网展示您的 Logo？请邮件至 info@kubesphere.io
  joinTitle: 加入 KubeSphere 社区合作伙伴计划
  joinContent: 我们非常期待您加入 KubeSphere 社区合作伙伴计划，共同完善各自的生态，加速您的业务增长。
  joinLink: partner/
  image: /images/home/certification.png
+
+section7:
+  title: 产品功能架构
+  image: /images/home/arch-cn.svg
+
+section8:
+  title: KubeSphere 自诞生以来始终坚持开源初心<br/>在全球云原生社区中持续贡献力量
+  content: 作为企业级 Kubernetes 平台的先行者，KubeSphere 在多集群治理、可视化运维、统一可观测性和企业级 DevOps 集成等方面不断创新，推动了 Kubernetes 在企业场景的普及与落地。同时，KubeSphere 社区孵化了 KubeKey、OpenELB、 Fluent Operator 等开源项目，并深度协同 Grafana、Loki、Higress 等生态，形成了广泛的技术影响力。
+  children:
+    - name: KubeKey
+      icon: /images/home/kube-key.svg
+      content: 极速安装与运维工具，加速 Kubernetes 部署，适配多环境，自动化全生命周期管理
+
+    - name: OpenELB
+      icon: /images/home/open-elb.svg
+      content: 原生负载均衡解决方案，填补裸金属 LB 空白，支持多网络模式，消除外部依赖
+
+    - name: KubeEye
+      icon: /images/home/kube-eye.svg
+      content: Kubernetes 集群检测与诊断工具，发现配置风险与合规问题，诊断集群异常，提升 Kubernetes 稳定性与安全性
+
+    - name: Fluent Operator
+      icon: /images/home/fluent-operator.svg
+      content: 云原生日志与数据采集引擎，统一日志采集与处理，扩展 Fluentd / Fluent Bit，提升运维可观测性，项目已捐献
+
+    - name: OpenFunction
+      icon: /images/home/open-function.svg
+      content: 云原生、开源的 FaaS（函数即服务）框架，聚焦业务逻辑开发，抽象底层运行环境，加速云原生函数即服务落地
+
+    - name: Notification-Manager
+      icon: /images/home/notification-manager.svg
+      content: 管理多租户 Kubernetes 环境中的消息通知，统一多租户通知渠道，支持邮件、钉钉、飞书、企业微信，提升消息管理效率
+
+    - name: DevOps
+      icon: /images/home/devops.svg
+      content: 提供端到端的工作流，集成主流 CI/CD 工具，整合 CI/CD 工具，简化交付流程，提升迭代效率
+
+    - name: Kube Design
+      icon: /images/home/kube-design.svg
+      content: 为 KubeSphere 控制台开发的一套包含组件、Hooks、Icon 的 React 库，覆盖场景丰富可用于开发各种 React 应用
 ---
--- a/content/zh/features/_index.md
+++ b/content/zh/features/_index.md
@ -0,0 +1,77 @@
+---
+title: "社区版功能介绍"
+
+layout: "features"
+
+css: "scss/features.scss"
+
+section1:
+  title: "社区版功能介绍"
+  image: /images/features/banner.jpg
+
+section2:
+  children:
+    - icon: /images/features/cluster-management.svg
+      name: 集群管理
+      content: 跨云、跨基础设施的多个 Kubernetes 集群的集中式可视化管理与运维
+    - icon: /images/features/multi-tenant-anagement.svg
+      name: 多租户管理
+      content: 跨集群、跨项目的资源逻辑隔离、网络隔离和细粒度的访问控制能力
+    - icon: /images/features/app-management.svg
+      name: 应用管理
+      content: 统一的应用生命周期管理能力，对 Helm、Operator 等类型应用提供统一的抽象层
+    - icon: /images/features/k8s-resource-management.svg
+      name: K8s资源管理
+      content: 提供 Web 控制台对接 Kubernetes 原生 API 快速创建与管理 Kubernetes 资源
+    - icon: /images/features/extension-management.svg
+      name: 扩展组件管理
+      content: 采用微内核+扩展组件的架构，按需定制、扩展平台能力
+    - icon: /images/features/wiz-telemetry.svg
+      name: WizTelemetry 可观测
+      content: 对应用与基础设施性能及健康状态的全面洞察
+      label: extension
+    - icon: /images/features/devops.svg
+      name: DevOps
+      content: 提供端到端的工作流，集成主流 CI/CD 工具
+      label: extension
+    - icon: /images/features/gateway.svg
+      name: KubeSphere 网关
+      content: 基于流量的统一入口管理、七层负载均衡与多种路由策略
+      label: extension
+    - icon: /images/features/gatekeeper.svg
+      name: GateKeeper
+      content: 可灵活配置安全策略的准入控制器
+      label: extension
+    - icon: /images/features/metrics-server.svg
+      name: Metrics Server
+      content: 可扩展、高效的容器资源度量源，为 Kubernetes 内置的自动扩展管道提供服务
+      label: extension
+    - icon: /images/features/nvidia.svg
+      name: NVIDIA GPU Operator
+      content: 在 Kubernetes 上创建、配置和管理 GPU
+      label: extension
+    - icon: /images/features/deepseek.svg
+      name: DeepSeek
+      content: 基于 ollama 运行 deepseek-r1 模型，对外提供 API 服务
+      label: extension
+    - icon: /images/features/grafana.svg
+      name: Grafana
+      content: 开放且可组合的观测和数据可视化平台
+      label: extension
+    - icon: /images/features/loki.svg
+      name: Loki
+      content: 可扩展、高可用、多租户日志聚合系统
+      label: extension
+    - icon: /images/features/higress.svg
+      name: Higress
+      content: 基于 Istio 和 Envoy 的 API 网关
+      label: extension
+    - icon: /images/features/ob-operator.svg
+      name: OB-Operator
+      content: 管理 Kubernetes 集群中的 OceanBase 相关资源
+      label: extension
+    - icon: /images/features/ob-operator.svg
+      name: OceanBase Dashboard
+      content: OceanBase 交互式管理应用
+      label: extension
+---
--- a/i18n/en.yaml
+++ b/i18n/en.yaml
@ -139,4 +139,8 @@
 - id: Msg-Thank
  translation: Thanks for the feedback. If you have a specific question about how to use KubeSphere, ask it on Slack. Open an issue in the GitHub repo if you want to report a problem or suggest an improvement.
 - id: Visitor-count
-  translation: 'The number of views: '
+  translation: 'The number of views: '
+- id: Extension
+  translation: Extension
+- id: Open Source Object
+  translation: Open Source Object
--- a/i18n/zh.yaml
+++ b/i18n/zh.yaml
@ -145,4 +145,8 @@
 - id: Msg-Thank
  translation: 感谢您的反馈。如果您有关于如何使用 KubeSphere 的具体问题，请在 Slack 上提问。如果您想报告问题或提出改进建议，请在 GitHub 存储库中打开问题。
 - id: Visitor-count
-  translation: 本文总阅读量：
+  translation: 本文总阅读量：
+- id: Extension
+  translation: 扩展组件
+- id: Open Source Object
+  translation: 开源项目
--- a/layouts/_default/features.html
+++ b/layouts/_default/features.html
@ -0,0 +1,30 @@
+{{ define "main" }}
+{{ with .Params.section1}}
+<section class='section-1 bg-cover' style='background-image: url("{{ .image }}");'>
+  <div class="title-div common-layout">
+    <h1 class="title-h1">{{ .title }}</h1>
+  </div>
+</section>
+{{ end }}
+{{ with .Params.section2}}
+<section class='section-2'>
+  <div class="title-div common-layout">
+    <ul>
+      {{range .children}}
+      <li>
+        <img src="{{ .icon }}" alt="{{ .name }}">
+        <h3 class="title">{{ .name | safeHTML }}</h3>
+        <p class="conetnt">{{ .content | safeHTML }}</p>
+        {{if eq .label "extension"}}
+        <p class="label label-green">{{ i18n "Extension" }}</p>
+        {{else if eq .label "opensource"}}
+        <p class="label label-gray">{{ i18n "Open Source Object" }}</p>
+        {{end}}
+
+      </li>
+      {{end}}
+    </ul>
+    {{ end }}
+  </div>
+</section>
+{{ end }}
--- a/layouts/index.html
+++ b/layouts/index.html
@ -1,20 +1,38 @@
 {{ define "main" }}
+{{ $language := .Site.Language.Lang }}
 {{ $data := index .Site.Data .Site.Language.Lang }}
 <div class="shadow"></div>
 <section class='section-1'>
  {{ with .Params.section1 }}
  <div class="common-layout">
    <div>
-      <p class='p1'>{{ .title | safeHTML }}</p>
-      <h1>{{ .topic | safeHTML }}</h1>
+      <h1>{{ .title | safeHTML }}</h1>
+      <p class='p1'> {{ .topic | safeHTML }}</p>
+
      <p class='p2'>{{ .content | safeHTML }}</p>
-      <!-- {{ partial "downloadButton" . }} -->
+
+      <!-- {{range .btns}}
+      <a href="{{ .link }}" class="{{.class}}" target="_blank" rel="noopener noreferrer">
+        <button class='download-btn download-btn2 common-btn'>{{ .content | safeHTML }}</button>
+      </a>
+      {{end}} -->
    </div>
-    <div class="img1-div">
-      <img class='img1' src="/images/home/53.png" id='video' alt="{{ i18n " kubesphere console screenshot"}}">
-      <img class='play' src="/images/videos/play-b.svg" alt="play">
+
+    <div class="custom-vertical-carousel">
+      <div class="carousel-inner">
+        {{ range $index, $item := .carouselItems }}
+        <div class="carousel-slide">
+          <div class="slide-content">
+            {{ if .image }}
+            <img src="{{ .image }}" alt="{{ .title }}">
+            {{ end }}
+          </div>
+        </div>
+        {{ end }}
+      </div>
    </div>

+
    <img class='img2' src="/images/home/left.svg" alt="{{ i18n " background image"}}">
    <img class='img4' src="/images/home/46.svg" alt="{{ i18n " background image"}}">
  </div>
@ -23,18 +41,131 @@
  <img class='img3' src="/images/home/2.svg" alt="{{ i18n " background image"}}">
  {{ end }}
 </section>
-
-<section class="section-2">
-  {{ with .Params.section2 }}
-  <div class="common-layout">
-    <h2 class="title-black-h2">{{ .title | safeHTML }}</h2>
-    <p class="title-p">{{ .content | safeHTML }}</p>
+<div class="tabs">
+  <div class="tab-div">
+    {{ with .Params.tabs }}
    <ul>
-      {{ range .children }}
-      <li class="common-top-inline">
-        <img src="{{ .icon }}" alt="{{ .name }}">
-        <h3 class="title-black-h3 ">{{ .name | safeHTML }}</h3>
-        <p class="common-center-p">{{ .content | safeHTML }}</p>
+      {{range .children}}
+      <li>{{ .title | safeHTML }}</li>
+      {{ end }}
+    </ul>
+    {{ end }}
+  </div>
+  <div class="content-section active ">
+    <section class="section-2 {{ $language }}">
+      {{ with .Params.section2 }}
+      <div class="common-layout">
+        <h2 class="title-black-h2">{{ .title | safeHTML }}</h2>
+        <p class="title-p">{{ .content | safeHTML }}</p>
+        <ul>
+          {{ range .children }}
+          <li class="common-top-inline">
+            <img src="{{ .icon }}" alt="{{ .name }}">
+            <h3 class="title-black-h3 ">{{ .name | safeHTML }}</h3>
+            <p class="common-center-p">{{ .content | safeHTML }}</p>
+          </li>
+          {{ end }}
+        </ul>
+      </div>
+      {{ end }}
+      <div class="section-7">
+        {{ with .Params.section7 }}
+        <div class="common-layout">
+          <h2 class="title-black-h2">{{ .title }}</h2>
+          <img src="{{ .image }}" alt="{{ .title }}">
+        </div>
+        {{end}}
+      </div>
+      <div class='section-5'>
+        {{ with .Params.section5 }}
+        <div class="common-layout">
+          <h2 class="title-black-h2">{{ .title }}</h2>
+          <div>
+            {{ with .frontEnd }}
+            <div class='front-div common-top-inline'>
+              <h3 class="title-black-h3">{{ .title }}</h3>
+              <p>{{ .project }}</p>
+              {{ $alt := .project }}
+              <ul>
+                {{ range .children }}
+                <li>
+                  <img src="{{ .icon }}" alt="{{ $alt }}">
+                </li>
+                {{ end }}
+              </ul>
+            </div>
+            {{ end }}
+            {{ with .backEnd }}
+            <div class='back-div common-top-inline'>
+              <h3 class="title-black-h3">{{ .title}}</h3>
+              <div class='group'>
+                <p>{{ .project }}</p>
+                <ul>
+                  {{ range .group }}
+                  <li>{{ .name }}</li>
+                  {{ end }}
+                </ul>
+              </div>
+              <div class='image'>
+                <img src="/images/home/applications.png" alt="{{ .project }}">
+                <img src="/images/home/applications.png" alt="{{ .project }}">
+              </div>
+            </div>
+            {{ end }}
+          </div>
+        </div>
+        {{ end }}
+      </div>
+    </section>
+  </div>
+  <div class="content-section ">
+    <section class="section-2 section-8 {{ $language }}">
+      {{ with .Params.section8 }}
+      <div class="common-layout">
+        <h2 class="title-black-h2">{{ .title | safeHTML }}</h2>
+        <p class="title-p">{{ .content | safeHTML }}</p>
+        <ul>
+          {{ range .children }}
+          <li class="common-top-inline">
+            <img src="{{ .icon }}" alt="{{ .name }}">
+            <h3 class="title-black-h3 ">{{ .name | safeHTML }}</h3>
+            <p class="common-center-p">{{ .content | safeHTML }}</p>
+          </li>
+          {{ end }}
+        </ul>
+      </div>
+      {{ end }}
+
+    </section>
+  </div>
+
+</div>
+
+
+<section class='section-4'>
+  {{ with .Params.section4 }}
+  <img class='bg-1' src="/images/home/section4-left.png" alt="{{ i18n " background image"}}">
+  <img class='bg-2' src="/images/home/section4-right.svg" alt="{{ i18n " background image"}}">
+  <div class="common-layout">
+
+    <h2 class="title-white-h2">{{ .title }}</h2>
+
+
+    <ul>
+      {{ range .features}}
+      <li>
+        <div>
+          <div class='top-line {{ .color }}'></div>
+          <img class="common-middle-inline" src="{{ .icon }}" alt="{{ .name }}">
+          <p class="common-content ">{{ .name }}</p>
+          <p class="common-p content-p">{{ .content | safeHTML }}</p>
+        </div>
+
+
+        <a class="common-p green-a" href="{{ .link }}" target="_blank" rel="noopener noreferrer">{{ i18n "Read More"
+          }}
+          →</a>
+
      </li>
      {{ end }}
    </ul>
@ -73,93 +204,6 @@
  {{ end }}
 </section>

-<section class='section-4'>
-  {{ with .Params.section4 }}
-  <img class='bg-1' src="/images/home/section4-left.png" alt="{{ i18n " background image"}}">
-  <img class='bg-2' src="/images/home/section4-right.svg" alt="{{ i18n " background image"}}">
-  <div class="common-layout">
-    <div>
-      <h2>{{ .title }}</h2>
-      <p class="common-p">{{ .content | safeHTML }}</p>
-      <ul>
-        {{ range .children }}
-        <li>
-          <img src="{{ .icon }}" alt="{{ .name }}">
-          <div>
-            <h3 class="title-white-h3">{{ .name }}</h3>
-            <p class="common-p">{{ .content | safeHTML }}</p>
-          </div>
-        </li>
-        {{ end }}
-      </ul>
-    </div>
-
-    <ul>
-      {{ range .features}}
-      <li>
-        <div>
-          <div class='top-line {{ .color }}'></div>
-          <div class='img-span-div'>
-            <img class="common-middle-inline" src="{{ .icon }}" alt="{{ .name }}">
-            <span class="common-middle-inline">{{ .name }}</span>
-          </div>
-          <p class="common-p">{{ .content | safeHTML }}</p>
-        </div>
-        <div class='middle-line'></div>
-        {{ if .check }}
-        <span class="common-green-a">{{ i18n "Coming Soon" }} →</span>
-        {{ else }}
-        <a class="common-green-a" href="{{ .link }}" target="_blank" rel="noopener noreferrer">{{ i18n "Read More" }}
-          →</a>
-        {{ end }}
-      </li>
-      {{ end }}
-    </ul>
-  </div>
-  {{ end }}
-</section>
-
-<section class='section-5'>
-  {{ with .Params.section5 }}
-  <div class="common-layout">
-    <h2 class="title-black-h2">{{ .title }}</h2>
-    <div>
-      {{ with .frontEnd }}
-      <div class='front-div common-top-inline'>
-        <h3 class="title-black-h3">{{ .title }}</h3>
-        <p>{{ .project }}</p>
-        {{ $alt := .project }}
-        <ul>
-          {{ range .children }}
-          <li>
-            <img src="{{ .icon }}" alt="{{ $alt }}">
-          </li>
-          {{ end }}
-        </ul>
-      </div>
-      {{ end }}
-      {{ with .backEnd }}
-      <div class='back-div common-top-inline'>
-        <h3 class="title-black-h3">{{ .title}}</h3>
-        <div class='group'>
-          <p>{{ .project }}</p>
-          <ul>
-            {{ range .group }}
-            <li>{{ .name }}</li>
-            {{ end }}
-          </ul>
-        </div>
-        <div class='image'>
-          <img src="/images/home/applications.png" alt="{{ .project }}">
-          <img src="/images/home/applications.png" alt="{{ .project }}">
-        </div>
-      </div>
-      {{ end }}
-    </div>
-  </div>
-  {{ end }}
-</section>
-
 <section class='section-6'>
  {{ with .Params.section6 }}
  <div class="common-layout">
@ -169,13 +213,12 @@
      {{ $alt := .title }}
      {{ range .children }}
      <li>
-        <img src="{{ .icon }}" alt="{{ $alt }}">
+        <a href="{{ .link}}" target="_blank" rel="noopener noreferrer">
+          <img src="{{ .icon }}" alt="{{ $alt }}">
+        </a>
      </li>
      {{ end }}
    </ul>
-    <div>
-      <a href="{{ .btnLink }}"><button>{{ .btnContent }}</button></a>
-    </div>
    <div class='link-div'>
      <a class="common-black-a" href="{{ .link }}" target="_blank" rel="noopener noreferrer">{{ .linkContent }}</a>
    </div>
@ -337,6 +380,144 @@
    })
  }

+
+  var tabCarousel = function () {
+    var tabs = $('.tab-div li');
+    var sections = $('.content-section');
+
+    var toggleBtn = $('#toggleBtn');
+    var countdownEl = $('#countdown');
+
+    var currentTab = 0;
+    var autoPlayInterval;
+    var countdownInterval;
+    var countdown = 10;
+    var isAutoPlay = true;
+
+
+    var showTab = function (index) {
+
+      sections.hide().removeClass('active');
+
+      tabs.removeClass('active');
+
+      sections.eq(index).show().addClass('active');
+
+      tabs.eq(index).addClass('active');
+
+      currentTab = index;
+
+      resetCountdown();
+    };
+
+    var switchTab = function () {
+      var nextIndex = currentTab === 0 ? 1 : 0;
+      showTab(nextIndex);
+    };
+
+    var resetCountdown = function () {
+      countdown = 10;
+      countdownEl.text(countdown);
+    };
+
+    tabs.click(function () {
+      var index = $(this).index();
+      showTab(index);
+    });
+
+  };
+
+  $(document).ready(function () {
+    if ($('.tab-div li.active').length === 0) {
+      $('.tab-div li:first').addClass('active');
+    }
+
+    if ($('.content-section.active').length === 0) {
+      $('.content-section:first').addClass('active').show();
+    }
+
+    tabCarousel();
+  });
+
+
+  $(document).ready(function () {
+    var $carousel = $('.custom-vertical-carousel');
+    var $slides = $carousel.find('.carousel-slide');
+    var currentIndex = 0;
+    var totalSlides = $slides.length;
+    var autoPlayInterval;
+
+    function updateSlides() {
+      $slides.removeClass('active prev next hidden');
+
+      $slides.eq(currentIndex).addClass('active');
+
+      var prevIndex = (currentIndex - 1 + totalSlides) % totalSlides;
+      $slides.eq(prevIndex).addClass('prev');
+
+
+      var nextIndex = (currentIndex + 1) % totalSlides;
+      $slides.eq(nextIndex).addClass('next');
+
+      $slides.not('.active, .prev, .next').addClass('hidden');
+    }
+
+    function nextSlide() {
+      currentIndex = (currentIndex + 1) % totalSlides;
+      updateSlides();
+    }
+
+    function prevSlide() {
+      currentIndex = (currentIndex - 1 + totalSlides) % totalSlides;
+      updateSlides();
+    }
+
+    // auto play
+    function startAutoPlay() {
+      stopAutoPlay();
+      autoPlayInterval = setInterval(nextSlide, 3000);
+    }
+
+    function stopAutoPlay() {
+      if (autoPlayInterval) {
+        clearInterval(autoPlayInterval);
+        autoPlayInterval = null;
+      }
+    }
+
+    // go to slide
+    function goToSlide(index) {
+      if (index >= 0 && index < totalSlides) {
+        currentIndex = index;
+        updateSlides();
+      }
+    }
+
+    // init
+    updateSlides();
+    startAutoPlay();
+
+    // hover
+    $carousel.hover(
+      function () { stopAutoPlay(); },
+      function () { startAutoPlay(); }
+    );
+
+    // keyboard control
+    $(document).on('keydown', function (e) {
+      if (e.key === 'ArrowDown') {
+        nextSlide();
+        stopAutoPlay();
+        startAutoPlay();
+      } else if (e.key === 'ArrowUp') {
+        prevSlide();
+        stopAutoPlay();
+        startAutoPlay();
+      }
+    });
+
+  });
+
  controlVideo()
  bindMouseLeftLi()
  bindResize()
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@ -1,21 +1,17 @@
 <!-- Header Start -->
 <header class="navigation">
-    <!-- {{ if eq .Site.Language.Lang "zh"}}
-    <div class="join-div">
-        <div class="content">
-            🚀 KubeSphere v4.1.3 发布，多项优化与改进，欢迎体验！<a href={{"/zh/docs/v4.1/20-release-notes/release-v413/" | relLangURL }} target="_blank" rel="noopener noreferrer">请查看 Release notes →</a>
-            <img id="close-join" src="/images/header/close.svg" alt="close">
-        </div>
+    {{ if eq .Site.Language.Lang "zh"}}
+    <div class="join-div zh">
+        <a href={{"/features" | relLangURL }} target="_blank" rel="noopener noreferrer"></a>
+
    </div>
    {{ end }}
    {{ if eq .Site.Language.Lang "en"}}
-    <div class="join-div">
-        <div class="content">
-            🚀 KubeSphere v4.1.3 with Enhancements and Bug Fixes is available now. <a href={{"/docs/v4.1/20-release-notes/release-v413/" | relLangURL }} target="_blank" rel="noopener noreferrer">Read the release notes →</a>
-            <img id="close-join" src="/images/header/close.svg" alt="close">
-        </div>
+    <div class="join-div en">
+        <a href={{"/features" | relLangURL }} target="_blank" rel="noopener noreferrer"></a>
+
    </div>
-    {{ end }} -->
+    {{ end }}
    <div class="common-layout">
        <div class="header-container">
            <a href="{{ site.Home.RelPermalink }}" aria-label="logo">
@ -29,16 +25,16 @@

                {{ $active := false }}
                {{ range .Children }}
-                    {{ if eq $section .URL }}
-                        {{ $active = true }}
-                    {{ end}}
+                {{ if eq $section .URL }}
+                {{ $active = true }}
+                {{ end}}
                {{ end }}

                <li {{ if $active }} class="menu-li menu-active" {{ else }} class="menu-li" {{ end}}>
                    <span class='menu-span'>{{ .Name }}</span>
                    <ul class="dropdown-menu menu-{{ .Weight }}">
                        {{ range .Children }}
-                        <li {{ if eq $section .URL }} class="active"{{ end}}>
+                        <li {{ if eq $section .URL }} class="active" {{ end}}>
                            {{ if hasPrefix .URL "http" }}
                            <a href="{{ .URL }}" target="_blank" rel="noopener noreferrer">{{ .Name | safeHTML }}</a>
                            {{ else }}
@ -49,9 +45,10 @@
                    </ul>
                </li>
                {{ else }}
-                <li {{ if eq $section .URL }} class="active"{{ end}}>
+                <li {{ if eq $section .URL }} class="active" {{ end}}>
                    {{ if hasPrefix .URL "http" }}
-                    <a data-docs="{{ .Name }}" href="{{ .URL }}" target="_blank" rel="noopener noreferrer">{{ .Name }}</a>
+                    <a data-docs="{{ .Name }}" href="{{ .URL }}" target="_blank" rel="noopener noreferrer">{{ .Name
+                        }}</a>
                    {{ else }}
                    <a data-docs="{{ .Name }}" href="{{ .URL | relLangURL }}">{{ .Name }}</a>
                    {{ end }}
@ -71,7 +68,8 @@
                        {{ with .Page.AllTranslations }}
                        <ul class="dropdown-menu">
                            {{ range . }}
-                            <li onclick="handleLangClick('{{ .Language }}','{{ .RelPermalink }}')">{{ .Language.LanguageName }}</li>
+                            <li onclick="handleLangClick('{{ .Language }}','{{ .RelPermalink }}')">{{
+                                .Language.LanguageName }}</li>
                            {{ end }}
                        </ul>
                        {{ end }}
@ -100,10 +98,12 @@
                    </li> -->
                    <li class="github-li">
                        <div class="github-star">
-                            <a class="star-btn" href="{{ .Site.Params.githubLink }}" rel="noopener noreferrer" target="_blank">
+                            <a class="star-btn" href="{{ .Site.Params.githubLink }}" rel="noopener noreferrer"
+                                target="_blank">
                                <span class="star-img"></span>&nbsp;<span>Star</span>
                            </a>
-                            <a class="social-count" href="{{ .Site.Params.githubStarLink }}" rel="noopener noreferrer" target="_blank"></a>
+                            <a class="social-count" href="{{ .Site.Params.githubStarLink }}" rel="noopener noreferrer"
+                                target="_blank"></a>
                        </div>
                    </li>
                    <li class="menu-icon">
@ -122,23 +122,24 @@

            {{ $active := false }}
            {{ range .Children }}
-                {{ if eq $section .URL }}
-                    {{ $active = true }}
-                {{ end}}
+            {{ if eq $section .URL }}
+            {{ $active = true }}
+            {{ end}}
            {{ end }}

            <li data-check="0" {{ if $active }} class="menu-li menu-active" {{ else }} class="menu-li" {{ end}}>
                <span class='menu-span'>{{ .Name }}</span>
                <ul class="dropdown-menu">
                    {{ range .Children }}
-                    <li {{ if eq $section .URL }} class="active"{{ end}}>
+                    <li {{ if eq $section .URL }} class="active" {{ end}}>
                        <a href="{{ .URL | relLangURL }}">{{ .Name | safeHTML }}</a>
                    </li>
                    {{ end }}
                </ul>
            </li>
            {{ else }}
-            <li {{ if eq $section .URL }} class="active"{{ end}}><a data-docs="{{ .Name }}" href="{{ .URL | relLangURL }}">{{ .Name | safeHTML }}</a></li>
+            <li {{ if eq $section .URL }} class="active" {{ end}}><a data-docs="{{ .Name }}"
+                    href="{{ .URL | relLangURL }}">{{ .Name | safeHTML }}</a></li>
            {{ end }}

            {{ end }}
@ -158,94 +159,94 @@
    </div>
 </header>
 <script>
-var githubApiLink = "{{ .Site.Params.githubApiLink }}"
+    var githubApiLink = "{{ .Site.Params.githubApiLink }}"

-var getStar = function() {
-    $('.social-count').hide()
-    $.getJSON(githubApiLink, function(data) {
-        $('.social-count').show().html(data.stargazers_count)
-    })
-}
-
-getStar()
-
-var bindNavMouseEvent = function(selector, element) {
-    if (!element) {
-        element = $(selector)
-    }
-    var flag = false
-    element.mouseenter(function() {
-        if (flag) {
-            return false
-        }
-        flag = true
-        $(this).find('.dropdown-menu').fadeIn(200, function() {
-            flag = false
+    var getStar = function () {
+        $('.social-count').hide()
+        $.getJSON(githubApiLink, function (data) {
+            $('.social-count').show().html(data.stargazers_count)
        })
-    });
-    element.mouseleave(function() {
-        $(this).find('.dropdown-menu').fadeOut(200)
-    });
-}
+    }

-var bindScrollChangeHeader = function() {
-    var check = 100
-    var header = $('header')
-    window.addEventListener('scroll', function() {
-        var scrollY = window.scrollY;
-        if (scrollY > 0) {
-            header.addClass('navigationScroll')
-        } else {
-            header.removeClass('navigationScroll')
+    getStar()
+
+    var bindNavMouseEvent = function (selector, element) {
+        if (!element) {
+            element = $(selector)
        }
+        var flag = false
+        element.mouseenter(function () {
+            if (flag) {
+                return false
+            }
+            flag = true
+            $(this).find('.dropdown-menu').fadeIn(200, function () {
+                flag = false
+            })
+        });
+        element.mouseleave(function () {
+            $(this).find('.dropdown-menu').fadeOut(200)
+        });
+    }
+
+    var bindScrollChangeHeader = function () {
+        var check = 100
+        var header = $('header')
+        window.addEventListener('scroll', function () {
+            var scrollY = window.scrollY;
+            if (scrollY > 0) {
+                header.addClass('navigationScroll')
+            } else {
+                header.removeClass('navigationScroll')
+            }
+        })
+    }
+
+    var bindClickShowMenu = function () {
+        $('.menu-icon').click(function () {
+            $('#modal-for-menu').modal()
+        })
+    }
+
+    var bindClickModalLi = function () {
+        $('.modal .menu-li').click(function () {
+            var check = $(this).data('check')
+            if (check === 0) {
+                $(this).data('check', 1)
+                $(this).find('.dropdown-menu').slideDown(200)
+            } else {
+                $(this).data('check', 0)
+                $(this).find('.dropdown-menu').slideUp(200)
+            }
+            $(this).find('.menu-span').toggleClass('up')
+        })
+    }
+
+    var bindClickClose = function () {
+        $('#close-join').click(function () {
+            $('.navigation .join-div').hide()
+            $('.main-section').removeClass('padding')
+        })
+    }
+
+    var language = '{{.Site.Language.Lang}}'
+
+    bindClickClose()
+
+    bindScrollChangeHeader()
+
+    $('.header-container .menu-li').each(function () {
+        bindNavMouseEvent('', $(this))
    })
-}
+    bindNavMouseEvent('.header-container .language-menu')
+    bindNavMouseEvent('.header-container .btn-li')

-var bindClickShowMenu = function() {
-    $('.menu-icon').click(function() {
-        $('#modal-for-menu').modal()
-    })
-}
-
-var bindClickModalLi = function() {
-    $('.modal .menu-li').click(function() {
-        var check = $(this).data('check')
-        if (check === 0) {
-            $(this).data('check', 1)
-            $(this).find('.dropdown-menu').slideDown(200)
-        } else {
-            $(this).data('check', 0)
-            $(this).find('.dropdown-menu').slideUp(200)
-        }
-        $(this).find('.menu-span').toggleClass('up')
-    })
-}
-
-var bindClickClose = function() {
-    $('#close-join').click(function() {
-        $('.navigation .join-div').hide()
-        $('.main-section').removeClass('padding')
-    })
-}
-
-var language = '{{.Site.Language.Lang}}'
-
-bindClickClose()
-
-bindScrollChangeHeader()
-
-$('.header-container .menu-li').each(function() {
-    bindNavMouseEvent('', $(this))
-})
-bindNavMouseEvent('.header-container .language-menu')
-bindNavMouseEvent('.header-container .btn-li')
-
-bindClickShowMenu()
-bindClickModalLi()
-var handleLangClick = function(lang, href){
-    try{
-        localStorage.setItem('lang', lang)
-    }catch(err){}
-    location.href = href
-}
-</script>
+    bindClickShowMenu()
+    bindClickModalLi()
+    var handleLangClick = function (lang, href) {
+        try {
+            localStorage.setItem('lang', lang)
+        } catch (err) { }
+        location.href = href
+    }
+</script>
--- a/static/images/features/app-management.svg
+++ b/static/images/features/app-management.svg
@ -0,0 +1,4 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M30.6769 6.08936C31.4967 5.62089 32.5031 5.62089 33.323 6.08936L57.974 20.1757C58.8698 20.6875 58.8698 21.9791 57.974 22.491L33.323 36.5773C32.5031 37.0458 31.4967 37.0458 30.6769 36.5773L6.02582 22.491C5.13007 21.9791 5.13007 20.6875 6.02582 20.1757L30.6769 6.08936Z" fill="#C1C9D1"/>
+<path d="M22.6666 32L6.02582 41.509C5.13007 42.0209 5.13007 43.3125 6.02582 43.8243L30.6769 57.9106C31.4967 58.3791 32.5031 58.3791 33.323 57.9106L57.974 43.8243C58.8698 43.3125 58.8698 42.0209 57.974 41.509L41.3332 32L33.323 36.5773C32.5031 37.0457 31.4967 37.0457 30.6769 36.5773L22.6666 32Z" fill="#36435C"/>
+</svg>
--- a/static/images/features/banner.jpg
+++ b/static/images/features/banner.jpg
--- a/static/images/features/cluster-management.svg
+++ b/static/images/features/cluster-management.svg
@ -0,0 +1,4 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M31.9195 15.9992L17.5195 24.0018V26.3538L31.9489 34.3218L31.9755 47.9698L46.3195 39.9992V24.0018L31.9195 15.9992Z" fill="#C1C9D1"/>
+<path d="M56 18.6644V45.3304L32 58.6664L8 45.3304V18.6644L32 5.33334L56 18.6644ZM13.333 21.805V42.1947L32 52.5658L50.667 42.1947V21.805L32 11.4349L13.333 21.805ZM27.9893 36.6664L28.002 45.8236L17.5195 39.9994V30.89L27.9893 36.6664Z" fill="#36435C"/>
+</svg>
--- a/static/images/features/deepseek.svg
+++ b/static/images/features/deepseek.svg
@ -0,0 +1,3 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M63.3271 12.0287C62.6493 11.6903 62.3563 12.3353 61.9605 12.6631C61.8255 12.7689 61.7106 12.9063 61.5951 13.0332C60.6049 14.1117 59.4482 14.8202 57.9347 14.7356C55.7241 14.6087 53.8363 15.3171 52.1683 17.0407C51.8135 14.9153 50.6352 13.6465 48.8411 12.8323C47.9015 12.4093 46.9536 11.9864 46.2953 11.0665C45.8376 10.4109 45.7131 9.6813 45.4828 8.96228C45.3372 8.52875 45.1915 8.08432 44.7017 8.01064C44.1682 7.92605 43.9604 8.38072 43.7512 8.76138C42.9172 10.3157 42.5928 12.0287 42.6259 13.7628C42.6971 17.6645 44.3152 20.7732 47.5268 22.9835C47.8922 23.2373 47.9862 23.491 47.871 23.8611C47.6526 24.6221 47.3905 25.3623 47.1614 26.1236C47.0158 26.61 46.7974 26.7157 46.2847 26.5043C44.523 25.7535 43.0006 24.6433 41.6545 23.3007C39.3709 21.0482 37.305 18.5633 34.7308 16.6177C34.1344 16.169 33.5218 15.7423 32.8942 15.3383C30.2664 12.7371 33.2384 10.6012 33.9268 10.3475C34.6454 10.0831 34.1771 9.17376 31.851 9.18433C29.525 9.1949 27.3976 9.98794 24.6863 11.0453C24.2892 11.2039 23.8722 11.3202 23.4459 11.4154C20.9835 10.9396 18.4285 10.8338 15.7582 11.1405C10.7316 11.7115 6.71629 14.1329 3.76409 18.2672C0.218803 23.2369 -0.616551 28.8834 0.40679 34.773C1.47911 40.9798 4.58885 46.1187 9.36533 50.1367C14.3192 54.3028 20.0237 56.3436 26.5318 55.9524C30.4848 55.7197 34.8853 55.1805 39.8498 50.8981C41.1022 51.5325 42.4167 51.7866 44.5958 51.9766C46.2758 52.1352 47.8922 51.892 49.1433 51.6277C51.1036 51.2047 50.9675 49.3543 50.2593 49.0159C44.5124 46.2879 45.7737 47.3981 44.6273 46.4997C47.548 42.9783 51.9485 39.3197 53.6695 27.4668C53.8055 26.5254 53.6907 25.9333 53.6695 25.172C53.6589 24.7067 53.7622 24.5269 54.2851 24.4741C55.7241 24.3049 57.1221 23.9031 58.405 23.1841C62.1273 21.1116 63.6302 17.7068 63.985 13.6253C64.038 13.0015 63.9748 12.3565 63.3271 12.0287ZM30.8803 48.7621C25.3122 44.3003 22.6102 42.8302 21.4942 42.8937C20.451 42.9571 20.639 44.1731 20.868 44.9661C21.1076 45.7486 21.4214 46.2879 21.8596 46.9752C22.1614 47.4298 22.3706 48.1066 21.5564 48.6141C19.7626 49.7455 16.6449 48.2335 16.4993 48.1594C12.8692 45.9812 9.83364 43.1052 7.69561 39.1717C5.6304 35.3866 4.43231 31.3259 4.23373 26.9906C4.18078 25.9438 4.48394 25.5741 5.50463 25.3834C6.84871 25.1204 8.2275 25.0846 9.58344 25.2777C15.2681 26.1236 20.1081 28.7142 24.1644 32.8168C26.4798 35.1536 28.2313 37.9451 30.037 40.6735C31.9553 43.5707 34.0205 46.3302 36.6484 48.5933C37.5764 49.3863 38.3164 49.9887 39.0257 50.4331C36.888 50.6763 33.3199 50.7292 30.8803 48.7621ZM33.5502 31.2625C33.5502 30.7972 33.9156 30.4271 34.3753 30.4271C34.4792 30.4291 34.5729 30.4466 34.6556 30.48C34.8137 30.5406 34.9495 30.6481 35.0447 30.7879C35.1399 30.9278 35.1899 31.0934 35.1882 31.2625C35.1898 31.4266 35.1428 31.5875 35.0531 31.7251C34.9781 31.8391 34.876 31.9328 34.7559 31.9979C34.6357 32.0629 34.5014 32.0972 34.3647 32.0978C34.2559 32.0974 34.1483 32.0755 34.048 32.0334C33.8976 31.969 33.7697 31.8615 33.6806 31.7244C33.5921 31.5868 33.5467 31.426 33.5502 31.2625ZM41.8419 35.5977C41.311 35.8198 40.7785 36.0101 40.2665 36.0313C39.4745 36.0736 38.609 35.7458 38.14 35.344C37.4096 34.7201 36.888 34.3712 36.6695 33.2821C36.5752 32.8168 36.6272 32.0978 36.7106 31.6858C36.8986 30.7972 36.6894 30.2262 36.0751 29.7081C35.5747 29.2852 34.9379 29.1689 34.2389 29.1689C33.9781 29.1689 33.7382 29.0529 33.5611 28.9574C33.4746 28.9164 33.3975 28.8578 33.3351 28.7852C33.2722 28.7131 33.2252 28.6285 33.1971 28.5371C33.1685 28.4457 33.1594 28.3493 33.1706 28.2542C33.1809 28.1594 33.211 28.0675 33.2593 27.9849C33.3321 27.8366 33.6866 27.477 33.7703 27.4139C34.7195 26.8641 35.814 27.0438 36.8258 27.4562C37.7644 27.8471 38.4723 28.5665 39.496 29.5816C40.5392 30.8078 40.7272 31.1465 41.3199 32.0664C41.7902 32.7851 42.2178 33.5256 42.5088 34.3712C42.6875 34.8999 42.4571 35.3334 41.8419 35.5977Z" fill="#4D6BFE"/>
+</svg>
--- a/static/images/features/devops.svg
+++ b/static/images/features/devops.svg
@ -0,0 +1,19 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1290_65505)">
+<g clip-path="url(#clip1_1290_65505)">
+<path d="M23.8387 28.209C24.8728 26.6626 26.6085 24.1383 28.7448 21.3099L29.2753 20.6076C24.3221 14.5273 18.1779 8.34796 13.6605 8.34796C8.64435 8.34796 4.20135 12.2039 1.46631 18.1325C3.39654 15.7095 5.84379 14.261 8.50634 14.261C13.1364 14.261 20.0454 22.916 23.8387 28.209Z" fill="#99D7B9"/>
+<path d="M40.1617 35.791C43.955 41.084 50.864 49.7393 55.4943 49.7393C58.1568 49.7393 60.604 48.2908 62.5343 45.8679C59.7992 51.7965 55.3563 55.6524 50.3401 55.6524C45.7898 55.6524 39.5889 49.3832 34.6175 43.2605L34.7251 43.3927L35.2554 42.6904C37.3919 39.8619 39.1277 37.3375 40.1617 35.791Z" fill="#99D7B9"/>
+<path d="M32.0003 39.9147C26.7649 46.8461 19.0533 55.6523 13.6605 55.6523C8.64434 55.6523 4.20134 51.7964 1.46631 45.8678C3.39654 48.2907 5.8438 49.7392 8.50634 49.7392C14.7407 49.7392 25.1066 34.0472 26.435 32C27.0572 31.041 29.166 27.8379 32.0003 24.0855C37.2356 17.1541 44.9472 8.34796 50.34 8.34796C55.3562 8.34796 59.7992 12.2039 62.5342 18.1325C60.6039 15.7095 58.1568 14.261 55.4942 14.261C49.26 14.261 38.8939 29.9526 37.5654 32.0001C37.1572 32.6293 36.1083 34.2256 34.6342 36.3095C33.8624 37.4005 32.9742 38.6252 32.0003 39.9147Z" fill="#55BC8A"/>
+<path d="M6.21873 31.9998C6.21873 26.8308 7.62566 22.1781 9.87058 18.9358C9.42876 18.7801 9.00345 18.6955 8.60077 18.6955C3.8507 18.6955 0 24.6521 0 31.9998C0 39.3476 3.85069 45.3042 8.60076 45.3042C9.00345 45.3042 9.42875 45.2196 9.87057 45.0638C7.62566 41.8216 6.21873 37.1689 6.21873 31.9998Z" fill="#324558"/>
+<path d="M55.3993 45.3042C54.9948 45.3042 54.5675 45.2189 54.1235 45.0618C56.3675 41.8196 57.7739 37.1678 57.7739 31.9999C57.7739 26.8319 56.3675 22.1802 54.1235 18.938C54.5675 18.7809 54.9948 18.6955 55.3993 18.6955C60.1494 18.6955 64.0001 24.6521 64.0001 31.9999C64.0001 39.3477 60.1494 45.3042 55.3993 45.3042Z" fill="#324558"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_1290_65505">
+<rect width="64" height="64" fill="white"/>
+</clipPath>
+<clipPath id="clip1_1290_65505">
+<rect width="64.0001" height="47.3044" fill="white" transform="translate(0 8.34784)"/>
+</clipPath>
+</defs>
+</svg>
--- a/static/images/features/extension-management.svg
+++ b/static/images/features/extension-management.svg
@ -0,0 +1,4 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M32.0002 58.6666C46.7278 58.6666 58.6668 46.7276 58.6668 32C58.6668 17.2724 46.7278 5.33331 32.0002 5.33331C17.2726 5.33331 5.3335 17.2724 5.3335 32C5.3335 46.7276 17.2726 58.6666 32.0002 58.6666ZM29.3335 18.6666H24.0002V26.6666H20.0002V32C20.0002 37.4395 24.0717 41.928 29.3335 42.5841V48H34.6668V42.5841C39.9286 41.928 44.0002 37.4395 44.0002 32V26.6666H40.0002V18.6666H34.6668V26.6666H29.3335V18.6666Z" fill="#C1C9D1"/>
+<path d="M24 18.6667H29.3333V26.6667H34.6667V18.6667H40V26.6667H44V32C44 37.4395 39.9284 41.928 34.6667 42.5842V48H29.3333V42.5842C24.0716 41.928 20 37.4395 20 32V26.6667H24V18.6667Z" fill="#36435C"/>
+</svg>
--- a/static/images/features/gatekeeper.svg
+++ b/static/images/features/gatekeeper.svg
@ -0,0 +1,9 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.7172 0.105957C14.7172 0.105957 11.1557 12.0843 11.4144 15.6459C11.5971 18.142 16.2393 21.4144 16.2393 21.4144C16.2393 21.4144 13.7127 24.4128 12.7386 26.1022C11.7341 27.8373 10.1968 31.825 10.1968 31.825C10.1968 31.825 2.58667 22.8907 3.2107 18.5073C3.95649 13.2106 14.7172 0.105957 14.7172 0.105957Z" fill="#BFBFBF"/>
+<path d="M49.2823 0.105957C49.2823 0.105957 52.8438 12.0843 52.5851 15.6459C52.4024 18.142 47.7603 21.4144 47.7603 21.4144C47.7603 21.4144 50.2868 24.4128 51.2609 26.1022C52.2655 27.8373 53.8027 31.825 53.8027 31.825C53.8027 31.825 61.4129 22.8907 60.7888 18.5073C60.043 13.2106 49.2823 0.105957 49.2823 0.105957Z" fill="#BFBFBF"/>
+<path d="M32.1141 14.139C22.023 14.139 13.1192 21.2774 10.1816 31.7489L32.1141 39.0242V14.139Z" fill="#7D9199"/>
+<path d="M32.0991 14.0934C42.1902 14.0934 51.094 21.2469 54.0316 31.7033L32.0991 38.9785V14.0934Z" fill="#566366"/>
+<path d="M32.0534 31.7338H10.1362V47.0606C10.1362 47.0606 18.9944 50.5308 22.6473 53.3313C25.6761 55.6601 31.5207 63.8942 31.5207 63.8942H32.0687V31.7338H32.0534Z" fill="#7D9199"/>
+<path d="M32.068 31.5206H53.9852V46.8475C53.9852 46.8475 45.127 50.3177 41.4742 53.1182C38.354 55.5078 32.5703 63.879 32.5703 63.879H32.0376L32.068 31.5206Z" fill="#566366"/>
+<path d="M32.0835 33.7579C33.605 33.7579 34.8384 32.5245 34.8384 31.003C34.8384 29.4816 33.605 28.2482 32.0835 28.2482C30.562 28.2482 29.3286 29.4816 29.3286 31.003C29.3286 32.5245 30.562 33.7579 32.0835 33.7579Z" fill="white"/>
+</svg>
--- a/static/images/features/gateway.svg
+++ b/static/images/features/gateway.svg
@ -0,0 +1,15 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="32.0003" cy="32" r="27.2815" fill="#55BC8A"/>
+<path d="M32.5093 4.72455C47.3415 4.99596 59.2817 17.1029 59.2817 31.9999C59.2817 46.897 47.3415 59.0029 32.5093 59.2744V4.72455Z" fill="white" fill-opacity="0.4"/>
+<mask id="mask0_1290_65515" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="4" y="4" width="56" height="56">
+<circle cx="32.0003" cy="32" r="27.2815" fill="#55BC8A"/>
+</mask>
+<g mask="url(#mask0_1290_65515)">
+<path d="M16.4007 21.9327L26.4681 32.0001L16.4007 42.0675V36.027H4.31982V27.9731H16.4007V21.9327Z" fill="white"/>
+<path d="M48.6164 36.027V42.0675L38.549 32.0001L48.6164 21.9327V27.9731H60.6973V36.027H48.6164Z" fill="white"/>
+<path d="M28.4818 14.7859H22.4414L32.5088 4.71846L42.5762 14.7859H36.5358V26.8668H28.4818V14.7859Z" fill="#324558"/>
+<path d="M28.4818 49.2095H22.4414L32.5088 59.2769L42.5762 49.2095H36.5358V37.1286H28.4818V49.2095Z" fill="#324558"/>
+<path d="M16.4007 21.8626L26.4681 31.93L16.4007 41.9974V35.957H4.31982V27.9031H16.4007V21.8626Z" fill="white"/>
+<path d="M48.6164 35.957V41.9974L38.549 31.93L48.6164 21.8626V27.9031H60.6973V35.957H48.6164Z" fill="white"/>
+</g>
+</svg>
--- a/static/images/features/grafana.svg
+++ b/static/images/features/grafana.svg
--- a/static/images/features/higress.svg
+++ b/static/images/features/higress.svg
--- a/static/images/features/k8s-resource-management.svg
+++ b/static/images/features/k8s-resource-management.svg
--- a/static/images/features/loki.svg
+++ b/static/images/features/loki.svg
--- a/static/images/features/metrics-server.svg
+++ b/static/images/features/metrics-server.svg
--- a/static/images/features/multi-tenant-anagement.svg
+++ b/static/images/features/multi-tenant-anagement.svg
@ -0,0 +1,4 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M53.5635 35.625C56.6111 36.6409 58.667 39.4935 58.667 42.7061V50.8662C54.1972 51.753 49.1207 52.2539 43.7393 52.2539C39.5998 52.2539 35.6411 51.9574 32 51.417C33.0923 51.2549 34.156 51.0708 35.1875 50.8662V42.7061C35.1875 40.2252 33.9619 37.9592 32 36.5879C32.5787 36.1834 33.2219 35.8564 33.916 35.625L40.0078 33.5947H47.4717L53.5635 35.625ZM43.7393 11.7461C47.8183 11.7461 51.1249 15.0528 51.125 19.1318C51.125 19.4028 51.1108 19.674 51.0811 19.9434L50.6035 24.2568C50.2168 27.7563 47.26 30.4053 43.7393 30.4053C40.2186 30.4052 37.2617 27.7562 36.875 24.2568L36.3984 19.9434C35.9504 15.8889 38.8743 12.239 42.9287 11.791C43.1979 11.7613 43.4685 11.7461 43.7393 11.7461Z" fill="#C1C9D1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.6475 19.132C27.6475 15.0529 24.3407 11.7461 20.2616 11.7461C19.9905 11.7461 19.7197 11.761 19.4504 11.7908C15.3959 12.2388 12.4723 15.8887 12.9203 19.9432L13.397 24.257C13.7837 27.7564 16.7408 30.4048 20.2616 30.4048C23.7823 30.4048 26.7394 27.7564 27.1261 24.257L27.6028 19.9432C27.6325 19.6738 27.6475 19.403 27.6475 19.132ZM5.33333 42.7061V50.8662C9.80315 51.7529 14.8791 52.2539 20.2606 52.2539C25.6421 52.2539 30.718 51.7529 35.1878 50.8662V42.7061C35.1878 39.4935 33.1321 36.6414 30.0844 35.6255L23.9924 33.5948H16.5288L10.4368 35.6255C7.38904 36.6414 5.33333 39.4935 5.33333 42.7061Z" fill="#36435C"/>
+</svg>
--- a/static/images/features/nvidia.svg
+++ b/static/images/features/nvidia.svg
@ -0,0 +1,10 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_866_21759)">
+<path d="M27.2322 23.936V20.32C27.5708 20.2933 27.9148 20.2746 28.2668 20.264C37.8562 19.952 44.1522 28.7546 44.1522 28.7546C44.1522 28.7546 37.3575 38.48 30.0668 38.48C29.1025 38.4844 28.1442 38.3266 27.2322 38.0133V27.056C30.9655 27.52 31.7148 29.2213 33.9602 33.0773L38.9548 28.7386C37.7764 27.2594 36.2913 26.0532 34.6017 25.2034C32.9121 24.3535 31.0583 23.8802 29.1682 23.816C28.5185 23.8191 27.8695 23.8583 27.2242 23.9333M27.2242 11.9973V17.3973C27.5708 17.3706 27.9148 17.3466 28.2588 17.3333C41.5975 16.8693 50.2882 28.6026 50.2882 28.6026C50.2882 28.6026 40.3068 41.1093 29.9068 41.1093C29.0055 41.1093 28.1068 41.0267 27.2215 40.864V44.1973C27.9628 44.2986 28.7095 44.3493 29.4562 44.3493C39.1335 44.3493 46.1308 39.256 52.9068 33.232C54.0295 34.1573 58.6295 36.4133 59.5762 37.4026C53.1335 42.9573 38.1148 47.4373 29.6028 47.4373C28.7815 47.4373 27.9948 47.384 27.2188 47.3093V52H64.0002V12H27.2268L27.2242 11.9973ZM27.2242 38.0133V40.8613C18.2748 39.2186 15.7922 29.6346 15.7922 29.6346C18.8369 26.4803 22.8727 24.4675 27.2242 23.9333V27.0586H27.2108C25.934 27.0465 24.671 27.3227 23.5157 27.8666C22.3605 28.4105 21.3429 29.2081 20.5388 30.2C20.5388 30.2 22.1788 36.2666 27.2242 38.0133ZM11.3282 29.216C15.1575 24.056 20.9388 20.8213 27.2242 20.32V17.3946C15.4935 18.3653 5.3335 28.5946 5.3335 28.5946C5.3335 28.5946 11.0882 45.7333 27.2268 47.3013V44.192C15.3868 42.6666 11.3335 29.2213 11.3335 29.2213H11.3282V29.216Z" fill="#74B71B"/>
+</g>
+<defs>
+<clipPath id="clip0_866_21759">
+<rect width="64" height="64" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/static/images/features/ob-operator.svg
+++ b/static/images/features/ob-operator.svg
--- a/static/images/features/wiz-telemetry.svg
+++ b/static/images/features/wiz-telemetry.svg
@ -0,0 +1,18 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1290_65494)">
+<path d="M36.5239 7.45258C38.3208 9.24947 40.4598 10.6484 42.7681 11.7114C51.6559 15.8036 57.8256 24.7939 57.8257 35.2241C57.8257 36.0172 57.7897 36.8014 57.7183 37.5756C57.485 40.1011 57.6175 42.6476 58.2739 45.0971L59.9614 51.3989L53.686 53.0795C51.2312 53.7375 48.9499 54.8892 46.8765 56.3578C42.6582 59.3452 37.5082 61.103 31.9468 61.103C26.3853 61.1029 21.2353 59.3453 17.0171 56.3578C14.943 54.8893 12.6625 53.7375 10.2085 53.0795L3.93311 51.3989L5.62158 45.0981C6.2788 42.6478 6.40974 40.1011 6.17725 37.5756C6.1066 36.8015 6.06982 36.0172 6.06982 35.2241C6.06989 24.794 12.2397 15.8036 21.1274 11.7114C23.4356 10.6484 25.5747 9.24944 27.3716 7.45258L31.9478 2.8764L36.5239 7.45258ZM31.9497 15.8149C30.3078 15.8149 28.7064 16.0169 27.186 16.4135C18.7838 18.5402 12.5407 26.166 12.5405 35.2231C12.5405 37.0534 12.8005 38.8235 13.2769 40.5034C13.3642 40.8231 13.4674 41.1398 13.5737 41.4565C13.6064 41.553 13.6382 41.6498 13.6724 41.7455C13.7566 41.9832 13.8499 42.2194 13.9448 42.4555C14.036 42.6812 14.1314 42.9053 14.231 43.1264C14.3137 43.3124 14.3963 43.4986 14.4858 43.683C14.5747 43.8661 14.67 44.0458 14.7642 44.225C14.8318 44.3549 14.8998 44.4844 14.9712 44.6127C15.0829 44.8133 15.1964 45.0134 15.3149 45.2094C15.3559 45.2777 15.3982 45.345 15.4399 45.4125C16.0681 46.4266 16.7854 47.3813 17.5845 48.2602C17.589 48.264 17.5934 48.2693 17.5972 48.2739C21.1499 52.1767 26.2695 54.6313 31.9487 54.6313C37.628 54.6313 42.7476 52.1775 46.3003 48.2739C46.3041 48.2693 46.3082 48.2648 46.312 48.2602C47.1113 47.3812 47.8292 46.4275 48.4575 45.4125C48.4993 45.3449 48.5415 45.2778 48.5825 45.2094C48.701 45.0134 48.8146 44.8133 48.9263 44.6127C48.9969 44.4844 49.0657 44.3549 49.1333 44.225C49.2275 44.0451 49.3228 43.866 49.4116 43.683C49.5004 43.4993 49.583 43.3124 49.6665 43.1264C49.766 42.9053 49.8615 42.6812 49.9526 42.4555C50.0475 42.2201 50.1408 41.9832 50.2251 41.7455C50.2593 41.6498 50.2911 41.553 50.3237 41.4565C50.43 41.1398 50.5325 40.8231 50.6206 40.5034C51.0962 38.8235 51.3564 37.0534 51.3579 35.2231C51.3577 26.1659 45.1147 18.5401 36.7124 16.4135C35.1922 16.0169 33.5915 15.8149 31.9497 15.8149Z" fill="#E75225"/>
+<g clip-path="url(#clip1_1290_65494)">
+<path d="M42.1818 44.3269C37.0973 49.9737 28.3979 50.4297 22.7511 45.3452C17.1043 40.2608 16.6484 31.5614 21.7328 25.9146C26.8172 20.2678 35.5166 19.8119 41.1634 24.8963C46.8103 29.9807 47.2662 38.6801 42.1818 44.3269ZM26.4361 30.1494C23.6905 33.1987 23.9367 37.8964 26.986 40.642C30.0352 43.3876 34.7329 43.1414 37.4785 40.0921C40.2241 37.0428 39.9779 32.3451 36.9286 29.5995C33.8793 26.854 29.1817 27.1002 26.4361 30.1494Z" fill="#E75225"/>
+<path opacity="0.4" d="M45.6472 36.492C45.3105 39.8534 43.7488 42.9735 41.2597 45.2577C38.7707 47.5419 35.5282 48.8304 32.1503 48.8778L32.0615 42.5496C33.8856 42.524 35.6365 41.8282 36.9806 40.5947C38.3247 39.3613 39.168 37.6764 39.3498 35.8612L45.6472 36.492Z" fill="white"/>
+<path opacity="0.6" d="M32.1508 48.8778C28.6758 48.9267 25.3111 47.6587 22.7326 45.3285C20.1541 42.9984 18.553 39.7788 18.251 36.3166L24.5559 35.7665C24.719 37.6361 25.5836 39.3747 26.9759 40.633C28.3683 41.8912 30.1853 42.576 32.0618 42.5496L32.1508 48.8778Z" fill="white"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_1290_65494">
+<rect width="62.5618" height="58.2472" fill="white" transform="translate(0.666504 2.8764)"/>
+</clipPath>
+<clipPath id="clip1_1290_65494">
+<rect width="27.9874" height="27.9874" fill="white" transform="translate(30.9121 15.3469) rotate(42)"/>
+</clipPath>
+</defs>
+</svg>
--- a/static/images/home/4-en.png
+++ b/static/images/home/4-en.png
--- a/static/images/home/4.png
+++ b/static/images/home/4.png
--- a/static/images/home/8.png
+++ b/static/images/home/8.png
--- a/static/images/home/applications.png
+++ b/static/images/home/applications.png
--- a/static/images/home/arch-cn.svg
+++ b/static/images/home/arch-cn.svg
--- a/static/images/home/arch-en.svg
+++ b/static/images/home/arch-en.svg
--- a/static/images/home/banner-cn.png
+++ b/static/images/home/banner-cn.png
--- a/static/images/home/banner-en.png
+++ b/static/images/home/banner-en.png
--- a/static/images/home/devops.svg
+++ b/static/images/home/devops.svg
@ -0,0 +1,19 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1081_21938)">
+<g clip-path="url(#clip1_1081_21938)">
+<path d="M23.8384 28.209C24.8726 26.6626 26.6082 24.1384 28.7446 21.31L29.2751 20.6077C24.3219 14.5274 18.1776 8.34802 13.6602 8.34802C8.64411 8.34802 4.2011 12.204 1.46606 18.1325C3.39629 15.7096 5.84355 14.2611 8.50609 14.2611C13.1362 14.2611 20.0452 22.9161 23.8384 28.209Z" fill="#99D7B9"/>
+<path d="M40.1615 35.7911C43.9547 41.084 50.8638 49.7394 55.494 49.7394C58.1566 49.7394 60.6037 48.2908 62.534 45.868C59.799 51.7965 55.356 55.6524 50.3398 55.6524C45.7896 55.6524 39.5887 49.3833 34.6173 43.2606L34.7248 43.3928L35.2552 42.6904C37.3917 39.8619 39.1275 37.3375 40.1615 35.7911Z" fill="#99D7B9"/>
+<path d="M32.0001 39.9148C26.7646 46.8462 19.0531 55.6523 13.6602 55.6523C8.6441 55.6523 4.20109 51.7964 1.46606 45.8679C3.3963 48.2908 5.84355 49.7393 8.5061 49.7393C14.7404 49.7393 25.1063 34.0473 26.4347 32C27.0569 31.0411 29.1657 27.838 32.0001 24.0856C37.2354 17.1541 44.947 8.34802 50.3398 8.34802C55.356 8.34802 59.799 12.204 62.534 18.1326C60.6037 15.7096 58.1565 14.2611 55.494 14.2611C49.2597 14.2611 38.8937 29.9526 37.5651 32.0002C37.1569 32.6293 36.108 34.2257 34.634 36.3096C33.8622 37.4006 32.974 38.6253 32.0001 39.9148Z" fill="#55BC8A"/>
+<path d="M6.21873 31.9998C6.21873 26.8307 7.62566 22.178 9.87058 18.9358C9.42876 18.78 9.00345 18.6954 8.60077 18.6954C3.8507 18.6954 0 24.652 0 31.9998C0 39.3476 3.85069 45.3041 8.60076 45.3041C9.00345 45.3041 9.42875 45.2195 9.87057 45.0638C7.62566 41.8215 6.21873 37.1688 6.21873 31.9998Z" fill="#324558"/>
+<path d="M55.3993 45.3042C54.9948 45.3042 54.5675 45.2188 54.1235 45.0617C56.3675 41.8195 57.7739 37.1678 57.7739 31.9998C57.7739 26.8319 56.3675 22.1801 54.1235 18.9379C54.5675 18.7808 54.9948 18.6955 55.3993 18.6955C60.1494 18.6955 64.0001 24.652 64.0001 31.9998C64.0001 39.3476 60.1494 45.3042 55.3993 45.3042Z" fill="#324558"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_1081_21938">
+<rect width="64" height="64" fill="white"/>
+</clipPath>
+<clipPath id="clip1_1081_21938">
+<rect width="64.0001" height="47.3044" fill="white" transform="translate(0 8.34778)"/>
+</clipPath>
+</defs>
+</svg>
--- a/static/images/home/devops1.svg
+++ b/static/images/home/devops1.svg
@ -0,0 +1,14 @@
+<svg width="65" height="64" viewBox="0 0 65 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.333252" width="64" height="64" rx="12" fill="url(#paint0_linear_855_10006)"/>
+<path d="M31.6264 38.352C27.7105 43.2315 21.9425 49.4307 17.9088 49.4307C14.1569 49.4307 10.8337 46.7162 8.78795 42.5427C10.2317 44.2484 12.0622 45.2681 14.0537 45.2681C18.7168 45.2681 26.4702 34.2215 27.4638 32.7802C27.9292 32.1052 29.5063 29.8503 31.6263 27.2087C35.5422 22.3292 41.3103 16.1299 45.344 16.1299C49.0959 16.1299 52.4192 18.8444 54.4649 23.0179C53.0211 21.3122 51.1907 20.2925 49.1992 20.2925C44.5363 20.2925 36.7834 31.338 35.7892 32.7801C35.4838 33.2231 34.6991 34.347 33.5965 35.814C33.0193 36.582 32.3549 37.4442 31.6264 38.352C31.6264 38.352 31.6264 38.3519 31.6264 38.352Z" fill="white"/>
+<path d="M33.584 40.7072C37.3025 45.0174 41.9406 49.4307 45.344 49.4307C49.0959 49.4307 52.4192 46.7162 54.4649 42.5427C53.0211 44.2484 51.1907 45.2681 49.1992 45.2681C45.736 45.2681 40.5682 39.1751 37.7309 35.449C36.9574 36.5376 35.6592 38.3147 34.0612 40.3059L33.6644 40.8003C33.6376 40.7692 33.6108 40.7382 33.584 40.7072Z" fill="white"/>
+<path d="M14.0537 20.2925C17.5169 20.2925 22.6846 26.3854 25.5218 30.1114C26.2953 29.0228 27.5935 27.2458 29.1915 25.2547L29.5882 24.7603C25.8834 20.48 21.2877 16.1299 17.9088 16.1299C14.1569 16.1299 10.8337 18.8444 8.78796 23.0179C10.2317 21.3122 12.0622 20.2925 14.0537 20.2925Z" fill="white"/>
+<path d="M15.0743 23.5835C13.3952 25.8659 12.3428 29.1413 12.3428 32.7801C12.3428 36.419 13.3952 39.6943 15.0743 41.9768C14.7438 42.0864 14.4257 42.146 14.1245 42.146C10.5716 42.146 7.69141 37.9527 7.69141 32.7801C7.69141 27.6075 10.5716 23.4143 14.1245 23.4143C14.4257 23.4143 14.7438 23.4738 15.0743 23.5835Z" fill="white"/>
+<path d="M49.1284 42.1459C48.8258 42.1459 48.5062 42.0858 48.1741 41.9752C49.8526 39.6928 50.9045 36.4181 50.9045 32.78C50.9045 29.142 49.8526 25.8672 48.1741 23.5849C48.5062 23.4743 48.8258 23.4142 49.1284 23.4142C52.6813 23.4142 55.5615 27.6074 55.5615 32.78C55.5615 37.9527 52.6813 42.1459 49.1284 42.1459Z" fill="white"/>
+<defs>
+<linearGradient id="paint0_linear_855_10006" x1="0.333252" y1="0" x2="0.333252" y2="64" gradientUnits="userSpaceOnUse">
+<stop stop-color="#86DBA2"/>
+<stop offset="1" stop-color="#00A971"/>
+</linearGradient>
+</defs>
+</svg>
--- a/static/images/home/fluent-operator.svg
+++ b/static/images/home/fluent-operator.svg
@ -0,0 +1,57 @@
+<svg width="65" height="64" viewBox="0 0 65 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1081_10652)">
+<path d="M63.3669 29.1601H62.2705C60.276 29.1352 56.4509 29.3486 52.983 32.3452C44.7027 39.5142 42.8125 50.0667 28.6432 55.7622C16.8404 60.5052 2.28906 56.0152 2.28906 56.0152C2.28906 56.0152 15.2726 55.1123 16.9942 45.2047C18.3387 37.4552 11.2888 31.9532 6.86333 24.9628C2.36348 17.8435 1.20751 11.9297 3.37557 9.37463C9.52255 2.11633 26.4503 21.738 34.8546 24.3824C43.0804 26.9672 48.632 20.9641 55.4438 21.8472C57.6168 22.125 58.6785 23.0627 59.383 24.2583C59.6212 24.6602 60.2066 26.0295 60.7275 26.5356C61.2385 27.0317 61.9182 27.3988 62.5532 27.7709C63.3619 28.2472 64.1607 29.1601 63.3669 29.1601Z" fill="url(#paint0_linear_1081_10652)"/>
+<path d="M24.4659 17.8087C22.4318 16.2607 20.3332 14.6384 18.2693 13.16C17.8029 12.8276 17.3366 12.5001 16.8752 12.1826C11.3434 8.39718 6.21346 6.02571 3.37563 9.37454C1.20757 11.9296 2.36354 17.8434 6.86834 24.9628C6.91299 25.0372 6.96261 25.1066 7.00726 25.1811C9.35393 28.8127 16.1607 37.3212 32.2947 36.959C33.3564 35.8328 34.9688 33.7045 37.0525 31.3876C33.6739 25.9252 28.5837 21.1625 24.4659 17.8087Z" fill="url(#paint1_linear_1081_10652)"/>
+<path d="M40.7292 43.4781C40.7937 41.057 40.3521 38.6706 39.5137 36.3636C37.3952 36.6812 35.0089 36.8995 32.2951 36.959C30.3205 39.0576 25.8107 44.6638 18.3391 49.7143C8.3918 56.4418 2.29443 56.0151 2.29443 56.0151C2.29443 56.0151 16.8507 60.505 28.6485 55.7621C32.8805 54.0604 36.0209 51.9271 38.5611 49.5754C38.9778 49.1785 40.6399 47.1047 40.7292 43.4781Z" fill="url(#paint2_linear_1081_10652)"/>
+<path d="M37.0576 31.3877C34.9739 33.6996 33.3565 35.833 32.2998 36.9592C35.0186 36.8996 37.4049 36.6813 39.5184 36.3638C39.2703 35.6742 38.9826 34.9945 38.6651 34.3248C38.1888 33.3275 37.648 32.3452 37.0576 31.3877Z" fill="url(#paint3_linear_1081_10652)"/>
+<path d="M49.1534 22.6112C44.7975 23.9309 40.4465 26.1386 34.8551 24.3824C32.0868 23.5141 28.3906 20.8003 24.4663 17.8087C28.5841 21.1625 33.6744 25.9203 37.0579 31.3876C40.1438 27.9693 44.2617 24.1492 49.1534 22.6112Z" fill="url(#paint4_linear_1081_10652)"/>
+<path d="M39.5186 36.3638C40.357 38.6708 40.7986 41.0571 40.7341 43.4782C40.6398 47.0999 38.9778 49.1737 38.561 49.5756C44.5195 44.0637 47.1837 37.3709 52.9883 32.3452C54.0699 31.4125 55.1812 30.7477 56.2677 30.2764H56.2627C52.4575 31.8739 48.3297 35.0342 39.5186 36.3638Z" fill="url(#paint5_linear_1081_10652)"/>
+<path d="M63.3671 29.16C64.1609 29.16 63.3621 28.2471 62.5584 27.7758C61.9234 27.3988 61.2437 27.0316 60.7327 26.5405C60.2068 26.0344 59.6213 24.6601 59.3882 24.2632C58.6787 23.0626 57.622 22.1299 55.4489 21.8521C53.266 21.5693 51.212 21.996 49.1581 22.6161C44.2663 24.1541 40.1435 27.9743 37.0576 31.3926C37.648 32.3501 38.1937 33.3274 38.6651 34.3246C38.9826 34.9994 39.2703 35.6791 39.5184 36.3637C48.3345 35.0341 52.4573 31.8738 56.2626 30.2763H56.2675C58.6638 29.2344 60.9063 29.1401 62.2756 29.16H63.3671Z" fill="url(#paint6_linear_1081_10652)"/>
+<path d="M18.3391 49.7145C25.8107 44.6639 30.3205 39.0577 32.2951 36.9591C16.1611 37.3213 9.35428 28.8128 7.00761 25.1812C11.438 32.0723 18.3292 37.5396 16.9995 45.2047C15.278 55.1123 2.29443 56.0153 2.29443 56.0153C2.29443 56.0153 8.3918 56.4419 18.3391 49.7145Z" fill="url(#paint7_linear_1081_10652)"/>
+<path d="M54.9974 26.8233C55.7098 26.8233 56.2874 26.2502 56.2874 25.5433C56.2874 24.8364 55.7098 24.2633 54.9974 24.2633C54.285 24.2633 53.7075 24.8364 53.7075 25.5433C53.7075 26.2502 54.285 26.8233 54.9974 26.8233Z" fill="white"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_1081_10652" x1="2.28906" y1="32.8557" x2="63.6943" y2="32.8557" gradientUnits="userSpaceOnUse">
+<stop stop-color="#2A59A2"/>
+<stop offset="1" stop-color="#2A59A2"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1081_10652" x1="-0.190312" y1="22.3716" x2="64.7582" y2="22.3716" gradientUnits="userSpaceOnUse">
+<stop stop-color="#91D3F2"/>
+<stop offset="0.266" stop-color="#6FB2DE"/>
+<stop offset="0.521" stop-color="#5598CE"/>
+<stop offset="0.673" stop-color="#4B8FC8"/>
+</linearGradient>
+<linearGradient id="paint2_linear_1081_10652" x1="2.29443" y1="47.1507" x2="64.1479" y2="47.1507" gradientUnits="userSpaceOnUse">
+<stop stop-color="#2C9EC7"/>
+<stop offset="0.404" stop-color="#2C63A5"/>
+<stop offset="1" stop-color="#395DA1"/>
+</linearGradient>
+<linearGradient id="paint3_linear_1081_10652" x1="2.29318" y1="34.1734" x2="64.1467" y2="34.1734" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4FAAC4"/>
+<stop offset="0.002" stop-color="#2F75B1"/>
+<stop offset="1" stop-color="#356EAC"/>
+</linearGradient>
+<linearGradient id="paint4_linear_1081_10652" x1="24.4663" y1="24.5982" x2="64.5027" y2="24.5982" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4FAAC4"/>
+<stop offset="0.002" stop-color="#2F81B6"/>
+<stop offset="1" stop-color="#3B5EA9"/>
+</linearGradient>
+<linearGradient id="paint5_linear_1081_10652" x1="24.4646" y1="39.926" x2="64.501" y2="39.926" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4FAAC4"/>
+<stop offset="0.002" stop-color="#1E3773"/>
+<stop offset="1" stop-color="#203370"/>
+</linearGradient>
+<linearGradient id="paint6_linear_1081_10652" x1="50.3761" y1="43.2699" x2="50.3761" y2="21.3156" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4FAAC4"/>
+<stop offset="0.002" stop-color="#2C5A9A"/>
+<stop offset="1" stop-color="#374580"/>
+</linearGradient>
+<linearGradient id="paint7_linear_1081_10652" x1="-4.38364" y1="40.6009" x2="41.1771" y2="40.6009" gradientUnits="userSpaceOnUse">
+<stop offset="0.112" stop-color="#38B1DA"/>
+<stop offset="1" stop-color="#326FB5"/>
+</linearGradient>
+<clipPath id="clip0_1081_10652">
+<rect width="64" height="52.8372" fill="white" transform="translate(0.921875 6)"/>
+</clipPath>
+</defs>
+</svg>
--- a/static/images/home/free.svg
+++ b/static/images/home/free.svg
@ -0,0 +1,10 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M32.1923 4L16.3552 46H56.4406V18L32.1923 4Z" fill="#55BC8A"/>
+<path d="M32.1923 4V46H7.94397V18L32.1923 4Z" fill="#A8E9BE"/>
+<path d="M56.4407 46L32.1924 60L18.9736 39.6323H45.4111L56.4407 46Z" fill="#86DBA2"/>
+<path d="M32.1923 39.6323V60L7.94397 46L18.9736 39.6323H32.1923Z" fill="#CDF6D5"/>
+<path d="M46.6298 23.6641V40.3361L32.1923 48.6709L22.5828 23.6641L46.6298 23.6641Z" fill="#4CA986"/>
+<path d="M32.192 23.6641V48.6709L17.7545 40.3361V23.6641L32.192 23.6641Z" fill="#86DBA2"/>
+<path d="M46.6296 23.664L32.1921 32L25.4424 23.664L32.1921 15.3292L46.6296 23.664Z" fill="#242E42"/>
+<path d="M32.192 15.3292V32L17.7545 23.664L32.192 15.3292Z" fill="#242E42"/>
+</svg>
--- a/static/images/home/gatekeeper.svg
+++ b/static/images/home/gatekeeper.svg
@ -0,0 +1,9 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.7172 0.105957C14.7172 0.105957 11.1557 12.0843 11.4144 15.6459C11.5971 18.142 16.2393 21.4144 16.2393 21.4144C16.2393 21.4144 13.7127 24.4128 12.7386 26.1022C11.7341 27.8373 10.1968 31.825 10.1968 31.825C10.1968 31.825 2.58667 22.8907 3.2107 18.5073C3.95649 13.2106 14.7172 0.105957 14.7172 0.105957Z" fill="#BFBFBF"/>
+<path d="M49.2823 0.105957C49.2823 0.105957 52.8438 12.0843 52.5851 15.6459C52.4024 18.142 47.7603 21.4144 47.7603 21.4144C47.7603 21.4144 50.2868 24.4128 51.2609 26.1022C52.2655 27.8373 53.8027 31.825 53.8027 31.825C53.8027 31.825 61.4129 22.8907 60.7888 18.5073C60.043 13.2106 49.2823 0.105957 49.2823 0.105957Z" fill="#BFBFBF"/>
+<path d="M32.1141 14.139C22.023 14.139 13.1192 21.2774 10.1816 31.7489L32.1141 39.0242V14.139Z" fill="#7D9199"/>
+<path d="M32.0991 14.0934C42.1902 14.0934 51.094 21.2469 54.0316 31.7033L32.0991 38.9785V14.0934Z" fill="#566366"/>
+<path d="M32.0534 31.7338H10.1362V47.0606C10.1362 47.0606 18.9944 50.5308 22.6473 53.3313C25.6761 55.6601 31.5207 63.8942 31.5207 63.8942H32.0687V31.7338H32.0534Z" fill="#7D9199"/>
+<path d="M32.068 31.5206H53.9852V46.8475C53.9852 46.8475 45.127 50.3177 41.4742 53.1182C38.354 55.5078 32.5703 63.879 32.5703 63.879H32.0376L32.068 31.5206Z" fill="#566366"/>
+<path d="M32.0835 33.7579C33.605 33.7579 34.8384 32.5245 34.8384 31.003C34.8384 29.4816 33.605 28.2482 32.0835 28.2482C30.562 28.2482 29.3286 29.4816 29.3286 31.003C29.3286 32.5245 30.562 33.7579 32.0835 33.7579Z" fill="white"/>
+</svg>
--- a/static/images/home/kube-design.jpg
+++ b/static/images/home/kube-design.jpg
--- a/static/images/home/kube-design.svg
+++ b/static/images/home/kube-design.svg
@ -0,0 +1,6 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M51.7803 50.6481L38.5171 42.9882V58.2999L51.7803 50.6481Z" fill="#00A971"/>
+<path d="M51.7803 13.3605L38.5171 5.70056V21.0123L51.7803 13.3605Z" fill="#00A971"/>
+<path d="M19.4959 32L31.9818 24.7935V2L6.03027 16.9798V47.0202L31.9818 62V39.2065L19.4959 32Z" fill="#00A971"/>
+<path d="M32.0591 31.9999L57.9701 46.9635V17.0444L32.0591 31.9999Z" fill="#00A971"/>
+</svg>
--- a/static/images/home/kube-eye.svg
+++ b/static/images/home/kube-eye.svg
@ -0,0 +1,5 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="31.9999" cy="28.9475" r="12.8616" stroke="#333333" stroke-width="11.8845"/>
+<circle cx="3.41888" cy="3.41888" r="3.41888" transform="matrix(1 0 0 -1 28.5977 7.70166)" fill="#27AE60"/>
+<path d="M59.333 47.9955C53.6338 57.0892 43.5234 63.137 32 63.1371L31.168 63.1263C19.991 62.8432 10.2296 56.8694 4.66797 47.9955H20.9541C24.1354 50.0555 27.9279 51.2523 32 51.2523C36.0721 51.2523 39.8646 50.0554 43.0459 47.9955H59.333Z" fill="#219653"/>
+</svg>
--- a/static/images/home/kube-key.svg
+++ b/static/images/home/kube-key.svg
@ -0,0 +1,3 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M60 19.3236V51.48L43.9436 60.7547L36.9439 39.0288C38.8262 37.9167 40.2877 36.2133 41.1008 34.1839C41.9139 32.1545 42.0329 29.9132 41.4393 27.8091C40.8457 25.705 39.5727 23.8564 37.8189 22.5512C36.065 21.2461 33.9286 20.5577 31.7427 20.5934C29.5568 20.6291 27.444 21.3868 25.7337 22.7485C24.0233 24.1102 22.8114 25.9993 22.2867 28.1217C21.7621 30.244 21.9542 32.4803 22.8331 34.482C23.712 36.4838 25.2283 38.1386 27.1458 39.1887L20.2261 60.6675L4.30054 51.48V19.3236L32.1466 3.24536L60 19.3236Z" fill="#00A971"/>
+</svg>
--- a/static/images/home/management.svg
+++ b/static/images/home/management.svg
@ -1 +1,12 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="41" height="41" viewBox="0 0 41 41"><defs><linearGradient id="prefix__a" x1="71.36%" x2="71.36%" y1="50%" y2="-49.077%"><stop offset="0%" stop-color="#ECAF24"/><stop offset="100%" stop-color="#FFF8CB"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><rect width="41" height="41" fill="url(#prefix__a)" rx="4"/><g fill="#FFF" fill-rule="nonzero" transform="translate(10 13)"><path d="M5.048 2.694c0-.011.003-.02.003-.032 0-1.395-1.13-2.526-2.525-2.526S0 1.267 0 2.662c0 1.31 1.003 2.376 2.281 2.5.28-1.324 1.397-2.328 2.767-2.468zM19.577.135c-1.396 0-2.526 1.131-2.526 2.526l.002.031c1.371.14 2.488 1.146 2.767 2.47 1.279-.125 2.282-1.19 2.282-2.501 0-1.394-1.13-2.526-2.525-2.526zM10.735 2.662c0-1.395-1.131-2.526-2.525-2.526-1.396 0-2.527 1.131-2.527 2.526 0 .012.003.02.003.032 1.118.113 2.057.808 2.522 1.776.464-.974 1.406-1.662 2.524-1.776 0-.011.003-.021.003-.032zM13.894 4.47c.464-.968 1.405-1.662 2.522-1.776 0-.011.003-.02.003-.032 0-1.395-1.129-2.526-2.525-2.526S11.37 1.267 11.37 2.662l.002.032c1.117.113 2.058.802 2.523 1.776z"/><path d="M7.893 5.82c-.001-1.396-1.13-2.526-2.525-2.526-1.396 0-2.527 1.13-2.527 2.526 0 1.206.847 2.21 1.977 2.463.32-1.41 1.573-2.463 3.075-2.464z"/><path d="M10.412 9.042c0-.023.007-.043.007-.066 0-1.396-1.13-2.526-2.525-2.526-1.396 0-2.526 1.13-2.526 2.526 0 1.395 1.13 2.525 2.526 2.525.022 0 .043-.007.065-.007.253-1.228 1.223-2.2 2.453-2.452z"/><path d="M10.984 8.338c.024 0 .044.007.067.007.022 0 .043-.007.065-.007.253-1.23 1.224-2.202 2.453-2.454.001-.022.007-.044.007-.065 0-1.396-1.13-2.527-2.524-2.527-1.396 0-2.527 1.13-2.527 2.527 0 .02.007.043.007.064 1.229.255 2.2 1.224 2.452 2.455zM16.734 3.292c-1.396 0-2.525 1.13-2.526 2.526h.001c1.502 0 2.756 1.056 3.074 2.463 1.13-.25 1.977-1.256 1.977-2.462 0-1.396-1.131-2.527-2.526-2.527z"/><path d="M14.21 6.45c-1.397 0-2.528 1.13-2.528 2.526 0 .022.007.043.007.065 1.23.252 2.2 1.223 2.454 2.454.023.001.043.007.066.007 1.395 0 2.525-1.13 2.525-2.524 0-1.397-1.131-2.528-2.525-2.528z"/><circle cx="11.051" cy="12.133" r="2.525"/></g></g></svg>
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="64" height="64" rx="12" fill="url(#paint0_linear_855_9983)"/>
+<path d="M31.2929 19.2523L43.0089 26.0166V39.545L32.3235 45.7142V36.4231L19.5769 29.0638V26.0166L31.2929 19.2523Z" fill="white"/>
+<path d="M29.2016 38.2255V45.1018L19.5769 39.545V32.6687L29.2016 38.2255Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M30.2522 11.5279C30.8962 11.1561 31.6896 11.1561 32.3335 11.5279L49.1781 21.2531C49.822 21.6248 50.2187 22.3119 50.2187 23.0555V42.5059C50.2187 43.2495 49.822 43.9366 49.1781 44.3084L32.3335 54.0335C31.6896 54.4053 30.8962 54.4053 30.2522 54.0335L13.4077 44.3084C12.7638 43.9366 12.3671 43.2495 12.3671 42.5059V23.0555C12.3671 22.3119 12.7638 21.6248 13.4077 21.2531L30.2522 11.5279ZM16.5297 24.2572L31.2929 15.7336L46.0561 24.2572V41.3043L31.2929 49.8278L16.5297 41.3043V24.2572Z" fill="white"/>
+<defs>
+<linearGradient id="paint0_linear_855_9983" x1="-23.034" y1="31.4201" x2="29.4917" y2="80.8251" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6236FF"/>
+<stop offset="1" stop-color="#AC6EF2"/>
+</linearGradient>
+</defs>
+</svg>
--- a/static/images/home/notification-manager.svg
+++ b/static/images/home/notification-manager.svg
@ -0,0 +1,7 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="15.1152" y="6.1012" width="44.8849" height="38.1552" rx="4" fill="#324558"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.244 15.9503H37.5911C36.9192 17.3024 36.5413 18.8265 36.5413 20.4388C36.5413 26.0164 41.0629 30.5379 46.6405 30.5379C47.4118 30.5379 48.1629 30.4515 48.8847 30.2877V51.8583C48.8847 53.0977 47.8799 54.1025 46.6405 54.1025H12.9767L5.62371 57.779C4.87761 58.1521 3.99976 57.6095 3.99976 56.7754V18.1946C3.99976 16.9551 5.00454 15.9503 6.244 15.9503Z" fill="#55BC8A"/>
+<path d="M46.6402 27.1715C50.3586 27.1715 53.373 24.1572 53.373 20.4388C53.373 16.7204 50.3586 13.7061 46.6402 13.7061C42.9218 13.7061 39.9075 16.7204 39.9075 20.4388C39.9075 24.1572 42.9218 27.1715 46.6402 27.1715Z" fill="white"/>
+<path d="M15.1152 28.3004H36.6V32.7889H15.1152V28.3004Z" fill="white"/>
+<path d="M15.1152 37.2777H29.4736V41.7662H15.1152V37.2777Z" fill="#A8DDC3"/>
+</svg>
--- a/static/images/home/open-elb.svg
+++ b/static/images/home/open-elb.svg
@ -0,0 +1,17 @@
+<svg width="65" height="64" viewBox="0 0 65 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.21899 32.809V14.166H64.492V32.809H1.21899ZM8.63835 21.6309V25.3438H12.3487V21.6309H8.63835ZM16.0595 25.3438V21.6309H19.7698V25.3438H16.0595ZM41.0077 21.6309V25.3438H57.0732V21.6309H41.0077Z" fill="url(#paint0_linear_1081_10603)"/>
+<path d="M64.4924 36.7637V55.4062H51.2874L44.719 40.1533L38.1516 55.4062H1.21899V36.7637H64.4924ZM8.63794 47.9414H12.3489V44.2285H8.63794V47.9414ZM16.0598 44.2285V47.9414H19.7698V44.2285H16.0598Z" fill="url(#paint1_linear_1081_10603)"/>
+<path d="M44.7194 50.3221L46.5241 55.3752H51.2162L47.246 58.2627L48.7366 63.3157L44.7194 60.4283L40.7059 63.3157L42.1929 58.2627L38.2227 55.3752H42.9148L44.7194 50.3221Z" fill="#EDB51D"/>
+<defs>
+<linearGradient id="paint0_linear_1081_10603" x1="-12.8606" y1="25.5761" x2="6.32974" y2="60.505" gradientUnits="userSpaceOnUse">
+<stop stop-color="#17BC85"/>
+<stop offset="1" stop-color="#01AA72"/>
+<stop offset="1" stop-color="#00A971"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1081_10603" x1="-12.8607" y1="48.1735" x2="6.32898" y2="83.1022" gradientUnits="userSpaceOnUse">
+<stop stop-color="#17BC85"/>
+<stop offset="1" stop-color="#01AA72"/>
+<stop offset="1" stop-color="#00A971"/>
+</linearGradient>
+</defs>
+</svg>
--- a/static/images/home/open-function.svg
+++ b/static/images/home/open-function.svg
@ -0,0 +1,13 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M29.3741 3.42859L5.81729 14.7463L0 40.1776L16.301 60.5714H42.4433L58.7444 40.1776L52.9271 14.7463L29.3741 3.42859Z" fill="url(#paint0_linear_1081_12989)"/>
+<path d="M52.9309 24.4988C58.7623 24.4988 63.4896 19.7821 63.4896 13.9637C63.4896 8.14532 58.7623 3.42859 52.9309 3.42859C47.0996 3.42859 42.3723 8.14532 42.3723 13.9637C42.3723 19.7821 47.0996 24.4988 52.9309 24.4988Z" fill="#006652"/>
+<path d="M31.6164 22.0095H27.1273L15.7371 44.3971H21.7278L29.3738 29.3711L37.0159 44.3971H43.0066L31.6164 22.0095Z" fill="white"/>
+<path d="M50.511 12.1705H52.0875V12.6227H50.5268V16.6614C50.5268 17.4243 50.7514 17.5422 51.8353 17.5698V17.9158C51.0746 17.8765 50.3928 17.849 49.7898 17.849C49.5099 17.849 48.9463 17.849 48.0911 17.9158V17.5855C48.9345 17.5855 49.1079 17.3849 49.1079 16.6771V12.6109H48.1187V12.1705H49.1079V11.4744C49.1079 10.6643 49.1079 9.9958 49.502 9.39806C49.9316 8.74134 50.6253 8.41101 51.6303 8.41101C52.8127 8.41101 53.4867 8.86325 53.4867 9.39806C53.4864 9.46779 53.4716 9.5367 53.4434 9.6005C53.4152 9.66429 53.3741 9.72159 53.3227 9.76883C53.2713 9.81606 53.2106 9.85222 53.1446 9.87503C53.0786 9.89784 53.0085 9.90683 52.9389 9.90142C52.6038 9.90142 52.4422 9.71659 52.3082 9.34301C52.1742 8.96942 52.0284 8.7846 51.5752 8.7846C50.8421 8.7846 50.5189 9.26436 50.5189 10.2632L50.511 12.1705Z" fill="white"/>
+<path d="M57.0574 11.8755C58.4368 11.8755 58.9965 12.5558 58.9965 13.9676V16.7203C58.9965 17.3613 59.0911 17.5068 59.8911 17.5501V17.9079C59.1857 17.8686 58.6496 17.8529 58.2752 17.8529C57.7826 17.8529 57.2465 17.8529 56.6987 17.9079V17.5501C57.4594 17.5501 57.5776 17.3613 57.5776 16.7203V13.8103C57.5776 12.9294 57.2176 12.489 56.4977 12.489C55.6267 12.489 54.9448 13.2362 54.9448 14.3294V16.6889C54.9448 17.3259 55.067 17.5265 55.8435 17.5422V17.9001C55.134 17.8608 54.5862 17.845 54.2118 17.845C53.7309 17.845 53.1949 17.845 52.6077 17.9001V17.5422C53.4235 17.499 53.5299 17.3417 53.5299 16.7125V13.5665C53.5299 12.8233 53.3841 12.607 52.6747 12.607H52.6077V12.2609C53.3273 12.2082 54.0325 12.0326 54.6926 11.7418C54.7438 12.2098 54.8108 12.6502 54.866 13.0631C55.098 12.6937 55.4215 12.3904 55.8054 12.1823C56.1893 11.9742 56.6205 11.8686 57.0574 11.8755Z" fill="white"/>
+<defs>
+<linearGradient id="paint0_linear_1081_12989" x1="7.1652" y1="10.8885" x2="55.9696" y2="58.7021" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00C6A0"/>
+<stop offset="1" stop-color="#009E80"/>
+</linearGradient>
+</defs>
+</svg>
--- a/static/images/home/rich.svg
+++ b/static/images/home/rich.svg
@ -1 +1,16 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="41" height="41" viewBox="0 0 41 41"><defs><linearGradient id="prefix__a" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stop-color="#86DBA2"/><stop offset="100%" stop-color="#00A971"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><rect width="41" height="41" fill="url(#prefix__a)" rx="4"/><g fill="#FFF" fill-rule="nonzero"><path d="M17.076 15.587c.197 0 .296-.099.296-.296l.888-1.874-2.565-1.283-.79 1.875c-.098.098-.098.295 0 .394l.297.296c.493.197.887.395 1.282.79.099.098.197.098.296.098.197.099.197.099.296 0z" transform="translate(9 9)"/><path d="M19.345 14.403c-.197-.099-.493.099-.592.296l-1.085 2.368c0 .098-.099.197 0 .296.296 1.48-.493 3.058-1.283 3.946-.789.789-2.17 1.282-3.65 1.282-1.38 0-2.565-.493-3.354-1.282-.099-.099-.395-.395-.493-.79-.099.1-.198.296-.395.296H3.561c-.296 0-.494-.197-.494-.493v-6.905c0-.296.198-.494.494-.494h4.932c.296 0 .494.198.494.494v6.313c.197-.394.493-.69.887-.789.099 0 .099 0 .198-.099.098-.098.296-.197.493-.394.099-.099.099-.198.099-.296 0-.099 0-.099.098-.197.099-.198.099-.395.198-.691v-.099-3.65c0-.296.197-.493.493-.493h3.058l.395-.987H3.462c-.296 0-.493-.197-.493-.493V7.596c0-.296.197-.493.493-.493h13.22c.098 0 .197 0 .197.099l.986-2.27c.099-.098 0-.295 0-.493-.098-.098-.197-.197-.394-.197H2.476C1.094 4.242.009 5.327.009 6.708v14.798c0 1.381 1.085 2.466 2.467 2.466h14.797c1.381 0 2.466-1.085 2.466-2.466v-6.314c0-.493-.197-.69-.394-.789z" transform="translate(9 9)"/><path d="M12.44 16.376c-.593.592-.79 1.184-.889 1.677-.098.395-.197.69-.493.987-.592.592-.888.69-.888.69-.197.099-.296.198-.296.395s0 .296.099.493c.69.69 1.578.987 2.664.987 1.183 0 2.367-.395 2.96-.987.986-.986 1.578-3.058.492-4.143-.986-1.085-2.565-1.085-3.65-.099zM22.008 0c-.69 0-1.282.395-1.578.986l-4.34 10.26 2.564 1.283 4.834-10.161c.099-.198.198-.494.198-.79 0-.887-.79-1.578-1.678-1.578z" transform="translate(9 9)"/></g></g></svg>
+<svg width="65" height="64" viewBox="0 0 65 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.666748" width="64" height="64" rx="12" fill="url(#paint0_linear_855_9996)"/>
+<rect x="0.666748" width="64" height="64" rx="12" fill="url(#paint1_linear_855_9996)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.1467 16.1301C11.1467 14.9807 12.0786 14.0488 13.228 14.0488H50.6914C51.8409 14.0488 52.7727 14.9807 52.7727 16.1301V41.1057C52.7727 42.2552 51.8409 43.187 50.6914 43.187H13.228C12.0786 43.187 11.1467 42.2552 11.1467 41.1057V16.1301ZM33.3221 32.7972L27.8747 18.089L23.1098 29.6517H16.35V32.7736H25.1999L27.7196 26.6592L32.6786 40.0486L38.1374 30.7686L39.2076 32.7736H47.5695V29.6517H41.0801L38.2698 24.3861L33.3221 32.7972Z" fill="white"/>
+<path d="M19.4719 47.3496H44.4475V51.5122H19.4719V47.3496Z" fill="white"/>
+<defs>
+<linearGradient id="paint0_linear_855_9996" x1="0.666748" y1="0" x2="0.666748" y2="64" gradientUnits="userSpaceOnUse">
+<stop stop-color="#86DBA2"/>
+<stop offset="1" stop-color="#00A971"/>
+</linearGradient>
+<linearGradient id="paint1_linear_855_9996" x1="-42.8022" y1="33.8664" x2="7.41632" y2="143.361" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FA6400"/>
+<stop offset="1" stop-color="#FFF8CB"/>
+</linearGradient>
+</defs>
+</svg>
--- a/static/images/home/top-right-cn-1.png
+++ b/static/images/home/top-right-cn-1.png
--- a/static/images/home/top-right-cn-2.png
+++ b/static/images/home/top-right-cn-2.png
--- a/static/images/home/top-right-cn-3.png
+++ b/static/images/home/top-right-cn-3.png
--- a/static/images/home/top-right-cn-4.png
+++ b/static/images/home/top-right-cn-4.png
--- a/static/images/home/top-right-cn-5.png
+++ b/static/images/home/top-right-cn-5.png
--- a/static/images/home/top-right-en-1.png
+++ b/static/images/home/top-right-en-1.png
--- a/static/images/home/top-right-en-2.png
+++ b/static/images/home/top-right-en-2.png
--- a/static/images/home/top-right-en-3.png
+++ b/static/images/home/top-right-en-3.png
--- a/static/images/home/top-right-en-4.png
+++ b/static/images/home/top-right-en-4.png
--- a/static/images/home/top-right-en-5.png
+++ b/static/images/home/top-right-en-5.png