feature: support Business Adopters module

Signed-off-by: samzong.lu <samzong.lu@gmail.com>
2023-12-13 15:18:09 +08:00 · 2023-12-13 15:18:09 +08:00 · c974b38249
parent c9aaa87d3c
commit c974b38249
9 changed files with 775 additions and 0 deletions
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@ -126,6 +126,12 @@ module.exports = {
          label: "Adopters",
          position: "left",
        },
+        {
+          label: 'Partners',
+          activeBasePath: 'partners',
+          to: '/partners',
+          position: 'left',
+        },
        {
          type: "localeDropdown",
          position: "right",
--- a/i18n/zh/code.json
+++ b/i18n/zh/code.json
@ -193,5 +193,11 @@
  "theme.SearchBar.label": {
    "message": "查询",
    "description": "The ARIA label and placeholder for search button"
+  },
+  "partners.huawei.description": {
+    "message": "构建无处不在的云原生服务，通过智能流量分配跨区域和跨云运行应用程序。"
+  },
+  "partners.daocloud.description": {
+    "message": "使用 Karmada 构建更具弹性的混合多云平台。"
  }
 }
--- a/i18n/zh/docusaurus-plugin-content-pages/partners.tsx
+++ b/i18n/zh/docusaurus-plugin-content-pages/partners.tsx
@ -0,0 +1,67 @@
+import Layout from "@theme/Layout";
+import styles from "../../../src/pages/styles.module.css";
+import clsx from "clsx";
+import React from "react";
+import Translate, { translate } from "@docusaurus/Translate";
+import { Typography } from "@douyinfe/semi-ui";
+import PartnersListData from "../../../src/data/partnersData";
+
+export default function Partners() {
+  const { Text } = Typography;
+
+  const PartnersList = PartnersListData;
+
+  return (
+    <Layout>
+      <div className={styles.background}>
+        <div className={clsx(styles.container, "container")}>
+          <div className={clsx(styles.rowHeader, "row")}>
+            <div className="col col--12">
+              <h1>
+                <Translate id="partners.title">成为 Karmada 合作伙伴</Translate>
+              </h1>
+            </div>
+            <div className="col col--12">
+              <p className={styles.font}>
+                <Translate id="partners.description1">
+                  欢迎您的加入，期待您的到来。如果需要了解更多信息，请在 Karmada
+                  存储库中创建 Issue 跟进。
+                </Translate>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className={clsx(styles.containerPartnersList, "container")}>
+        <div className="row" style={{ marginBottom: "40px" }}>
+          {PartnersList.map(({ image, title, webURL, description }, index) => (
+            <div
+              className={clsx(styles.colPartnersList, "col col--3")}
+              key={index}
+            >
+              <div className="card shadow--md">
+                <div
+                  className={clsx(styles.cardImagePartnersList, "card__image")}
+                >
+                  <a href={webURL} target="_blank">
+                    <img src={image} className={styles.cardImage} />
+                  </a>
+                </div>
+                <div className="card__body">
+                  <div className={styles.cardBodyPartnersList}>
+                    <h4 className={styles.cardBodyH4PartnersList}>
+                      <a href={webURL} target="_blank">
+                        {title}
+                      </a>
+                    </h4>
+                  </div>
+                  <p className={styles.cardBodyFoot}>{description}</p>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </Layout>
+  );
+}
--- a/i18n/zh/docusaurus-theme-classic/navbar.json
+++ b/i18n/zh/docusaurus-theme-classic/navbar.json
@ -14,5 +14,9 @@
  "item.label.Adopters": {
    "message": "采用者",
    "description": "Navbar item with label Adopters"
+  },
+  "item.label.Partners": {
+    "message": "合作伙伴",
+    "description": "Navbar item with label Partners"
  }
 }
--- a/package-lock.json
+++ b/package-lock.json
@ -14,6 +14,7 @@
        "@docusaurus/plugin-content-pages": "^2.4.3",
        "@docusaurus/plugin-sitemap": "^2.4.3",
        "@docusaurus/preset-classic": "2.4.3",
+        "@douyinfe/semi-ui": "^2.48.0",
        "asciinema-player": "^3.6.3",
        "clsx": "^1.2.1",
        "react": "^17.0.2",
@ -2072,6 +2073,55 @@
        "node": ">=10.0.0"
      }
    },
