diff --git a/assets/scss/header.scss b/assets/scss/header.scss
index ba95c8a22..4dc2643e6 100644
--- 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 @@
     }
   }
 }
-
-
diff --git a/assets/scss/index.scss b/assets/scss/index.scss
index ae69a6d7c..22b3b3698 100644
--- 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 {
@@ -40,7 +64,6 @@
       height: 24px;
       text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
       font-size: 16px;
-      font-weight: 600;
       line-height: 1.5;
       letter-spacing: -0.04px;
       color: #ffffff;
@@ -64,7 +87,7 @@
       margin-bottom: 30px;
       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;
@@ -74,9 +97,7 @@
       position: absolute;
     }
 
-
- 
-    .img1-div{
+    .img1-div {
       cursor: pointer;
       position: absolute;
       top: 268px;
@@ -87,22 +108,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 +134,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 +159,8 @@
         letter-spacing: -0.08px;
       }
 
-      h1, .p2 {
+      h1,
+      .p2 {
         width: 100%;
         height: auto;
       }
@@ -162,16 +185,20 @@
 
 .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;
 
+  .title-black-h2 {
+    margin-top: 80px;
+  }
+
   & > div {
     text-align: center;
 
@@ -219,10 +246,64 @@
   }
 }
 
+.section-8 {
+  height: 1723px;
+  background-image: url("/images/home/8.png");
+}
+.tabs {
+  position: relative;
+}
+
+.content-section {
+  position: relative;
+  margin-top: -300px;
+  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;
+    color: #31383e;
+    &.active {
+      background-color: #55bc8a;
+      color: #fff;
+    }
+  }
+}
+
 .section-3 {
   position: relative;
-  padding-top: 300px;
-  padding-bottom: 500px;
+  padding-bottom: 420px;
   background-color: #f5f8f9;
   & > div {
     text-align: center;
@@ -277,7 +358,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 +399,7 @@
           }
 
           li::before {
-            content: '';
+            content: "";
             display: block;
             position: absolute;
             top: 6px;
@@ -337,7 +419,6 @@
         }
       }
 
-
       & > div:nth-child(2) {
         display: block;
       }
@@ -358,7 +439,7 @@
       & > div {
         padding: 0;
         margin: 0;
-        
+
         & > ul {
           width: 100%;
           height: auto;
@@ -392,7 +473,7 @@
             margin: 0 auto;
             padding: 18px 16px;
           }
-  
+
           & > ul {
             width: 90%;
             margin: 4px auto 30px;
@@ -401,7 +482,7 @@
               margin-left: 16px;
             }
           }
-  
+
           & > img {
             display: none;
           }
