Merge pull request #223 from Peefy/add-integrations-in-index-page

feat: add integration logos at index page

i18n/en/code.json

@@ -494,6 +494,9 @@
   "Trusted By": {
     "message": "Trusted By"
   },
+  "Integrate with Your Favorite Tools": {
+    "message": "Integrate with Your Favorite Tools"
+  },
   "KCL is in": {
     "message": "KCL is in"
   },

i18n/zh-CN/code.json

@@ -323,6 +323,9 @@
   "Trusted By": {
     "message": "工程师信赖的技术产品"
   },
+  "Integrate with Your Favorite Tools": {
+    "message": "与您最喜欢的工具集成"
+  },
   "KCL is in": {
     "message": "KCL 已经加入"
   },

src/pages/index.module.css

@@ -162,6 +162,23 @@
   }
 }
 
+.integrationLogoWrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 120px;
+}
+
+.integrationLogoWrapper img {
+  height: 80%;
+}
+
+@media screen and (max-width: 768px) {
+  .integrationLogoWrapper {
+    height: 80px;
+  }
+}
+
 .cncfLogo {
   height: 96px;
 }

src/pages/index.tsx

@@ -199,6 +199,70 @@ function ExampleSection() {
   );
 }
 
+function IntegrationSection() {
+  const integrations = [
+    {
+      name: "Kubernetes",
+      img: "/img/logos/k8s.svg",
+    },
+    {
+      name: "Kustomize",
+      img: "/img/logos/kustomize.png",
+    },
+    {
+      name: "Helm",
+      img: "/img/logos/helm.png",
+    },
+    {
+      name: "Helmfile",
+      img: "/img/logos/helmfile.png",
+    },
+    {
+      name: "KPT",
+      img: "/img/logos/kpt.png",
+    },
+    {
+      name: "Argo",
+      img: "/img/logos/argo.png",
+    },
+    {
+      name: "CrossPlane",
+      img: "/img/logos/crossplane.png",
+    },
+    {
+      name: "Terraform",
+      img: "/img/logos/terraform.png",
+    },
+  ];
+
+  return (
+    <section>
+      <div className="container">
+        <h2
+          className={clsx("text--center")}
+          style={{ color: "var(--ifm-color-primary)" }}
+        >
+          <Translate>Integrate with Your Favorite Tools</Translate>
+        </h2>
+        <div className={styles.whiteboard}>
+          <div className="row">
+            {integrations.map((w) => (
+              <div
+                key={w.name}
+                className={clsx("col col--3", styles.whiteboardCol)}
+              >
+                <a className={styles.integrationLogoWrapper} target="_blank">
+                  <img src={useBaseUrl(w.img)} alt={w.name} />
+                </a>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
 function PartnerSection() {
   const partners = [
     {
@@ -323,6 +387,8 @@ export default function Home(): JSX.Element {
       <BreakSection />
       <ExampleSection />
       <BreakSection />
+      <IntegrationSection />
+      <BreakSection />
       <PartnerSection />
       <BreakSection />
       <CNCFSection />