+    "node_modules/@dnd-kit/accessibility": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/@dnd-kit/accessibility/-/accessibility-3.1.0.tgz",
+      "integrity": "sha512-ea7IkhKvlJUv9iSHJOnxinBcoOI3ppGnnL+VDJ75O45Nss6HtZd8IdN8touXPDtASfeI2T2LImb8VOZcL47wjQ==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/core": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmmirror.com/@dnd-kit/core/-/core-6.1.0.tgz",
+      "integrity": "sha512-J3cQBClB4TVxwGo3KEjssGEXNJqGVWx17aRTZ1ob0FliR5IjYgTxl5YJbKTzA6IzrtelotH19v6y7uoIRUZPSg==",
+      "dependencies": {
+        "@dnd-kit/accessibility": "^3.1.0",
+        "@dnd-kit/utilities": "^3.2.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/sortable": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmmirror.com/@dnd-kit/sortable/-/sortable-7.0.2.tgz",
+      "integrity": "sha512-wDkBHHf9iCi1veM834Gbk1429bd4lHX4RpAwT0y2cHLf246GAvU2sVw/oxWNpPKQNQRQaeGXhAVgrOl1IT+iyA==",
+      "dependencies": {
+        "@dnd-kit/utilities": "^3.2.0",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@dnd-kit/core": "^6.0.7",
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/utilities": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmmirror.com/@dnd-kit/utilities/-/utilities-3.2.2.tgz",
+      "integrity": "sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
    "node_modules/@docsearch/css": {
      "version": "3.5.2",
      "resolved": "https://registry.npmjs.org/@docsearch/css/-/css-3.5.2.tgz",
@ -2688,6 +2738,111 @@
        "node": ">=16.14"
      }
    },
+    "node_modules/@douyinfe/semi-animation": {
+      "version": "2.48.0",
+      "resolved": "https://registry.npmmirror.com/@douyinfe/semi-animation/-/semi-animation-2.48.0.tgz",
+      "integrity": "sha512-+jQX4o0kcHOx9+RQFUngjHec6xqtu03vW1LnjOiBkdUvDsi/cNQSU1zsIQYnR0WuvEw1uhHByhKQK89BPsAS7g==",
+      "dependencies": {
+        "bezier-easing": "^2.1.0"
+      }
+    },
+    "node_modules/@douyinfe/semi-animation-react": {
+      "version": "2.48.0",
+      "resolved": "https://registry.npmmirror.com/@douyinfe/semi-animation-react/-/semi-animation-react-2.48.0.tgz",
+      "integrity": "sha512-R7OhS784jAh1IeSTA2S9NBnVssqcSy74cjTzc9f6wS4i4QQlVOh5VRdmzmdnwetkOLAwrGt66jH7XShcmfUSpw==",
+      "dependencies": {
+        "@douyinfe/semi-animation": "2.48.0",
+        "@douyinfe/semi-animation-styled": "2.48.0",
+        "classnames": "^2.2.6"
+      }
+    },
+    "node_modules/@douyinfe/semi-animation-styled": {
+      "version": "2.48.0",
+      "resolved": "https://registry.npmmirror.com/@douyinfe/semi-animation-styled/-/semi-animation-styled-2.48.0.tgz",
+      "integrity": "sha512-pN2EP3GnarpdvRz6DqgXgW1yYsybsjVDoCyxnaQyo22qUNJNPf6PtXb7npUVSEuYR5cTplq15gSD2IPhnbzRgA=="
+    },
+    "node_modules/@douyinfe/semi-foundation": {
+      "version": "2.48.0",
+      "resolved": "https://registry.npmmirror.com/@douyinfe/semi-foundation/-/semi-foundation-2.48.0.tgz",
+      "integrity": "sha512-NSdU0A4oN5k/ZfGF8Wx1F9d9p/s2i1yr0tfpuzXXR8iRaEtRp7wTZLPoZYdpEVP8D+zUhqL3a9Kxn3SCMsV9kg==",
+      "dependencies": {
+        "@douyinfe/semi-animation": "2.48.0",
+        "async-validator": "^3.5.0",
+        "classnames": "^2.2.6",
+        "date-fns": "^2.29.3",
+        "date-fns-tz": "^1.3.8",
+        "lodash": "^4.17.21",
+        "memoize-one": "^5.2.1",
+        "scroll-into-view-if-needed": "^2.2.24"
+      }
+    },
+    "node_modules/@douyinfe/semi-icons": {
+      "version": "2.48.0",
+      "resolved": "https://registry.npmmirror.com/@douyinfe/semi-icons/-/semi-icons-2.48.0.tgz",
+      "integrity": "sha512-xWgyQHMqBrFw4ImZXq/HpPONrpNaZ4RnDp2+10FSJzjc9QRNsgdIdx7+FB0wjCev/708DcWZk0a6sn6oQ/8hRA==",
+      "dependencies": {
+        "classnames": "^2.2.6"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@douyinfe/semi-illustrations": {
+      "version": "2.48.0",
+      "resolved": "https://registry.npmmirror.com/@douyinfe/semi-illustrations/-/semi-illustrations-2.48.0.tgz",
+      "integrity": "sha512-ANzRlUMdAcWkQ7fvseca8G7BrPq0TTigEsq2hUFBlAzGnAntiWUp3T+4L1jOEWAWxcTxsJxxTT0FizKMdkhEmQ==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@douyinfe/semi-theme-default": {
+      "version": "2.48.0",
+      "resolved": "https://registry.npmmirror.com/@douyinfe/semi-theme-default/-/semi-theme-default-2.48.0.tgz",
+      "integrity": "sha512-+LNh1S7yybLb1O+YEDadSCEzSXvr8o+lHmyWfCJQs1BiNJWmrQPASezt/OW20aXZPlB9ViaETQ048bt4mWUP1g==",
+      "dependencies": {
+        "glob": "^7.1.6"
+      }
+    },
+    "node_modules/@douyinfe/semi-ui": {
+      "version": "2.48.0",
+      "resolved": "https://registry.npmmirror.com/@douyinfe/semi-ui/-/semi-ui-2.48.0.tgz",
+      "integrity": "sha512-n3PZmu9ijooSSCgMDRJdTuMoSZxhB2TGr/ETzvxh7A2bhM+YyPR/EteHK/1g4zwXtrUFpd1sPV5Gx97SJLF3pQ==",
+      "dependencies": {
+        "@dnd-kit/core": "^6.0.8",
+        "@dnd-kit/sortable": "^7.0.2",
+        "@dnd-kit/utilities": "^3.2.1",
+        "@douyinfe/semi-animation": "2.48.0",
+        "@douyinfe/semi-animation-react": "2.48.0",
+        "@douyinfe/semi-foundation": "2.48.0",
+        "@douyinfe/semi-icons": "2.48.0",
+        "@douyinfe/semi-illustrations": "2.48.0",
+        "@douyinfe/semi-theme-default": "2.48.0",
+        "async-validator": "^3.5.0",
+        "classnames": "^2.2.6",
+        "copy-text-to-clipboard": "^2.1.1",
+        "date-fns": "^2.29.3",
+        "date-fns-tz": "^1.3.8",
+        "lodash": "^4.17.21",
+        "prop-types": "^15.7.2",
+        "react-resizable": "^3.0.5",
+        "react-window": "^1.8.2",
+        "resize-observer-polyfill": "^1.5.1",
+        "scroll-into-view-if-needed": "^2.2.24",
+        "utility-types": "^3.10.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.0.0",
+        "react-dom": ">=16.0.0"
+      }
+    },
+    "node_modules/@douyinfe/semi-ui/node_modules/copy-text-to-clipboard": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmmirror.com/copy-text-to-clipboard/-/copy-text-to-clipboard-2.2.0.tgz",
+      "integrity": "sha512-WRvoIdnTs1rgPMkgA2pUOa/M4Enh2uzCwdKsOMYNAJiz/4ZvEJgmbF4OmninPmlFdAWisfeh0tH+Cpf7ni3RqQ==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/@hapi/hoek": {
      "version": "9.3.0",
      "resolved": "https://registry.npmmirror.com/@hapi/hoek/-/hoek-9.3.0.tgz",
@ -3906,6 +4061,11 @@
        "solid-js": "^1.3.0"
      }
    },
+    "node_modules/async-validator": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-3.5.2.tgz",
+      "integrity": "sha512-8eLCg00W9pIRZSB781UUX/H6Oskmm8xloZfr09lz5bikRpBVDlJ3hRVuxxP1SxcwsEYfJ4IU8Q19Y8/893r3rQ=="
+    },
    "node_modules/at-least-node": {
      "version": "1.0.0",
      "resolved": "https://registry.npmmirror.com/at-least-node/-/at-least-node-1.0.0.tgz",
@ -4090,6 +4250,11 @@
      "resolved": "https://registry.npmmirror.com/batch/-/batch-0.6.1.tgz",
      "integrity": "sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw=="
    },
+    "node_modules/bezier-easing": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/bezier-easing/-/bezier-easing-2.1.0.tgz",
+      "integrity": "sha512-gbIqZ/eslnUFC1tjEvtz0sgx+xTK20wDnYMIA27VA04R7w6xxXQPZDbibjA9DTWZRA2CXtwHykkVzlCaAJAZig=="
+    },
    "node_modules/big.js": {
      "version": "5.2.2",
      "resolved": "https://registry.npmmirror.com/big.js/-/big.js-5.2.2.tgz",
@ -4464,6 +4629,11 @@
        "node": ">=8"
      }
    },
