Merge pull request #445 from pani2004/issue#438

Added the contributors page

src/App.js

@@ -17,6 +17,7 @@ import { ThemeProvider } from "./themeContext";
 import ContactUs from "./pages/ContactUs";
 import EditProfile from "./pages/EditProfile";
 import OtpVerify from "./pages/OtpVerify";
+import Contributors from "./pages/Contributors";
 
 import { Contributors } from "./pages/Contributors";
 import Navbar from "./components/Navbar";
@@ -79,6 +80,7 @@ function App() {
           <Route path="/login" element={<Login />} />
           <Route path="/signup" element={<Signup />} />
           <Route path="/contact" element={<ContactUs />} />
+          <Route path="/contributors" element={<Contributors/>}/>
 
           {token ? (
             <Route

src/components/Footer.jsx

@@ -24,5 +24,13 @@ export default function Footer() {
   </div>
 </footer>
     )
+          <li className="mr-4 hover:underline md:mr-6 hover:text-orange-600">
+            <Link to="/contributors">Our Contributors</Link>
+          </li>
+        </ul>
+        <span className="text-sm text-white sm:text-center">© 2024-2025 <Link to="/" className="hover:underline">Foodies™</Link>. All Rights Reserved.</span>
+      </div>
+    </footer>
+  );
 }
 

src/pages/Contributors.jsx

@@ -0,0 +1,58 @@
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+import Navbar from '../components/Navbar';
+import Footer from '../components/Footer';
+function Contributors() {
+  const [contributors, setContributors] = useState([]);
+  useEffect(() => {
+    async function Contributors() {
+      try {
+        const response = await axios.get(
+          'https://api.github.com/repos/VanshKing30/FoodiesWeb/contributors'
+        );
+        setContributors(response.data);
+      } catch (error) {
+        console.error('Error in fetching contributors:', error);
+      }
+    }
+    Contributors();
+  }, []);
+  return (
+    <div className="w-full min-h-screen  pt-8 overflow-hidden mt-10 bg-black">
+       <Navbar/>
+      <h1 className="text-center text-4xl font-semibold text-gray-200 mb-8 uppercase">
+        Contributors
+      </h1>
+      <div className="flex flex-wrap justify-center gap-8 mb-16">
+        {contributors.map((contributor) => (
+          <div
+            key={contributor.id}
+            className="w-full md:w-1/3 lg:w-1/4 flex flex-col items-center bg-gray-800 border border-gray-300 rounded-lg shadow-md p-4 transition-transform transform hover:scale-105 hover:shadow-xl"
+          >
+            <a
+              href={contributor.html_url}
+              className="block"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <img
+                src={contributor.avatar_url}
+                alt={contributor.login}
+                className="w-24 h-24 rounded-full object-cover mb-4"
+              />
+            </a>
+            <h2 className="text-lg font-medium text-gray-100 mb-2">
+              {contributor.login}
+            </h2>
+            <p className="text-gray-300">
+              Contributions: {contributor.contributions}
+            </p>
+          </div>
+        ))}
+      </div>
+      <Footer/>
+    </div>
+  );
+}
+
+export default Contributors;