From 4ab2822de940e2fde4c4df1c95dd363df05189c3 Mon Sep 17 00:00:00 2001
From: adishchowdhury <adishchowdhury18@gmail.com>
Date: Tue, 6 Jan 2026 14:29:24 +0530
Subject: [PATCH 01/12] Add Contributors page for user submissions

---
 .../src/app/pages/Contributors.tsx            | 183 ++++++++++++++++++
 1 file changed, 183 insertions(+)
 create mode 100644 LocalMind-Frontend/src/app/pages/Contributors.tsx

diff --git a/LocalMind-Frontend/src/app/pages/Contributors.tsx b/LocalMind-Frontend/src/app/pages/Contributors.tsx
new file mode 100644
index 0000000..daa439b
--- /dev/null
+++ b/LocalMind-Frontend/src/app/pages/Contributors.tsx
@@ -0,0 +1,183 @@
+import React, { useMemo, useState } from "react";
+import { CONTRIBUTORS, type Contributor } from "../../data/contributors";
+import "./contributors.css";
+
+const REPO_ISSUE_NEW_URL = "https://github.com/NexGenStudioDev/LocalMind/issues/new";
+
+function enc(s: string) {
+  return encodeURIComponent(s);
+}
+
+function buildNewIssueUrl(c: Contributor) {
+  const title = `Add contributor: ${c.name}`;
+
+  const body =
+`Hi maintainers,
+Please add me to the Contributors page.
+
+Name: ${c.name}
+Email: ${c.email}
+GitHub: ${c.github}
+LinkedIn: ${c.linkedin}
+Bio: ${c.bio}
+Area of contribution (optional): ${c.area ?? ""}
+Tags (optional): ${(c.tags ?? []).join(", ")}
+
+Notes:
+- Beginners are welcome.
+- No contribution is too small.
+`;
+
+  return `${REPO_ISSUE_NEW_URL}?title=${enc(title)}&body=${enc(body)}`;
+}
+
+export default function ContributorsPage() {
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [github, setGithub] = useState("");
+  const [linkedin, setLinkedin] = useState("");
+  const [bio, setBio] = useState("");
+  const [area, setArea] = useState("");
+  const [tags, setTags] = useState("");
+
+  const list = useMemo(() => CONTRIBUTORS, []);
+
+  const issueUrl = useMemo(() => {
+    const c: Contributor = {
+      name: name.trim(),
+      email: email.trim(),
+      github: github.trim(),
+      linkedin: linkedin.trim(),
+      bio: bio.trim(),
+      area: area.trim() || undefined,
+      tags: tags
+        .split(",")
+        .map((t) => t.trim())
+        .filter(Boolean),
+    };
+
+    const requiredOk =
+      c.name && c.email && c.github && c.linkedin && c.bio;
+
+    return requiredOk ? buildNewIssueUrl(c) : "";
+  }, [name, email, github, linkedin, bio, area, tags]);
+
+  return (
+    <div className="cwrap">
+      <header className="chead">
+        <h1>Contributors</h1>
+        <p className="csub">
+          This project grows because people like you show up and help.
+          Beginners are welcome, and no contribution is too small.
+        </p>
+      </header>
+
+      <section className="csec">
+        <h2>People who contributed</h2>
+        <div className="cgrid">
+          {list.map((c) => (
+            <article key={c.github + c.email} className="ccard">
+              <div className="ctop">
+                <h3 className="cname">{c.name}</h3>
+                {c.area ? <span className="cpill">{c.area}</span> : null}
+              </div>
+
+              <p className="cbio">{c.bio}</p>
+
+              <div className="clinks">
+                <a href={`mailto:${c.email}`} target="_blank" rel="noreferrer">
+                  {c.email}
+                </a>
+                <a href={c.github} target="_blank" rel="noreferrer">
+                  GitHub
+                </a>
+                <a href={c.linkedin} target="_blank" rel="noreferrer">
+                  LinkedIn
+                </a>
+              </div>
+
+              {c.tags && c.tags.length ? (
+                <div className="ctags">
+                  {c.tags.map((t) => (
+                    <span key={t} className="ctag">{t}</span>
+                  ))}
+                </div>
+              ) : null}
+            </article>
+          ))}
+        </div>
+      </section>
+
+      <section className="csec">
+        <h2>How to become a contributor</h2>
+        <ul className="clist">
+          <li>Pick an issue labeled “good first issue” (or any small task).</li>
+          <li>Fork the repo, create a new branch, and make a focused change.</li>
+          <li>Open a pull request and describe what you changed and why.</li>
+          <li>Ask questions—collaboration helps everyone grow.</li>
+        </ul>
+      </section>
+
+      <section className="csec">
+        <h2>Add your details</h2>
+        <p className="csub">
+          Fill the fields below and click “Create request”.
+          It will open a GitHub issue with your details prefilled.
+        </p>
+
+        <div className="cform">
+          <label>
+            Name *
+            <input value={name} onChange={(e) => setName(e.target.value)} placeholder="Your full name" />
+          </label>
+
+          <label>
+            Email *
+            <input value={email} onChange={(e) => setEmail(e.target.value)} placeholder="you@example.com" />
+          </label>
+
+          <label>
+            GitHub profile link *
+            <input value={github} onChange={(e) => setGithub(e.target.value)} placeholder="https://github.com/username" />
+          </label>
+
+          <label>
+            LinkedIn profile link *
+            <input value={linkedin} onChange={(e) => setLinkedin(e.target.value)} placeholder="https://www.linkedin.com/in/username/" />
+          </label>
+
+          <label>
+            Short bio *
+            <textarea value={bio} onChange={(e) => setBio(e.target.value)} placeholder="2–3 lines about you" />
+          </label>
+
+          <label>
+            Area of contribution (optional)
+            <input value={area} onChange={(e) => setArea(e.target.value)} placeholder="Docs / Frontend / Backend / Design..." />
+          </label>
+
+          <label>
+            Tags (optional, comma-separated)
+            <input value={tags} onChange={(e) => setTags(e.target.value)} placeholder="react, typescript, ui" />
+          </label>
+
+          <div className="cactions">
+            <button
+              className="cbtn"
+              disabled={!issueUrl}
+              onClick={() => window.open(issueUrl, "_blank", "noreferrer")}
+              type="button"
+              title={!issueUrl ? "Fill all required fields first" : "Open GitHub issue"}
+            >
+              Create request (opens GitHub)
+            </button>
+
+            <a className="clink" href={REPO_ISSUE_NEW_URL} target="_blank" rel="noreferrer">
+              Or open a blank issue
+            </a>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}

From e9627ad066b7b85874776861886d9f44cc8e3b8c Mon Sep 17 00:00:00 2001
From: adishchowdhury <adishchowdhury18@gmail.com>
Date: Tue, 6 Jan 2026 14:30:38 +0530
Subject: [PATCH 02/12] Add contributors.css for contributors page styling

---
 .../src/app/pages/contributors.css            | 46 +++++++++++++++++++
 1 file changed, 46 insertions(+)
 create mode 100644 LocalMind-Frontend/src/app/pages/contributors.css

diff --git a/LocalMind-Frontend/src/app/pages/contributors.css b/LocalMind-Frontend/src/app/pages/contributors.css
new file mode 100644
index 0000000..835a672
--- /dev/null
+++ b/LocalMind-Frontend/src/app/pages/contributors.css
@@ -0,0 +1,46 @@
+.cwrap { max-width: 1050px; margin: 0 auto; padding: 24px 16px 60px; }
+.chead h1 { margin: 0 0 8px; font-size: 34px; }
+.csub { margin: 0; opacity: 0.85; line-height: 1.5; }
+.csec { margin-top: 28px; }
+.csec h2 { margin: 0 0 12px; font-size: 20px; }
+
+.cgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
+.ccard { border: 1px solid rgba(0,0,0,0.12); border-radius: 12px; padding: 14px; background: #fff; }
+.ctop { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
+.cname { margin: 0; font-size: 16px; }
+.cpill { font-size: 12px; padding: 4px 8px; border-radius: 999px; background: rgba(0,0,0,0.06); }
+.cbio { margin: 10px 0; line-height: 1.45; opacity: 0.9; }
+
+.clinks { display: flex; gap: 12px; flex-wrap: wrap; }
+.clinks a { text-decoration: none; color: #2563eb; }
+.clinks a:hover { text-decoration: underline; }
+
+.ctags { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
+.ctag { font-size: 12px; padding: 4px 8px; border-radius: 999px; border: 1px solid rgba(0,0,0,0.12); }
+
+.clist { margin: 10px 0 0; padding-left: 18px; line-height: 1.6; }
+
+.cform { display: grid; gap: 10px; max-width: 650px; }
+.cform label { display: grid; gap: 6px; font-size: 13px; opacity: 0.95; }
+.cform input, .cform textarea {
+  width: 100%;
+  border: 1px solid rgba(0,0,0,0.16);
+  border-radius: 10px;
+  padding: 10px 12px;
+  font-size: 14px;
+  outline: none;
+}
+.cform textarea { min-height: 90px; resize: vertical; }
+
+.cactions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
+.cbtn {
+  border: none;
+  border-radius: 10px;
+  padding: 10px 14px;
+  background: #111827;
+  color: white;
+  cursor: pointer;
+}
+.cbtn:disabled { opacity: 0.5; cursor: not-allowed; }
+.clink { color: #2563eb; text-decoration: none; }
+.clink:hover { text-decoration: underline; }

From fbf9f50ba3c59b7d94e0dce536ec4ce7319d92ac Mon Sep 17 00:00:00 2001
From: adishchowdhury <adishchowdhury18@gmail.com>
Date: Tue, 6 Jan 2026 14:35:05 +0530
Subject: [PATCH 03/12] Add Contributor type and sample data

---
 LocalMind-Frontend/src/data/contributors.ts | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)
 create mode 100644 LocalMind-Frontend/src/data/contributors.ts

diff --git a/LocalMind-Frontend/src/data/contributors.ts b/LocalMind-Frontend/src/data/contributors.ts
new file mode 100644
index 0000000..5d51c4a
--- /dev/null
+++ b/LocalMind-Frontend/src/data/contributors.ts
@@ -0,0 +1,21 @@
+export type Contributor = {
+  name: string;
+  email: string;
+  github: string;
+  linkedin: string;
+  bio: string;
+  area?: string; // optional
+  tags?: string[]; // optional
+};
+
+export const CONTRIBUTORS: Contributor[] = [
+  {
+    name: "Abhishek Kumar",
+    email: "example@email.com",
+    github: "https://github.com/abhishek-nexgen-dev",
+    linkedin: "https://www.linkedin.com/in/your-link/",
+    bio: "Aspiring software engineer. Interested in building friendly open-source tools.",
+    area: "Core development",
+    tags: ["frontend", "typescript"],
+  },
+];

From f9ad4660685ae32964ff31f690b18014922e8f53 Mon Sep 17 00:00:00 2001
From: adishchowdhury <adishchowdhury18@gmail.com>
Date: Tue, 6 Jan 2026 14:38:52 +0530
Subject: [PATCH 04/12] Add ContributorsPage route to AppRoutes

---
 LocalMind-Frontend/src/app/routes/AppRoutes.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/LocalMind-Frontend/src/app/routes/AppRoutes.tsx b/LocalMind-Frontend/src/app/routes/AppRoutes.tsx
index af480f1..dfc4333 100644
--- a/LocalMind-Frontend/src/app/routes/AppRoutes.tsx
+++ b/LocalMind-Frontend/src/app/routes/AppRoutes.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 import { Route, Routes } from 'react-router-dom'
 import HomePage from '../../features/Dashboard/V1/Component/Pages/HomePage'
 import LoginPage from '../../shared/component/v1/LoginPage'
+import ContributorsPage from "../pages/Contributors"; 
 
 const AppRoutes: React.FC = () => {
   return (
@@ -19,6 +20,9 @@ const AppRoutes: React.FC = () => {
       <Route path="/forgot-password" element={<LoginPage />} />
 
       {/* Chat Page */}
+
+      {/* Contributors page*/}
+      <Route path="/contributors" element={<ContributorsPage />} />
     </Routes>
   )
 }

From 516b5b3a719d69b058299f20aca0a38d434c6d9f Mon Sep 17 00:00:00 2001
From: adishchowdhury <adishchowdhury18@gmail.com>
Date: Tue, 6 Jan 2026 14:44:06 +0530
Subject: [PATCH 05/12] Fix import statement for NavLink in Navbar component

---
 LocalMind-Frontend/src/shared/component/v1/Navbar.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/LocalMind-Frontend/src/shared/component/v1/Navbar.tsx b/LocalMind-Frontend/src/shared/component/v1/Navbar.tsx
index bfe080a..8161468 100644
--- a/LocalMind-Frontend/src/shared/component/v1/Navbar.tsx
+++ b/LocalMind-Frontend/src/shared/component/v1/Navbar.tsx
@@ -1,6 +1,8 @@
 import React from 'react'
 import Artificialintelligence from '../../../assets/Artificial intelligence.png'
 import { NavLink } from 'react-router-dom'
+import { NavLink } from "react-router-dom";
+
 
 const Navbar: React.FC = () => {
   const navLinkClass = ({ isActive }: { isActive: boolean }) =>
@@ -26,6 +28,10 @@ const Navbar: React.FC = () => {
         <NavLink to="/play-ground" className={navLinkClass}>
           PlayGround
         </NavLink>
+        <NavLink to="/contributors" className={navLinkClass}>
+         Contributors
+        </NavLink>
+
       </div>
 
       <NavLink

From bf2d0558cf6c3a9a6ba6c5b56dd19675e3e83075 Mon Sep 17 00:00:00 2001
From: adishchowdhury <adishchowdhury18@gmail.com>
Date: Tue, 6 Jan 2026 14:50:56 +0530
Subject: [PATCH 06/12] Update
 LocalMind-Frontend/src/shared/component/v1/Navbar.tsx

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
---
 LocalMind-Frontend/src/shared/component/v1/Navbar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/LocalMind-Frontend/src/shared/component/v1/Navbar.tsx b/LocalMind-Frontend/src/shared/component/v1/Navbar.tsx
index 8161468..d2967e4 100644
--- a/LocalMind-Frontend/src/shared/component/v1/Navbar.tsx
+++ b/LocalMind-Frontend/src/shared/component/v1/Navbar.tsx
@@ -29,7 +29,7 @@ const Navbar: React.FC = () => {
           PlayGround
         </NavLink>
         <NavLink to="/contributors" className={navLinkClass}>
-         Contributors
+          Contributors
         </NavLink>
 
       </div>

From 5b97ee9c2ac52b303ee97e6e0500e8ae0bc975fa Mon Sep 17 00:00:00 2001
From: adishchowdhury <adishchowdhury18@gmail.com>
Date: Tue, 6 Jan 2026 14:51:38 +0530
Subject: [PATCH 07/12] Update
 LocalMind-Frontend/src/app/pages/Contributors.tsx

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
---
 LocalMind-Frontend/src/app/pages/Contributors.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/LocalMind-Frontend/src/app/pages/Contributors.tsx b/LocalMind-Frontend/src/app/pages/Contributors.tsx
index daa439b..61d9dee 100644
--- a/LocalMind-Frontend/src/app/pages/Contributors.tsx
+++ b/LocalMind-Frontend/src/app/pages/Contributors.tsx
@@ -165,7 +165,7 @@ export default function ContributorsPage() {
             <button
               className="cbtn"
               disabled={!issueUrl}
-              onClick={() => window.open(issueUrl, "_blank", "noreferrer")}
+              onClick={() => window.open(issueUrl, "_blank", "noopener,noreferrer")}
               type="button"
               title={!issueUrl ? "Fill all required fields first" : "Open GitHub issue"}
             >

From db5979550351a922fda49ad52d27ad37e8df60a9 Mon Sep 17 00:00:00 2001
From: adishchowdhury <adishchowdhury18@gmail.com>
Date: Tue, 6 Jan 2026 14:51:52 +0530
Subject: [PATCH 08/12] Update
 LocalMind-Frontend/src/app/pages/Contributors.tsx

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
---
 LocalMind-Frontend/src/app/pages/Contributors.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/LocalMind-Frontend/src/app/pages/Contributors.tsx b/LocalMind-Frontend/src/app/pages/Contributors.tsx
index 61d9dee..73a3a1a 100644
--- a/LocalMind-Frontend/src/app/pages/Contributors.tsx
+++ b/LocalMind-Frontend/src/app/pages/Contributors.tsx
@@ -88,10 +88,10 @@ export default function ContributorsPage() {
                 <a href={`mailto:${c.email}`} target="_blank" rel="noreferrer">
                   {c.email}
                 </a>
-                <a href={c.github} target="_blank" rel="noreferrer">
+                <a href={c.github} target="_blank" rel="noopener noreferrer">
                   GitHub
                 </a>
-                <a href={c.linkedin} target="_blank" rel="noreferrer">
+                <a href={c.linkedin} target="_blank" rel="noopener noreferrer">
                   LinkedIn
                 </a>
               </div>

From 1e2bed8bae3fbf63ba7616e420e5195d16a1beca Mon Sep 17 00:00:00 2001
From: adishchowdhury <adishchowdhury18@gmail.com>
Date: Tue, 6 Jan 2026 14:52:12 +0530
Subject: [PATCH 09/12] Update
 LocalMind-Frontend/src/app/pages/Contributors.tsx

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
---
 LocalMind-Frontend/src/app/pages/Contributors.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/LocalMind-Frontend/src/app/pages/Contributors.tsx b/LocalMind-Frontend/src/app/pages/Contributors.tsx
index 73a3a1a..b0742cc 100644
--- a/LocalMind-Frontend/src/app/pages/Contributors.tsx
+++ b/LocalMind-Frontend/src/app/pages/Contributors.tsx
@@ -40,7 +40,7 @@ export default function ContributorsPage() {
   const [area, setArea] = useState("");
   const [tags, setTags] = useState("");
 
-  const list = useMemo(() => CONTRIBUTORS, []);
+  const list = CONTRIBUTORS;
 
   const issueUrl = useMemo(() => {
     const c: Contributor = {

From f273ca31c706ba1984b60a7358d101f10f19fcfc Mon Sep 17 00:00:00 2001
From: adishchowdhury <adishchowdhury18@gmail.com>
Date: Tue, 6 Jan 2026 19:39:36 +0530
Subject: [PATCH 10/12] Remove duplicate NavLink import in Navbar component

Removed duplicate import statement for NavLink.
---
 LocalMind-Frontend/src/shared/component/v1/Navbar.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/LocalMind-Frontend/src/shared/component/v1/Navbar.tsx b/LocalMind-Frontend/src/shared/component/v1/Navbar.tsx
index d2967e4..06520c5 100644
--- a/LocalMind-Frontend/src/shared/component/v1/Navbar.tsx
+++ b/LocalMind-Frontend/src/shared/component/v1/Navbar.tsx
@@ -1,7 +1,6 @@
 import React from 'react'
 import Artificialintelligence from '../../../assets/Artificial intelligence.png'
 import { NavLink } from 'react-router-dom'
-import { NavLink } from "react-router-dom";
 
 
 const Navbar: React.FC = () => {

From bc412bc5fa72882661e1666ffe409fec30e96a20 Mon Sep 17 00:00:00 2001
From: adishchowdhury <adishchowdhury18@gmail.com>
Date: Tue, 6 Jan 2026 19:53:28 +0530
Subject: [PATCH 11/12] Rename contributors.css to contributors.module.css

---
 .../src/app/pages/{contributors.css => contributors.module.css}   | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename LocalMind-Frontend/src/app/pages/{contributors.css => contributors.module.css} (100%)

diff --git a/LocalMind-Frontend/src/app/pages/contributors.css b/LocalMind-Frontend/src/app/pages/contributors.module.css
similarity index 100%
rename from LocalMind-Frontend/src/app/pages/contributors.css
rename to LocalMind-Frontend/src/app/pages/contributors.module.css

From 98796f7f7da5b5589be1a3bc0d6b5d2fe598465a Mon Sep 17 00:00:00 2001
From: adishchowdhury <adishchowdhury18@gmail.com>
Date: Tue, 6 Jan 2026 19:59:17 +0530
Subject: [PATCH 12/12] Refactor Contributors page to use CSS modules

---
 .../src/app/pages/Contributors.tsx            | 117 ++++++++++++------
 1 file changed, 76 insertions(+), 41 deletions(-)

diff --git a/LocalMind-Frontend/src/app/pages/Contributors.tsx b/LocalMind-Frontend/src/app/pages/Contributors.tsx
index b0742cc..c6cd16f 100644
--- a/LocalMind-Frontend/src/app/pages/Contributors.tsx
+++ b/LocalMind-Frontend/src/app/pages/Contributors.tsx
@@ -1,18 +1,17 @@
 import React, { useMemo, useState } from "react";
 import { CONTRIBUTORS, type Contributor } from "../../data/contributors";
-import "./contributors.css";
+import s from "./contributors.module.css";
 
 const REPO_ISSUE_NEW_URL = "https://github.com/NexGenStudioDev/LocalMind/issues/new";
 
-function enc(s: string) {
-  return encodeURIComponent(s);
+function enc(x: string) {
+  return encodeURIComponent(x);
 }
 
 function buildNewIssueUrl(c: Contributor) {
   const title = `Add contributor: ${c.name}`;
 
-  const body =
-`Hi maintainers,
+  const body = `Hi maintainers,
 Please add me to the Contributors page.
 
 Name: ${c.name}
@@ -56,35 +55,35 @@ export default function ContributorsPage() {
         .filter(Boolean),
     };
 
-    const requiredOk =
-      c.name && c.email && c.github && c.linkedin && c.bio;
-
-    return requiredOk ? buildNewIssueUrl(c) : "";
+    return c.name && c.email && c.github && c.linkedin && c.bio
+      ? buildNewIssueUrl(c)
+      : "";
   }, [name, email, github, linkedin, bio, area, tags]);
 
   return (
-    <div className="cwrap">
-      <header className="chead">
+    <div className={s.cwrap}>
+      <header className={s.chead}>
         <h1>Contributors</h1>
-        <p className="csub">
-          This project grows because people like you show up and help.
-          Beginners are welcome, and no contribution is too small.
+        <p className={s.csub}>
+          This project grows because people like you show up and help. Beginners
+          are welcome, and no contribution is too small.
         </p>
       </header>
 
-      <section className="csec">
+      <section className={s.csec}>
         <h2>People who contributed</h2>
-        <div className="cgrid">
+
+        <div className={s.cgrid}>
           {list.map((c) => (
-            <article key={c.github + c.email} className="ccard">
-              <div className="ctop">
-                <h3 className="cname">{c.name}</h3>
-                {c.area ? <span className="cpill">{c.area}</span> : null}
+            <article key={c.github + c.email} className={s.ccard}>
+              <div className={s.ctop}>
+                <h3 className={s.cname}>{c.name}</h3>
+                {c.area ? <span className={s.cpill}>{c.area}</span> : null}
               </div>
 
-              <p className="cbio">{c.bio}</p>
+              <p className={s.cbio}>{c.bio}</p>
 
-              <div className="clinks">
+              <div className={s.clinks}>
                 <a href={`mailto:${c.email}`} target="_blank" rel="noreferrer">
                   {c.email}
                 </a>
@@ -97,9 +96,11 @@ export default function ContributorsPage() {
               </div>
 
               {c.tags && c.tags.length ? (
-                <div className="ctags">
+                <div className={s.ctags}>
                   {c.tags.map((t) => (
-                    <span key={t} className="ctag">{t}</span>
+                    <span key={t} className={s.ctag}>
+                      {t}
+                    </span>
                   ))}
                 </div>
               ) : null}
@@ -108,9 +109,9 @@ export default function ContributorsPage() {
         </div>
       </section>
 
-      <section className="csec">
+      <section className={s.csec}>
         <h2>How to become a contributor</h2>
-        <ul className="clist">
+        <ul className={s.clist}>
           <li>Pick an issue labeled “good first issue” (or any small task).</li>
           <li>Fork the repo, create a new branch, and make a focused change.</li>
           <li>Open a pull request and describe what you changed and why.</li>
@@ -118,52 +119,81 @@ export default function ContributorsPage() {
         </ul>
       </section>
 
-      <section className="csec">
+      <section className={s.csec}>
         <h2>Add your details</h2>
-        <p className="csub">
-          Fill the fields below and click “Create request”.
-          It will open a GitHub issue with your details prefilled.
+
+        <p className={s.csub}>
+          Fill the fields below and click “Create request”. It will open a
+          GitHub issue with your details prefilled.
         </p>
 
-        <div className="cform">
+        <div className={s.cform}>
           <label>
             Name *
-            <input value={name} onChange={(e) => setName(e.target.value)} placeholder="Your full name" />
+            <input
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="Your full name"
+            />
           </label>
 
           <label>
             Email *
-            <input value={email} onChange={(e) => setEmail(e.target.value)} placeholder="you@example.com" />
+            <input
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="you@example.com"
+            />
           </label>
 
           <label>
             GitHub profile link *
-            <input value={github} onChange={(e) => setGithub(e.target.value)} placeholder="https://github.com/username" />
+            <input
+              value={github}
+              onChange={(e) => setGithub(e.target.value)}
+              placeholder="https://github.com/username"
+            />
           </label>
 
           <label>
             LinkedIn profile link *
-            <input value={linkedin} onChange={(e) => setLinkedin(e.target.value)} placeholder="https://www.linkedin.com/in/username/" />
+            <input
+              value={linkedin}
+              onChange={(e) => setLinkedin(e.target.value)}
+              placeholder="https://www.linkedin.com/in/username/"
+            />
           </label>
 
           <label>
             Short bio *
-            <textarea value={bio} onChange={(e) => setBio(e.target.value)} placeholder="2–3 lines about you" />
+            <textarea
+              value={bio}
+              onChange={(e) => setBio(e.target.value)}
+              placeholder="2–3 lines about you"
+            />
           </label>
 
           <label>
             Area of contribution (optional)
-            <input value={area} onChange={(e) => setArea(e.target.value)} placeholder="Docs / Frontend / Backend / Design..." />
+            <input
+              value={area}
+              onChange={(e) => setArea(e.target.value)}
+              placeholder="Docs / Frontend / Backend / Design..."
+            />
           </label>
 
           <label>
             Tags (optional, comma-separated)
-            <input value={tags} onChange={(e) => setTags(e.target.value)} placeholder="react, typescript, ui" />
+            <input
+              value={tags}
+              onChange={(e) => setTags(e.target.value)}
+              placeholder="react, typescript, ui"
+            />
           </label>
 
-          <div className="cactions">
+          <div className={s.cactions}>
             <button
-              className="cbtn"
+              className={s.cbtn}
               disabled={!issueUrl}
               onClick={() => window.open(issueUrl, "_blank", "noopener,noreferrer")}
               type="button"
@@ -172,7 +202,12 @@ export default function ContributorsPage() {
               Create request (opens GitHub)
             </button>
 
-            <a className="clink" href={REPO_ISSUE_NEW_URL} target="_blank" rel="noreferrer">
+            <a
+              className={s.clink}
+              href={REPO_ISSUE_NEW_URL}
+              target="_blank"
+              rel="noreferrer"
+            >
               Or open a blank issue
             </a>
           </div>