+    "node_modules/classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmmirror.com/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+    },
    "node_modules/clean-css": {
      "version": "5.3.2",
      "resolved": "https://registry.npmmirror.com/clean-css/-/clean-css-5.3.2.tgz",
@ -4671,6 +4841,11 @@
      "resolved": "https://registry.npmmirror.com/safe-buffer/-/safe-buffer-5.1.2.tgz",
      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
    },
+    "node_modules/compute-scroll-into-view": {
+      "version": "1.0.20",
+      "resolved": "https://registry.npmmirror.com/compute-scroll-into-view/-/compute-scroll-into-view-1.0.20.tgz",
+      "integrity": "sha512-UCB0ioiyj8CRjtrvaceBLqqhZCVP+1B8+NWQhmdsm0VXOJtobBCf1dBQmebCCo34qZmUwZfIH2MZLqNHazrfjg=="
+    },
    "node_modules/concat-map": {
      "version": "0.0.1",
      "resolved": "https://registry.npmmirror.com/concat-map/-/concat-map-0.0.1.tgz",
@ -5172,6 +5347,25 @@
      "resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.1.2.tgz",
      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
    },
+    "node_modules/date-fns": {
+      "version": "2.30.0",
+      "resolved": "https://registry.npmmirror.com/date-fns/-/date-fns-2.30.0.tgz",
+      "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0"
+      },
+      "engines": {
+        "node": ">=0.11"
+      }
+    },
+    "node_modules/date-fns-tz": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmmirror.com/date-fns-tz/-/date-fns-tz-1.3.8.tgz",
+      "integrity": "sha512-qwNXUFtMHTTU6CFSFjoJ80W8Fzzp24LntbjFFBgL/faqds4e5mo9mftoRLgr3Vi1trISsg4awSpYVsOQCRnapQ==",
+      "peerDependencies": {
+        "date-fns": ">=2.0.0"
+      }
+    },
    "node_modules/debug": {
      "version": "4.3.4",
      "resolved": "https://registry.npmmirror.com/debug/-/debug-4.3.4.tgz",
@ -7623,6 +7817,11 @@
        "node": ">= 4.0.0"
      }
    },
