diff --git a/docusaurus.config.js b/docusaurus.config.js index a4cc70388e..e9cc4cd7c2 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -157,6 +157,16 @@ const config = { }, { to: "/case-studies", label: "Case Studies", position: "left" }, { to: "/partners", label: "Partners", position: "left"}, + { + label: 'HardwareList', + to: '/hardware-list', + position: 'left', + }, + { + label: 'VideotTutorials', + to: '/video-tutorials', + position: 'left', + }, { type: "dropdown", label: "Community", diff --git a/src/components/HardwareCard/index.js b/src/components/HardwareCard/index.js new file mode 100644 index 0000000000..eec346d30e --- /dev/null +++ b/src/components/HardwareCard/index.js @@ -0,0 +1,19 @@ +import React from "react"; + +export default function HardwareCard({ name, image, description, link }) { + return ( +
window.open(link, "_blank")} + > + {name} +
+

{name}

+

{description}

+ + View More + +
+
+ ); +} diff --git a/src/components/PartnerCard/index.js b/src/components/PartnerCard/index.js new file mode 100644 index 0000000000..6132609347 --- /dev/null +++ b/src/components/PartnerCard/index.js @@ -0,0 +1,98 @@ +import React, { useState } from 'react'; + +export default function PartnerCard({ name, logo, product, description, link }) { + const [hovered, setHovered] = useState(false); + + return ( +
setHovered(true)} + onMouseLeave={() => setHovered(false)} + onClick={() => window.open(link, '_blank')} + style={{ + position: 'relative', + borderRadius: '20px', + padding: '24px', + margin: '10px', + width: '100%', + maxWidth: '380px', + height: hovered ? '360px' : '260px', // 加高 + background: 'rgba(255, 255, 255, 0.7)', + backdropFilter: 'blur(12px)', + WebkitBackdropFilter: 'blur(12px)', + boxShadow: hovered + ? '0 16px 32px rgba(0, 0, 0, 0.15)' + : '0 6px 12px rgba(0, 0, 0, 0.08)', + display: 'flex', + flexDirection: 'column', + alignItems: 'center', //子元素居中 + justifyContent: 'flex-start', + cursor: 'pointer', + overflow: 'hidden', + transition: 'all 0.4s cubic-bezier(0.22, 1, 0.36, 1)', + transform: hovered ? 'scale(1.05)' : 'scale(1)', + }} + > + {/* Name */} +

+ {name} +

+ + {/* Logo图片 */} + {logo && ( + {`${name} + )} + + {/* Product */} +

+ {product} +

+ + {/* 蒙版 */} + {hovered && ( +
+ {description} +
+ )} +
+ ); +} diff --git a/src/components/VideoCard/index.js b/src/components/VideoCard/index.js new file mode 100644 index 0000000000..d9990e4555 --- /dev/null +++ b/src/components/VideoCard/index.js @@ -0,0 +1,40 @@ +import React from 'react'; + +export default function VideoCard({ title, link, image }) { + return ( +
window.open(link, '_blank')} + onMouseEnter={e => (e.currentTarget.style.transform = 'scale(1.03)')} + onMouseLeave={e => (e.currentTarget.style.transform = 'scale(1)')} + > + {image && ( + {title} + )} +
+

+ {title} +

+

+ Click to watch +

+
+
+ ); +} diff --git a/src/components/about/index.js b/src/components/about/index.js index 2519e5cd7b..980df1eb52 100644 --- a/src/components/about/index.js +++ b/src/components/about/index.js @@ -6,39 +6,39 @@ import "./styles.scss"; export default function About() { return ( -
-
- -
-

KubeEdge

-

+
+ {/* 左边部分：标题 + 描述 */} +
+
+

KubeEdge

+

+ Kubernetes Native Edge Computing Framework +

+
+
+

- Kubernetes Native Edge Computing Framework + KubeEdge is an open source system for extending native + containerized application orchestration capabilities to hosts at + Edge. It is built upon kubernetes and provides fundamental + infrastructure support for network, application deployment and + metadata synchronization between cloud and edge. KubeEdge is + licensed under Apache 2.0 and free for personal or commercial use. -

+

+

+ + Our goal is to make an open platform to enable Edge computing, + extending native containerized application orchestration + capabilities to hosts at Edge, which is built upon Kubernetes. + +

-
-

- - KubeEdge is an open source system for extending native - containerized application orchestration capabilities to hosts at - Edge. It is built upon kubernetes and provides fundamental - infrastructure support for network, application deployment and - metadata synchronization between cloud and edge. KubeEdge is - licensed under Apache 2.0. and free for personal or commercial use - absolutely. We welcome contributors! - -

-

- - Our goal is to make an open platform to enable Edge computing, - extending native containerized application orchestration - capabilities to hosts at Edge, which is built upon kubernetes and - provides fundamental infrastructure support for network, app - deployment and metadata synchronization between cloud and edge. - -

+ + {/* 右边部分：头像图片 */} +
+ KubeEdge Logo
diff --git a/src/components/about/styles.scss b/src/components/about/styles.scss index 5228be9a63..8b8333c70d 100644 --- a/src/components/about/styles.scss +++ b/src/components/about/styles.scss @@ -1,77 +1,78 @@ .aboutContainer { background-color: rgb(247, 247, 247); + padding: 40px 0; - @media screen { - @media (max-width: 992px) { - .sectionContainerInner { - .row { - .profile { - flex: 0 0 100%; - max-width: 100%; - } - } - } - } - @media (max-width: 768px) { - .sectionContainerInner { - .row { - .profile { - flex: 0 0 100%; - max-width: 100%; - } - } - } - } - } - - .row { - display: -ms-flexbox; + .about-grid { display: flex; - -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: center; - margin-right: -15px; - margin-left: -15px; + grid-template-columns: 1fr 260px; + align-items: center; + gap: 40px; + padding: 0 40px; + } + + .about-left { + flex: 1 1 600px; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + } + + .about-title { + margin-bottom: 20px; + text-align: left; + .name { + font-size: 2.2em; + font-weight: 700; + color: #0084FF; + margin: 0 0 8px; + text-align: left; + } - .profile { - flex: 0 0 33.333333%; - max-width: 33.333333%; - text-align: center; - padding: 0px 10px 30px; - position: relative; + .jobTitle { + font-size: 1.2em; + font-weight: 400; + color: #0084FF; + margin: 0; } + } + + .description { + font-size: 1.1rem; + line-height: 1.8; + color: #444; + text-align: left; + } + + .about-right { + flex: 0 0 260px; + display: flex; + align-items: center; + justify-content: center; + min-height: 100%; + padding-top: 20px; .portrait { width: 200px; height: 200px; - margin: 0 auto; border-radius: 50%; object-fit: cover; - } - - .description { - flex: 0 0 66.666667%; - max-width: 66.666667%; - font-size: 1.2rem; - } - - .name { - font-size: 2em; - font-weight: 400; - margin: 20px 0 10px 0; - } - - .jobTitle { - font-size: 1rem; - font-weight: 300; - margin: 0px 0 10px 0; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } } } - -html[data-theme='dark'] { +html[data-theme="dark"] { .aboutContainer { background-color: #242526; + + .jobTitle { + color: #0084FF; + } + .description { + color: #ccc; + } } -} \ No newline at end of file +} diff --git a/src/components/blogPost/index.scss b/src/components/blogPost/index.scss index ae9ebcd48f..6e94adb9b1 100644 --- a/src/components/blogPost/index.scss +++ b/src/components/blogPost/index.scss @@ -1,4 +1,5 @@ .blogPostContainer { + background-color: #DAEAF9; @media (max-width: 992px) { .sectionContainerInner { .row { @@ -32,6 +33,7 @@ h1 { text-align: left; margin-bottom: 0.5rem; + color: #0084FF; } a { @@ -51,7 +53,7 @@ h3 { text-align: left; cursor: pointer; - + color: #0084FF; &:hover { color: #3578e5; } @@ -94,6 +96,7 @@ html[data-theme="dark"] { .blogPostContainer { + background-color: rgb(255 255 255 / 5%); .viewBlogContainer { .author { a { diff --git a/src/components/why/styles.module.css b/src/components/why/styles.module.css index 71140044f4..b0516f5e58 100644 --- a/src/components/why/styles.module.css +++ b/src/components/why/styles.module.css @@ -4,6 +4,9 @@ flex-direction: column; align-items: center; } +.whyContainer h1{ + color: #0084FF; +} .reasonBoxContainer { display: flex; diff --git a/src/pages/hardware-list/hardware-list.mdx b/src/pages/hardware-list/hardware-list.mdx new file mode 100644 index 0000000000..2da6376583 --- /dev/null +++ b/src/pages/hardware-list/hardware-list.mdx @@ -0,0 +1,34 @@ +import HardwareCard from '@site/src/components/HardwareCard'; + +
+ Below are recommended edge hardware devices that work well with KubeEdge. Each card includes basic specifications and vendor link. +
+ +
+ + + + +
diff --git a/src/pages/hardware-list/index.js b/src/pages/hardware-list/index.js new file mode 100644 index 0000000000..25a86b1fe7 --- /dev/null +++ b/src/pages/hardware-list/index.js @@ -0,0 +1,23 @@ +import React from "react"; +import Layout from "@theme/Layout"; +import HardwareContent from "@site/src/pages/hardware-list/hardware-list.mdx"; +import "./index.scss"; + +export default function HardwareList() { + return ( + +
+
+

+ Recommended Edge Hardware for KubeEdge +

+
+
+
+ +
+
+
+ + ); +} diff --git a/src/pages/hardware-list/index.scss b/src/pages/hardware-list/index.scss new file mode 100644 index 0000000000..58a1946408 --- /dev/null +++ b/src/pages/hardware-list/index.scss @@ -0,0 +1,117 @@ +.hardware-list-page { + background-color: var(--ifm-background-color); + padding: 20px; + } + + .hardware-header { + height: 350px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background-image: url("/img/partners.jpg"); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + text-align: center; + + .hardware-title { + font-size: 40px; + font-weight: 700; + color: white; + } + } + + .hardware-content { + display: flex; + justify-content: center; + margin: 50px 0; + } + + .hardware-md { + width: 85%; + max-width: 1200px; + background-color: white; + padding: 20px; + border-radius: 8px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + } + + table { + width: 100%; + border-collapse: collapse; + border-spacing: 0; + margin: 20px 0; + } + + th, + td { + padding: 12px 15px; + text-align: left; + border: 1px solid #ddd; + } + + th { + background-color: var(--ifm-color-primary); + color: white; + text-align: center; + } + + td a { + color: var(--ifm-color-primary); + text-decoration: none; + font-weight: bold; + } + + td a:hover { + text-decoration: underline; + } + + /* 卡片样式 */ +.hardware-card { + display: flex; + align-items: center; + background: white; + border-radius: 12px; + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); + padding: 16px; + cursor: pointer; + transition: transform 0.3s ease; + + &:hover { + transform: translateY(-5px); + } + + .hardware-image { + width: 120px; + height: 120px; + object-fit: contain; + margin-right: 16px; + } + + .hardware-info { + flex: 1; + + h3 { + font-size: 18px; + margin: 0 0 8px 0; + } + + p { + font-size: 14px; + margin: 0 0 8px 0; + color: #666; + } + + a { + font-size: 14px; + color: var(--ifm-color-primary); + text-decoration: none; + font-weight: bold; + + &:hover { + text-decoration: underline; + } + } + } +} \ No newline at end of file diff --git a/src/pages/partners/partners.mdx b/src/pages/partners/partners.mdx index 143366e615..201e39ff29 100644 --- a/src/pages/partners/partners.mdx +++ b/src/pages/partners/partners.mdx @@ -3,11 +3,37 @@ title: KubeEdge Partners hide_table_of_contents: true --- -KubeEdge works with partners to create a strong, vibrant cloud native edge computing ecosystem. Here we have a list of KubeEdge Distributions, Hosted Platforms and Installers with deep experience helping enterprises successfully adopt KubeEdge. +import PartnerCard from '@site/src/components/PartnerCard'; +KubeEdge works with partners to create a strong, vibrant cloud native edge computing ecosystem. Here we have a list of KubeEdge Distributions, Hosted Platforms and Installers with deep experience helping enterprises successfully adopt KubeEdge. -| Organization/Company | Product | Description | Website | -| :------------------: | :-----------------------: | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------- | -| DaoCloud | DaoCloud Enterprise 5.0 | DaoCloud Enterprise 5.0 (DCE 5.0) is an advanced and highly scalable cloud native operating system designed to provide a consistent and dependable experience across diverse infrastructures and environments. With its support for heterogeneous clouds, edge clouds, and multicloud management, DCE 5.0 offers unparalleled flexibility. | [Dao Cloud](https://www.daocloud.io/products/standard-edition/index.html) | -| Huawei Cloud | IEF | Edge computing platform built upon KubeEdge, provides extremely lightweight, edge intelligent, and powerful in terms of computing capabilities. | [Huawei_Cloud](https://www.huaweicloud.com/product/ief.html) | -| KubeSphere | KubeSphere Enterprise 4.0 | Based on the open and extensible architecture of KubeSphere LuBan, KubeSphere Enterprise 4.0 can easily achieve upstream and downstream linkage of applications, integrate various high-quality extensions from KubeSphere Marketplace anytime, and provide seamless business capabilities and highly consistent product experience. Edge computing extension based on KubeEdge provide easier-to-use and broader coverage of edge computing capabilities, solving operational issues such as node status management and relationship tree management for users. | [Kubesphere ](https://kubesphere.co/kse/) | +
+ + + +
\ No newline at end of file diff --git a/src/pages/video-tutorials/index.js b/src/pages/video-tutorials/index.js new file mode 100644 index 0000000000..cb5dd78342 --- /dev/null +++ b/src/pages/video-tutorials/index.js @@ -0,0 +1,21 @@ +import React from 'react'; +import Layout from '@theme/Layout'; +import VideosContent from '@site/src/pages/video-tutorials/videos.mdx'; +import './index.scss'; + +export default function VideoTutorials() { + return ( + +
+
+

KubeEdge Learning Video List

+
+
+
+ +
+
+
+ + ); +} diff --git a/src/pages/video-tutorials/index.scss b/src/pages/video-tutorials/index.scss new file mode 100644 index 0000000000..8e516f871a --- /dev/null +++ b/src/pages/video-tutorials/index.scss @@ -0,0 +1,38 @@ +.video-tutorials-page { + background-color: var(--ifm-background-color); + padding: 20px; +} + +.video-header { + height: 350px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background-image: url('/img/partners.jpg'); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + text-align: center; + + .video-title { + font-size: 38px; + font-weight: 700; + color: white; + } +} + +.video-content { + display: flex; + justify-content: center; + margin: 50px 0; +} + +.video-md { + width: 85%; + max-width: 1200px; + background-color: white; + padding: 20px; + border-radius: 8px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +} diff --git a/src/pages/video-tutorials/videos.mdx b/src/pages/video-tutorials/videos.mdx new file mode 100644 index 0000000000..3f205604ba --- /dev/null +++ b/src/pages/video-tutorials/videos.mdx @@ -0,0 +1,43 @@ +--- +title: KubeEdge VideoCard +hide_table_of_contents: true +--- + +import VideoCard from '@site/src/components/VideoCard'; + +
+ Learn KubeEdge with a curated collection of high-quality community videos. + These tutorials take you step-by-step from the basics to production-ready deployment. + Topics include architecture, component design, installation, configuration, and real-world edge scenarios. +
+ +
+ + +
\ No newline at end of file diff --git a/static/img/videoicon/video1.jpg b/static/img/videoicon/video1.jpg new file mode 100644 index 0000000000..52cec86104 Binary files /dev/null and b/static/img/videoicon/video1.jpg differ diff --git a/static/img/videoicon/video2.jpg b/static/img/videoicon/video2.jpg new file mode 100644 index 0000000000..649b89c1f9 Binary files /dev/null and b/static/img/videoicon/video2.jpg differ