feat: contributors section added (#28)

Signed-off-by: Aditya Prasad Mohanty <[email protected]>

Author: Aditya-150

src/components/HomepageContributors/index.js

@@ -0,0 +1,52 @@
+import React, { useState, useEffect } from "react";
+import axios from "axios";
+import styles from "./styles.module.css";
+import RedirectButton from "../RedirectButton";
+import Link from "@docusaurus/Link";
+
+export default function HomepageContributors() {
+  const [contributors, setContributors] = useState([]);
+
+  useEffect(() => {
+    axios
+      .get(`https://api.github.com/repos/kubearmor/KubeArmor/contributors`)
+      .then((response) => {
+        const topContributors = response.data.slice(0, 27);
+        setContributors(topContributors);
+      })
+      .catch((error) => {
+        console.error("Error fetching contributors:", error);
+      });
+  }, []);
+
+  return (
+    <section className={`contributors ${styles.contributors}`}>
+      <h2 className={styles.contributorsTitle}>CONTRIBUTORS</h2>
+      <h1 className={styles.contributorsHeader}>
+        Shout Out to KubeArmor Contributors
+      </h1>
+      <div className={styles.container}>
+        {contributors.map((contributor) => (
+          <Link
+            key={contributor.id}
+            className={styles.containerImage}
+            to={contributor.html_url}
+          >
+            <img
+              src={contributor.avatar_url}
+              alt={contributor.login}
+              className={styles.image}
+            />
+          </Link>
+        ))}
+      </div>
+      <div className={styles.contributorsButton}>
+        <RedirectButton
+          redirectColor="var(--color-primary)"
+          redirectLink="https://github.com/kubearmor/KubeArmor/graphs/contributors"
+          redirectText="View More"
+        />
+      </div>
+    </section>
+  );
+}

src/components/HomepageContributors/styles.module.css

@@ -0,0 +1,76 @@
+.contributors {
+  display: flex;
+  flex-direction: column;
+  padding: 16rem 5.625rem 0;
+  background: var(--color-bg);
+}
+.contributorsTitle {
+  font-family: var(--font-main-medium);
+  font-size: 1rem;
+  font-weight: 500;
+  color: var(--color-primary);
+  letter-spacing: 0.18rem;
+  align-self: center;
+}
+.contributorsHeader {
+  font-family: var(--font-main-semibold);
+  font-size: 2rem;
+  font-weight: 600;
+  color: var(--color-font-header);
+  align-self: center;
+  text-align: center;
+}
+.container {
+  display: grid;
+  grid-template-columns: repeat(9, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+  gap: 3rem;
+  margin-top: 3rem;
+}
+.containerImage {
+  padding: 0;
+  align-self: center;
+}
+.image {
+  border: 1px solid var(--color-footer-field);
+  border-radius: 50%;
+  height: 5.25rem;
+  width: 5.25rem;
+  overflow: hidden;
+}
+.contributorsButton {
+  display: flex;
+  flex-direction: row;
+  margin-top: 3rem;
+  justify-content: center;
+}
+@media screen and (max-width: 1080px) {
+  .contributors {
+    padding: 10rem 2rem 0;
+  }
+  .container {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    grid-template-rows: repeat(4, 1fr);
+    gap: 3rem;
+    margin-top: 3rem;
+  }
+}
+@media screen and (max-width: 880px) {
+  .container {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    grid-template-rows: repeat(6, 1fr);
+    gap: 3rem;
+    margin-top: 3rem;
+  }
+}
+@media screen and (max-width: 550px) {
+  .container {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: repeat(9, 1fr);
+    gap: 3rem;
+    margin-top: 3rem;
+  }
+}

src/pages/index.js

@@ -20,6 +20,7 @@ import HomepageAdopters from "../components/HomepageAdopters";
 import HomepageCommunity from "../components/HomepageCommunity";
 import HomepageMembership from "../components/HomepageMembership";
 import HomepageSupport from "../components/HomepageSupport";
+import HomepageContributors from "../components/HomepageContributors";
 
 // function HomepageHeader() {
 //   const {siteConfig} = useDocusaurusContext();
@@ -62,6 +63,7 @@ export default function Home() {
         <HomepageAdopters />
         <HomepageCommunity />
         <HomepageMembership />
+        <HomepageContributors />
         <HomepageSupport />
       </main>
     </Layout>