feat(contributors): add dedicated contributors page

frontend/src/App.js

@@ -9,6 +9,7 @@ import DPVisualizer from './pages/DPVisualizer';
 import HomePage from './pages/Home';
 import AboutPage from './pages/AboutPage';
 import DocumentationPage from './pages/DocumentationPage';
+import ContributorsPage from './pages/ContributorsPage';
 import './App.css';
 
 function App() {
@@ -74,6 +75,10 @@ function App() {
               path="/docs" 
               element={<DocumentationPage darkMode={darkMode} setDarkMode={setDarkMode} />} 
             />
+            <Route 
+              path="/contributors" 
+              element={<ContributorsPage darkMode={darkMode} setDarkMode={setDarkMode} />} 
+            />
           </Routes>
         </Layout>
       </Router>

frontend/src/components/Contributors/CTASection.jsx

@@ -0,0 +1,52 @@
+import { Rocket } from "lucide-react";
+
+const CTASection = ({ darkMode }) => (
+  <div
+    className={`p-8 rounded-2xl backdrop-blur-xl text-center ${
+      darkMode
+        ? "bg-gray-800/20 border-gray-700/50"
+        : "bg-white/20 border-white/50"
+    } border`}
+  >
+    <h2
+      className={`flex gap-2 justify-center items-center text-3xl font-bold mb-4 ${
+        darkMode ? "text-white" : "text-gray-900"
+      }`}
+    >
+      Become a Contributor <Rocket />
+    </h2>
+    <p
+      className={`text-lg mb-6 ${darkMode ? "text-gray-300" : "text-gray-600"}`}
+    >
+      Want to join our mission? Read our{" "}
+      <a
+        href="https://github.com/CipherYuvraj/Algorithm-Visualiser-Platform/blob/main/CONTRIBUTING.md"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="underline text-blue-500"
+      >
+        contribution guidelines
+      </a>{" "}
+      and pick an{" "}
+      <a
+        href="https://github.com/CipherYuvraj/Algorithm-Visualiser-Platform/issues"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="underline text-blue-500"
+      >
+        open issue
+      </a>{" "}
+      to get started.
+    </p>
+    <a
+      href="https://github.com/CipherYuvraj/Algorithm-Visualiser-Platform"
+      target="_blank"
+      rel="noopener noreferrer"
+      className="inline-block px-6 py-3 bg-blue-600 text-white rounded-xl shadow-md hover:scale-105 transition-transform"
+    >
+      Contribute Now
+    </a>
+  </div>
+);
+
+export default CTASection;

frontend/src/components/Contributors/CategoriesSection.jsx

@@ -0,0 +1,56 @@
+import { Users, Award, Code2, Github } from "lucide-react";
+
+const categories = [
+  { icon: Code2, title: "Code", desc: "Core features & bug fixes" },
+  { icon: Users, title: "Documentation", desc: "Guides & tutorials" },
+  { icon: Award, title: "Design", desc: "UI/UX improvements" },
+  { icon: Github, title: "Community", desc: "Discussions & support" },
+];
+
+const CategoriesSection = ({ darkMode }) => (
+  <div
+    className={`mb-16 p-8 rounded-2xl backdrop-blur-xl ${
+      darkMode
+        ? "bg-gray-800/20 border-gray-700/50"
+        : "bg-white/20 border-white/50"
+    } border`}
+  >
+    <h2
+      className={`text-3xl font-bold mb-12 text-center ${
+        darkMode ? "text-white" : "text-gray-900"
+      }`}
+    >
+      Contribution Areas
+    </h2>
+    <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
+      {categories.map(({ icon: Icon, title, desc }) => (
+        <div
+          key={title}
+          className={`p-6 rounded-xl backdrop-blur-xl ${
+            darkMode
+              ? "bg-gray-800/20 border-gray-700/50"
+              : "bg-white/20 border-white/50"
+          } border text-center transform hover:scale-105 transition-all`}
+        >
+          <Icon
+            className={`h-12 w-12 mb-4 mx-auto ${
+              darkMode ? "text-blue-400" : "text-blue-600"
+            }`}
+          />
+          <h3
+            className={`text-xl font-semibold mb-2 ${
+              darkMode ? "text-white" : "text-gray-900"
+            }`}
+          >
+            {title}
+          </h3>
+          <p className={`${darkMode ? "text-gray-300" : "text-gray-600"}`}>
+            {desc}
+          </p>
+        </div>
+      ))}
+    </div>
+  </div>
+);
+
+export default CategoriesSection;

frontend/src/components/Contributors/ContributorCard.jsx

@@ -0,0 +1,46 @@
+import { Github } from "lucide-react";
+
+const ContributorCard = ({ contributor, darkMode }) => (
+  <div
+    key={contributor.id}
+    className={`p-6 rounded-xl backdrop-blur-xl ${
+      darkMode
+        ? "bg-gray-800/20 border-gray-700/50"
+        : "bg-white/20 border-white/50"
+    } border text-center transform hover:scale-105 transition-all`}
+  >
+    <a href={contributor.html_url} target="_blank" rel="noopener noreferrer">
+      <img
+        src={contributor.avatar_url}
+        alt={contributor.login}
+        className="w-24 h-24 rounded-full mx-auto mb-4 object-cover shadow-lg"
+      />
+      <h3
+        className={`text-xl font-semibold mb-2 ${
+          darkMode ? "text-white" : "text-gray-900"
+        }`}
+      >
+        {contributor.login}
+      </h3>
+    </a>
+    <p
+      className={`text-sm mb-3 ${darkMode ? "text-gray-300" : "text-gray-600"}`}
+    >
+      {contributor.contributions} contributions
+    </p>
+    <a
+      href={contributor.html_url}
+      target="_blank"
+      rel="noopener noreferrer"
+      className={`inline-flex items-center px-3 py-1 rounded-lg text-sm font-medium ${
+        darkMode
+          ? "bg-blue-600/20 text-blue-300 border border-blue-500/30 hover:bg-blue-600/40"
+          : "bg-blue-100 text-blue-800 border border-blue-200 hover:bg-blue-200"
+      }`}
+    >
+      <Github className="h-4 w-4 mr-2" /> View Profile
+    </a>
+  </div>
+);
+
+export default ContributorCard;

frontend/src/components/Contributors/ContributorsGrid.jsx

@@ -0,0 +1,25 @@
+import ContributorCard from "./ContributorCard";
+
+const ContributorsGrid = ({ contributors, loading, error, darkMode }) => {
+  if (loading)
+    return (
+      <p
+        className={`text-center ${
+          darkMode ? "text-gray-300" : "text-gray-600"
+        }`}
+      >
+        Loading contributors...
+      </p>
+    );
+  if (error) return <p className="text-center text-red-500">Error: {error}</p>;
+
+  return (
+    <div className="grid grid-cols-2 md:grid-cols-4 gap-8 mb-16">
+      {contributors.map((c) => (
+        <ContributorCard key={c.id} contributor={c} darkMode={darkMode} />
+      ))}
+    </div>
+  );
+};
+
+export default ContributorsGrid;

frontend/src/components/Contributors/HeroSection.jsx

@@ -0,0 +1,28 @@
+const HeroSection = ({ darkMode }) => (
+  <div
+    className={`text-center mb-16 p-8 rounded-2xl backdrop-blur-xl ${
+      darkMode
+        ? "bg-gray-800/20 border-gray-700/50"
+        : "bg-white/20 border-white/50"
+    } border`}
+  >
+    <h1
+      className={`text-5xl font-bold mb-6 ${
+        darkMode ? "text-white" : "text-gray-900"
+      }`}
+    >
+      Our Contributors
+    </h1>
+    <p
+      className={`text-xl leading-relaxed max-w-4xl mx-auto ${
+        darkMode ? "text-gray-300" : "text-gray-600"
+      }`}
+    >
+      This project is made possible thanks to the amazing contributions from our
+      community members. Explore their work and join us in making this even
+      better.
+    </p>
+  </div>
+);
+
+export default HeroSection;

frontend/src/pages/ContributorsPage.jsx

@@ -0,0 +1,53 @@
+import { useEffect, useState } from "react";
+import HeroSection from "../components/Contributors/HeroSection";
+import ContributorsGrid from "../components/Contributors/ContributorsGrid";
+import CategoriesSection from "../components/Contributors/CategoriesSection";
+import CTASection from "../components/Contributors/CTASection";
+
+const ContributorsPage = ({ darkMode }) => {
+  const [contributors, setContributors] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    async function fetchContributors() {
+      try {
+        const res = await fetch(
+          "https://api.github.com/repos/CipherYuvraj/Algorithm-Visualiser-Platform/contributors"
+        );
+        if (!res.ok) throw new Error("Failed to fetch contributors");
+        const data = await res.json();
+        setContributors(data);
+      } catch (err) {
+        setError(err.message);
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchContributors();
+  }, []);
+
+  return (
+    <div
+      className={`min-h-screen transition-all duration-500 ${
+        darkMode
+          ? "bg-gradient-to-br from-gray-900 via-blue-900 to-purple-900"
+          : "bg-gradient-to-br from-blue-50 via-purple-50 to-pink-50"
+      }`}
+    >
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-6 pb-12">
+        <HeroSection darkMode={darkMode} />
+        <ContributorsGrid
+          contributors={contributors}
+          loading={loading}
+          error={error}
+          darkMode={darkMode}
+        />
+        <CategoriesSection darkMode={darkMode} />
+        <CTASection darkMode={darkMode} />
+      </div>
+    </div>
+  );
+};
+
+export default ContributorsPage;