+    "node_modules/memoize-one": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmmirror.com/memoize-one/-/memoize-one-5.2.1.tgz",
+      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
+    },
    "node_modules/merge-descriptors": {
      "version": "1.0.1",
      "resolved": "https://registry.npmmirror.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
@ -9325,6 +9524,31 @@
        "webpack": ">=4.41.1 || 5.x"
      }
    },
+    "node_modules/react-resizable": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmmirror.com/react-resizable/-/react-resizable-3.0.5.tgz",
+      "integrity": "sha512-vKpeHhI5OZvYn82kXOs1bC8aOXktGU5AmKAgaZS4F5JPburCtbmDPqE7Pzp+1kN4+Wb81LlF33VpGwWwtXem+w==",
+      "dependencies": {
+        "prop-types": "15.x",
+        "react-draggable": "^4.0.3"
+      },
+      "peerDependencies": {
+        "react": ">= 16.3"
+      }
+    },
+    "node_modules/react-resizable/node_modules/react-draggable": {
+      "version": "4.4.6",
+      "resolved": "https://registry.npmmirror.com/react-draggable/-/react-draggable-4.4.6.tgz",
+      "integrity": "sha512-LtY5Xw1zTPqHkVmtM3X8MUOxNDOUhv/khTgBgrUvwaS064bwVvxT+q5El0uUFNx5IEPKXuRejr7UqLwBIg5pdw==",
+      "dependencies": {
+        "clsx": "^1.1.1",
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "react": ">= 16.3.0",
+        "react-dom": ">= 16.3.0"
+      }
+    },
    "node_modules/react-router": {
      "version": "5.3.4",
      "resolved": "https://registry.npmmirror.com/react-router/-/react-router-5.3.4.tgz",
@ -9389,6 +9613,22 @@
        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
      }
    },
+    "node_modules/react-window": {
+      "version": "1.8.10",
+      "resolved": "https://registry.npmmirror.com/react-window/-/react-window-1.8.10.tgz",
+      "integrity": "sha512-Y0Cx+dnU6NLa5/EvoHukUD0BklJ8qITCtVEPY1C/nL8wwoZ0b5aEw8Ff1dOVHw7fCzMt55XfJDd8S8W8LCaUCg==",
+      "dependencies": {
+        "@babel/runtime": "^7.0.0",
+        "memoize-one": ">=3.1.1 <6"
+      },
+      "engines": {
+        "node": ">8.0.0"
+      },
+      "peerDependencies": {
+        "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
    "node_modules/readable-stream": {
      "version": "3.6.2",
      "resolved": "https://registry.npmmirror.com/readable-stream/-/readable-stream-3.6.2.tgz",
@ -9790,6 +10030,11 @@
      "resolved": "https://registry.npmmirror.com/requires-port/-/requires-port-1.0.0.tgz",
      "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
    },
+    "node_modules/resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmmirror.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
    "node_modules/resolve": {
      "version": "1.22.4",
      "resolved": "https://registry.npmmirror.com/resolve/-/resolve-1.22.4.tgz",
@ -9981,6 +10226,14 @@
        "node": ">= 8.9.0"
      }
    },
+    "node_modules/scroll-into-view-if-needed": {
+      "version": "2.2.31",
+      "resolved": "https://registry.npmmirror.com/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.31.tgz",
+      "integrity": "sha512-dGCXy99wZQivjmjIqihaBQNjryrz5rueJY7eHfTdyWEiR4ttYpsajb14rn9s5d4DY4EcY6+4+U/maARBXJedkA==",
+      "dependencies": {
+        "compute-scroll-into-view": "^1.0.20"
+      }
+    },
    "node_modules/search-insights": {
      "version": "2.8.2",
      "resolved": "https://registry.npmjs.org/search-insights/-/search-insights-2.8.2.tgz",
@ -13494,6 +13747,41 @@
      "resolved": "https://registry.npmmirror.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
      "integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw=="
    },
+    "@dnd-kit/accessibility": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/@dnd-kit/accessibility/-/accessibility-3.1.0.tgz",
+      "integrity": "sha512-ea7IkhKvlJUv9iSHJOnxinBcoOI3ppGnnL+VDJ75O45Nss6HtZd8IdN8touXPDtASfeI2T2LImb8VOZcL47wjQ==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
+    "@dnd-kit/core": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmmirror.com/@dnd-kit/core/-/core-6.1.0.tgz",
+      "integrity": "sha512-J3cQBClB4TVxwGo3KEjssGEXNJqGVWx17aRTZ1ob0FliR5IjYgTxl5YJbKTzA6IzrtelotH19v6y7uoIRUZPSg==",
+      "requires": {
+        "@dnd-kit/accessibility": "^3.1.0",
+        "@dnd-kit/utilities": "^3.2.2",
+        "tslib": "^2.0.0"
+      }
+    },
+    "@dnd-kit/sortable": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmmirror.com/@dnd-kit/sortable/-/sortable-7.0.2.tgz",
+      "integrity": "sha512-wDkBHHf9iCi1veM834Gbk1429bd4lHX4RpAwT0y2cHLf246GAvU2sVw/oxWNpPKQNQRQaeGXhAVgrOl1IT+iyA==",
+      "requires": {
+        "@dnd-kit/utilities": "^3.2.0",
+        "tslib": "^2.0.0"
+      }
+    },
+    "@dnd-kit/utilities": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmmirror.com/@dnd-kit/utilities/-/utilities-3.2.2.tgz",
+      "integrity": "sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
    "@docsearch/css": {
      "version": "3.5.2",
      "resolved": "https://registry.npmjs.org/@docsearch/css/-/css-3.5.2.tgz",
@ -13944,6 +14232,101 @@
        "tslib": "^2.4.0"
      }
    },
