fix: bug fixes (#29)

Signed-off-by: Aditya Prasad Mohanty <[email protected]>
kubearmor · Nov 23, 2023 · d7d48eb · d7d48eb
1 parent 1263c04
commit d7d48eb
Show file tree

Hide file tree

Showing 19 changed files with 157 additions and 118 deletions.
diff --git a/src/components/HomepageAdopters/index.js b/src/components/HomepageAdopters/index.js
@@ -6,53 +6,46 @@ import adoptersLogo3 from "../../../static/img/adopters/adopter-intel-smart-edge
 import Link from "@docusaurus/Link";
 import { FaAngleRight } from "react-icons/fa6";
 
-export default function HomepageAdopters () {
-    return (
-      <section className={`adopters ${styles.adopters}`}>
-        <div className={styles.adoptersLogos}>
-          <h4 className={styles.adoptersTitle}>Adopted By</h4>
-          <div className={styles.logos}>
-            <AdoptersLogo1
-              className={styles.logo}
-              onClick={(e) => {
-                window.location.href = "https://www.accuknox.com/";
-              }}
-              alt="adopter logo"
-            />
+export default function HomepageAdopters() {
+  return (
+    <section className={`adopters ${styles.adopters}`}>
+      <div className={styles.adoptersLogos}>
+        <h4 className={styles.adoptersTitle}>Adopted By</h4>
+        <div className={styles.logos}>
+          <Link to="https://open-horizon.github.io/">
             <img
               className={styles.logo}
-              onClick={(e) => {
-                window.location.href = "https://open-horizon.github.io/";
-              }}
               src={adoptersLogo2}
               alt="adopter logo"
             />
+          </Link>
+          <Link to="https://www.accuknox.com/">
+            <AdoptersLogo1 className={`${styles.logo} ${styles.accuknox}`} alt="adopter logo" />
+          </Link>
+          <Link to="https://www.intel.com/content/www/us/en/edge-computing/smart-edge.html">
             <img
               className={styles.logo}
-              onClick={(e) => {
-                window.location.href =
-                  "https://www.intel.com/content/www/us/en/edge-computing/smart-edge.html";
-              }}
               src={adoptersLogo3}
               alt="adopter logo"
             />
-          </div>
-        </div>
-        <div className={styles.container}>
-          <div className={styles.containerContent}>
-            <h3 className={styles.containerTitle}>Want to Add Your Logo ?</h3>
-            <p className={styles.containerDescription}>
-              Be one of the adopters for our organization
-            </p>
-          </div>
-          <Link
-            to="https://github.com/kubearmor/KubeArmor/blob/main/ADOPTERS.md"
-            className={styles.containerButton}
-          >
-            Apply
-            <FaAngleRight color="var(--color-primary)" />
           </Link>
         </div>
-      </section>
-    );
-}
+      </div>
+      <div className={styles.container}>
+        <div className={styles.containerContent}>
+          <h3 className={styles.containerTitle}>Want to Add Your Logo ?</h3>
+          <p className={styles.containerDescription}>
+            Be one of the adopters for our organization
+          </p>
+        </div>
+        <Link
+          to="https://github.com/kubearmor/KubeArmor/blob/main/ADOPTERS.md"
+          className={styles.containerButton}
+        >
+          Apply
+          <FaAngleRight color="var(--color-primary)" />
+        </Link>
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/HomepageAdopters/styles.module.css b/src/components/HomepageAdopters/styles.module.css
@@ -12,20 +12,23 @@
 .adoptersTitle {
   font-family: var(--font-main-medium);
   font-weight: 500;
-  font-size: 1rem;
+  font-size: 1.25rem;
   color: var(--color-font-header);
 }
 .logos {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  width: 100%;
+  width: 80%;
 }
 .logo {
   cursor: pointer;
   width: 12rem;
 }
+.accuknox {
+  width: 15rem;
+}
 
 .container {
   width: 80%;
@@ -81,6 +84,9 @@
   .adoptersLogos {
     padding: 10rem 2rem 0;
   }
+  .logos {
+    width: 100%;
+  }
 }
 @media screen and (max-width: 550px) {
   .logos {

diff --git a/src/components/HomepageArchitecture/index.js b/src/components/HomepageArchitecture/index.js
@@ -1,6 +1,6 @@
 import React from "react";
 import styles from "./styles.module.css";
-import architectureImage from "../../../static/img/architecture/architecture-illustration.webp";
+import architectureImage from "../../../static/img/architecture/architecture-diagram.webp";
 
 export default function HomepageArchitecture() {
   return (

diff --git a/src/components/HomepageHeader/index.js b/src/components/HomepageHeader/index.js
@@ -13,7 +13,10 @@ export default function HomepageHeader() {
   return (
     <header className={`hero ${styles.hero}`}>
       <div className={styles.container}>
-        <Link className={styles.heroAnnouncement}>
+        <Link
+          className={styles.heroAnnouncement}
+          to="https://github.com/kubearmor/KubeArmor/wiki/v1.0-Release-Blog"
+        >
           <FaLock className={styles.heroIcon} color="var(--color-primary)" />
           KubeArmor v1.0 is here!
           <FaAngleRight
@@ -35,14 +38,9 @@ export default function HomepageHeader() {
             buttonText="Try KubeArmor"
             buttonLink="https://docs.kubearmor.io/kubearmor/quick-links/deployment_guide"
           />
-          <RedirectButton
-            redirectColor="var(--color-primary)"
-            redirectText="Learn More"
-            redirectLink="https://docs.kubearmor.io/kubearmor/"
-          />
         </div>
       </div>
-      <HeroImage className={styles.heroImage}/>
+      <HeroImage className={styles.heroImage} />
     </header>
   );
 }
diff --git a/src/components/HomepageHeader/styles.module.css b/src/components/HomepageHeader/styles.module.css
@@ -27,6 +27,9 @@
   justify-content: space-between;
   margin-bottom: 0.5rem;
 }
+.heroAnnouncement:hover {
+  text-decoration: none;
+}
 .heroTitle {
   font-family: var(--font-main-bold);
   font-size: 4rem;

diff --git a/src/components/HomepageInstallation/index.js b/src/components/HomepageInstallation/index.js
@@ -1,6 +1,6 @@
 import React from "react";
 import styles from "./styles.module.css";
-import installationImage from "../../../static/img/installation/Installation-illustration.png";
+import installationImage from "../../../static/img/installation/Installation-illustration.webp";
 import { FaCirclePlay, FaRegCopy } from "react-icons/fa6";
 import RedirectButton from "../RedirectButton";
 import Link from "@docusaurus/Link";

diff --git a/src/components/HomepageInstallation/styles.module.css b/src/components/HomepageInstallation/styles.module.css
@@ -99,3 +99,16 @@
   opacity: 0.8;
   text-decoration: none;
 }
+@media screen and (max-width: 1080px) {
+  .installation {
+    padding: 10rem 2rem 0;
+  }
+}
+@media screen and (max-width: 880px) {
+  .installationContainer {
+    flex-direction: column;
+  }
+  .guide {
+    width: 100%;
+  }
+}
diff --git a/src/components/HomepageMembership/index.js b/src/components/HomepageMembership/index.js
@@ -4,44 +4,57 @@ import membershipLogo1 from "../../../static/img/os-membership/membership-cncf.p
 import membershipLogo2 from "../../../static/img/os-membership/membership-lf.png";
 import membershipLogo3 from "../../../static/img/os-membership/membership-nephio.png";
 import membershipLogo4 from "../../../static/img/os-membership/membership-openssf.png";
+import membershipLogo5 from "../../../static/img/os-membership/membership-nsf.png";
+import membershipLogo6 from "../../../static/img/os-membership/membership-se.png";
+import Link from "@docusaurus/Link";
 
 export default function HomepageMembership() {
   return (
     <section className={`membership ${styles.membership}`}>
       <h3 className={styles.membershipTitle}>Open Source Membership</h3>
       <div className={styles.members}>
-        <img
-          className={styles.member}
-          onClick={(e) => {
-            window.location.href = "https://www.cncf.io/";
-          }}
-          src={membershipLogo1}
-          alt="member logo"
-        />
-        <img
-          className={styles.member}
-          onClick={(e) => {
-            window.location.href = "https://lfx.linuxfoundation.org/";
-          }}
-          src={membershipLogo2}
-          alt="member logo"
-        />
-        <img
-          className={styles.member}
-          onClick={(e) => {
-            window.location.href = "https://nephio.org/";
-          }}
-          src={membershipLogo3}
-          alt="member logo"
-        />
-        <img
-          className={styles.member}
-          onClick={(e) => {
-            window.location.href = "https://openssf.org/";
-          }}
-          src={membershipLogo4}
-          alt="member logo"
-        />
+        <Link to="https://www.cncf.io/">
+          <img
+            className={styles.member}
+            src={membershipLogo1}
+            alt="member logo"
+          />
+        </Link>
+        <Link to="https://lfx.linuxfoundation.org/">
+          <img
+            className={styles.member}
+            src={membershipLogo2}
+            alt="member logo"
+          />
+        </Link>
+        <Link to="https://nephio.org/">
+          <img
+            className={styles.member}
+            src={membershipLogo3}
+            alt="member logo"
+          />
+        </Link>
+        <Link to="https://openssf.org/">
+          <img
+            className={styles.member}
+            src={membershipLogo4}
+            alt="member logo"
+          />
+        </Link>
+        <Link to="https://www.nsf.gov/awardsearch/showAward?AWD_ID=2226443&HistoricalAwards=false">
+          <img
+            className={styles.member}
+            src={membershipLogo5}
+            alt="member logo"
+          />
+        </Link>
+        <Link to="https://www.5gsec.com/">
+          <img
+            className={styles.member}
+            src={membershipLogo6}
+            alt="member logo"
+          />
+        </Link>
       </div>
     </section>
   );

diff --git a/src/components/HomepageMembership/styles.module.css b/src/components/HomepageMembership/styles.module.css
@@ -1,46 +1,33 @@
 .membership {
   display: flex;
   flex-direction: column;
-  padding: 10rem 5.625rem 0;
+  padding: 16rem 2rem 0;
 }
 .members {
-  display: flex;
-  flex-direction: row;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(2, 1fr);
+  align-self: center;
   align-items: center;
-  justify-content: space-between;
-  margin-top: 2rem;
+  justify-self: center;
+  gap: 5rem;
+  margin-top: 1rem;
 }
 .membershipTitle {
   font-family: var(--font-main-medium);
   font-weight: 500;
-  font-size: 1rem;
+  font-size: 1.25rem;
   color: var(--color-font-header);
   align-self: center;
 }
 .member {
-  width: auto;
-  height: 4rem;
+  width: 15rem;
+  height: auto;
   cursor: pointer;
 }
-@media screen and (max-width: 1080px) {
-  .membership {
-    padding: 10rem 2rem 0;
-  }
-  .member {
-    height: 3rem;
-  }
-}
-@media screen and (max-width: 880px) {
-  .member {
-    height: 2rem;
-  }
-}
 @media screen and (max-width: 550px) {
-  .member {
-    height: 3rem;
-  }
   .members {
-    flex-direction: column;
-    gap: 2rem
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(3, 1fr);
   }
 }
diff --git a/src/components/HomepageSandbox/index.js b/src/components/HomepageSandbox/index.js
@@ -0,0 +1,19 @@
+import React from "react";
+import styles from "./styles.module.css";
+import Link from "@docusaurus/Link";
+import sandboxImage from "../../../static/img/sandbox/membership-cncf.png";
+
+export default function HomepageSandbox() {
+  return (
+    <section className={`sandbox ${styles.sandbox}`}>
+      <h4 className={styles.sandboxText}>
+        We are a&nbsp;
+        <Link to="https://www.cncf.io/projects/kubearmor/">CNCF Sandbox</Link>
+        &nbsp;project.
+      </h4>
+      <Link to="https://www.cncf.io/projects/kubearmor/">
+        <img className={styles.logo} src={sandboxImage} alt="logo" />
+      </Link>
+    </section>
+  );
+}
diff --git a/src/components/HomepageSandbox/styles.module.css b/src/components/HomepageSandbox/styles.module.css
@@ -0,0 +1,12 @@
+.sandbox {
+  display: flex;
+  flex-direction: column;
+  padding: 16rem 2rem 0;
+  align-items: center;
+  justify-content: center;
+}
+.sandboxText {
+  font-family: var(--font-main-medium);
+  font-weight: 500;
+  font-size: 1.25rem;
+}