Modify the style and structure of the partner page.

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",

src/components/HardwareCard/index.js

@@ -0,0 +1,19 @@
+import React from "react";
+
+export default function HardwareCard({ name, image, description, link }) {
+  return (
+    <div
+      className="hardware-card"
+      onClick={() => window.open(link, "_blank")}
+    >
+      <img src={image} alt={name} className="hardware-image" />
+      <div className="hardware-info">
+        <h3>{name}</h3>
+        <p>{description}</p>
+        <a href={link} target="_blank" rel="noopener noreferrer">
+          View More
+        </a>
+      </div>
+    </div>
+  );
+}

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 (
+    <div
+      onMouseEnter={() => 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 */}
+      <h3 style={{
+        margin: '10px 0 5px 0',
+        fontSize: '32px',
+        fontWeight: '700',
+        color: '#0084FF',
+        textAlign: 'center',
+      }}>
+        {name}
+      </h3>
+
+      {/* Logo图片 */}
+      {logo && (
+        <img
+          src={logo}
+          alt={`${name} logo`}
+          style={{
+            width: '150px',
+            height: '75px',
+            objectFit: 'contain',
+            margin: '5px 0', // 上下留空
+          }}
+        />
+      )}
+
+      {/* Product */}
+      <h4 style={{
+        margin: '10px 0 0 0',
+        fontSize: '16px',
+        fontWeight: '400',
+        color: '#000000',
+        textAlign: 'center',
+      }}>
+        {product}
+      </h4>
+
+      {/* 蒙版 */}
+      {hovered && (
+        <div
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            background: 'rgba(0, 0, 0, 0.7)',
+            color: '#fff',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: '20px',
+            textAlign: 'center',
+            fontSize: '14px',
+            lineHeight: '1.8',
+            overflowY: 'auto',
+            borderRadius: '20px',
+          }}
+        >
+          {description}
+        </div>
+      )}
+    </div>
+  );
+}

src/components/VideoCard/index.js

@@ -0,0 +1,40 @@
+import React from 'react';
+
+export default function VideoCard({ title, link, image }) {
+  return (
+    <div
+      style={{
+        borderRadius: '16px',
+        overflow: 'hidden',
+        backgroundColor: '#ffffff',
+        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
+        transition: 'transform 0.3s ease',
+        cursor: 'pointer',
+      }}
+      onClick={() => window.open(link, '_blank')}
+      onMouseEnter={e => (e.currentTarget.style.transform = 'scale(1.03)')}
+      onMouseLeave={e => (e.currentTarget.style.transform = 'scale(1)')}
+    >
+      {image && (
+        <img
+          src={image}
+          alt={title}
+          style={{
+            width: '100%',
+            height: '160px',
+            objectFit: 'cover',
+            display: 'block',
+          }}
+        />
+      )}
+      <div style={{ padding: '16px' }}>
+        <h4 style={{ fontSize: '16px', fontWeight: 'bold', color: '#0078E7' }}>
+          {title}
+        </h4>
+        <p style={{ fontSize: '14px', color: '#666', marginTop: '8px' }}>
+            Click to watch
+        </p>
+      </div>
+    </div>
+  );
+}

src/components/about/index.js

@@ -6,39 +6,39 @@ import "./styles.scss";
 export default function About() {
   return (
     <SectionContainer className="aboutContainer">
-      <div className={"row"}>
-        <div className={"profile"}>
-          <img className={"portrait"} src="img/avatar.png"></img>
-          <div className={"portraitTitle"}>
-            <h3 className={"name"}>KubeEdge</h3>
-            <h3 className={"jobTitle"}>
+      <div className="about-grid">
+        {/* 左边部分：标题 + 描述 */}
+        <div className="about-left">
+          <div className="about-title">
+            <h3 className="name">KubeEdge</h3>
+            <h3 className="jobTitle">
+              <Translate>Kubernetes Native Edge Computing Framework</Translate>
+            </h3>
+          </div>
+          <div className="description">
+            <p>
               <Translate>
-                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.
               </Translate>
-            </h3>
+            </p>
+            <p>
+              <Translate>
+                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.
+              </Translate>
+            </p>
           </div>
         </div>
-        <div className={"description"}>
-          <p>
-            <Translate>
-              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!
-            </Translate>
-          </p>
-          <p>
-            <Translate>
-              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.
-            </Translate>
-          </p>
+
+        {/* 右边部分：头像图片 */}
+        <div className="about-right">
+          <img className="portrait" src="img/avatar.png" alt="KubeEdge Logo" />
         </div>
       </div>
     </SectionContainer>

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;
+    }
   }
-}
+}