+    "@douyinfe/semi-animation": {
+      "version": "2.48.0",
+      "resolved": "https://registry.npmmirror.com/@douyinfe/semi-animation/-/semi-animation-2.48.0.tgz",
+      "integrity": "sha512-+jQX4o0kcHOx9+RQFUngjHec6xqtu03vW1LnjOiBkdUvDsi/cNQSU1zsIQYnR0WuvEw1uhHByhKQK89BPsAS7g==",
+      "requires": {
+        "bezier-easing": "^2.1.0"
+      }
+    },
+    "@douyinfe/semi-animation-react": {
+      "version": "2.48.0",
+      "resolved": "https://registry.npmmirror.com/@douyinfe/semi-animation-react/-/semi-animation-react-2.48.0.tgz",
+      "integrity": "sha512-R7OhS784jAh1IeSTA2S9NBnVssqcSy74cjTzc9f6wS4i4QQlVOh5VRdmzmdnwetkOLAwrGt66jH7XShcmfUSpw==",
+      "requires": {
+        "@douyinfe/semi-animation": "2.48.0",
+        "@douyinfe/semi-animation-styled": "2.48.0",
+        "classnames": "^2.2.6"
+      }
+    },
+    "@douyinfe/semi-animation-styled": {
+      "version": "2.48.0",
+      "resolved": "https://registry.npmmirror.com/@douyinfe/semi-animation-styled/-/semi-animation-styled-2.48.0.tgz",
+      "integrity": "sha512-pN2EP3GnarpdvRz6DqgXgW1yYsybsjVDoCyxnaQyo22qUNJNPf6PtXb7npUVSEuYR5cTplq15gSD2IPhnbzRgA=="
+    },
+    "@douyinfe/semi-foundation": {
+      "version": "2.48.0",
+      "resolved": "https://registry.npmmirror.com/@douyinfe/semi-foundation/-/semi-foundation-2.48.0.tgz",
+      "integrity": "sha512-NSdU0A4oN5k/ZfGF8Wx1F9d9p/s2i1yr0tfpuzXXR8iRaEtRp7wTZLPoZYdpEVP8D+zUhqL3a9Kxn3SCMsV9kg==",
+      "requires": {
+        "@douyinfe/semi-animation": "2.48.0",
+        "async-validator": "^3.5.0",
+        "classnames": "^2.2.6",
+        "date-fns": "^2.29.3",
+        "date-fns-tz": "^1.3.8",
+        "lodash": "^4.17.21",
+        "memoize-one": "^5.2.1",
+        "scroll-into-view-if-needed": "^2.2.24"
+      }
+    },
+    "@douyinfe/semi-icons": {
+      "version": "2.48.0",
+      "resolved": "https://registry.npmmirror.com/@douyinfe/semi-icons/-/semi-icons-2.48.0.tgz",
+      "integrity": "sha512-xWgyQHMqBrFw4ImZXq/HpPONrpNaZ4RnDp2+10FSJzjc9QRNsgdIdx7+FB0wjCev/708DcWZk0a6sn6oQ/8hRA==",
+      "requires": {
+        "classnames": "^2.2.6"
+      }
+    },
+    "@douyinfe/semi-illustrations": {
+      "version": "2.48.0",
+      "resolved": "https://registry.npmmirror.com/@douyinfe/semi-illustrations/-/semi-illustrations-2.48.0.tgz",
+      "integrity": "sha512-ANzRlUMdAcWkQ7fvseca8G7BrPq0TTigEsq2hUFBlAzGnAntiWUp3T+4L1jOEWAWxcTxsJxxTT0FizKMdkhEmQ==",
+      "requires": {}
+    },
+    "@douyinfe/semi-theme-default": {
+      "version": "2.48.0",
+      "resolved": "https://registry.npmmirror.com/@douyinfe/semi-theme-default/-/semi-theme-default-2.48.0.tgz",
+      "integrity": "sha512-+LNh1S7yybLb1O+YEDadSCEzSXvr8o+lHmyWfCJQs1BiNJWmrQPASezt/OW20aXZPlB9ViaETQ048bt4mWUP1g==",
+      "requires": {
+        "glob": "^7.1.6"
+      }
+    },
+    "@douyinfe/semi-ui": {
+      "version": "2.48.0",
+      "resolved": "https://registry.npmmirror.com/@douyinfe/semi-ui/-/semi-ui-2.48.0.tgz",
+      "integrity": "sha512-n3PZmu9ijooSSCgMDRJdTuMoSZxhB2TGr/ETzvxh7A2bhM+YyPR/EteHK/1g4zwXtrUFpd1sPV5Gx97SJLF3pQ==",
+      "requires": {
+        "@dnd-kit/core": "^6.0.8",
+        "@dnd-kit/sortable": "^7.0.2",
+        "@dnd-kit/utilities": "^3.2.1",
+        "@douyinfe/semi-animation": "2.48.0",
+        "@douyinfe/semi-animation-react": "2.48.0",
+        "@douyinfe/semi-foundation": "2.48.0",
+        "@douyinfe/semi-icons": "2.48.0",
+        "@douyinfe/semi-illustrations": "2.48.0",
+        "@douyinfe/semi-theme-default": "2.48.0",
+        "async-validator": "^3.5.0",
+        "classnames": "^2.2.6",
+        "copy-text-to-clipboard": "^2.1.1",
+        "date-fns": "^2.29.3",
+        "date-fns-tz": "^1.3.8",
+        "lodash": "^4.17.21",
+        "prop-types": "^15.7.2",
+        "react-resizable": "^3.0.5",
+        "react-window": "^1.8.2",
+        "resize-observer-polyfill": "^1.5.1",
+        "scroll-into-view-if-needed": "^2.2.24",
+        "utility-types": "^3.10.0"
+      },
+      "dependencies": {
+        "copy-text-to-clipboard": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmmirror.com/copy-text-to-clipboard/-/copy-text-to-clipboard-2.2.0.tgz",
+          "integrity": "sha512-WRvoIdnTs1rgPMkgA2pUOa/M4Enh2uzCwdKsOMYNAJiz/4ZvEJgmbF4OmninPmlFdAWisfeh0tH+Cpf7ni3RqQ=="
+        }
+      }
+    },
    "@hapi/hoek": {
      "version": "9.3.0",
      "resolved": "https://registry.npmmirror.com/@hapi/hoek/-/hoek-9.3.0.tgz",
@ -14975,6 +15358,11 @@
        "solid-js": "^1.3.0"
      }
    },
