feat: add custom 404 error page

CONTRIBUTING.md

@@ -1,130 +1,130 @@
-# 🌟 Contributing to GitHub Tracker
+   # 🌟 Contributing to GitHub Tracker
 
-Thank you for showing interest in **GitHub Tracker**! 🚀  
-Whether you're here to fix a bug, propose an enhancement, or add a new feature, we’re thrilled to welcome you aboard. Let’s build something awesome together!
+   Thank you for showing interest in **GitHub Tracker**! 🚀  
+   Whether you're here to fix a bug, propose an enhancement, or add a new feature, we’re thrilled to welcome you aboard. Let’s build something awesome together!
 
-<br>
+   <br>
 
-## 🧑‍⚖️ Code of Conduct
+   ## 🧑‍⚖️ Code of Conduct
 
-Please make sure to read and adhere to our [Code of Conduct](https://github.com/GitMetricsLab/github_tracker/CODE_OF_CONDUCT.md) before contributing. We aim to foster a respectful and inclusive environment for everyone.
+   Please make sure to read and adhere to our [Code of Conduct](https://github.com/GitMetricsLab/github_tracker/CODE_OF_CONDUCT.md) before contributing. We aim to foster a respectful and inclusive environment for everyone.
 
-<br>
+   <br>
 
-## 🛠 Project Structure
+   ## 🛠 Project Structure
 
-```bash
-github_tracker/
-├── backend/                  # Node.js + Express backend
-│   ├── routes/               # API routes
-│   ├── controllers/          # Logic handlers
-│   └── index.js              # Entry point for server
-│
-├── frontend/                 # React + Vite frontend
-│   ├── components/           # Reusable UI components
-│   ├── pages/                # Main pages/routes
-│   └── main.jsx              # Root file
-│
-├── public/                   # Static assets like images
-│
-├── .gitignore
-├── README.md
-├── package.json
-├── tailwind.config.js
-└── CONTRIBUTING.md
-```
+   ```bash
+   github_tracker/
+   ├── backend/                  # Node.js + Express backend
+   │   ├── routes/               # API routes
+   │   ├── controllers/          # Logic handlers
+   │   └── index.js              # Entry point for server
+   │
+   ├── frontend/                 # React + Vite frontend
+   │   ├── components/           # Reusable UI components
+   │   ├── pages/                # Main pages/routes
+   │   └── main.jsx              # Root file
+   │
+   ├── public/                   # Static assets like images
+   │
+   ├── .gitignore
+   ├── README.md
+   ├── package.json
+   ├── tailwind.config.js
+   └── CONTRIBUTING.md
+   ```
 
----
+   ---
 
-## 🤝 How to Contribute
+   ## 🤝 How to Contribute
 
-### 🧭 First-Time Contribution Steps
+   ### 🧭 First-Time Contribution Steps
 
-1. **Fork the Repository** 🍴  
-   Click "Fork" to create your own copy under your GitHub account.
+   1. **Fork the Repository** 🍴  
+      Click "Fork" to create your own copy under your GitHub account.
 
-2. **Clone Your Fork** 📥  
-   ```bash
-   git clone https://github.com/<your-username>/github_tracker.git
-   ```
+   2. **Clone Your Fork** 📥  
+      ```bash
+      git clone https://github.com/<your-username>/github_tracker.git
+      ```
 
-3. **Navigate to the Project Folder** 📁  
-   ```bash
-   cd github_tracker
-   ```
+   3. **Navigate to the Project Folder** 📁  
+      ```bash
+      cd github_tracker
+      ```
 
-4. **Create a New Branch** 🌿  
-   ```bash
-   git checkout -b your-feature-name
-   ```
+   4. **Create a New Branch** 🌿  
+      ```bash
+      git checkout -b your-feature-name
+      ```
 
-5. **Make Your Changes** ✍  
-   After modifying files, stage and commit:
+   5. **Make Your Changes** ✍  
+      After modifying files, stage and commit:
 
-   ```bash
-   git add .
-   git commit -m "✨ Added [feature/fix]: your message"
-   ```
+      ```bash
+      git add .
+      git commit -m "✨ Added [feature/fix]: your message"
+      ```
 
-6. **Push Your Branch to GitHub** 🚀  
-   ```bash
-   git push origin your-feature-name
-   ```
+   6. **Push Your Branch to GitHub** 🚀  
+      ```bash
+      git push origin your-feature-name
+      ```
 
-7. **Open a Pull Request** 🔁  
-   Go to the original repo and click **Compare & pull request**.
-
----
+   7. **Open a Pull Request** 🔁  
+      Go to the original repo and click **Compare & pull request**.
+      
+   ---
 
-## 🚦 Pull Request Guidelines
+   ## 🚦 Pull Request Guidelines
 
-### **Split Big Changes into Multiple Commits**
-- When making large or complex changes, break them into smaller, logical commits. 
-- Each commit should represent a single purpose or unit of change (e.g. refactoring, adding a feature, fixing a bug).
----
-- ✅ Ensure your code builds and runs without errors.
-- 🧪 Include tests where applicable.
-- 💬 Add comments if the logic is non-trivial.
-- 📸 Attach screenshots for UI-related changes.
-- 🔖 Use meaningful commit messages and titles.
+   ### **Split Big Changes into Multiple Commits**
+   - When making large or complex changes, break them into smaller, logical commits. 
+   - Each commit should represent a single purpose or unit of change (e.g. refactoring, adding a feature, fixing a bug).
+   ---
+   - ✅ Ensure your code builds and runs without errors.
+   - 🧪 Include tests where applicable.
+   - 💬 Add comments if the logic is non-trivial.
+   - 📸 Attach screenshots for UI-related changes.
+   - 🔖 Use meaningful commit messages and titles.
 
----
+   ---
 
-## 🐞 Reporting Issues
+   ## 🐞 Reporting Issues
 
-If you discover a bug or have a suggestion:
+   If you discover a bug or have a suggestion:
 
-➡️ [Open an Issue](https://github.com/GitMetricsLab/github_tracker/issues/new/choose)
+   ➡️ [Open an Issue](https://github.com/GitMetricsLab/github_tracker/issues/new/choose)
 
-Please include:
+   Please include:
 
-- **Steps to Reproduce**
-- **Expected vs. Actual Behavior**
-- **Screenshots/Logs (if any)**
+   - **Steps to Reproduce**
+   - **Expected vs. Actual Behavior**
+   - **Screenshots/Logs (if any)**
 
----
+   ---
 
-## 🧠 Good Coding Practices
+   ## 🧠 Good Coding Practices
 
-1. **Consistent Style**  
-   Stick to the project's linting and formatting conventions (e.g., ESLint, Prettier, Tailwind classes).
+   1. **Consistent Style**  
+      Stick to the project's linting and formatting conventions (e.g., ESLint, Prettier, Tailwind classes).
 
-2. **Meaningful Naming**  
-   Use self-explanatory names for variables and functions.
+   2. **Meaningful Naming**  
+      Use self-explanatory names for variables and functions.
 
-3. **Avoid Duplication**  
-   Keep your code DRY (Don't Repeat Yourself).
+   3. **Avoid Duplication**  
+      Keep your code DRY (Don't Repeat Yourself).
 
-4. **Testing**  
-   Add unit or integration tests for any new logic.
+   4. **Testing**  
+      Add unit or integration tests for any new logic.
 
-5. **Review Others’ PRs**  
-   Help others by reviewing their PRs too!
+   5. **Review Others’ PRs**  
+      Help others by reviewing their PRs too!
 
----
+   ---
 
-## 🙌 Thank You!
+   ## 🙌 Thank You!
 
-We’re so glad you’re here. Your time and effort are deeply appreciated. Feel free to reach out via Issues or Discussions if you need any help.
+   We’re so glad you’re here. Your time and effort are deeply appreciated. Feel free to reach out via Issues or Discussions if you need any help.
 
-**Happy Coding!** 💻🚀  
+   **Happy Coding!** 💻🚀  

src/Routes/Router.tsx

@@ -6,6 +6,7 @@ import Contributors from "../pages/Contributors/Contributors";
 import Signup from "../pages/Signup/Signup.tsx";
 import Login from "../pages/Login/Login.tsx";
 import ContributorProfile from "../pages/ContributorProfile/ContributorProfile.tsx";
+import Custom404 from "../pages/404.tsx";
 import Home from "../pages/Home/Home.tsx";
 
 const Router = () => {
@@ -19,6 +20,7 @@ const Router = () => {
       <Route path="/contact" element={<Contact />} />
       <Route path="/contributors" element={<Contributors />} />
       <Route path="/contributor/:username" element={<ContributorProfile />} />
+      <Route path="*" element={<Custom404 />} />
     </Routes>
   );
 };

src/pages/404.tsx

@@ -0,0 +1,28 @@
+import { Link } from "react-router-dom";
+
+export default function Custom404() {
+  return (
+    <section className="min-h-screen w-full flex items-center justify-center bg-gradient-to-br from-gray-50 to-blue-100 px-6">
+      <div className="text-center">
+        <h1 className="text-7xl md:text-8xl font-extrabold text-blue-600 mb-4">
+          404
+        </h1>
+
+        <h2 className="text-2xl md:text-3xl font-bold text-gray-900 mb-4">
+          Page Not Found
+        </h2>
+
+        <p className="text-gray-600 text-lg mb-8 max-w-md">
+          The page you are looking for does not exist or has been moved.
+        </p>
+
+        <Link
+          to="/"
+          className="inline-block bg-blue-600 text-white px-8 py-4 rounded-lg font-semibold hover:bg-blue-700 transition-all transform hover:scale-105 shadow-lg"
+        >
+          Go Back Home
+        </Link>
+      </div>
+    </section>
+  );
+}