From 05fb76aab7be22f2f1685e71a2190cecaabfcfcf Mon Sep 17 00:00:00 2001
From: Sawan <sawankushwah457@gmail.com>
Date: Sun, 27 Oct 2024 02:22:32 +0530
Subject: [PATCH] Added our contributor page with animation

---
 client/src/App.jsx                    |  17 +-
 client/src/component/Contributers.jsx |  17 -
 client/src/component/Contributors.jsx | 359 +++++++++++++++++++
 client/src/component/Footer.jsx       |   4 +-
 client/src/contributor.css            | 479 --------------------------
 client/src/contributor.html           |  34 --
 client/src/contributor.js             |  52 ---
 7 files changed, 375 insertions(+), 587 deletions(-)
 delete mode 100644 client/src/component/Contributers.jsx
 create mode 100644 client/src/component/Contributors.jsx
 delete mode 100644 client/src/contributor.css
 delete mode 100644 client/src/contributor.html
 delete mode 100644 client/src/contributor.js

diff --git a/client/src/App.jsx b/client/src/App.jsx
index b8a336a..fdfea69 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -28,7 +28,7 @@ import Community from "./component/Community";
 import MyProfile from "./component/MyProfile";
 import ScrollTop from "./component/ScrollTop";
 import EditProfile from "./component/EditProfile";
-import Contributers from "./component/Contributers";
+import Contributors from "./component/Contributors";
 import Discussion from "./component/Discussion";
 import { useAtom } from "jotai";
 import { modeAtom } from "./atom/Atom";