+    "async-validator": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-3.5.2.tgz",
+      "integrity": "sha512-8eLCg00W9pIRZSB781UUX/H6Oskmm8xloZfr09lz5bikRpBVDlJ3hRVuxxP1SxcwsEYfJ4IU8Q19Y8/893r3rQ=="
+    },
    "at-least-node": {
      "version": "1.0.0",
      "resolved": "https://registry.npmmirror.com/at-least-node/-/at-least-node-1.0.0.tgz",
@ -15105,6 +15493,11 @@
      "resolved": "https://registry.npmmirror.com/batch/-/batch-0.6.1.tgz",
      "integrity": "sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw=="
    },
+    "bezier-easing": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/bezier-easing/-/bezier-easing-2.1.0.tgz",
+      "integrity": "sha512-gbIqZ/eslnUFC1tjEvtz0sgx+xTK20wDnYMIA27VA04R7w6xxXQPZDbibjA9DTWZRA2CXtwHykkVzlCaAJAZig=="
+    },
    "big.js": {
      "version": "5.2.2",
      "resolved": "https://registry.npmmirror.com/big.js/-/big.js-5.2.2.tgz",
@ -15387,6 +15780,11 @@
      "resolved": "https://registry.npmmirror.com/ci-info/-/ci-info-3.8.0.tgz",
      "integrity": "sha512-eXTggHWSooYhq49F2opQhuHWgzucfF2YgODK4e1566GQs5BIfP30B0oenwBJHfWxAs2fyPB1s7Mg949zLf61Yw=="
    },
+    "classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmmirror.com/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+    },
    "clean-css": {
      "version": "5.3.2",
      "resolved": "https://registry.npmmirror.com/clean-css/-/clean-css-5.3.2.tgz",
@ -15551,6 +15949,11 @@
        }
      }
    },
+    "compute-scroll-into-view": {
+      "version": "1.0.20",
+      "resolved": "https://registry.npmmirror.com/compute-scroll-into-view/-/compute-scroll-into-view-1.0.20.tgz",
+      "integrity": "sha512-UCB0ioiyj8CRjtrvaceBLqqhZCVP+1B8+NWQhmdsm0VXOJtobBCf1dBQmebCCo34qZmUwZfIH2MZLqNHazrfjg=="
+    },
    "concat-map": {
      "version": "0.0.1",
      "resolved": "https://registry.npmmirror.com/concat-map/-/concat-map-0.0.1.tgz",
@ -15922,6 +16325,20 @@
      "resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.1.2.tgz",
      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
    },
