Add Contribution Page & Contribution Section in (README)

README.md

@@ -99,6 +99,21 @@ Facing problem starting the server or any other problem? Please let us know by r
 ### **<p align="center">Please STAR the repository⭐</p>**
 
 ### Discord
+
+Join Us ![Sure](https://discord.gg/xwRbDwnbMr)
+### Contributors 
+Thanks to all contributors ❤️
+
+Make Sure to add your info in ./src/data/Contibutors.json
+
+<a href="https://github.com/devvsakib/github-error-solve/graphs/contributors">
+    <img src=" https://contrib.rocks/image?repo=devvsakib/github-error-solve">
+</a>
+
+**Live Link <a href="https://github-error-solve.vercel.app" target="_blank">GES</a>**
+
+
 Join Us  <a href="https://discord.gg/xwRbDwnbMr"><img src="https://cdn.worldvectorlogo.com/logos/discord-6.svg" title="Discord" alt="Discord Community" width="20"/></a>
 
 **Live Link <a href="https://github-error-solve.vercel.app" target="_blank">GES</a>**
+

src/components/Contributors/contributors.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import Data from '../../data/Contributors.json';
+import Header from '../../components/Header/Header';
+import './css/index.css';
+
+function Contribute() {
+  return (
+    <div>
+       <Header />
+        {
+          Data.map(data =>
+          <div 
+          id="container"
+          className="py-4 mb-4 col-span-12 md:col-span-6 xl:col-span-4 px-2 md:px-6 border-l-4 rounded-lg   items-start bg-dark-secondary flex flex-col flex mt-8 items-center gap-2 px-3 py-2 border border-gray rounded-lg hover:border-primary hover:text-primary">
+            <h1>{data.name}</h1>
+            <img className='pfp' src={data.image} />
+            <div className="links">
+              <a className='spf-link' href={data.github}>Github</a>
+              <a className='spf-link' href={data.twiter}>Twiter</a>
+              {/* spf-link : abbreviation of (specific-link) for css */}
+            </div>
+          </div>
+          )
+        }
+    </div>
+  )
+}
+
+export default Contribute

src/components/Contributors/css/index.css

@@ -0,0 +1,28 @@
+#container {
+  display: inline-block;
+  width: 17rem;
+  height: 18rem;
+  margin: 2rem;
+}
+
+.links {
+  position: relative;
+  display: inline;
+  top: 20%;
+}
+
+.spf-link {
+  padding: 1.4rem;
+}
+
+.spf-link:hover {
+  text-decoration: underline;
+}
+
+.pfp {
+  position: relative;
+  top: 5%;
+  left: 11%;
+  width: 10rem;
+  border-radius: 50%;
+}/*# sourceMappingURL=index.css.map */

src/components/Contributors/css/index.scss

@@ -0,0 +1,26 @@
+#container{
+
+  display:inline-block;
+  width: 17rem;
+  height: 18rem;
+  margin: 2rem;
+
+}
+.links{
+  position: relative;
+  display: inline;
+  top:20%;
+}
+.spf-link{
+  padding: 1.4rem;
+}
+.spf-link:hover{
+  text-decoration:underline;
+}
+.pfp{
+  position: relative;
+  top: 5%;
+  left: 11%;
+  width:10rem;
+  border-radius: 50%;
+}

src/components/Header/Header.jsx

@@ -17,8 +17,12 @@ function Header({ notice }) {
           <h6>Under Construction</h6>
           <MdInsertDriveFile className="text-lg" />
           <Link to={'/doc'}>Doc</Link>
+
+          <Link to={'/Contributors'}>Contributors</Link>
+
           <a target='_blank' href="https://github.com/devvsakib/github-error-solve"><AiFillGithub size='1.25rem'/></a>
 
+
         </div>
       </div>
     </header>

src/data/Contributors.json

@@ -0,0 +1,18 @@
+
+[
+
+  { "comment": "// To add image go to your profile right click on the image and copy image address",
+
+    "name": "devvsakib",
+    "github": "https://github.com/devvsakib",
+    "twiter": "",
+    "image": "https://avatars.githubusercontent.com/u/88339569?s=120&v=4"
+  },
+  {
+    "name": "MohamedAlDeep",
+    "github": "https://github.com/MohamedAlDeep",
+    "twiter":"",
+    "image": "https://avatars.githubusercontent.com/u/95958815?s=400&v=4"
+  }
+]  
+

src/main.jsx

@@ -6,7 +6,7 @@ import {
   RouterProvider,
 } from "react-router-dom";
 import Doc from "./components/Doc/Doc";
-
+import Contributors from "./components/Contributors/contributors";
 /* Creating a router object that is used to render the correct component based on the url. */
 const router = createBrowserRouter(
   [
@@ -17,7 +17,12 @@ const router = createBrowserRouter(
     {
       path: '/doc',
       element: <Doc />
+    },
+    {
+      path: '/Contributors',
+      element: <Contributors/>
     }
+
   ]
 );
 

src/pages/Contributors.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+import Contributors from '../components/Contributors/contributors.jsx'
+function Contribute() {
+  return (
+    <Contributors />  
+    )
+}
+
+export default Contribute