@@ -205,9 +205,9 @@ function App() {
                 />
                 <Route
                   exact
-                  path='/contributers'
+                  path='/contributors'
                   element={
-                    <Contributers
+                    <Contributors
                       mode={mode}
                       setProgress={setProgress}
                       showAlert={showAlert}
@@ -293,6 +293,17 @@ function App() {
                     />
                   }
                 />
+                <Route
+                  exact
+                  path='/contributors'
+                  element={
+                    <Contributors
+                      mode={mode}
+                      setProgress={setProgress}
+                      showAlert={showAlert}
+                    />
+                  }
+                />
                 <Route exact path='/verify/:token' element={<VerifyEmail />} />
                 {/* 404 Route */}
                 <Route exact path='/*' element={<NotFound />} />
diff --git a/client/src/component/Contributers.jsx b/client/src/component/Contributers.jsx
deleted file mode 100644
index c8d8efb..0000000
--- a/client/src/component/Contributers.jsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import '../css/Contributers.css'
-
-export default function Contributers() {
-
-
-  return (
-    <>
-   <div className="container">
-    <div className="content">
-    <div className="team-card">
-    
-     </div>
-    </div>
-   </div>
-    </>
-  )
-}
diff --git a/client/src/component/Contributors.jsx b/client/src/component/Contributors.jsx
new file mode 100644
index 0000000..5dfdedb
--- /dev/null
+++ b/client/src/component/Contributors.jsx
@@ -0,0 +1,359 @@
+import { useEffect, useState } from 'react';
+import { motion } from 'framer-motion';
+import PropTypes from 'prop-types';
+
+
+const ContributorCard = ({
+  login,
+  avatar_url,
+  html_url,
+  contributions,
+  type,
+  mode,
+}) => (
+  <motion.div
+    whileHover={{ y: -5 }}
+    transition={{ type: 'spring', stiffness: 300 }}
+    className={`rounded-lg overflow-hidden border transition-all duration-300 ${mode === 'dark'
+      ? 'bg-black/30 backdrop-blur-md border-white/10'
+      : 'bg-white backdrop-blur-sm border-gray-300'
+      }`}
+    data-aos="fade-up"
+    data-aos-duration='1500'
+  >
+    <div className='p-6 text-center'>
+      <img
+        src={avatar_url}
+        alt={login}
+        className={`w-24 h-24 rounded-full mx-auto mb-4 border-4 ${mode === 'dark' ? 'border-primary' : 'border-blue-500'
+          }`}
+      />
+      <h3 className={`font-bold text-xl ${mode === 'dark' ? 'text-white' : 'text-gray-800'}`}>
+        {login}
+      </h3>
+      <p className={`text-sm ${mode === 'dark' ? 'text-primary' : 'text-gray-600'} mb-2`}>
+        {type}
+      </p>
+      <div className={`mt-4 rounded-full py-2 px-4 inline-block ${mode === 'dark' ? 'bg-white/10' : 'bg-blue-100'
+        }`}>
+        <span className={`font-semibold ${mode === 'dark' ? 'text-primary' : 'text-blue-600'
+          }`}>
+          {contributions} contributions
+        </span>
+      </div>
+    </div>
+    <div className={`py-3 px-6 flex justify-between items-center ${mode === 'dark' ? 'bg-white/5' : 'bg-blue-200'
+      }`}>
+      <a
+        href={html_url}
+        target='_blank'
+        rel='noopener noreferrer'
+        className={`text-primary hover:text-primary/80 transition-colors flex items-center ${mode === 'dark' ? 'text-white' : 'text-blue-800'
+          }`}
+      >
+        <svg
+          xmlns='http://www.w3.org/2000/svg'
+          className='h-5 w-5 mr-2'
+          viewBox='0 0 20 20'
+          fill='currentColor'
+        >
+          <path d='M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z' />
+          <path d='M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z' />
+        </svg>
+        View Profile
+      </a>
+      <svg
+        xmlns='http://www.w3.org/2000/svg'
+        width='24'
+        height='24'
+        viewBox='0 0 24 24'
+        fill='none'
+        stroke='currentColor'
+        strokeWidth='2'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        className='text-white/50'
+      >
+        <path d='M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22'></path>
+      </svg>
+    </div>
+  </motion.div>
+
+);
+
+ContributorCard.propTypes = {
+  login: PropTypes.string.isRequired,
+  mode: PropTypes.string.isRequired,
+  avatar_url: PropTypes.string.isRequired,
+  html_url: PropTypes.string.isRequired,
+  contributions: PropTypes.number.isRequired,
+  type: PropTypes.string.isRequired,
+};
+
+const StatCard = ({ label, value, icon, mode }) => (
+  <motion.div
+    initial={{ opacity: 0, y: 20 }}
+    animate={{ opacity: 1, y: 0 }}
+    transition={{ duration: 0.5 }}
+    className={`rounded-lg p-6 flex items-center border transition-all duration-300 ${mode === 'dark'
+      ? 'bg-black/30 backdrop-blur-md border-white/10'
+      : 'bg-white backdrop-blur-sm border-gray-300'
+      }`}
+  >
+    <div className={`rounded-full p-3 mr-4 ${mode === 'dark' ? 'bg-white/10' : 'bg-gray-200'
+      }`}>
+      {icon}
+    </div>
+    <div>
+      <h3 className={`text-3xl font-bold ${mode === 'dark' ? 'text-white' : 'text-gray-800'
+        }`}>
+        {value}
+      </h3>
+      <p className={`text-sm ${mode === 'dark' ? 'text-white/70' : 'text-gray-600'
+        }`}>
+        {label}
+      </p>
+    </div>
+  </motion.div>
+
+);
+StatCard.propTypes = {
+  label: PropTypes.string.isRequired,
+  mode: PropTypes.string.isRequired,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  icon: PropTypes.node.isRequired,
+};
+
+
+
+export default function Contributor(props) {
+  console.log(props)
+  const [contributors, setContributors] = useState([]);
+  const [repoStats, setRepoStats] = useState({
+    stars: 0,
+    forks: 0,
+    openIssues: 0,
+  });
+  const [loading, setLoading] = useState(true);
+
+  const [currentPage, setCurrentPage] = useState(1);
+  const contributorsPerPage = 9;
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        let allContributors = [];
+        const contributorsResponse = await fetch("https://api.github.com/repos/Bitbox-Connect/Bitbox/contributors?page=1&per_page=100", {})
+        if (!contributorsResponse.ok) {
+          throw new Error('Failed to fetch contributors data');
+        }
+        const contributorsData = await contributorsResponse.json();
+
+
+        allContributors = [...allContributors, ...contributorsData];
+        setContributors(allContributors);
+        console.log(allContributors)
+
+        const repoResponse = await fetch(
+          'https://api.github.com/repos/Bitbox-Connect/Bitbox',
+        );
+        const repoData = await repoResponse.json();
+        setRepoStats({
+          stars: repoData.stargazers_count,
+          forks: repoData.forks_count,
+          openIssues: repoData.open_issues_count,
+        });
+      } catch (error) {
+        console.error('Error fetching data:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  const indexOfLastContributor = currentPage * contributorsPerPage;
+  const indexOfFirstContributor = indexOfLastContributor - contributorsPerPage;
+  const currentContributors = contributors.slice(
+    indexOfFirstContributor,
+    indexOfLastContributor,
+  );
+
+  const paginate = (pageNumber) => setCurrentPage(pageNumber);
+
+  const totalPages = Math.ceil(contributors.length / contributorsPerPage);
+
+
+  return (
+    <div
+      className={`min-h-screen ${props.mode === 'dark'
+        ? 'bg-gradient-to-br from-gray-900 to-black text-white'
+        : 'bg-gradient-to-br from-white to-blue-100 text-black'
+        }`}
+    >
+      {/* Hero Section */}
+      <section
+        className={`relative h-[70vh] flex items-center justify-center text-center ${props.mode === 'dark'
+          ? 'bg-gradient-to-br from-gray-900 via-black to-gray-800'
+          : 'bg-gradient-to-br from-white via-blue-100 to-blue-200'
+          }`}
+      >
+        <div
+          className={`absolute inset-0 ${props.mode === 'dark' ? 'bg-black/50' : 'bg-white/50'
+            } backdrop-blur-sm`}
+        />
+        <div className="relative z-10 space-y-6 max-w-4xl mx-auto px-4">
+          <motion.h1
+            className={`text-5xl font-bold sm:text-6xl md:text-7xl ${props.mode === 'dark' ? 'text-white' : 'text-black'
+              }`}
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8 }}
+          >
+            Our Amazing Contributors
+          </motion.h1>
+          <motion.p
+            className={`text-xl sm:text-2xl ${props.mode === 'dark' ? 'text-white/80' : 'text-black/80'
+              }`}
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.2 }}
+          >
+            Shaping the future of Bitbox, one commit at a time
+          </motion.p>
+        </div>
+      </section>
+
+      <section
+        className={`py-16 px-4 sm:px-6 lg:px-8 ${props.mode === 'dark'
+          ? 'bg-black/30 backdrop-blur-md'
+          : 'bg-white/30 backdrop-blur-md'
+          }`}
+      >
+        <div className="max-w-7xl mx-auto">
+          <h2
+            className={`text-3xl font-bold text-center mb-12 ${props.mode === 'dark' ? 'text-white' : 'text-black'
+              }`}
+          >
+            Project Statistics
+          </h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+            <StatCard
+              mode={props.mode}
+              label="Contributors"
+              value={contributors.length}
+              icon={
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="h-8 w-8 text-primary"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                >
+                  <path d="M13 7H7v6h6V7z" />
+                  <path
+                    fillRule="evenodd"
+                    d="M18 10A8 8 0 11-1 10a8 8 0 0117 0zm-6-4H7v6h6V6z"
+                    clipRule="evenodd"
+                  />
+                </svg>
+              }
+            />
+            <StatCard
+              mode={props.mode}
+              label="Stars"
+              value={repoStats.stars}
+              icon={
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="h-8 w-8 text-primary"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                >
+                  <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.518 4.674a1 1 0 00.95.69h4.905c.969 0 1.371 1.24.588 1.81l-3.97 2.883a1 1 0 00-.364 1.118l1.518 4.674c.3.921-.755 1.688-1.538 1.118l-3.971-2.883a1 1 0 00-1.175 0l-3.97 2.883c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.364-1.118L2.49 10.1c-.783-.57-.38-1.81.588-1.81h4.905a1 1 0 00.95-.69l1.518-4.674z" />
+                </svg>
+              }
+            />
+            <StatCard
+              mode={props.mode}
+              label="Forks"
+              value={repoStats.forks}
+              icon={
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="h-8 w-8 text-primary"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                >
+                  <path
+                    fillRule="evenodd"
+                    d="M6 5a3 3 0 01-3 3H2a3 3 0 003 3v4a3 3 0 006 0v-4a3 3 0 003-3h-1a3 3 0 01-3-3V2h-2v3H6zm7-3v3a3 3 0 013 3h1a3 3 0 00-3-3h-1V2h-2z"
+                    clipRule="evenodd"
+                  />
+                </svg>
+              }
+            />
+            <StatCard
+              mode={props.mode}
+              label="Open Issues"
+              value={repoStats.openIssues}
+              icon={
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="h-8 w-8 text-primary"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                >
+                  <path d="M5.05 3.05A7 7 0 1018 10a7.002 7.002 0 00-12.95 0A5.001 5.001 0 115 3.05zm0 2A3.001 3.001 0 105 10a3.001 3.001 0 000-4.95z" />
+                </svg>
+              }
+            />
+          </div>
+        </div>
+      </section>
+
+      <section className="py-16 px-4 sm:px-6 lg:px-8">
+        <div className="max-w-7xl mx-auto">
+          <h2
+            className={`text-3xl font-bold text-center mb-12 ${props.mode === 'dark' ? 'text-white' : 'text-black'
+              }`}
+          >
+            Meet Our Contributors
+          </h2>
+          {loading ? (
+            <p className="text-center text-white">Loading...</p>
+          ) : (
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
+              {currentContributors.map((contributor) => (
+                <ContributorCard key={contributor.id} {...contributor} mode={props.mode} />
+              ))}
+            </div>
+          )}
+
+          <div className="mt-8 flex justify-center">
+            {Array.from({ length: totalPages }, (_, index) => (
+              <button
+                key={index + 1}
+                onClick={() => paginate(index + 1)}
+                className={`mx-1 px-4 py-2 rounded transition-colors duration-300 
+                     ${currentPage === index + 1
+                    ? 'bg-primary text-white'
+                    : 'bg-black/10 text-white hover:bg-black/20'}`}
+                aria-current={currentPage === index + 1 ? 'page' : undefined}
+                aria-label={`Go to page ${index + 1}`}
+              >
+                {index + 1}
+              </button>
+            ))}
+          </div>
+
+        </div>
+      </section>
+    </div>
+
+  );
+}
+
+Contributor.propTypes = {
+  mode: PropTypes.string.isRequired,
+};
\ No newline at end of file
diff --git a/client/src/component/Footer.jsx b/client/src/component/Footer.jsx
index c2c80f5..2b9b864 100644
--- a/client/src/component/Footer.jsx
+++ b/client/src/component/Footer.jsx
@@ -124,7 +124,7 @@ const Footer = (props) => {
                             </p>
                         )}
                     </div>