+    "date-fns": {
+      "version": "2.30.0",
+      "resolved": "https://registry.npmmirror.com/date-fns/-/date-fns-2.30.0.tgz",
+      "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+      "requires": {
+        "@babel/runtime": "^7.21.0"
+      }
+    },
+    "date-fns-tz": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmmirror.com/date-fns-tz/-/date-fns-tz-1.3.8.tgz",
+      "integrity": "sha512-qwNXUFtMHTTU6CFSFjoJ80W8Fzzp24LntbjFFBgL/faqds4e5mo9mftoRLgr3Vi1trISsg4awSpYVsOQCRnapQ==",
+      "requires": {}
+    },
    "debug": {
      "version": "4.3.4",
      "resolved": "https://registry.npmmirror.com/debug/-/debug-4.3.4.tgz",
@ -17804,6 +18221,11 @@
        "fs-monkey": "^1.0.4"
      }
    },
+    "memoize-one": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmmirror.com/memoize-one/-/memoize-one-5.2.1.tgz",
+      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
+    },
    "merge-descriptors": {
      "version": "1.0.1",
      "resolved": "https://registry.npmmirror.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
@ -19032,6 +19454,26 @@
        "@babel/runtime": "^7.10.3"
      }
    },
+    "react-resizable": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmmirror.com/react-resizable/-/react-resizable-3.0.5.tgz",
+      "integrity": "sha512-vKpeHhI5OZvYn82kXOs1bC8aOXktGU5AmKAgaZS4F5JPburCtbmDPqE7Pzp+1kN4+Wb81LlF33VpGwWwtXem+w==",
+      "requires": {
+        "prop-types": "15.x",
+        "react-draggable": "^4.0.3"
+      },
+      "dependencies": {
+        "react-draggable": {
+          "version": "4.4.6",
+          "resolved": "https://registry.npmmirror.com/react-draggable/-/react-draggable-4.4.6.tgz",
+          "integrity": "sha512-LtY5Xw1zTPqHkVmtM3X8MUOxNDOUhv/khTgBgrUvwaS064bwVvxT+q5El0uUFNx5IEPKXuRejr7UqLwBIg5pdw==",
+          "requires": {
+            "clsx": "^1.1.1",
+            "prop-types": "^15.8.1"
+          }
+        }
+      }
+    },
    "react-router": {
      "version": "5.3.4",
      "resolved": "https://registry.npmmirror.com/react-router/-/react-router-5.3.4.tgz",
@ -19080,6 +19522,15 @@
        "use-latest": "^1.2.1"
      }
    },
+    "react-window": {
+      "version": "1.8.10",
+      "resolved": "https://registry.npmmirror.com/react-window/-/react-window-1.8.10.tgz",
+      "integrity": "sha512-Y0Cx+dnU6NLa5/EvoHukUD0BklJ8qITCtVEPY1C/nL8wwoZ0b5aEw8Ff1dOVHw7fCzMt55XfJDd8S8W8LCaUCg==",
+      "requires": {
+        "@babel/runtime": "^7.0.0",
+        "memoize-one": ">=3.1.1 <6"
+      }
+    },
    "readable-stream": {
      "version": "3.6.2",
      "resolved": "https://registry.npmmirror.com/readable-stream/-/readable-stream-3.6.2.tgz",
@ -19406,6 +19857,11 @@
      "resolved": "https://registry.npmmirror.com/requires-port/-/requires-port-1.0.0.tgz",
      "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
    },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmmirror.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
    "resolve": {
      "version": "1.22.4",
      "resolved": "https://registry.npmmirror.com/resolve/-/resolve-1.22.4.tgz",
@ -19553,6 +20009,14 @@
        "ajv-keywords": "^3.5.2"
      }
    },
