diff --git a/assets/scss/common.scss b/assets/scss/common.scss
index 9680c4624..f68748e0a 100644
--- a/assets/scss/common.scss
+++ b/assets/scss/common.scss
@@ -16,6 +16,10 @@ html {
background-color: #f5f8f9;
}
+main{
+ margin-top: 60px;
+}
+
section {
min-width: 1160px;
diff --git a/assets/scss/content.scss b/assets/scss/content.scss
index 604318b3a..5ae1709c6 100644
--- a/assets/scss/content.scss
+++ b/assets/scss/content.scss
@@ -6,6 +6,7 @@
}
.main-section {
+ margin-top: 60px;
&>div {
position: relative;
padding-top: 93px;
diff --git a/assets/scss/features.scss b/assets/scss/features.scss
new file mode 100644
index 000000000..2af12baa1
--- /dev/null
+++ b/assets/scss/features.scss
@@ -0,0 +1,91 @@
+@import "variables";
+@import "mixin";
+
+html {
+ background-color: #ffffff;
+}
+
+.section-1 {
+ position: relative;
+ padding-top: 166px;
+ background-image: url("/images/features/banner.jpg");
+
+ .title-div {
+ position: relative;
+
+ padding-bottom: 74px;
+ h1 {
+ width: 100%;
+ text-align: center;
+ }
+ }
+}
+.section-2 {
+ background: #f5f8f9;
+ padding: 80px 0;
+ .title-div {
+ position: relative;
+
+ h1 {
+ color: #171c34;
+ text-align: center;
+ text-shadow: 0 4px 8px rgba(35, 45, 65, 0.1);
+ font-size: 32px;
+ font-weight: 520;
+ line-height: 52px;
+ }
+ }
+ ul {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 20px;
+ li {
+ position: relative;
+ padding: 24px;
+ width: calc((100% - 60px) / 4);
+ background-color: #fff;
+ border-radius: 10px;
+ box-sizing: border-box;
+ min-height: 250px;
+ img {
+ display: block;
+ }
+ h3 {
+ margin-top: 16px;
+ color: #242e42;
+ font-size: 20px;
+ font-weight: 520;
+ line-height: 28px;
+ }
+ .conetnt {
+ margin-top: 8px;
+ color: #484e58;
+ font-size: 14px;
+ line-height: 24px;
+ }
+ .label {
+ position: absolute;
+ margin-top: 0;
+ top: 0;
+ right: 0;
+ border-radius: 0 8px 0 8px;
+ padding: 4px 10px;
+ font-size: 14px;
+ font-weight: 380;
+ line-height: 20px;
+ &.label-gray {
+ background-color: #e3e9ef;
+ color: #36435c;
+ }
+ &.label-green {
+ color: #3b747a;
+ background-color: #c4e6d4;
+ }
+ }
+ }
+ }
+}
+
+.footer {
+ padding-top: 60px;
+}
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..a190b08aa 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 {
@@ -37,46 +61,38 @@
}
.p1 {
- height: 24px;
+ width: 588px;
+ color: #fff;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
- font-size: 16px;
+ font-size: 24px;
font-weight: 600;
- line-height: 1.5;
- letter-spacing: -0.04px;
- color: #ffffff;
+ line-height: 32px;
+ margin-top: 12px;
}
h1 {
- width: 660px;
- margin-top: 12px;
+ color: #fff;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
- font-size: 50px;
- font-weight: bold;
- line-height: 1.2;
- letter-spacing: -0.14px;
- color: #ffffff;
+ font-size: 56px;
+ font-weight: 700;
}
.p2 {
- width: 660px;
- height: 72px;
- margin-top: 12px;
- margin-bottom: 30px;
+ width: 560px;
+ color: #fff;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
font-size: 16px;
- font-weight: 500;
- line-height: 1.5;
- letter-spacing: -0.04px;
- color: #ffffff;
+ margin-top: 8px;
+ font-weight: 380;
+ line-height: 28px;
+ letter-spacing: -0.044px;
}
img {
position: absolute;
}
-
-
- .img1-div{
+ .img1-div {
cursor: pointer;
position: absolute;
top: 268px;
@@ -87,22 +103,21 @@
object-fit: contain;
border: 6px solid #ffffff;
border-radius: 5px;
- box-shadow: 0 10px 20px 0 rgba(34, 43, 62, 0.1), 0 8px 16px 0 rgba(33, 43, 61, 0.2), 0 10px 30px 0 rgba(34, 43, 62, 0.1);
-
- .img1{
- height: 100%;
- width: 100%;
- }
+ box-shadow: 0 10px 20px 0 rgba(34, 43, 62, 0.1),
+ 0 8px 16px 0 rgba(33, 43, 61, 0.2), 0 10px 30px 0 rgba(34, 43, 62, 0.1);
+ .img1 {
+ height: 100%;
+ width: 100%;
+ }
- .play{
- position: absolute;
- top:50%;
- left:50%;
- transform: translate(-50%,-50%);
- z-index: 5;
- }
-
+ .play {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ z-index: 5;
+ }
}
.img2 {
@@ -114,20 +129,22 @@
top: 276px;
left: -311px;
}
-
}
@media only screen and (max-width: $mobile-max-width) {
height: auto;
padding-top: 138px;
- & > .img1, .img2, .img3 {
+ & > .img1,
+ .img2,
+ .img3 {
display: none;
}
& > div {
padding-top: 0px;
- .img2, .img4 {
+ .img2,
+ .img4 {
display: none;
}
@@ -137,7 +154,8 @@
letter-spacing: -0.08px;
}
- h1, .p2 {
+ h1,
+ .p2 {
width: 100%;
height: auto;
}
@@ -158,19 +176,98 @@
}
}
}
+
+ .custom-vertical-carousel {
+ position: absolute;
+ top: 208px;
+ right: 0;
+ width: 100%;
+ max-width: 531px;
+ height: 350px;
+ margin: 0 auto;
+ padding: 20px 0;
+ }
+
+ .carousel-inner {
+ position: relative;
+ height: 100%;
+ }
+
+ .carousel-slide {
+ width: 100%;
+ height: 319px;
+ background: #fff;
+ border-radius: 8px;
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+ position: absolute;
+ top: 0;
+ left: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+ overflow: hidden;
+ }
+
+ .carousel-slide .slide-content {
+ width: 100%;
+ height: 100%;
+ padding: 4px;
+ font-size: 24px;
+ font-weight: bold;
+ color: #333;
+ text-align: center;
+ img {
+ display: block;
+ width: calc(100% - 8px);
+ height: calc(100% - 8px);
+ }
+ }
+
+ .carousel-slide.active {
+ transform: translateY(0) scale(1);
+ opacity: 1;
+ z-index: 10;
+ }
+
+ .carousel-slide.prev {
+ transform: translateY(-20px) scale(0.95);
+ opacity: 0.5;
+ z-index: 9;
+ }
+
+ .carousel-slide.next {
+ transform: translateY(20px) scale(0.95);
+ opacity: 0.5;
+ z-index: 8;
+ }
+
+ .carousel-slide.hidden {
+ opacity: 0;
+ transform: translateY(50px) scale(0.9);
+ z-index: 1;
+ }
}
.section-2 {
box-sizing: border-box;
- height: 1079px;
+ height: 3365px;
position: relative;
- margin-top: -300px;
+ margin-top: -308px;
margin-bottom: -300px;
- padding-top: 300px;
+ padding-top: 308px;
background-size: 100% 100%;
- background-repeat: no-repeat;
- background-image: url('/images/home/4.png');
+ background-repeat: no-repeat;
+ background-image: url("/images/home/4.png");
z-index: 2;
+ &.en {
+ height: 3619px;
+ background-image: url("/images/home/4-en.png");
+ }
+
+ .title-black-h2 {
+ margin-top: 107px;
+ }
& > div {
text-align: center;
@@ -219,10 +316,72 @@
}
}
+.section-8 {
+ height: 1778px;
+ background-image: url("/images/home/8.png");
+ margin-top: -308px;
+ &.en {
+ height: 1706px;
+ background-image: url("/images/home/8.png");
+ }
+}
+.tabs {
+ position: relative;
+}
+
+.content-section {
+ position: relative;
+ margin-top: -307px;
+ margin-bottom: -300px;
+ padding-top: 300px;
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+ display: none;
+
+ &.active {
+ display: block;
+ }
+ // background-image: url("/images/home/4.png");
+}
+
+.tab-div {
+ position: absolute;
+ top: 272px;
+ width: 100%;
+ // left: 50%;
+ // right: 50%;
+ z-index: 9;
+
+ ul {
+ display: flex;
+ background-color: #f5f8f9;
+ width: fit-content;
+ border-radius: 40px;
+ padding: 4px;
+ position: relative;
+ left: 0;
+ right: 0;
+ margin: auto;
+ }
+ li {
+ cursor: pointer;
+ white-space: nowrap;
+ padding: 16px 48px;
+ border-radius: 26px;
+ font-weight: 520;
+ color: #31383e;
+ &.active {
+ background-color: #55bc8a;
+ color: #fff;
+ box-shadow: 0 8px 16px 0 rgba(33, 43, 61, 0.2),
+ 0 10px 50px 0 rgba(34, 43, 62, 0.1), 0 4px 8px 0 rgba(36, 46, 66, 0.06);
+ }
+ }
+}
+
.section-3 {
position: relative;
- padding-top: 300px;
- padding-bottom: 500px;
+ padding-bottom: 420px;
background-color: #f5f8f9;
& > div {
text-align: center;
@@ -234,7 +393,7 @@
& > div {
position: relative;
- margin-top: 76px;
+ margin-top: 104px;
text-align: left;
align-items: center;
@@ -277,7 +436,8 @@
width: 919px;
height: 436px;
border-radius: 10px;
- box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06), 0 8px 16px 0 rgba(36, 46, 66, 0.05);
+ box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06),
+ 0 8px 16px 0 rgba(36, 46, 66, 0.05);
background-color: #ffffff;
& > .top {
@@ -317,7 +477,7 @@
}
li::before {
- content: '';
+ content: "";
display: block;
position: absolute;
top: 6px;
@@ -337,7 +497,6 @@
}
}
-
& > div:nth-child(2) {
display: block;
}
@@ -358,7 +517,7 @@
& > div {
padding: 0;
margin: 0;
-
+
& > ul {
width: 100%;
height: auto;
@@ -392,7 +551,7 @@
margin: 0 auto;
padding: 18px 16px;
}
-
+
& > ul {
width: 90%;
margin: 4px auto 30px;
@@ -401,7 +560,7 @@
margin-left: 16px;
}
}
-
+
& > img {
display: none;
}
@@ -414,14 +573,41 @@
.section-4 {
position: relative;
box-sizing: border-box;
- height: 1281px;
+ height: 1059px;
margin-top: -300px;
- margin-bottom: -500px;
- padding-top: 350px;
+ // margin-bottom: -500px;
+ padding-top: 255px;
background-size: 100% 100%;
- background-repeat: no-repeat;
- background-image: url('/images/home/5.png');
+ background-repeat: no-repeat;
+ background-image: url("/images/home/5.png");
overflow: hidden;
+ z-index: 2;
+
+ // &::before {
+ // content: "";
+ // position: absolute;
+ // top: 0;
+ // left: 0;
+ // right: 0;
+ // height: 50vh; /* 占据视口高度的一半 */
+ // background-color: #f5f8f9; /* 上半部分颜色 */
+ // z-index: -1;
+ // }
+ // &::after {
+ // content: "";
+ // position: absolute;
+ // bottom: 0;
+ // left: 0;
+ // right: 0;
+ // height: 50vh; /* 占据视口高度的一半 */
+ // background-color: #f5f8f9; /* 下半部分颜色 */
+ // z-index: -1;
+ // }
+
+ .title-white-h2 {
+ margin-bottom: 64px;
+ text-align: center;
+ }
& > .bg-1 {
position: absolute;
@@ -444,11 +630,7 @@
width: 471px;
h2 {
- text-shadow: 0 4px 8px rgba(35, 45, 65, 0.1);
- font-size: 32px;
- font-weight: bold;
- line-height: 1.63;
- color: #b3ffbd;
+ margin-bottom: 64px;
}
& > p {
@@ -456,42 +638,28 @@
opacity: 0.9;
color: #ffffff;
}
-
- ul {
- margin-top: 60px;
- li {
- font-size: 0;
- margin-bottom: 30px;
- div {
- vertical-align: top;
- width: 414px;
- margin-left: 16px;
- display: inline-block;
- p {
- opacity: 0.9;
- color: #ffffff;
- }
- }
- }
- }
}
& > ul {
- position: absolute;
- top: -350px;
- right: 0;
-
+ display: flex;
+ gap: 24px;
li {
position: relative;
width: 573px;
- height: 173px;
- margin-bottom: 10px;
+
+ padding: 26px 32px 32px;
+
border-radius: 10px;
- box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06), 0 8px 16px 0 rgba(36, 46, 66, 0.05);
+ box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06),
+ 0 8px 16px 0 rgba(36, 46, 66, 0.05);
background-color: #ffffff;
.top-line {
+ position: absolute;
+ left: 0;
+ top: 0;
height: 6px;
+ width: 100%;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
@@ -513,8 +681,8 @@
}
.img-span-div {
- margin-top: 23px;
- margin-left: 30px;
+ margin-top: 26px;
+ margin-left: 32px;
span {
height: 24px;
@@ -526,33 +694,17 @@
}
}
- p {
- width: 372px;
- margin-top: 10px;
- margin-left: 30px;
+ .common-content {
+ margin-top: 24px;
+ }
+ .content-p {
+ margin-top: 16px;
+ margin-bottom: 64px;
}
- .middle-line {
- position: absolute;
- top: 18px;
- right: 146px;
- width: 2px;
- height: 114px;
- background-color: #e4edf6;
+ .green-a {
+ color: #00a971;
}
-
- & > span {
- position: absolute;
- top: 71px;
- right: 20px;
- }
-
- & > a {
- position: absolute;
- top: 71px;
- right: 35px;
- }
-
}
}
}
@@ -569,7 +721,7 @@
& > .bg-1 {
display: none;
}
-
+
& > .bg-2 {
display: none;
}
@@ -602,13 +754,13 @@
}
& > ul {
+ flex-direction: column;
position: relative;
top: 0;
left: 0;
width: 100%;
li {
- width: 100%;
height: auto;
padding-bottom: 20px;
@@ -630,7 +782,8 @@
margin-right: 30px;
}
- span, a {
+ span,
+ a {
position: relative;
top: 0px;
left: 0px;
@@ -640,26 +793,27 @@
}
}
}
-
}
}
.section-5 {
box-sizing: border-box;
- height: 1909px;
- padding-top: 700px;
- background-color: #f5f8f9;
+ // height: 1909px;
+ // padding-top: 700px;
& > div {
-
h2 {
text-align: center;
}
& > div {
position: relative;
- margin-top: 64px;
+ margin-top: 50px;
font-size: 0;
+ padding: 24px 12px 12px;
+ margin-right: -12px;
+ margin-left: -12px;
+ background-color: #f5f8f9;
.front-div {
width: 280px;
@@ -773,7 +927,6 @@
padding-top: 66px;
& > div {
-
& > div {
margin-top: 30px;
@@ -786,7 +939,7 @@
ul {
display: flex;
- flex-wrap: wrap ;
+ flex-wrap: wrap;
justify-content: space-between;
li {
width: 30%;
@@ -819,7 +972,7 @@
display: block;
margin-left: 0;
display: flex;
- flex-wrap: wrap ;
+ flex-wrap: wrap;
justify-content: space-between;
li {
@@ -846,9 +999,9 @@
}
}
}
- }
+}
- @keyframes scrollUp {
+@keyframes scrollUp {
0% {
transform: translateY(0);
}
@@ -862,11 +1015,11 @@
position: relative;
box-sizing: border-box;
margin-top: -300px;
- padding-top: 300px;
+ padding-top: 225px;
background-color: #f5f8f9;
background-size: 100% 100%;
- background-repeat: no-repeat;
- background-image: url('/images/home/6.png');
+ background-repeat: no-repeat;
+ background-image: url("/images/home/6.png");
overflow-x: hidden;
.bg-1 {
@@ -897,8 +1050,15 @@
margin-top: 59px;
margin-bottom: 45px;
li {
+ cursor: pointer;
margin-bottom: 16px;
- box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06), 0 8px 16px 0 rgba(36, 46, 66, 0.05);
+ box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06),
+ 0 8px 16px 0 rgba(36, 46, 66, 0.05);
+ background-color: #fff;
+ &:hover {
+ transform: scale(1.1);
+ transition: transform 0.3s ease;
+ }
}
img {
width: 210px;
@@ -917,9 +1077,15 @@
letter-spacing: -0.04px;
color: #ffffff;
cursor: pointer;
- box-shadow: 0 10px 50px 0 rgba(34, 43, 62, 0.1), 0 8px 16px 0 rgba(33, 43, 61, 0.2), 0 10px 50px 0 rgba(34, 43, 62, 0.1);
- background-image: linear-gradient(to bottom, rgba(85, 188, 138, 0), rgba(85, 188, 138, 0.1) 97%), linear-gradient(to bottom, #55bc8a, #55bc8a);
-
+ box-shadow: 0 10px 50px 0 rgba(34, 43, 62, 0.1),
+ 0 8px 16px 0 rgba(33, 43, 61, 0.2), 0 10px 50px 0 rgba(34, 43, 62, 0.1);
+ background-image: linear-gradient(
+ to bottom,
+ rgba(85, 188, 138, 0),
+ rgba(85, 188, 138, 0.1) 97%
+ ),
+ linear-gradient(to bottom, #55bc8a, #55bc8a);
+
&:hover {
box-shadow: none;
}
@@ -934,6 +1100,7 @@
text-align: center;
a {
color: #31383e;
+ font-weight: 450;
text-decoration: underline;
&:hover {
color: #55bc8a;
@@ -951,12 +1118,14 @@
text-align: left;
border-radius: 12px;
background-color: #ffffff;
- box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06), 0 8px 16px 0 rgba(36, 46, 66, 0.05);
+ box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06),
+ 0 8px 16px 0 rgba(36, 46, 66, 0.05);
&:hover {
background-image: linear-gradient(99deg, #4a499a 29%, #8552c3 80%);
- .p1, .p2 {
+ .p1,
+ .p2 {
color: #ffffff;
}
}
@@ -1001,7 +1170,7 @@
.bg-1 {
display: none;
}
-
+
.bg-2 {
display: none;
}
@@ -1040,6 +1209,19 @@
}
}
+.section-7 {
+ background-color: #fff;
+ .title-black-h2 {
+ text-align: center;
+ margin-top: 0;
+ margin-bottom: 50px;
+ }
+
+ img {
+ width: 1160px;
+ }
+}
+
.meet-div {
z-index: 100;
position: fixed;
@@ -1053,7 +1235,7 @@
background-color: #ffffff;
text-align: center;
cursor: pointer;
- background-image: url('/images/home/group-20.svg');
+ background-image: url("/images/home/group-20.svg");
.close {
position: absolute;
@@ -1093,9 +1275,10 @@
height: 406px;
text-align: center;
background-color: #ffffff;
- background-image: url('/images/home/modal-bg.svg');
+ background-image: url("/images/home/modal-bg.svg");
background-size: cover;
- box-shadow: 0px 8px 16px rgba(36, 46, 66, 0.05), 0px 4px 8px rgba(36, 46, 66, 0.06);
+ box-shadow: 0px 8px 16px rgba(36, 46, 66, 0.05),
+ 0px 4px 8px rgba(36, 46, 66, 0.06);
border-radius: 4px;
@media (min-width: 768px) {
@@ -1114,7 +1297,7 @@
left: 0;
right: 0;
}
-
+
.close {
position: absolute;
top: 24px;
@@ -1130,7 +1313,7 @@
font-weight: 500;
font-size: 22px;
line-height: 22px;
- color: #242E42;
+ color: #242e42;
}
.title {
@@ -1143,7 +1326,7 @@
text-align: left;
font-size: 14px;
line-height: 24px;
- color: #404F68;
+ color: #404f68;
}
& > div {
@@ -1163,13 +1346,13 @@
height: 28px;
text-align: center;
background: #059669;
- border: 1px solid #479E88;
+ border: 1px solid #479e88;
box-sizing: border-box;
border-radius: 2px;
a {
line-height: 28px;
- color: #FFFFFF;
+ color: #ffffff;
&:hover {
text-decoration: underline;
}
@@ -1196,30 +1379,29 @@ footer {
}
}
-
-.modal-for-video{
+.modal-for-video {
display: none;
z-index: 20;
position: absolute;
height: 608px;
width: 1080px;
max-width: 1080px;
- top:50%;
- left:50%;
- transform: translate(-50%,-50%);
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
padding: 0;
border-radius: 0;
font-size: 0;
-
- .video-div{
+
+ .video-div {
height: 100%;
width: 100%;
- video{
+ video {
height: 100%;
width: 100%;
}
- iframe{
+ iframe {
height: 100%;
width: 100%;
}
@@ -1229,10 +1411,9 @@ footer {
width: 80%;
height: 24.5%;
}
-
}
-.close-video{
+.close-video {
cursor: pointer;
position: absolute;
z-index: 20;
@@ -1244,7 +1425,7 @@ footer {
top: -10px;
}
-.shadow{
+.shadow {
position: absolute;
overflow: hidden;
z-index: 18;
@@ -1252,8 +1433,6 @@ footer {
background-color: rgba(0, 0, 0, 0.7);
}
-
-.test{
+.test {
position: absolute;
}
-
diff --git a/config/_default/config.toml b/config/_default/config.toml
index 3b567c983..8b62605e6 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 = "/"
+
[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..b2b47aa57 100644
--- a/content/en/_index.md
+++ b/content/en/_index.md
@@ -1,36 +1,55 @@
---
-title: Open Source Enterprise Kubernetes Platform | KubeSphere
-description: An open source Kubernetes Platform to manage enterprise-grade Kubernetes across hybrid cloud, multi-cloud and edge. Get started for free!
-
+title: KubeSphere Container Platform-The Kubernetes platform tailored for hybrid multicloud
+topic: KubeSphere {{ .content | safeHTML }} {{ i18n "Extension" }} {{ i18n "Open Source Object" }}
Community Edition
+description: KubeSphere is a distributed operating system for cloud-native application management, using Kubernetes as its kernel. It provides a plug-and-play architecture, allowing third-party applications to be seamlessly integrated into its ecosystem.
css: scss/index.scss
section1:
- title: KubeSphere Container Platform
- topic: The Kubernetes platform tailored for hybrid multicloud
+ title: KubeSphere
Community Edition
+ topic: KubeSphere Container Platform-The Kubernetes platform tailored for hybrid multicloud
content: KubeSphere is a distributed operating system for cloud-native application management, using Kubernetes as its kernel. It provides a plug-and-play architecture, allowing third-party applications to be seamlessly integrated into its ecosystem.
+ btns:
+ - content: Get Started
+ link: /
+ # TODO: Community page
+ class: experiense-btn
+ - content: Try Free
+ # TODO: free feature list
+ link: /
+ class: apply-btn
+ carouselItems:
+ carouselItems:
+ - image: /images/home/top-right-en-1.png
+ - image: /images/home/top-right-en-2.png
+ - image: /images/home/top-right-en-3.png
+ - image: /images/home/top-right-en-4.png
+ - image: /images/home/top-right-en-5.png
+
+tabs:
+ children:
+ - title: Free Products
+ - title: Open Source Projects
section2:
title: One Kubernetes Platform for Full Stack Solutions
- content: KubeSphere is also a multi-tenant enterprise-grade open-source Kubernetes container platform with full-stack automated IT operation and streamlined DevOps workflows. It provides developer-friendly wizard web UI, helping enterprises to build out a more robust and feature-rich Kubernetes platform, which includes the most common functionalities needed for enterprise Kubernetes strategies.
+ content: KubeSphere is also a multi-tenant enterprise-grade open-source Kubernetes container platform with full-stack automated IT
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.
children:
- - name: Open Source
- icon: /images/home/open-source.svg
- content: A CNCF-certified Kubernetes platform, 100% open source, built and improved by the community.
+ - name: Free Forever
+ icon: /images/home/free.svg
+ content: Zero-cost, worry-free access to continuously evolved enterprise-grade features, empowering you to build cloud-native foundations effortlessly.
- name: Easy to Run
icon: /images/home/easy-to-run.svg
- content: Can be deployed on an existing Kubernetes cluster or Linux machines, supports online and air-gapped installation.
+ content: Supports deployment on any infrastructure environment, offers online and offline installation, and supports one-click upgrades and cluster scaling.
- name: Rich Features
icon: /images/home/feature-rich.svg
- content: Deliver DevOps, service mesh, observability, application management, multi-tenancy, storage and networking management in a unified platform.
+ content: Provides multi-tenancy, multi-cluster support, cloud-native observability, application lifecycle management, storage and networking solutions, and DevOps capabilities.
- - name: Modular & Pluggable
+ - name: Flexible Extensibility
icon: /images/home/modular-pluggable.svg
- content: The functionalities are modularized and loosely coupled with the platform. Choose the modules according to your business needs.
-
-
+ content: Built on a pluggable architecture, it seamlessly integrates with any mainstream open-source tools, allowing you to expand platform capabilities on demand, like building with blocks.
section3:
title: Benefits of Kubernetes Platform to Different Teams
@@ -68,73 +87,30 @@ section3:
icon: /images/home/80.svg
children:
- content: Deploy and upgrade Apps with one click to transparent underlying infrastructure
- - content: Provide on-demand container resources and HPA, hardening the reliability and flexibility of your applications
+ - content: Provide on-demand container resources, hardening the reliability and flexibility of your applications
- content: Import any Helm repository in seconds to visually deploy and upgrade applications
- - content: Support operation in application store, including metering and billing for applications (coming soon)
section4:
- title: Key Features of Kubernetes Platform
- content: If you are seeking an open source project that rivals a commercial product, KubeSphere is your choice.
The RoadMap 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 load balancer OpenELB for bare metal Kubernetes, and offers network policy management, support Calico and Flannel CNI
+ title: Application Scenarios
features:
-
- - name: Kubernetes DevOps System
- icon: /images/home/dev-ops.svg
- content: Out-of-the-box CI/CD based on Jenkins, and automated DevOps workflow tools including Source-to-Image & Binary-to-Image
- link: "devops/"
- color: orange
-
- - name: Service Mesh (Istio-based)
- icon: /images/home/service.svg
- content: Provide fine-grained traffic management, observability and tracing, and offer visualization for traffic topology
- link: "service-mesh/"
- color: red
+ - name: Kubernetes Multi-cluster Mgmt
+ icon: /images/home/management.svg
+ content: Distribute applications across multiple clusters and cloud providers, and provide disaster recovery solutions and cross-cluster observability.
+ link: "https://docs.kubesphere.com.cn/v4.2.0/07-cluster-management/10-multi-cluster-management/"
+ color: grape
- name: Cloud Native Observability
icon: /images/home/rich.svg
- content: Multi-dimensional monitoring, events and audit logs query are supported; multi-tenant log query and collection, alerting and notification are built-in
+ content: Multi-dimensional monitoring, events and audit logs query are supported; multi-tenant log query and collection, alerting and notification are built-in.
link: "observability/"
+ color: red
+
+ - name: Kubernetes DevOps System
+ icon: /images/home/devops1.svg
+ content: Out-of-the-box CI/CD based on Jenkins, and automated DevOps workflow tools including Source-to-Image & Binary-to-Image.
+ link: "devops/"
color: green
-
- - name: App Store
- icon: /images/home/store.svg
- content: Provide an application store for Helm-based applications, and offer application lifecycle management on Kubernetes platform
- link: "https://docs.kubesphere.com.cn/v4.2.0/11-use-extensions/05-app-store/"
- color: grape
-
- - name: Kubernetes Multi-cluster Mgmt
- icon: /images/home/management.svg
- content: Distribute applications across multiple clusters and cloud providers, and provide disaster recovery solutions and cross-cluster observability
- link: "https://docs.kubesphere.com.cn/v4.2.0/07-cluster-management/10-multi-cluster-management/"
- color: orange
-
- - name: Edge Computing Platform
- icon: /images/home/multiple.svg
- content: KubeSphere integrates KubeEdge to enable users to deploy applications on the edge devices and view logging and monitoring data of them on the console.
- link: "https://edgewize-docs.kubesphere.com.cn/"
- color: grape
-
- # - name: Metering and Billing
- # icon: /images/home/network.svg
- # content: Track resource consumption at different levels on a unified dashboard, which helps you make better-informed decisions on planning and reduce the cost.
- # link: "/docs/v3.3/toolbox/metering-and-billing/view-resource-consumption/"
- # color: green
section5:
title: KubeSphere Container Platform with its Cloud Native Architecture
@@ -142,7 +118,7 @@ section5:
title: Front End
project: KubeSphere Console
children:
- - icon: /images/home/mobx.jpg
+ - icon: /images/home/kube-design.jpg
- icon: /images/home/koa.jpg
- icon: /images/home/react.png
@@ -151,49 +127,107 @@ section5:
project: KubeSphere System
group:
- name: API Server
- - name: API Gateway
- name: Controller Manager
- - name: Account Service
-
section6:
title: End User Community
- content: Tons of enterprises and organizations are using KubeSphere Container Platform for research, production and their commercial products. The Case Studies list more detailed user cases and their cloud native transformation stories.
+ content: Tons of enterprises and organizations are using KubeSphere Container Platform for research, production and their commercial products.
children:
- icon: /images/home/section6-anchnet.jpg
- - icon: /images/home/section6-aviation-industry-corporation-of-china.jpg
+ link: /case/anchnet
- icon: /images/case/logo-alphaflow.png
- - icon: /images/home/section6-aqara.jpg
- - icon: /images/home/section6-bank-of-beijing.jpg
- - icon: /images/home/section6-benlai.jpg
- - icon: /images/home/section6-china-taiping.jpg
- - icon: /images/home/section6-changqing-youtian.jpg
- - icon: /images/home/section6-cmft.jpg
- - icon: /images/home/section6-extreme-vision.jpg
- - icon: /images/home/section6-guizhou-water-investment.jpg
+ link: /case/alphaflow
+ - icon: /images/case/section6-aqara.jpg
+ link: /case/aqara
- icon: /images/home/section6-huaxia-bank.jpg
- - icon: /images/home/section6-inaccel.jpg
- - icon: /images/home/section6-maxnerva.jpg
- - icon: /images/home/section6-picc.jpg
- - icon: /images/case/logo-xdf.png
- - icon: /images/home/section6-sina.jpg
- - icon: /images/home/section6-sichuan-airlines.jpg
- - icon: /images/home/section6-sinopharm.jpg
- - icon: /images/home/section6-softtek.jpg
- - icon: /images/home/section6-spd-silicon-valley-bank.jpg
+ link: /case/huaxia-bank
+ - icon: /images/home/section6-benlai.jpg
+ link: /case/benlai
+ - icon: /images/case/uisee.png
+ link: /case/uisee
+ - icon: /images/case/section6-zto.png
+ link: /case/zto
+ - icon: /images/case/section6-hongya.png
+ link: /case/hongyaa
+ - icon: /images/case/chinamobile-iot.png
+ link: /case/chinamobile-iot
+ - icon: /images/case/logo-qunar.png
+ link: /case/qunar
+ - icon: /images/case/logo-turing.png
+ link: /case/turing
+ - icon: /images/case/segmentfault-logo.png
+ link: /case/segmentfault
+ - icon: /images/case/logo-msxf.png
+ link: /case/msxf
+ - icon: /images/case/section6-sinodata.png
+ link: /case/sinodata
- icon: /images/home/section6-vng.jpg
- - icon: /images/home/section6-webank.jpg
- - icon: /images/home/section6-wisdom-world.jpg
- - icon: /images/home/section6-yiliu.jpg
+ link: /case/vng
+ - icon: /images/case/logo-xdf.png
+ link: /case/xdf
+ - icon: /images/home/section6-extreme-vision.jpg
+ link: /case/extreme-vision
+ - icon: /images/case/section6-vesoft-4.png
+ link: /case/vesoft
+ - icon: /images/case/logo-keyenlinx.png
+ link: /case/keyenlinx
+ - icon: /images/case/logo-yiheda.png
+ link: /case/yiheda
+ - icon: /images/case/logo-eastcom.png
+ link: /case/eastcom
+ - icon: /images/case/logo-gxjtkyy.png
+ link: /case/gxjtkyy
+ - icon: /images/case/section6-maxnerva.jpg
+ link: /case/maxnerva
+ - icon: /images/case/logo-hshc.png
+ link: /case/hshc
+ - icon: /images/case/logo-vsleem.png
+ link: /case/vsleem
-
-
- btnContent: Case Studies
- btnLink: case/
link: mailto:info@kubesphere.io
linkContent: Want to join our user community and showcase your logo? Just send an email to info@kubesphere.io
joinTitle: Join the Revolution, Partner with KubeSphere Container Platform
joinContent: We look forward to your joining KubeSphere partner program to improve both ecosystems and grow your business.
joinLink: partner/
image: /images/home/certification.png
+
+section7:
+ title: Capability Architecture
+ image: /images/home/arch-en.svg
+
+section8:
+ title: Stay True to Open Source, Keep Contributing to Cloud Native
+ content: As a pioneer in enterprise-grade Kubernetes platforms, KubeSphere has driven innovation in multi-cluster management, visualized O&M, unified observability, and enterprise-grade DevOps integration, promoting the widespread adoption and implementation of Kubernetes in corporate environments. Meanwhile, the KubeSphere community has incubated open-source projects, such as KubeKey, OpenELB, and Fluent Operator, and has collaborated deeply with ecosystems like Grafana, Loki, and Higress.
+ children:
+ - name: KubeKey
+ icon: /images/home/kube-key.svg
+ content: Rapid installation and maintenance tool that accelerates Kubernetes deployment, adapts to multiple environments, and automates full lifecycle management.
+
+ - name: OpenELB
+ icon: /images/home/open-elb.svg
+ content: Native load balancing solution that fills the gap for bare-metal LB, supports multiple network modes, and eliminates external dependencies.
+
+ - name: KubeEye
+ icon: /images/home/kube-eye.svg
+ content: Kubernetes cluster inspection and diagnostic tool that identifies configuration risks and compliance issues, diagnoses cluster anomalies, and enhances Kubernetes stability and security.
+
+ - name: Fluent Operator
+ icon: /images/home/fluent-operator.svg
+ content: Cloud-native log and data collection engine that unifies log collection and processing, extends Fluentd/Fluent Bit capabilities, enhances operational observability, and has been donated to the CNCF.
+
+ - name: OpenFunction
+ icon: /images/home/open-function.svg
+ content: Cloud-native, open-source FaaS (Function as a Service) framework that focuses on business logic development, abstracts underlying runtime environments to accelerate cloud-native FaaS adoption.
+
+ - name: Notification-Manager
+ icon: /images/home/notification-manager.svg
+ content: Manages notifications in multi-tenant Kubernetes environments, unifies multi-tenant notification channels (email, DingTalk, Feishu, WeCom), and improves notification management efficiency.
+
+ - name: DevOps
+ icon: /images/home/devops.svg
+ content: Provide end-to-end workflows, integrate mainstream CI/CD tools, consolidate CI/CD tools, simplify delivery processes, and enhance iteration efficiency.
+
+ - name: Kube Design
+ icon: /images/home/kube-design.svg
+ content: A suite of components, hooks, and icons. Originally built for KubeSphere Console but it can also be used for developing any other React web apps.
---
diff --git a/content/en/features/_index.md b/content/en/features/_index.md
new file mode 100644
index 000000000..d011a3c2c
--- /dev/null
+++ b/content/en/features/_index.md
@@ -0,0 +1,77 @@
+---
+title: "Capability List of Community Edition"
+
+layout: "features"
+
+css: "scss/features.scss"
+
+section1:
+ title: "Capability List of Community Edition"
+ image: /images/features/banner.jpg
+
+section2:
+ children:
+ - icon: /images/features/cluster-management.svg
+ name: Cluster Management
+ content: Centralized visualization management and operation for multiple Kubernetes clusters across clouds and infrastructures
+ - icon: /images/features/multi-tenant-anagement.svg
+ name: Multi-Tenant Management
+ content: Logical resource isolation, network isolation, and fine-grained access control capabilities across clusters and projects
+ - icon: /images/features/app-management.svg
+ name: Application Management
+ content: Unified app lifecycle management capabilities, providing a unified abstraction layer for applications such as Helm and Operator
+ - icon: /images/features/k8s-resource-management.svg
+ name: K8s Resource Management
+ content: Intuitive web console integrated with native Kubernetes API for effortless resource creation and management
+ - icon: /images/features/Extension-management.svg
+ name: Extensions Management
+ content: A microkernel + extensions architecture to customize and extend platform capabilities as needed
+ - icon: /images/features/wiz-telemetry.svg
+ name: WizTelemetry Observability
+ content: Comprehensive insights into performance and health status of applications and infrastructures
+ label: Extension
+ - icon: /images/features/devops.svg
+ name: DevOps
+ content: End-to-end workflows integrating mainstream CI/CD tools
+ label: Extension
+ - icon: /images/features/gateway.svg
+ name: KubeSphere Gateway
+ content: Unified ingress management based on traffic, layer 7 load balancing, and various routing strategies
+ label: Extension
+ - icon: /images/features/gatekeeper.svg
+ name: GateKeeper
+ content: Admission controller with flexible security policy configuration
+ label: extension
+ - icon: /images/features/metrics-server.svg
+ name: Metrics Server
+ content: Scalable and efficient container resource metrics source, serving Kubernetes' built-in auto-scaling pipeline
+ label: Extension
+ - icon: /images/features/nvidia.svg
+ name: NVIDIA GPU Operator
+ content: Create, configure, and manage GPUs on Kubernetes
+ label: Extension
+ - icon: /images/features/deepseek.svg
+ name: DeepSeek
+ content: Run the DeepSeek-R1 model based on Ollama, providing API services externally
+ label: Extension
+ - icon: /images/features/grafana.svg
+ name: Grafana
+ content: Open and composable observability and data visualization platform
+ label: Extension
+ - icon: /images/features/loki.svg
+ name: Loki
+ content: Scalable, highly available, multi-tenant log aggregation system
+ label: Extension
+ - icon: /images/features/higress.svg
+ name: Higress
+ content: API Gateway based on Istio and Envoy
+ label: Extension
+ - icon: /images/features/ob-operator.svg
+ name: OB-Operator
+ content: Manage OceanBase-related resources in Kubernetes clusters
+ label: Extension
+ - icon: /images/features/ob-operator.svg
+ name: OceanBase Dashboard
+ content: OceanBase interactive management application
+ label: Extension
+---
diff --git a/content/tr/_index.md b/content/tr/_index.md
index a55e56c91..a2d376454 100644
--- a/content/tr/_index.md
+++ b/content/tr/_index.md
@@ -2,7 +2,6 @@
title: KubeSphere | Açık Kaynak Container Platformu
description: KubeSphere, kurumsal/bireysel uygulama geliştirme ve dağıtımı için Kubernetes tabanlı açık kaynaklı bir konteyner platformudur.
-
css: scss/index-tr.scss
section1:
@@ -32,7 +31,6 @@ section2:
icon: /images/home/modular-pluggable.svg
content: Tüm modüller tak-çıkar yapıya uygun olarak geliştirilmiştir, kolayca yönetilebilir
-
section3:
title: Farklı Ekiplere Faydaları
content: Farklı ekiplerin birbirine entegre olarak çalışmasını sağlar. Geliştiriciler web konsolda tek tıkla kodunu dağıtabilir, Operasyon ekibi için merkezi gözlemlenebilirlik ve güçlü DevOps stratejisine uygun ortamı sunar, Altyapı ekibinin esnek ağ ve çözüm çözümleriyle Kubernetes cluster kurmasına ve korumasına yardımcı olur.
@@ -122,7 +120,7 @@ section5:
title: Front-End
project: KubeSphere Web Konsol
children:
- - icon: /images/home/mobx.jpg
+ - icon: /images/home/kube-design.jpg
- icon: /images/home/koa.jpg
- icon: /images/home/react.png
@@ -135,7 +133,6 @@ section5:
- name: Kontroller Yönetimi
- name: Hesap Yönetimi
-
section6:
title: KubeSphere'i Tercih Edenler
content: Müşteri senaryoları, daha ayrıntılı kullanıcı senaryoları ve bulut yerel dönüşüm hikayelerini sizler için listeledik. Çeşitli işletme ve kuruluşlar araştırma, üretim ve ticari ürünler için KubeSphere Container Platform'u kullanıyor.
diff --git a/content/zh/_index.md b/content/zh/_index.md
index 9ba7190c2..cf6b2a8ad 100644
--- a/content/zh/_index.md
+++ b/content/zh/_index.md
@@ -2,21 +2,40 @@
title: 面向云原生应用的容器混合云,支持 Kubernetes 多集群管理的 PaaS 容器云平台解决方案 | KubeSphere
description: KubeSphere 是在 Kubernetes 之上构建的以应用为中心的多租户容器平台,完全开源,提供全栈的 IT 自动化运维的能力,简化企业的 DevOps 工作流。KubeSphere 提供了运维友好的向导式操作界面,帮助企业快速构建一个强大和功能丰富的容器云平台。
-
css: scss/index.scss
section1:
- title: KubeSphere 容器平台
- topic: 面向云原生应用的
容器混合云
- content: KubeSphere 愿景是打造一个以 Kubernetes 为内核的云原生分布式操作系统,它的架构可以非常方便地使第三方应用与云原生生态组件进行即插即用(plug-and-play)的集成,支持云原生应用在多云与多集群的统一分发和运维管理。
+ title: KubeSphere 社区版
+ topic: 面向云原生应用的容器混合云
+ 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
+ carouselItems:
+ - image: /images/home/top-right-cn-1.png
+ - image: /images/home/top-right-cn-2.png
+ - image: /images/home/top-right-cn-3.png
+ - image: /images/home/top-right-cn-4.png
+ - image: /images/home/top-right-cn-5.png
+
+tabs:
+ children:
+ - title: 免费产品
+ - title: 开源项目
section2:
title: 全栈的 Kubernetes 容器云 PaaS 解决方案
content: KubeSphere 是在 Kubernetes 之上构建的以应用为中心的多租户容器平台,提供全栈的 IT 自动化运维的能力,简化企业的 DevOps 工作流。KubeSphere 提供了运维友好的向导式操作界面,帮助企业快速构建一个强大和功能丰富的容器云平台。
children:
- - name: 完全开源
- icon: /images/home/open-source.svg
- content: 通过 CNCF 一致性认证的 Kubernetes 平台,100% 开源,由社区驱动与开发
+ - name: 永久免费
+ icon: /images/home/free.svg
+ content: 零成本无忧使用,享受持续迭代的企业级功能,助您轻松构建云原生基石
- name: 简易安装
icon: /images/home/easy-to-run.svg
@@ -24,13 +43,11 @@ section2:
- name: 功能丰富
icon: /images/home/feature-rich.svg
- content: 在一个平台统一纳管 DevOps、云原生可观测性、服务网格、应用生命周期、多租户、多集群、存储与网络
+ content: 提供多租户、多集群、云原生可观测性、应用生命周期、存储与网络、DevOps
- - name: 模块化 & 可插拔
+ - name: 灵活扩展
icon: /images/home/modular-pluggable.svg
- content: 平台中的所有功能都是可插拔与松耦合,您可以根据业务场景可选安装所需功能组件
-
-
+ content: 基于可插拔架构,可无缝集成任何主流开源工具,像搭积木一样按需扩展平台能力
section3:
title: 不同团队的受益
@@ -42,7 +59,7 @@ section3:
children:
- content: 提高资源利用率,减少内部基础设施的成本支出
- content: 提供安全增强,支持多种存储与网络方案
- - content: 为企业交付一个通过 CNCF 认证和可信赖的 Kubernetes 发行版
+ - content: 为企业交付可信赖的 Kubernetes 发行版
- content: 支持 Kubernetes 的多云与多集群管理,提供多云与多可用区的高可用
- name: 开发者
@@ -50,7 +67,7 @@ section3:
icon: /images/home/74.png
children:
- content: 为开发者提供向导式的用户体验,降低上手云原生技术栈的学习曲线
- - content: 内置常用的自动化部署环境,为应用(Java/NodeJs/Python/Go)部署提供定制化的容器运行环境
+ - content: 内置常用的自动化部署环境,为应用(Java/Node.js/Python/Go)部署提供定制化的容器运行环境
- content: 提供开箱即用的工具集,帮助开发者将代码快速构建为可运行的容器镜像,提高开发效率
- content: 提供应用商店和应用生命周期管理,缩短应用上线周期
@@ -68,80 +85,38 @@ section3:
icon: /images/home/80.svg
children:
- content: 通过应用商店一键部署与升级应用至 Kubernetes
- - content: 提供按需容器资源申请,支持设置容器的弹性伸缩(HPA),提升应用的可靠性与灵活性
+ - content: 提供按需容器资源申请,提升应用的可靠性与灵活性
- content: 支持导入 Helm 应用仓库可视化编辑与部署应用
- - content: 应用商店将支持运营,提供针对应用的计量与计费(v3.x)
section4:
- title: 主要功能
- content: 如果您在寻找一个可以媲美商业产品的开源项目,KubeSphere 会是您的选择。
我们在 RoadMap 列出了下一个版本的规划,欢迎所有人为社区提供您的需求、建议与反馈。
- 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 环境的负载均衡器 OpenELB,支持网络策略可视化,支持 Calico、Flannel、Cilium、Kube-OVN 等网络插件
+ title: 产品应用场景
features:
- - name: Kubernetes DevOps 系统
- icon: /images/home/dev-ops.svg
- content: 基于 Jenkins 为引擎打造的 CI/CD,内置 Source-to-Image 和 Binary-to-Image 自动化打包部署工具
- link: "devops/"
- color: orange
-
- - name: 基于 Istio 的微服务治理
- icon: /images/home/service.svg
- content: 提供细粒度的流量管理、流量监控、灰度发布、分布式追踪,支持可视化的流量拓扑
- link: "service-mesh/"
- color: red
+ - name: Kubernetes 多集群管理
+ icon: /images/home/management.svg
+ content: 跨多云与多集群统一分发应用,提供集群高可用与灾备的最佳实践,支持跨集群的可观测性
+ link: "https://docs.kubesphere.com.cn/v4.2.0/07-cluster-management/10-multi-cluster-management/"
+ color: grape
- name: 丰富的云原生可观测性
icon: /images/home/rich.svg
content: 提供多维度与多租户的监控、日志、事件、审计搜索,支持多种告警策略与通知渠道,支持日志转发
link: "observability/"
+ color: red
+
+ - name: Kubernetes DevOps 系统
+ icon: /images/home/devops1.svg
+ content: 基于 Jenkins 为引擎打造的 CI/CD,内置 Source-to-Image 和 Binary-to-Image 自动化打包部署工具
+ link: "devops/"
color: green
- - name: 云原生应用商店
- icon: /images/home/store.svg
- content: 提供基于 Helm 的应用商店与应用仓库,内置多个应用模板,支持应用生命周期管理
- link: "https://docs.kubesphere.com.cn/v4.2.0/11-use-extensions/05-app-store/"
- color: grape
-
- - name: Kubernetes 多集群管理
- icon: /images/home/management.svg
- content: 跨多云与多集群统一分发应用,提供集群高可用与灾备的最佳实践,支持跨级群的可观测性
- link: "https://docs.kubesphere.com.cn/v4.2.0/07-cluster-management/10-multi-cluster-management/"
- color: orange
-
- - name: Kubernetes 边缘节点管理
- icon: /images/home/network.svg
- content: 基于 KubeEdge 实现应用与工作负载在云端与边缘节点的统一分发与管理,解决在海量边、端设备上完成应用交付、运维、管控的需求
- link: "https://edgewize-docs.kubesphere.com.cn/"
- color: green
-
- # - name: 多维度计量与计费
- # icon: /images/home/multiple.svg
- # content: 提供基于集群与租户的多维度资源计量与计费的监控报表,让 Kubernetes 运营成本更透明
- # link: "/docs/v3.3/toolbox/metering-and-billing/view-resource-consumption/"
- # color: grape
-
section5:
title: 面向云原生的架构,前后端分离
frontEnd:
title: Front End
project: KubeSphere Console
children:
- - icon: /images/home/mobx.jpg
+ - icon: /images/home/kube-design.jpg
- icon: /images/home/koa.jpg
- icon: /images/home/react.png
@@ -150,47 +125,107 @@ section5:
project: KubeSphere System
group:
- name: API Server
- - name: API Gateway
- name: Controller Manager
- - name: Account Service
-
section6:
- title: 用户社区
- content: 已有来自全球的大量知名企业与组织将 KubeSphere 容器平台广泛应用在科研、生产环境以及他们的商业产品中, 点击案例学习查看更详细的典型用户的实践案例文章。
+ title: 用户案例
+ content: 已有来自全球的大量知名企业与组织将 KubeSphere 容器平台广泛应用在科研、生产环境以及他们的商业产品中。
children:
- icon: /images/home/section6-anchnet.jpg
- - icon: /images/home/section6-aviation-industry-corporation-of-china.jpg
+ link: /case/anchnet
- icon: /images/case/logo-alphaflow.png
- - icon: /images/home/section6-aqara.jpg
- - icon: /images/home/section6-bank-of-beijing.jpg
- - icon: /images/home/section6-benlai.jpg
- - icon: /images/home/section6-china-taiping.jpg
- - icon: /images/home/section6-changqing-youtian.jpg
- - icon: /images/home/section6-cmft.jpg
- - icon: /images/home/section6-extreme-vision.jpg
- - icon: /images/home/section6-guizhou-water-investment.jpg
+ link: /case/alphaflow
+ - icon: /images/case/section6-aqara.jpg
+ link: /case/aqara
- icon: /images/home/section6-huaxia-bank.jpg
- - icon: /images/home/section6-inaccel.jpg
- - icon: /images/home/section6-maxnerva.jpg
- - icon: /images/home/section6-picc.jpg
- - icon: /images/case/logo-xdf.png
- - icon: /images/home/section6-sina.jpg
- - icon: /images/home/section6-sichuan-airlines.jpg
- - icon: /images/home/section6-sinopharm.jpg
- - icon: /images/home/section6-softtek.jpg
- - icon: /images/home/section6-spd-silicon-valley-bank.jpg
+ link: /case/huaxia-bank
+ - icon: /images/home/section6-benlai.jpg
+ link: /case/benlai
+ - icon: /images/case/uisee.png
+ link: /case/uisee
+ - icon: /images/case/section6-zto.png
+ link: /case/zto
+ - icon: /images/case/section6-hongya.png
+ link: /case/hongyaa
+ - icon: /images/case/chinamobile-iot.png
+ link: /case/chinamobile-iot
+ - icon: /images/case/logo-qunar.png
+ link: /case/qunar
+ - icon: /images/case/logo-turing.png
+ link: /case/turing
+ - icon: /images/case/segmentfault-logo.png
+ link: /case/segmentfault
+ - icon: /images/case/logo-msxf.png
+ link: /case/msxf
+ - icon: /images/case/section6-sinodata.png
+ link: /case/sinodata
- icon: /images/home/section6-vng.jpg
- - icon: /images/home/section6-webank.jpg
- - icon: /images/home/section6-wisdom-world.jpg
- - icon: /images/home/section6-yiliu.jpg
+ link: /case/vng
+ - icon: /images/case/logo-xdf.png
+ link: /case/xdf
+ - icon: /images/home/section6-extreme-vision.jpg
+ link: /case/extreme-vision
+ - icon: /images/case/section6-vesoft-4.png
+ link: /case/vesoft
+ - icon: /images/case/logo-keyenlinx.png
+ link: /case/keyenlinx
+ - icon: /images/case/logo-yiheda.png
+ link: /case/yiheda
+ - icon: /images/case/logo-eastcom.png
+ link: /case/eastcom
+ - icon: /images/case/logo-gxjtkyy.png
+ link: /case/gxjtkyy
+ - icon: /images/case/section6-maxnerva.jpg
+ link: /case/maxnerva
+ - icon: /images/case/logo-hshc.png
+ link: /case/hshc
+ - icon: /images/case/logo-vsleem.png
+ link: /case/vsleem
- btnContent: 案例学习
- btnLink: case/
link: mailto:info@kubesphere.io
linkContent: 希望加入用户社区并在 KubeSphere 官网展示您的 Logo?请邮件至 info@kubesphere.io
joinTitle: 加入 KubeSphere 社区合作伙伴计划
joinContent: 我们非常期待您加入 KubeSphere 社区合作伙伴计划,共同完善各自的生态,加速您的业务增长。
joinLink: partner/
image: /images/home/certification.png
+
+section7:
+ title: 产品功能架构
+ image: /images/home/arch-cn.svg
+
+section8:
+ title: KubeSphere 自诞生以来始终坚持开源初心
在全球云原生社区中持续贡献力量
+ content: 作为企业级 Kubernetes 平台的先行者,KubeSphere 在多集群治理、可视化运维、统一可观测性和企业级 DevOps 集成等方面不断创新,推动了 Kubernetes 在企业场景的普及与落地。同时,KubeSphere 社区孵化了 KubeKey、OpenELB、 Fluent Operator 等开源项目,并深度协同 Grafana、Loki、Higress 等生态,形成了广泛的技术影响力。
+ children:
+ - name: KubeKey
+ icon: /images/home/kube-key.svg
+ content: 极速安装与运维工具,加速 Kubernetes 部署,适配多环境,自动化全生命周期管理
+
+ - name: OpenELB
+ icon: /images/home/open-elb.svg
+ content: 原生负载均衡解决方案,填补裸金属 LB 空白,支持多网络模式,消除外部依赖
+
+ - name: KubeEye
+ icon: /images/home/kube-eye.svg
+ content: Kubernetes 集群检测与诊断工具,发现配置风险与合规问题,诊断集群异常,提升 Kubernetes 稳定性与安全性
+
+ - name: Fluent Operator
+ icon: /images/home/fluent-operator.svg
+ content: 云原生日志与数据采集引擎,统一日志采集与处理,扩展 Fluentd / Fluent Bit,提升运维可观测性,项目已捐献
+
+ - name: OpenFunction
+ icon: /images/home/open-function.svg
+ content: 云原生、开源的 FaaS(函数即服务)框架,聚焦业务逻辑开发,抽象底层运行环境,加速云原生函数即服务落地
+
+ - name: Notification-Manager
+ icon: /images/home/notification-manager.svg
+ content: 管理多租户 Kubernetes 环境中的消息通知,统一多租户通知渠道,支持邮件、钉钉、飞书、企业微信,提升消息管理效率
+
+ - name: DevOps
+ icon: /images/home/devops.svg
+ content: 提供端到端的工作流,集成主流 CI/CD 工具,整合 CI/CD 工具,简化交付流程,提升迭代效率
+
+ - name: Kube Design
+ icon: /images/home/kube-design.svg
+ content: 为 KubeSphere 控制台开发的一套包含组件、Hooks、Icon 的 React 库,覆盖场景丰富可用于开发各种 React 应用
---
diff --git a/content/zh/features/_index.md b/content/zh/features/_index.md
new file mode 100644
index 000000000..87c44c261
--- /dev/null
+++ b/content/zh/features/_index.md
@@ -0,0 +1,77 @@
+---
+title: "社区版功能介绍"
+
+layout: "features"
+
+css: "scss/features.scss"
+
+section1:
+ title: "社区版功能介绍"
+ image: /images/features/banner.jpg
+
+section2:
+ children:
+ - icon: /images/features/cluster-management.svg
+ name: 集群管理
+ content: 跨云、跨基础设施的多个 Kubernetes 集群的集中式可视化管理与运维
+ - icon: /images/features/multi-tenant-anagement.svg
+ name: 多租户管理
+ content: 跨集群、跨项目的资源逻辑隔离、网络隔离和细粒度的访问控制能力
+ - icon: /images/features/app-management.svg
+ name: 应用管理
+ content: 统一的应用生命周期管理能力,对 Helm、Operator 等类型应用提供统一的抽象层
+ - icon: /images/features/k8s-resource-management.svg
+ name: K8s资源管理
+ content: 提供 Web 控制台对接 Kubernetes 原生 API 快速创建与管理 Kubernetes 资源
+ - icon: /images/features/extension-management.svg
+ name: 扩展组件管理
+ content: 采用微内核+扩展组件的架构,按需定制、扩展平台能力
+ - icon: /images/features/wiz-telemetry.svg
+ name: WizTelemetry 可观测
+ content: 对应用与基础设施性能及健康状态的全面洞察
+ label: extension
+ - icon: /images/features/devops.svg
+ name: DevOps
+ content: 提供端到端的工作流,集成主流 CI/CD 工具
+ label: extension
+ - icon: /images/features/gateway.svg
+ name: KubeSphere 网关
+ content: 基于流量的统一入口管理、七层负载均衡与多种路由策略
+ label: extension
+ - icon: /images/features/gatekeeper.svg
+ name: GateKeeper
+ content: 可灵活配置安全策略的准入控制器
+ label: extension
+ - icon: /images/features/metrics-server.svg
+ name: Metrics Server
+ content: 可扩展、高效的容器资源度量源,为 Kubernetes 内置的自动扩展管道提供服务
+ label: extension
+ - icon: /images/features/nvidia.svg
+ name: NVIDIA GPU Operator
+ content: 在 Kubernetes 上创建、配置和管理 GPU
+ label: extension
+ - icon: /images/features/deepseek.svg
+ name: DeepSeek
+ content: 基于 ollama 运行 deepseek-r1 模型,对外提供 API 服务
+ label: extension
+ - icon: /images/features/grafana.svg
+ name: Grafana
+ content: 开放且可组合的观测和数据可视化平台
+ label: extension
+ - icon: /images/features/loki.svg
+ name: Loki
+ content: 可扩展、高可用、多租户日志聚合系统
+ label: extension
+ - icon: /images/features/higress.svg
+ name: Higress
+ content: 基于 Istio 和 Envoy 的 API 网关
+ label: extension
+ - icon: /images/features/ob-operator.svg
+ name: OB-Operator
+ content: 管理 Kubernetes 集群中的 OceanBase 相关资源
+ label: extension
+ - icon: /images/features/ob-operator.svg
+ name: OceanBase Dashboard
+ content: OceanBase 交互式管理应用
+ label: extension
+---
diff --git a/i18n/en.yaml b/i18n/en.yaml
index a0df1d548..bb2b1eefd 100644
--- a/i18n/en.yaml
+++ b/i18n/en.yaml
@@ -139,4 +139,8 @@
- id: Msg-Thank
translation: Thanks for the feedback. If you have a specific question about how to use KubeSphere, ask it on Slack. Open an issue in the GitHub repo if you want to report a problem or suggest an improvement.
- id: Visitor-count
- translation: 'The number of views: '
\ No newline at end of file
+ translation: 'The number of views: '
+- id: Extension
+ translation: Extension
+- id: Open Source Object
+ translation: Open Source Object
\ No newline at end of file
diff --git a/i18n/zh.yaml b/i18n/zh.yaml
index 663f6de8d..eb72209d6 100644
--- a/i18n/zh.yaml
+++ b/i18n/zh.yaml
@@ -145,4 +145,8 @@
- id: Msg-Thank
translation: 感谢您的反馈。如果您有关于如何使用 KubeSphere 的具体问题,请在 Slack 上提问。如果您想报告问题或提出改进建议,请在 GitHub 存储库中打开问题。
- id: Visitor-count
- translation: 本文总阅读量:
\ No newline at end of file
+ translation: 本文总阅读量:
+- id: Extension
+ translation: 扩展组件
+- id: Open Source Object
+ translation: 开源项目
diff --git a/layouts/_default/features.html b/layouts/_default/features.html
new file mode 100644
index 000000000..725fee0f9
--- /dev/null
+++ b/layouts/_default/features.html
@@ -0,0 +1,30 @@
+{{ define "main" }}
+{{ with .Params.section1}}
+{{ .title }}
+
+ {{range .children}}
+
+ {{ end }}
+
+
{{ .name | safeHTML }}
+
{{ .title | safeHTML }}
-{{ .topic | safeHTML }}
+{{ .content | safeHTML }}
- + +
- {{ .content | safeHTML }}
+{{ .content | safeHTML }}
+ {{range .children}} +{{ .content | safeHTML }}
+{{ .content | safeHTML }}
+{{ .project }}
+ {{ $alt := .project }} +{{ .project }}
+
+
+ {{ .content | safeHTML }}
+{{ .content | safeHTML }}
+
+ {{ .name }}
+{{ .content | safeHTML }}
+
- {{ .content | safeHTML }}
-{{ .content | safeHTML }}
-{{ .content | safeHTML }}
-{{ .project }}
- {{ $alt := .project }} -{{ .project }}
-
-
-