-                    <div className="flex flex-col items-center space-y-4 mb-4">
+                    <div className="flex flex-col items-center space-y-4 mb-4" data-aos='fade-up' data-aos-duration='1500'>
                         <a
                             href="https://github.com/Anuj3553/Bitbox"
                             target="_blank"
@@ -197,7 +197,7 @@ const Footer = (props) => {
                                     <Link to='/codeofconduct'>Code of Conduct</Link>
                                 </li>
                                 <li className="nav-item">
-                                    <a href="./src/contributor.html" id="ourvisionlink">Our Contributors</a>
+                                    <Link to='/contributors'>Our contributors</Link>
                                 </li>
                             </ul>
                         </div>
diff --git a/client/src/contributor.css b/client/src/contributor.css
deleted file mode 100644
index f4b10b3..0000000
--- a/client/src/contributor.css
+++ /dev/null
@@ -1,479 +0,0 @@
-* {
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-.container {
-  text-align: center;
-}
-
-.title {
-  display: inline-block;
-  font-size: 3em;
-  margin-bottom: 20px;
-  padding: 10px;
-  color: #fffdff;
-  text-shadow: 1px 1px 2px rgb(11, 11, 11), 0 0 1em rgba(27, 3, 239, 0.617),
-    0 0 0.2em rgba(114, 125, 231, 0.623);
-}
-
-.theme-switch::before {
-  content: "";
-  position: absolute;
-  top: 3px;
-  left: 3px;
-  width: 24px;
-  height: 24px;
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-position: center;
-  transition: left 0.3s ease-in-out, background-image 0.3s ease-in-out;
-  background-image: url("../Assets/moon.png");
-}
-
-.theme-switch.dark-theme::before {
-  left: 33px;
-  background-image: url("../Assets/sun.png");
-}
-
-.contributors-grid {
-  width: 100vw;
-  flex-wrap: wrap;
-  gap: 40px;
-  padding: 20px;
-  display: grid;
-  grid-template-columns: repeat(6, minmax(100px, 5fr));
-}
-
-.contributor-card {
-  min-width: 200px;
-  min-height: 300px;
-  display: flex;
-  justify-content: center;
-  position: relative;
-  overflow: hidden;
-  max-width: calc(55% - 16px);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  background-color: #FDE1D9;
-  border: 1px solid #ca74cf;
-  border-radius: 8px;
-  box-shadow: 0 0px 8px rgba(0, 0, 0, 1);
-  padding: 16px;
-  transition: transform 0.5s ease-in-out, box-shadow 0.3s ease;
-  text-decoration: none;
-  color: inherit;
-  /* margin-bottom: 16px;  */
-  word-wrap: wrap;
-  transition: transform 0.5s ease-in-out, box-shadow 0.3s ease;
-
-}
-
-#contributors {
-  perspective: 1000px;
-}
-
-.contributor-card::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(132deg, #76ABAE 50%, rgb(206, 206, 206) 51%);
-  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
-  transform: translate(-100%, -100%);
-  opacity: 0;
-  z-index: -1;
-}
-
-.contributor-card:hover::before {
-  transform: translate(0, 0);
-  opacity: 1;
-}
-
-.contributor-card img {
-  border-radius: 50%;
-  width: 100px;
-  height: 100px;
-  object-fit: cover;
-  margin-bottom: 10px;
-  transition: box-shadow 0.3s ease-in-out, border 0.1s ease-in-out;
-}
-
-.contributor-card:hover img {
-  border: 2px solid rgb(255, 234, 0);
-  box-shadow: -1px 2px 27px rgb(0, 217, 255);
-}
-
-.contributor-card h2 {
-  color: #040404;
-  position: relative;
-  z-index: 1;
-  transition: text-shadow 0.3s ease-in-out, color 0.3s ease-in-out;
-}
-
-.contributor-card p {
-  font-size: 1.2em;
-  color: #040404;
-  position: relative;
-  z-index: 1;
-  transition: text-shadow 0.3s ease-in-out, color 0.3s ease-in-out;
-  margin: 0 0 10px;
-}
-
-.contributor-card:hover h2 {
-  text-shadow: 1px 1px 2px rgb(0, 108, 108), 0 0 0.2em rgb(0, 14, 108),
-    0 0 0.8em rgb(0, 14, 108);
-  color: white;
-}
-
-.contributor-card:hover p {
-  text-shadow: 1px 1px 2px rgba(4, 0, 127, 0.715), 0 0 0.2em rgb(5, 18, 168),
-    0 0 0.3em rgb(134, 136, 250);
-  color: white;
-}
-
-body {
-  background-color: #f8f9fa;
-  color: #212529;
-}
-
-header {
-  height: 100px;
-}
-
-.logo {
-  margin: 30px 0 0 0;
-}
-
-footer {
-  background-color: #333;
-  color: white;
-  text-align: center;
-  padding: 20px 0;
-  margin-top: auto;
-}
-
-.footer-container {
-  max-width: 800px;
-  margin: auto;
-  padding: 0 20px;
-}
-
-.footer-contact a {
-  color: white;
-}
-
-header {
-  height: 100px;
-}
-
-body {
-  min-height: 100vh;
-  max-width: 100vw;
-}
-
-.logo {
-  margin: 5px 0px 0px 0px;
-}
-
-footer {
-  background: #333;
-  color: white;
-  text-align: center;
-  padding: 20px 0;
-  margin-top: auto;
-}
-
-.footer-container {
-  max-width: 800px;
-  margin: auto;
-  padding: 0 20px;
-}
-
-@media (max-width: 900px) {
-  header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0.5rem 0.5rem;
-  }
-
-  header nav {
-    flex-direction: column;
-    align-items: flex-start;
-    max-width: 100vw;
-  }
-
-  header nav .hamburger {
-    display: block;
-    font-size: 28px;
-    cursor: pointer;
-    color: #fff;
-    padding: 1rem;
-    /* Adjust padding for hamburger icon */
-    position: absolute;
-    top: 0;
-    right: 1rem;
-    /* Adjust right position as needed */
-  }
-
-  header nav ul {
-    flex-direction: column;
-    align-items: flex-start;
-    display: none;
-    /* Hide the navbar items */
-    max-height: 100vw;
-    /* Full width for mobile view */
-    position: absolute;
-    top: 100%;
-    right: 0;
-    background-color: #333;
-    /* Background color for the floating menu */
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    /* Add a box shadow */
-    padding: 1rem;
-    /* Add padding */
-    border-radius: 0 0 8px 8px;
-    /* Rounded corners at the bottom */
-  }
-
-  header nav ul.show {
-    display: flex;
-    /* Show the navbar items when the hamburger is clicked */
-    align-items: flex-start;
-  }
-
-  header nav ul li {
-    margin: 0.5rem 1rem;
-    /* Adjust margin for vertical spacing */
-  }
-
-  header nav ul li a:hover {
-    color: #00c6ff;
-    border-bottom: 2px solid #00c6ff;
-  }
-}
-
-/* Styles for larger screens */
-@media (min-width: 901px) {
-  header {
-    height: auto;
-  }
-
-  header nav .hamburger {
-    display: none;
-  }
-
-  header nav ul {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    align-items: center;
-  }
-}
-
-*/ header nav ul li a:hover {
-  background-color: #00c6ff;
-  color: #000;
-  border-radius: 0.75rem;
-}
-
-footer {
-  background-color: #1a1a1a;
-  color: white;
-  padding: 40px 0;
-  text-align: center;
-}
-
-footer p {
-  margin: 10px 0;
-}
-
-footer p a {
-  color: #00c6ff;
-  text-decoration: none;
-}
-
-footer p a:hover {
-  text-decoration: underline;
-}
-
-/* Footer Styles */
-footer {
-  background-color: #1a1a1a;
-  color: white;
-  padding: 40px 0;
-  text-align: center;
-}
-
-footer p {
-  margin: 10px 0;
-}
-
-footer p a {
-  color: #00c6ff;
-  text-decoration: none;
-}
-
-footer p a:hover {
-  text-decoration: underline;
-}
-
-footer {
-  background: #333;
-  color: white;
-  text-align: center;
-  padding: 20px 0;
-  margin-top: auto;
-}
-
-.footer-container {
-  max-width: 800px;
-  margin: auto;
-  padding: 0 20px;
-}
-
-.footer-contact {
-  margin: 10px 0;
-}
-
-html {
-  scroll-behavior: smooth;
-  max-width: 100vw;
-  max-height: 100vh;
-}
-
-body {
-  background-color: #FBC1B7;
-  overflow-x: hidden;
-  margin: 0;
-}
-
-header {
-  background-color: #1a1a1a;
-  padding: 0px 20px;
-  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
-  position: sticky;
-  top: 0;
-  z-index: 1000;
-  border-bottom: 3px solid #00c6ff;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-header nav {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0.5rem 1rem;
-}
-
-header nav ul {
-  list-style: none;
-  display: flex;
-  gap: 30px;
-}
-
-header nav ul li a {
-  color: #fff;
-  text-decoration: none;
-  font-weight: 600;
-  font-size: 18px;
-  transition: color 0.3s, border-bottom 0.3s;
-  background-color: rgb(72, 71, 71);
-  padding: 15px;
-}
-
-header nav ul li a:hover {
-  background-color: #00c6ff;
-  color: #000;
-  border-radius: 0.75rem;
-}
-
-@media (max-width: 900px) {
-  header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0.5rem 1rem;
-  }
-
-  header nav {
-    flex-direction: column;
-    align-items: flex-start;
-    width: 100%;
-  }
-
-  header nav .hamburger {
-    display: block;
-    font-size: 28px;
-    cursor: pointer;
-    color: #fff;
-    padding: 1rem;
-    position: absolute;
-    top: 0;
-    right: 1rem;
-  }
-
-  header nav ul {
-    flex-direction: column;
-    display: none;
-    width: 100%;
-    height: 100vh;
-    background-color: #333;
-    padding: 1rem;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    border-radius: 0 0 8px 8px;
-  }
-
-  header nav ul.show {
-    display: flex;
-  }
-}
-
-@media (min-width: 901px) {
-  header nav .hamburger {
-    display: none;
-  }
-
-  header nav ul {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-  }
-}
-
-header .logo h1 {
-  color: #fff;
-  font-weight: 700;
-  font-size: 28px;
-  margin: 0;
-}
-
-.homeBtn {
-  text-decoration: none;
-  color: #000;
-  top: 20px;
-  left: 20px;
-  position: absolute;
-  background-color: #0e99ea;
-  width: 60px;
-  height: 40px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 40px;
-  border: #000 2px solid;
-}
-
-.homeBtn:hover {
-  background-color: #00c6ff;
-  color: #000;
-  border: #00c6ff 2px solid;
-}
\ No newline at end of file
diff --git a/client/src/contributor.html b/client/src/contributor.html
deleted file mode 100644
index cd95528..0000000
--- a/client/src/contributor.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <link rel="shortcut icon" href="../favicon_io/favicon.ico" type="image/x-icon" />
-  <title>Bitbox - Where Projects Find Solutions Together</title>
-
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
-    integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
-    crossorigin="anonymous" referrerpolicy="no-referrer" />
-
-  <link rel="stylesheet" href="./contributor.css" />
-</head>
-
-<body>
-  <a href="/" class="homeBtn">
-    <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="none" stroke="currentColor" stroke-width="2"
-      stroke-linecap="round" stroke-linejoin="round" class="feather feather-home" viewBox="0 0 25 24">
-      <path d="M3 9L12 2l9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9z" />
-      <polyline points="9 22 9 12 15 12 15 22" />
-    </svg>
-  </a>
-
-  <div class="container">
-    <h1 class="title">Our Contributors</h1>
-    <div id="contributors" class="contributors-grid"></div>
-  </div>
-
-  <script src="./contributor.js"></script>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/client/src/contributor.js b/client/src/contributor.js
deleted file mode 100644
index f023457..0000000
--- a/client/src/contributor.js
+++ /dev/null
@@ -1,52 +0,0 @@
-document.addEventListener("DOMContentLoaded", () => {
-    const contributorsContainer = document.getElementById("contributors");
-
-    async function fetchContributors() {
-      let contributors = [];
-      let page = 1;
-      let perPage = 100; // Max per page is 100
-      let moreContributors = true;
-
-      while (moreContributors) {
-        try {
-          const response = await fetch(
-            `https://api.github.com/repos/Bitbox-Connect/Bitbox/contributors?page=${page}&per_page=${perPage}`
-          );
-          const data = await response.json();
-
-          // If no more contributors, stop fetching
-          if (data.length === 0) {
-            moreContributors = false;
-          } else {
-            contributors = contributors.concat(data);
-            page++;
-          }
-        } catch (error) {
-          console.error("Error fetching contributors:", error);
-          break; // Exit loop if there's an error
-        }
-      }
-
-      displayContributors(contributors);
-    }
-
-    function displayContributors(contributors) {
-      contributorsContainer.innerHTML = "";
-      contributors.forEach((contributor) => {
-        const contributorCard = document.createElement("div");
-        contributorCard.className = "contributor-card";
-
-        contributorCard.innerHTML = `
-          <a href="${contributor.html_url}" target="_blank" rel="noopener noreferrer">
-            <img src="${contributor.avatar_url}" alt="${contributor.login}">
-          </a>
-          <h3>${contributor.login}</h3>
-          <p>Contributions: ${contributor.contributions}</p>
-        `;
-
-        contributorsContainer.appendChild(contributorCard);
-      });
-    }
-
-    fetchContributors();
-  });
\ No newline at end of file