+    "scroll-into-view-if-needed": {
+      "version": "2.2.31",
+      "resolved": "https://registry.npmmirror.com/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.31.tgz",
+      "integrity": "sha512-dGCXy99wZQivjmjIqihaBQNjryrz5rueJY7eHfTdyWEiR4ttYpsajb14rn9s5d4DY4EcY6+4+U/maARBXJedkA==",
+      "requires": {
+        "compute-scroll-into-view": "^1.0.20"
+      }
+    },
    "search-insights": {
      "version": "2.8.2",
      "resolved": "https://registry.npmjs.org/search-insights/-/search-insights-2.8.2.tgz",
--- a/package.json
+++ b/package.json
@ -20,6 +20,7 @@
    "@docusaurus/plugin-content-pages": "^2.4.3",
    "@docusaurus/plugin-sitemap": "^2.4.3",
    "@docusaurus/preset-classic": "2.4.3",
+    "@douyinfe/semi-ui": "^2.48.0",
    "asciinema-player": "^3.6.3",
    "clsx": "^1.2.1",
    "react": "^17.0.2",
--- a/src/data/partnersData.tsx
+++ b/src/data/partnersData.tsx
@ -0,0 +1,33 @@
+import Translate from "@docusaurus/Translate";
+import React from "react";
+
+import huawei from "../../static/img/supporters/huawei.png";
+import daocloud from "../../static/img/supporters/DaoCloud.png";
+
+const PartnersList = [
+  {
+    image: huawei,
+    title: "Huawei",
+    webURL: "https://www.huaweicloud.com/intl/en-us/",
+    description: (
+      <Translate id="partners.huawei.description">
+        Huawei Cloud is a leading cloud service provider in China and Asia
+        Pacific.
+      </Translate>
+    ),
+  },
+  {
+    image: daocloud,
+    title: "DaoCloud",
+    webURL: "https://www.daocloud.io/en/",
+    description: (
+      <Translate id="partners.daocloud.description">
+        Huawei Cloud is a leading cloud service provider in China and Asia
+        Pacific.
+      </Translate>
+    ),
+  },
+  // Add more partners information...
+];
+
+export default PartnersList;
--- a/src/pages/partners.tsx
+++ b/src/pages/partners.tsx
@ -0,0 +1,69 @@
+import Layout from "@theme/Layout";
+import styles from "./styles.module.css";
+import clsx from "clsx";
+import React from "react";
+import Translate, { translate } from "@docusaurus/Translate";
+import { Typography } from "@douyinfe/semi-ui";
+import PartnersListData from "../data/partnersData";
+
+export default function Partners() {
+  const { Text } = Typography;
+
+  const PartnersList = PartnersListData;
+
+  return (
+    <Layout>
+      <div className={styles.background}>
+        <div className={clsx(styles.container, "container")}>
+          <div className={clsx(styles.rowHeader, "row")}>
+            <div className="col col--12">
+              <h1>
+                <Translate id="partners.title">
+                  Become a Karmada Partner
+                </Translate>
+              </h1>
+            </div>
+            <div className="col col--12">
+              <p className={styles.font}>
+                <Translate id="partners.description1">
+                  Welcome to join us and look forward to your arrival. For more
+                  information, Create an issue in the Karmada repository.
+                </Translate>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className={clsx(styles.containerPartnersList, "container")}>
+        <div className="row" style={{ marginBottom: "40px" }}>
+          {PartnersList.map(({ image, title, webURL, description }, index) => (
+            <div
+              className={clsx(styles.colPartnersList, "col col--3")}
+              key={index}
+            >
+              <div className="card shadow--md">
+                <div
+                  className={clsx(styles.cardImagePartnersList, "card__image")}
+                >
+                  <a href={webURL} target="_blank">
+                    <img src={image} className={styles.cardImage} />
+                  </a>
+                </div>
+                <div className="card__body">
+                  <div className={styles.cardBodyPartnersList}>
+                    <h4 className={styles.cardBodyH4PartnersList}>
+                      <a href={webURL} target="_blank">
+                        {title}
+                      </a>
+                    </h4>
+                  </div>
+                  <p className={styles.cardBodyFoot}>{description}</p>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </Layout>
+  );
+}
--- a/src/pages/styles.module.css
+++ b/src/pages/styles.module.css
@ -151,3 +151,128 @@
  display: flex;
  justify-content: center
 }
+
+@media screen and (max-width: 1200px) {
+  .card {
+    width: 100% !important;
+    margin-bottom: 30px;
+  }
+}
+
+.background {
+  background-color: var(--background-color-light);
+}
+
+.container {
+  padding-top: 100px;
+}
+
+.containerPartnersList {
+  padding-top: 50px;
+}
+
+.rowHeader {
+  text-align: center;
+  padding-bottom: 40px;
+}
+
+.rowHeaderCard {
+  padding-bottom: 40px;
+}
+
+.col {
+  text-align: center;
+}
+
+.font {
+  color: #637792;
+}
+
+.cardHeaderFont {
+  color: #637792;
+  font-size: 15px;
+}
+
+.cardHeader {
+  width: 70%;
+}
+
+.cardHeaderBody{
+  margin: 10px 0 10px 0;
+}
+
+.colPartnersList {
+  margin-bottom: 20px;
+}
+
+.cardImagePartnersList {
+  border-bottom: 2px solid #ebedf0;
+  height: 150px;
+  overflow: hidden;
+}
+
+.cardBodyPartnersList {
+  align-items: center;
+  display: flex;
+  margin-bottom: 12px;
+}
+
+.button {
+  /* color: #1c1e21; */
+  border: none;
+  margin-left: 6px;
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+.cardBodyH4PartnersList {
+  flex: 1 1 auto;
+  margin-bottom: 0;
+}
+
+.cardBodyFoot {
+  font-size: smaller;
+  line-height: 1.66;
+  height: 96px;
+}
+
+.cardFooterPartnersList {
+  align-items: center;
+  border: 1px solid #a4a6a8;
+  border-radius: 12px;
+  cursor: default;
+  display: inline-flex;
+  font-size: .675rem;
+  margin-bottom: 6px !important;
+  margin-right: 6px;
+}
+
+.cardFooterSpanPartnersList {
+  margin-left: 8px;
+}
+
+.cardFooterSpanStylePartnersList {
+  border-radius: 50%;
+  height: 7px;
+  margin-left: 6px;
+  margin-right: 6px;
+  width: 7px;
+}
+
+.text > a {
+  color: var(--ifm-color-primary-black) !important;
+  border-bottom: 1px solid;
+}
+
+.text > a > span:hover {
+  color: var(--ifm-color-primary) !important;
+  border-bottom: 1px solid var(--ifm-color-primary) !important;
+}
+
+.cardImage {
+  height: 150px;
+  object-fit: contain;
+  vertical-align: middle;
+  display: block;
+  margin: 0 auto;
+}