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..5e1bb51df --- /dev/null +++ b/assets/scss/features.scss @@ -0,0 +1,92 @@ +@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 { + margin-top: 40px; + 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/index.scss b/assets/scss/index.scss index 1474d1710..f89670cf1 100644 --- a/assets/scss/index.scss +++ b/assets/scss/index.scss @@ -176,6 +176,77 @@ } } } + + .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.3; + transform: translateY(50px) scale(0.9); + z-index: 1; + } } .section-2 { @@ -191,7 +262,7 @@ z-index: 2; .title-black-h2 { - margin-top: 80px; + margin-top: 107px; } & > div { @@ -288,10 +359,13 @@ 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); } } } @@ -310,7 +384,7 @@ & > div { position: relative; - margin-top: 76px; + margin-top: 104px; text-align: left; align-items: center; @@ -1016,6 +1090,7 @@ text-align: center; a { color: #31383e; + font-weight: 450; text-decoration: underline; &:hover { color: #55bc8a; diff --git a/content/en/_index.md b/content/en/_index.md index 469e95350..7a4aa73df 100644 --- a/content/en/_index.md +++ b/content/en/_index.md @@ -18,6 +18,10 @@ section1: # TODO: free feature list link: / class: apply-btn + carouselItems: + - image: /images/home/top-right-1.jpg + - image: /images/home/top-right-2.jpg + - image: /images/home/top-right-3.jpg tabs: children: diff --git a/content/en/features/_index.md b/content/en/features/_index.md new file mode 100644 index 000000000..9ad01a050 --- /dev/null +++ b/content/en/features/_index.md @@ -0,0 +1,77 @@ +--- +title: "社区版详细功能清单" + +layout: "features" + +css: "scss/features.scss" + +section1: + title: "社区版详细功能清单" + image: /images/features/banner.jpg + +section2: + title: "功能介绍" + 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、Oporator 等类型应用提供统一的抽象层 + - 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: 可灵活配置安全策略的准入控制器 + - icon: /images/features/metrics-server.svg + name: Metrics Server + content: 可扩展、高效的容器资源度量源，为 Kubernetes 内置的自动扩展管道提供服务 + label: opensource + - icon: /images/features/nvidia.svg + name: NVIDIA GPU Operator + content: 在 Kubernetes 上创建、配置和管理 GPU + label: opensource + - icon: /images/features/deepseek.svg + name: Deepseek + content: 基于 ollama 运行 deepseek-r1 模型，对外提供 API 服务 + label: opensource + - icon: /images/features/grafana.svg + name: Grafana + content: 开放且可组合的观测和数据可视化平台 + label: opensource + - icon: /images/features/loki.svg + name: Loki + content: 可扩展、高可用、多租户日志聚合系统 + label: opensource + - icon: /images/features/higress.svg + name: Higress + content: 基于 Istio 和 Envoy 的API 网关 + label: opensource + - icon: /images/features/ob-operator.svg + name: OB-Operator + content: 管理 Kubernetes 集群中的 OceanBase 相关资源 + label: opensource + - icon: /images/features/ob-operator.svg + name: Oceanbas Dashboard + content: OceanBase 交互式管理应用 + label: opensource +--- diff --git a/content/zh/_index.md b/content/zh/_index.md index 04d9db3db..49a8e7274 100644 --- a/content/zh/_index.md +++ b/content/zh/_index.md @@ -17,6 +17,10 @@ section1: # TODO: free feature list link: / class: apply-btn + carouselItems: + - image: /images/home/top-right-1.jpg + - image: /images/home/top-right-2.jpg + - image: /images/home/top-right-3.jpg tabs: children: @@ -188,7 +192,7 @@ section6: section7: title: 产品功能架构 - image: /images/home/arch-cn.png + image: /images/home/arch-cn.svg section8: title: KubeSphere 自诞生以来始终坚持开源初心
在全球云原生社区中持续贡献力量 diff --git a/content/zh/features/_index.md b/content/zh/features/_index.md new file mode 100644 index 000000000..9ad01a050 --- /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: + title: "功能介绍" + 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、Oporator 等类型应用提供统一的抽象层 + - 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: 可灵活配置安全策略的准入控制器 + - icon: /images/features/metrics-server.svg + name: Metrics Server + content: 可扩展、高效的容器资源度量源，为 Kubernetes 内置的自动扩展管道提供服务 + label: opensource + - icon: /images/features/nvidia.svg + name: NVIDIA GPU Operator + content: 在 Kubernetes 上创建、配置和管理 GPU + label: opensource + - icon: /images/features/deepseek.svg + name: Deepseek + content: 基于 ollama 运行 deepseek-r1 模型，对外提供 API 服务 + label: opensource + - icon: /images/features/grafana.svg + name: Grafana + content: 开放且可组合的观测和数据可视化平台 + label: opensource + - icon: /images/features/loki.svg + name: Loki + content: 可扩展、高可用、多租户日志聚合系统 + label: opensource + - icon: /images/features/higress.svg + name: Higress + content: 基于 Istio 和 Envoy 的API 网关 + label: opensource + - icon: /images/features/ob-operator.svg + name: OB-Operator + content: 管理 Kubernetes 集群中的 OceanBase 相关资源 + label: opensource + - icon: /images/features/ob-operator.svg + name: Oceanbas Dashboard + content: OceanBase 交互式管理应用 + label: opensource +--- 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..ffe169a75 --- /dev/null +++ b/layouts/_default/features.html @@ -0,0 +1,31 @@ +{{ define "main" }} +{{ with .Params.section1}} +
+
+

{{ .title }}

+
+
+{{ end }} +{{ with .Params.section2}} +
+
+

{{ .title }}

+ + {{ end }} +
+
+{{ end }} \ No newline at end of file diff --git a/layouts/index.html b/layouts/index.html index 18bedcad2..a658dca95 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -6,21 +6,33 @@ {{ with .Params.section1 }}
-

{{ .title | safeHTML }}

-

{{ .topic | safeHTML }}

+

{{ .title | safeHTML }}

+

{{ .topic | safeHTML }}

+

{{ .content | safeHTML }}

- {{range .btns}} +
-
- {{ i18n - play + +
+
+ {{ range $index, $item := .carouselItems }} +
+
+ {{ if .image }} + {{ .title }} + {{ end }} +
+
+ {{ end }} +
+ {{ i18n {{ i18n
@@ -473,6 +485,83 @@ }); + $(document).ready(function () { + var $carousel = $('.custom-vertical-carousel'); + var $slides = $carousel.find('.carousel-slide'); + var currentIndex = 0; + var totalSlides = $slides.length; + var autoPlayInterval; + + function updateSlides() { + $slides.removeClass('active prev next hidden'); + + $slides.eq(currentIndex).addClass('active'); + + var prevIndex = (currentIndex - 1 + totalSlides) % totalSlides; + $slides.eq(prevIndex).addClass('prev'); + + + var nextIndex = (currentIndex + 1) % totalSlides; + $slides.eq(nextIndex).addClass('next'); + + $slides.not('.active, .prev, .next').addClass('hidden'); + } + + function nextSlide() { + currentIndex = (currentIndex + 1) % totalSlides; + updateSlides(); + } + + function prevSlide() { + currentIndex = (currentIndex - 1 + totalSlides) % totalSlides; + updateSlides(); + } + + // auto play + function startAutoPlay() { + stopAutoPlay(); + autoPlayInterval = setInterval(nextSlide, 3000); + } + + function stopAutoPlay() { + if (autoPlayInterval) { + clearInterval(autoPlayInterval); + autoPlayInterval = null; + } + } + + // go to slide + function goToSlide(index) { + if (index >= 0 && index < totalSlides) { + currentIndex = index; + updateSlides(); + } + } + + // init + updateSlides(); + startAutoPlay(); + + // hover + $carousel.hover( + function () { stopAutoPlay(); }, + function () { startAutoPlay(); } + ); + + // keyboard control + $(document).on('keydown', function (e) { + if (e.key === 'ArrowDown') { + nextSlide(); + stopAutoPlay(); + startAutoPlay(); + } else if (e.key === 'ArrowUp') { + prevSlide(); + stopAutoPlay(); + startAutoPlay(); + } + }); + + }); controlVideo() bindMouseLeftLi() diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 1971689ba..a92c33256 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -2,15 +2,13 @@
{{ if eq .Site.Language.Lang "zh"}}
- - +
{{ end }} {{ if eq .Site.Language.Lang "en"}}
- - +
{{ end }} diff --git a/static/images/features/app-management.svg b/static/images/features/app-management.svg new file mode 100644 index 000000000..2a3962d60 --- /dev/null +++ b/static/images/features/app-management.svg @@ -0,0 +1,4 @@ + + + + diff --git a/static/images/features/banner.jpg b/static/images/features/banner.jpg new file mode 100644 index 000000000..0e1c62639 Binary files /dev/null and b/static/images/features/banner.jpg differ diff --git a/static/images/features/cluster-management.svg b/static/images/features/cluster-management.svg new file mode 100644 index 000000000..73d81f663 --- /dev/null +++ b/static/images/features/cluster-management.svg @@ -0,0 +1,4 @@ + + + + diff --git a/static/images/features/deepseek.svg b/static/images/features/deepseek.svg new file mode 100644 index 000000000..9c304f4af --- /dev/null +++ b/static/images/features/deepseek.svg @@ -0,0 +1,3 @@ + + + diff --git a/static/images/features/devops.svg b/static/images/features/devops.svg new file mode 100644 index 000000000..96c2cd06c --- /dev/null +++ b/static/images/features/devops.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/static/images/features/extension-management.svg b/static/images/features/extension-management.svg new file mode 100644 index 000000000..f342a4f4d --- /dev/null +++ b/static/images/features/extension-management.svg @@ -0,0 +1,4 @@ + + + + diff --git a/static/images/features/gatekeeper.svg b/static/images/features/gatekeeper.svg new file mode 100644 index 000000000..9187ba24a --- /dev/null +++ b/static/images/features/gatekeeper.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/static/images/features/gateway.svg b/static/images/features/gateway.svg new file mode 100644 index 000000000..0871cdde7 --- /dev/null +++ b/static/images/features/gateway.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/static/images/features/grafana.svg b/static/images/features/grafana.svg new file mode 100644 index 000000000..ab9fecaeb --- /dev/null +++ b/static/images/features/grafana.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/static/images/features/higress.svg b/static/images/features/higress.svg new file mode 100644 index 000000000..ca45c128a --- /dev/null +++ b/static/images/features/higress.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/static/images/features/k8s-resource-management.svg b/static/images/features/k8s-resource-management.svg new file mode 100644 index 000000000..7aee605b6 --- /dev/null +++ b/static/images/features/k8s-resource-management.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/static/images/features/loki.svg b/static/images/features/loki.svg new file mode 100644 index 000000000..2ce859cef --- /dev/null +++ b/static/images/features/loki.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/static/images/features/metrics-server.svg b/static/images/features/metrics-server.svg new file mode 100644 index 000000000..c999868a3 --- /dev/null +++ b/static/images/features/metrics-server.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/static/images/features/multi-tenant-anagement.svg b/static/images/features/multi-tenant-anagement.svg new file mode 100644 index 000000000..6fc49e991 --- /dev/null +++ b/static/images/features/multi-tenant-anagement.svg @@ -0,0 +1,4 @@ + + + + diff --git a/static/images/features/nvidia.svg b/static/images/features/nvidia.svg new file mode 100644 index 000000000..79a9d957e --- /dev/null +++ b/static/images/features/nvidia.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/static/images/features/ob-operator.svg b/static/images/features/ob-operator.svg new file mode 100644 index 000000000..0e6239e32 --- /dev/null +++ b/static/images/features/ob-operator.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/static/images/features/wiz-telemetry.svg b/static/images/features/wiz-telemetry.svg new file mode 100644 index 000000000..631f4383c --- /dev/null +++ b/static/images/features/wiz-telemetry.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/static/images/home/arch-cn.svg b/static/images/home/arch-cn.svg new file mode 100644 index 000000000..a8241a737 --- /dev/null +++ b/static/images/home/arch-cn.svg @@ -0,0 +1,227 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/images/home/banner-cn.png b/static/images/home/banner-cn.png index 99cf01d07..a387274ab 100644 Binary files a/static/images/home/banner-cn.png and b/static/images/home/banner-cn.png differ diff --git a/static/images/home/top-right-1.jpg b/static/images/home/top-right-1.jpg new file mode 100644 index 000000000..2209bc7e7 Binary files /dev/null and b/static/images/home/top-right-1.jpg differ diff --git a/static/images/home/top-right-2.jpg b/static/images/home/top-right-2.jpg new file mode 100644 index 000000000..22aa93579 Binary files /dev/null and b/static/images/home/top-right-2.jpg differ diff --git a/static/images/home/top-right-3.jpg b/static/images/home/top-right-3.jpg new file mode 100644 index 000000000..1f3e4157b Binary files /dev/null and b/static/images/home/top-right-3.jpg differ