@@ -414,14 +495,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 +552,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 +560,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 +603,8 @@
         }
 
         .img-span-div {
-          margin-top: 23px;
-          margin-left: 30px;
+          margin-top: 26px;
+          margin-left: 32px;
 
           span {
             height: 24px;
@@ -526,33 +616,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 +643,7 @@
     & > .bg-1 {
       display: none;
     }
-  
+
     & > .bg-2 {
       display: none;
     }
@@ -602,13 +676,13 @@
       }
 
       & > ul {
+        flex-direction: column;
         position: relative;
         top: 0;
         left: 0;
         width: 100%;
 
         li {
-          width: 100%;
           height: auto;
           padding-bottom: 20px;
 
@@ -630,7 +704,8 @@
             margin-right: 30px;
           }
 
-          span, a {
+          span,
+          a {
             position: relative;
             top: 0px;
             left: 0px;
@@ -640,26 +715,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 +849,6 @@
     padding-top: 66px;
 
     & > div {
-
       & > div {
         margin-top: 30px;
 
@@ -786,7 +861,7 @@
 
           ul {
             display: flex;
-            flex-wrap: wrap ;
+            flex-wrap: wrap;
             justify-content: space-between;
             li {
               width: 30%;
@@ -819,7 +894,7 @@
               display: block;
               margin-left: 0;
               display: flex;
-              flex-wrap: wrap ;
+              flex-wrap: wrap;
               justify-content: space-between;
 
               li {
@@ -846,9 +921,9 @@
       }
     }
   }
- }
+}
 
- @keyframes scrollUp {
+@keyframes scrollUp {
   0% {
     transform: translateY(0);
   }
@@ -862,11 +937,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 +972,14 @@
       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);
+        &:hover {
+          transform: scale(1.1);
+          transition: transform 0.3s ease;
+        }
       }
       img {
         width: 210px;
@@ -917,9 +998,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;
       }
@@ -951,12 +1038,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 +1090,7 @@
     .bg-1 {
       display: none;
     }
-  
+
     .bg-2 {
       display: none;
     }
@@ -1040,6 +1129,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 +1155,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 +1195,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 +1217,7 @@
     left: 0;
     right: 0;
   }
-  
+
   .close {
     position: absolute;
     top: 24px;
@@ -1130,7 +1233,7 @@
     font-weight: 500;
     font-size: 22px;
     line-height: 22px;
-    color: #242E42;
+    color: #242e42;
   }
 
   .title {
@@ -1143,7 +1246,7 @@
     text-align: left;
     font-size: 14px;
     line-height: 24px;
-    color: #404F68;
+    color: #404f68;
   }
 
   & > div {
@@ -1163,13 +1266,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 +1299,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 +1331,9 @@ footer {
     width: 80%;
     height: 24.5%;
   }
-
 }
 
-.close-video{
+.close-video {
   cursor: pointer;
   position: absolute;
   z-index: 20;
@@ -1244,7 +1345,7 @@ footer {
   top: -10px;
 }
 
-.shadow{
+.shadow {
   position: absolute;
   overflow: hidden;
   z-index: 18;
@@ -1252,8 +1353,6 @@ footer {
   background-color: rgba(0, 0, 0, 0.7);
 }
 
-
-.test{
+.test {
   position: absolute;
 }
-
diff --git a/config/_default/config.toml b/config/_default/config.toml
index 3b567c983..044dca967 100644
--- 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 = "https://kubesphere.cloud/certification/" 
+
 
 [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
diff --git a/content/en/_index.md b/content/en/_index.md
index 6f476d897..ddb9a452c 100644
--- a/content/en/_index.md
+++ b/content/en/_index.md
@@ -1,7 +1,7 @@
 ---
-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
 
@@ -9,28 +9,40 @@ section1:
   title: KubeSphere Container Platform
   topic: 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: Experience Now
+      link: /
+      # TODO: Community page
+      class: experiense-btn
+    - content: Apply for a Free License
+      # TODO: free feature list
+      link: /
+      class: apply-btn
+
+tabs:
+  children:
+    - title: Free Product
+    - title: Open Source Project
 
 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: Use without cost and worry, enjoy continuously iterated enterprise-level features, helping you easily build the foundation for cloud-native applications.
 
     - 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 in any infrastructure environment, offers online and offline installation, and supports one-click upgrades and cluster expansion.
 
     - 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, cloud-native observability, application lifecycle management, storage and networking, and DevOps.
 
-    - name: Modular & Pluggable
+    - name: Flexible Scalability
       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: Based on a pluggable architecture, 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
@@ -73,68 +85,26 @@ section3:
         - 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: Product 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
       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
@@ -155,45 +125,105 @@ section5:
       - 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: Product Function Architecture
+  image: /images/home/arch-en.png
+
+section8:
+  title: Since its inception, KubeSphere has always adhered to its <br/> open-source principles, continuously contributing to the <br/>  global cloud-native community.
+  content: As a pioneer in enterprise-level Kubernetes platforms, KubeSphere continuously innovates in areas such as multi-cluster <br/> governance, visual operations, unified observability, and enterprise-level DevOps integration, driving the adoption and<br/>implementation of Kubernetes in enterprise scenarios. At the same time, the KubeSphere community has incubated open-<br/>source projects like KubeKey, OpenELB, and Fluent Operator, and has deeply collaborated with ecosystems such as Grafana,<br/> Loki, and Higress, forming a broad technological influence.
+  children:
+    - name: KubeKey
+      icon: /images/home/kube-key.svg
+      content: Rapid installation and operation tools to accelerate Kubernetes deployment, adapt to multiple environments, and automate 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 detection and diagnostic tools to identify configuration risks and compliance issues, diagnose cluster anomalies, and enhance 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, enhances operational observability, and has been donated.
+
+    - name: OpenFunction
+      icon: /images/home/open-function.svg
+      content: Cloud-native, open-source FaaS (Function as a Service) framework focusing on business logic development, abstracting the underlying runtime environment, and accelerating the implementation of cloud-native functions.
+
+    - name: Notification-Manager
+      icon: /images/home/notification-manager.svg
+      content: Manage message notifications in multi-tenant Kubernetes environments, unify multi-tenant notification channels, support email, DingTalk, Feishu, and WeChat Work, and improve message 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: Gatekeeper
+      icon: /images/home/gatekeeper.svg
+      content: OPA-based security policy management tool that strengthens Kubernetes security compliance, defines policies based on OPA, and prevents non-compliant resource configurations.
 ---
diff --git a/content/zh/_index.md b/content/zh/_index.md
index 9ba7190c2..62204263b 100644
--- a/content/zh/_index.md
+++ b/content/zh/_index.md
@@ -2,21 +2,34 @@
 title: 面向云原生应用的容器混合云，支持 Kubernetes 多集群管理的 PaaS 容器云平台解决方案 | KubeSphere
 description: KubeSphere 是在 Kubernetes 之上构建的以应用为中心的多租户容器平台，完全开源，提供全栈的 IT 自动化运维的能力，简化企业的 DevOps 工作流。KubeSphere 提供了运维友好的向导式操作界面，帮助企业快速构建一个强大和功能丰富的容器云平台。
 
-
 css: scss/index.scss
 
 section1:
-  title: KubeSphere 容器平台
-  topic: 面向云原生应用的<br>容器混合云
+  title: KubeSphere 容器平台-面向云原生应用的容器混合云
+  topic: kubesphere 社区版
   content: KubeSphere 愿景是打造一个以 Kubernetes 为内核的云原生分布式操作系统，它的架构可以非常方便地使第三方应用与云原生生态组件进行即插即用（plug-and-play）的集成，支持云原生应用在多云与多集群的统一分发和运维管理。
+  btns:
+    - content: 即刻体验
+      # TODO: Community page
+      link: /case
+      class: experiense-btn
+    - content: 申请免费授权
+      # TODO: free feature list
+      link: /
+      class: apply-btn
+
+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 +37,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: 不同团队的受益
@@ -73,68 +84,27 @@ section3:
         - 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:
@@ -154,43 +124,105 @@ section5:
       - 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.png
+
+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: Gatekeeper
+      icon: /images/home/gatekeeper.svg
+      content: 基于 OPA 的安全策略管理工具，强化 Kubernetes 安全合规，基于 OPA 定义策略，防止违规资源配置
 ---
diff --git a/layouts/index.html b/layouts/index.html
index f0aef62f3..18bedcad2 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,4 +1,5 @@
 {{ define "main" }}
+{{ $language := .Site.Language.Lang }}
 {{ $data := index .Site.Data .Site.Language.Lang }}
 <div class="shadow"></div>
 <section class='section-1'>
@@ -8,7 +9,12 @@
       <p class='p1'>{{ .title | safeHTML }}</p>
       <h1>{{ .topic | safeHTML }}</h1>
       <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"}}">
@@ -23,18 +29,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">
+      {{ 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">
+      {{ 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 +192,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 +201,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 +368,112 @@
     })
   }
 
+
+  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 startAutoPlay = function () {
+      autoPlayInterval = setInterval(function () {
+        switchTab();
+      }, 10000);
+
+      countdownInterval = setInterval(function () {
+        countdown--;
+        countdownEl.text(countdown);
+
+        if (countdown <= 0) {
+          countdown = 10;
+        }
+      }, 1000);
+
+      toggleBtn.text('暂停自动切换');
+      isAutoPlay = true;
+    };
+
+    var stopAutoPlay = function () {
+      clearInterval(autoPlayInterval);
+      clearInterval(countdownInterval);
+      toggleBtn.text('开始自动切换');
+      isAutoPlay = false;
+      countdownEl.text('--');
+    };
+
+    var resetCountdown = function () {
+      countdown = 10;
+      countdownEl.text(countdown);
+    };
+
+    var toggleAutoPlay = function () {
+      if (isAutoPlay) {
+        stopAutoPlay();
+      } else {
+        startAutoPlay();
+      }
+    };
+
+    tabs.click(function () {
+      var index = $(this).index();
+      showTab(index);
+
+      if (isAutoPlay) {
+        stopAutoPlay();
+        startAutoPlay();
+      }
+    });
+
+    toggleBtn.click(function () {
+      toggleAutoPlay();
+    });
+
+    startAutoPlay();
+
+
+  };
+
+  $(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();
+  });
+
+
+
   controlVideo()
   bindMouseLeftLi()
   bindResize()
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index e0d5e362c..1971689ba 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,21 +1,19 @@
 <!-- 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">
+        <!-- TODO:LINK :free feature list -->
+        <a href={{"/" | 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">
+        <!-- TODO:LINK :free feature list -->
+        <a href={{"/" | 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 +27,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 +47,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 +70,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 +100,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 +124,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 +161,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>
\ No newline at end of file
diff --git a/static/images/home/4.png b/static/images/home/4.png
index 04dc9591b..462a88410 100644
Binary files a/static/images/home/4.png and b/static/images/home/4.png differ
diff --git a/static/images/home/8.png b/static/images/home/8.png
new file mode 100644
index 000000000..ce8357554
Binary files /dev/null and b/static/images/home/8.png differ
diff --git a/static/images/home/arch-cn.png b/static/images/home/arch-cn.png
new file mode 100644
index 000000000..c5846a172
Binary files /dev/null and b/static/images/home/arch-cn.png differ
diff --git a/static/images/home/arch-en.png b/static/images/home/arch-en.png
new file mode 100644
index 000000000..bfe67ea51
Binary files /dev/null and b/static/images/home/arch-en.png differ
diff --git a/static/images/home/banner-cn.png b/static/images/home/banner-cn.png
new file mode 100644
index 000000000..99cf01d07
Binary files /dev/null and b/static/images/home/banner-cn.png differ
diff --git a/static/images/home/banner-en.png b/static/images/home/banner-en.png
new file mode 100644
index 000000000..2a55ed786
Binary files /dev/null and b/static/images/home/banner-en.png differ
diff --git a/static/images/home/devops.svg b/static/images/home/devops.svg
new file mode 100644
index 000000000..3d0cd00db
--- /dev/null
+++ 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>
diff --git a/static/images/home/devops1.svg b/static/images/home/devops1.svg
new file mode 100644
index 000000000..4ae17eb41
--- /dev/null
+++ 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>
diff --git a/static/images/home/fluent-operator.svg b/static/images/home/fluent-operator.svg
new file mode 100644
index 000000000..f0a84e701
--- /dev/null
+++ 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>
diff --git a/static/images/home/free.svg b/static/images/home/free.svg
new file mode 100644
index 000000000..cc2d3a86d
--- /dev/null
+++ 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>
diff --git a/static/images/home/gatekeeper.svg b/static/images/home/gatekeeper.svg
new file mode 100644
index 000000000..9187ba24a
--- /dev/null
+++ 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>
diff --git a/static/images/home/kube-eye.svg b/static/images/home/kube-eye.svg
new file mode 100644
index 000000000..e2219d5b4
--- /dev/null
+++ 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>
diff --git a/static/images/home/kube-key.svg b/static/images/home/kube-key.svg
new file mode 100644
index 000000000..e56a62f19
--- /dev/null
+++ 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>
diff --git a/static/images/home/management.svg b/static/images/home/management.svg
index 247794ef0..3472018c2 100644
--- 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>
\ No newline at end of file
+<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>
diff --git a/static/images/home/notification-manager.svg b/static/images/home/notification-manager.svg
new file mode 100644
index 000000000..9addb29df
--- /dev/null
+++ 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>
diff --git a/static/images/home/open-elb.svg b/static/images/home/open-elb.svg
new file mode 100644
index 000000000..2209ea350
--- /dev/null
+++ 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>
diff --git a/static/images/home/open-function.svg b/static/images/home/open-function.svg
new file mode 100644
index 000000000..5b19ba3fe
--- /dev/null
+++ b/static/images/home/open-function.svg
@@ -0,0 +1,13 @@
+<svg width="64" height="58" viewBox="0 0 64 58" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M29.3741 0.428589L5.81729 11.7463L0 37.1776L16.301 57.5714H42.4433L58.7444 37.1776L52.9271 11.7463L29.3741 0.428589Z" fill="url(#paint0_linear_1081_12990)"/>
+<path d="M52.9309 21.4988C58.7623 21.4988 63.4896 16.7821 63.4896 10.9637C63.4896 5.14532 58.7623 0.428589 52.9309 0.428589C47.0996 0.428589 42.3723 5.14532 42.3723 10.9637C42.3723 16.7821 47.0996 21.4988 52.9309 21.4988Z" fill="#006652"/>
+<path d="M31.6164 19.0095H27.1273L15.7371 41.3971H21.7278L29.3738 26.3711L37.0159 41.3971H43.0066L31.6164 19.0095Z" fill="white"/>
+<path d="M50.511 9.17046H52.0875V9.62269H50.5268V13.6614C50.5268 14.4243 50.7514 14.5422 51.8353 14.5698V14.9158C51.0746 14.8765 50.3928 14.849 49.7898 14.849C49.5099 14.849 48.9463 14.849 48.0911 14.9158V14.5855C48.9345 14.5855 49.1079 14.3849 49.1079 13.6771V9.6109H48.1187V9.17046H49.1079V8.47441C49.1079 7.66432 49.1079 6.9958 49.502 6.39806C49.9316 5.74134 50.6253 5.41101 51.6303 5.41101C52.8127 5.41101 53.4867 5.86325 53.4867 6.39806C53.4864 6.46779 53.4716 6.5367 53.4434 6.6005C53.4152 6.66429 53.3741 6.72159 53.3227 6.76883C53.2713 6.81606 53.2106 6.85222 53.1446 6.87503C53.0786 6.89784 53.0085 6.90683 52.9389 6.90142C52.6038 6.90142 52.4422 6.71659 52.3082 6.34301C52.1742 5.96942 52.0284 5.7846 51.5752 5.7846C50.8421 5.7846 50.5189 6.26436 50.5189 7.26321L50.511 9.17046Z" fill="white"/>
+<path d="M57.0574 8.87553C58.4368 8.87553 58.9965 9.55584 58.9965 10.9676V13.7203C58.9965 14.3613 59.0911 14.5068 59.8911 14.5501V14.9079C59.1857 14.8686 58.6496 14.8529 58.2752 14.8529C57.7826 14.8529 57.2465 14.8529 56.6987 14.9079V14.5501C57.4594 14.5501 57.5776 14.3613 57.5776 13.7203V10.8103C57.5776 9.92943 57.2176 9.48899 56.4977 9.48899C55.6267 9.48899 54.9448 10.2362 54.9448 11.3294V13.6889C54.9448 14.3259 55.067 14.5265 55.8435 14.5422V14.9001C55.134 14.8608 54.5862 14.845 54.2118 14.845C53.7309 14.845 53.1949 14.845 52.6077 14.9001V14.5422C53.4235 14.499 53.5299 14.3417 53.5299 13.7125V10.5665C53.5299 9.82325 53.3841 9.60697 52.6747 9.60697H52.6077V9.26091C53.3273 9.20817 54.0325 9.03259 54.6926 8.74182C54.7438 9.20979 54.8108 9.65022 54.866 10.0631C55.098 9.69375 55.4215 9.39035 55.8054 9.1823C56.1893 8.97424 56.6205 8.86858 57.0574 8.87553Z" fill="white"/>
+<defs>
+<linearGradient id="paint0_linear_1081_12990" x1="7.1652" y1="7.8885" x2="55.9696" y2="55.7021" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00C6A0"/>
+<stop offset="1" stop-color="#009E80"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/static/images/home/rich.svg b/static/images/home/rich.svg
index 7cbccdc3e..1361808f2 100644
--- 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>
\ No newline at end of file
+<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>