From b0f0bcf5dfabed21aa8b443229b73cea1a7fc6c3 Mon Sep 17 00:00:00 2001
From: devvsakib <devvsakib@gmail.com>
Date: Tue, 30 Jul 2024 22:14:21 +0600
Subject: [PATCH 1/4] resource page added with few free resource list

---
 src/components/Common/MainTitle.jsx          |  8 ++++
 src/components/Header/Header.jsx             |  7 ++--
 src/components/Resources/ResourceSection.jsx | 21 ++++++++++
 src/data/Resources.json                      | 44 ++++++++++++++++++++
 src/main.jsx                                 |  7 +++-
 src/pages/Doc/index.jsx                      |  5 ++-
 src/pages/Resources.jsx                      | 27 ++++++++++++
 7 files changed, 113 insertions(+), 6 deletions(-)
 create mode 100644 src/components/Common/MainTitle.jsx
 create mode 100644 src/components/Resources/ResourceSection.jsx
 create mode 100644 src/data/Resources.json
 create mode 100644 src/pages/Resources.jsx

diff --git a/src/components/Common/MainTitle.jsx b/src/components/Common/MainTitle.jsx
new file mode 100644
index 0000000..6899055
--- /dev/null
+++ b/src/components/Common/MainTitle.jsx
@@ -0,0 +1,8 @@
+const MainTitle = ({
+    title,
+    highlight
+}) => {
+    return <h1 className="text-2xl sm:text-3xl font-bold mb-16 mt-5 text-center w-10/12 sm:w-full mx-auto">{title} <span className='text-transparent bg-gradient-to-tr from-primary to-white bg-clip-text'>{highlight}</span></h1>;
+};
+
+export default MainTitle;
diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
index cedd611..76e9fe0 100644
--- a/src/components/Header/Header.jsx
+++ b/src/components/Header/Header.jsx
@@ -4,6 +4,7 @@ import {
   MdClose,
   MdMenu,
   MdHome,
+  MdStore,
 } from "react-icons/md";
 import { AiFillGithub } from "react-icons/ai";
 import { Link } from "react-router-dom";
@@ -28,9 +29,9 @@ function Header({ countStar, notice }) {
       icon: <MdInsertDriveFile size="1.2rem" />,
     },
     {
-      name: "Contributors",
-      link: "/Contributors",
-      icon: <MdPeople size="1.2rem" />,
+      name: "Resources",
+      link: "/resources",
+      icon: <MdStore size="1.2rem" />,
     },
     {
       name: "Github",
diff --git a/src/components/Resources/ResourceSection.jsx b/src/components/Resources/ResourceSection.jsx
new file mode 100644
index 0000000..11df0e6
--- /dev/null
+++ b/src/components/Resources/ResourceSection.jsx
@@ -0,0 +1,21 @@
+import { Link } from "react-router-dom";
+
+const ResourceSection = ({ title, resources }) => (
+    <section className="my-10">
+        <h2 className="text-2xl font-bold mb-4">{title}</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {resources.map((resource, index) => (
+                <div key={index} className="p-4 bg-black rounded-lg shadow-md flex flex-col items-center overflow-hidden">
+                    {resource.image && <img src={resource.image} alt={resource.title} className="mb-4 object-cover object-center w-full h-36 rounded-t-lg" />}
+                    <h3 className="text-xl font-semibold mb-2">{resource.title}</h3>
+                    <p className="mb-4">{resource.description}</p>
+                    <Link to={resource.link} target="_blank" rel="noopener noreferrer" className="text-blue-500 underline">
+                        Learn More
+                    </Link>
+                </div>
+            ))}
+        </div>
+    </section>
+);
+
+export default ResourceSection;
diff --git a/src/data/Resources.json b/src/data/Resources.json
new file mode 100644
index 0000000..b616b58
--- /dev/null
+++ b/src/data/Resources.json
@@ -0,0 +1,44 @@
+{
+    "learningResources": [
+        {
+            "title": "FreeCodeCamp",
+            "description": "Learn web development for free with interactive tutorials.",
+            "link": "https://www.freecodecamp.org",
+            "image": "https://upload.wikimedia.org/wikipedia/commons/3/39/FreeCodeCamp_logo.png"
+        },
+        {
+            "title": "MDN Web Docs",
+            "description": "Comprehensive documentation and tutorials for web technologies.",
+            "link": "https://developer.mozilla.org",
+            "image": "https://community.mozilla.org/wp-content/uploads/2021/11/mdn_web_docs_feature.png"
+        }
+    ],
+    "toolsLibraries": [
+        {
+            "title": "React",
+            "description": "A JavaScript library for building user interfaces.",
+            "link": "https://reactjs.org",
+            "image": "https://www.nexoid.com/technology/reactjs/react_js_logo.webp"
+        },
+        {
+            "title": "Bootstrap",
+            "description": "A popular framework for building responsive and mobile-first websites.",
+            "link": "https://getbootstrap.com",
+            "image": "https://icons.getbootstrap.com/assets/img/icons-hero.png"
+        }
+    ],
+    "careerRoadmaps": [
+        {
+            "title": "Frontend Developer Roadmap",
+            "description": "A comprehensive guide for becoming a frontend developer.",
+            "link": "https://roadmap.sh/frontend",
+            "image": "https://roadmap.sh/og/roadmap/frontend"
+        },
+        {
+            "title": "Backend Developer Roadmap",
+            "description": "A complete guide for becoming a backend developer.",
+            "link": "https://roadmap.sh/backend",
+            "image": "https://roadmap.sh/og/roadmap/backend"
+        }
+    ]
+}
\ No newline at end of file
diff --git a/src/main.jsx b/src/main.jsx
index 0402dc5..f81c419 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -10,6 +10,7 @@ import BGShape from "./components/BGShape";
 import NotFound from "./pages/NotFound";
 import DocList from "./pages/Doc";
 import DocDetail from "./pages/Doc/single doc";
+import Resources from "./pages/Resources";
 
 const router = createBrowserRouter(
   [
@@ -26,7 +27,11 @@ const router = createBrowserRouter(
       element: <DocDetail />
     },
     {
-      path: '/Contributors',
+      path: '/resources',
+      element: <Resources />
+    },
+    {
+      path: '/contributors',
       element: <Contributors />
     },
     {
diff --git a/src/pages/Doc/index.jsx b/src/pages/Doc/index.jsx
index d155ae0..4ac049a 100644
--- a/src/pages/Doc/index.jsx
+++ b/src/pages/Doc/index.jsx
@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom';
 import { List, Spin, Alert } from 'antd';
 import Layout from '../../components/Layout/Layout';
 import { FaArrowRight } from "react-icons/fa";
+import MainTitle from '../../components/Common/MainTitle';
 
 const DocList = () => {
     const [docs, setDocs] = useState([]);
@@ -37,12 +38,12 @@ const DocList = () => {
     return (
         <Layout>
             <div className="container mx-auto p-4 min-h-screen">
-                <h1 className="text-3xl font-bold mb-20 mt-5 text-center">Documentation</h1>
+                <MainTitle highlight={'Documentation'} />
                 <ul className='grid gap-5 mx-auto md:max-w-2xl'>
                     {
                         docs.map(item =>
                             <Link to={item.title} className='capitalize group flex items-center justify-between bg-white/10 p-5 rounded-md'>{item.title.replace(/_/g, ' ')}
-                                 <FaArrowRight className="dark:text-white opacity-0 group-hover:opacity-100 -translate-x-10 group-hover:translate-x-0 transition duration-300" />
+                                <FaArrowRight className="dark:text-white opacity-0 group-hover:opacity-100 -translate-x-10 group-hover:translate-x-0 transition duration-300" />
                             </Link>
                         )
                     }
diff --git a/src/pages/Resources.jsx b/src/pages/Resources.jsx
new file mode 100644
index 0000000..8ed2043
--- /dev/null
+++ b/src/pages/Resources.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import Layout from '../components/Layout/Layout';
+import { Space } from 'antd';
+import MainTitle from '../components/Common/MainTitle';
+import ResourceSection from '../components/Resources/ResourceSection';
+import resources from '../data/resources';
+
+
+const Resources = () => {
+    return (
+        <Layout>
+            <div className="container mx-auto p-4">
+                <MainTitle
+                    title="Freee Resources for"
+                    highlight="Web Development"
+                />
+                <Space direction="vertical" size="middle" >
+                    <ResourceSection title="Learning Resources" resources={resources.learningResources} />
+                    <ResourceSection title="Tools & Libraries" resources={resources.toolsLibraries} />
+                    <ResourceSection title="Career Roadmaps" resources={resources.careerRoadmaps} />
+                </Space>
+            </div>
+        </Layout>
+    );
+};
+
+export default Resources;

From f7667ec7ce092213ae3893f9be064ebb5ea532c6 Mon Sep 17 00:00:00 2001
From: devvsakib <devvsakib@gmail.com>
Date: Tue, 30 Jul 2024 22:16:09 +0600
Subject: [PATCH 2/4] vercel deploy issue fix

---
 src/pages/Resources.jsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/pages/Resources.jsx b/src/pages/Resources.jsx
index 8ed2043..2a6f999 100644
--- a/src/pages/Resources.jsx
+++ b/src/pages/Resources.jsx
@@ -1,9 +1,8 @@
-import React from 'react';
 import Layout from '../components/Layout/Layout';
 import { Space } from 'antd';
 import MainTitle from '../components/Common/MainTitle';
 import ResourceSection from '../components/Resources/ResourceSection';
-import resources from '../data/resources';
+import resources from '../data/Resources';
 
 
 const Resources = () => {

From c20645171ed2cd65007b63c802760eede83dc19c Mon Sep 17 00:00:00 2001
From: devvsakib <devvsakib@gmail.com>
Date: Wed, 31 Jul 2024 11:41:23 +0600
Subject: [PATCH 3/4] card color issue fixed

---
 package.json                            |  1 +
 src/components/Error/Error.jsx          |  2 +-
 src/components/Error/ErrorCard.jsx      |  4 +-
 src/components/Error/ErrorType.jsx      | 18 ++++++--
 src/components/Error/ModalSolutions.jsx | 10 ++--
 src/components/Error/css/style.css      |  3 +-
 src/components/Search/SearchInput.jsx   | 61 ++++++++++++-------------
 src/data/error.json                     |  2 +-
 src/hooks/useColorBorderBox.js          | 42 +++++++----------
 tailwind.config.cjs                     | 10 +++-
 10 files changed, 80 insertions(+), 73 deletions(-)

diff --git a/package.json b/package.json
index 191dc56..4567c49 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "@tailwindcss/typography": "^0.5.13",
     "antd": "^5.19.1",
     "axios": "^1.2.2",
+    "classnames": "^2.5.1",
     "framer-motion": "^10.8.3",
     "lodash": "^4.17.21",
     "prettier": "^3.3.3",
diff --git a/src/components/Error/Error.jsx b/src/components/Error/Error.jsx
index bed7a49..2aab25b 100644
--- a/src/components/Error/Error.jsx
+++ b/src/components/Error/Error.jsx
@@ -38,7 +38,7 @@ const Error = ({ search, type }) => {
           }}
         ></Toaster>
       </div>
-      <section className="mx-4 md:w-5/6 my-12 grid grid-cols-12 justify-center gap-8 md:mx-auto ">
+      <section className="mx-4 md:w-5/6 my-12 grid grid-cols-12 px-5 md:px-0 justify-center gap-8 md:mx-auto ">
         {filteredErrorByType.length === 0 ? (
           <div className="col-span-12">
             <h1 className="text-center text-2xl text-gray-500 mx-auto">
diff --git a/src/components/Error/ErrorCard.jsx b/src/components/Error/ErrorCard.jsx
index cebe658..c630885 100644
--- a/src/components/Error/ErrorCard.jsx
+++ b/src/components/Error/ErrorCard.jsx
@@ -13,12 +13,12 @@ function ErrorCard({ error }) {
   const [readMore, setReadMore] = useState(false);
   const [isOpenModal, setOpenModal] = useState(false);
   const [solution, setSolution] = useState("");
-  const { errorTypeColor } = useColorBorderBox(error.type)
+  const { borderColor } = useColorBorderBox(error)
 
   return (
     <div
       id="main-div"
-      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/5 dark:bg-white/5 backdrop-blur-[10px] flex flex-col hover:scale-105 duration-300 border-[${errorTypeColor}]`}
+      className={borderColor}
     >
       <h3 className="title">{error.title}</h3>
 
diff --git a/src/components/Error/ErrorType.jsx b/src/components/Error/ErrorType.jsx
index f3a199d..51c23f5 100644
--- a/src/components/Error/ErrorType.jsx
+++ b/src/components/Error/ErrorType.jsx
@@ -1,10 +1,20 @@
-import useColorBorderBox from "../../hooks/useColorBorderBox";
-
 function ErrorType({ type }) {
-  const { errorTypeColor } = useColorBorderBox(type)
   return (
     <span
-      className={`before:block mb-3 mt-1 top-2 left-2 h-4 before:absolute before:-inset-1 before:-skew-y-3 relative block before:bg-[${errorTypeColor}]`}
+      className={`before:block mb-3 mt-1 top-2 left-2 h-4 before:absolute before:-inset-1 before:-skew-y-3 relative inline-block ${type === "add"
+        ? "before:bg-add"
+        : type === "commit"
+          ? "before:bg-commit"
+          : type === "merge"
+            ? "before:bg-merge"
+            : type === "push"
+              ? "before:bg-push"
+              : type === "branch"
+                ? "before:bg-branch"
+                : type === "cmd"
+                  ? "before:bg-cmd"
+                  : "before:bg-default"
+        }`}
     >
       <span className="relative text-sm -top-1">{type}</span>
     </span>
diff --git a/src/components/Error/ModalSolutions.jsx b/src/components/Error/ModalSolutions.jsx
index d56eab4..6f811ad 100644
--- a/src/components/Error/ModalSolutions.jsx
+++ b/src/components/Error/ModalSolutions.jsx
@@ -1,4 +1,4 @@
-import React,{ useContext } from "react";
+import React, { useContext } from "react";
 import { MdKeyboardArrowLeft, MdContentCopy } from "react-icons/md";
 import ErrorSolutions from "./ErrorSolutions";
 import useColorBorderBox from "../../hooks/useColorBorderBox";
@@ -10,10 +10,10 @@ import { ThemeContext } from '../../context/ThemeContext';
 Modal.setAppElement("#root");
 
 const ModalSolutions = ({ isOpen, setOpenModal, error }) => {
-  const { errorTypeColor } = useColorBorderBox(error.type);
+  const { borderColor } = useColorBorderBox(error)
   const { theme } = useContext(ThemeContext);
-  const overlayBackgroundColor = theme === 'dark' 
-    ? 'rgba(0, 0, 0, 0.6)' 
+  const overlayBackgroundColor = theme === 'dark'
+    ? 'rgba(0, 0, 0, .5)'
     : 'rgba(0, 0, 0, 0.2)';
 
   return (
@@ -24,7 +24,7 @@ const ModalSolutions = ({ isOpen, setOpenModal, error }) => {
         () => setOpenModal((prev) => !prev)
       }
       contentLabel="Modal solution"
-      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/5 dark:bg-white/5 backdrop-blur-[10px] flex flex-col hover:scale-105 duration-300 border-[${errorTypeColor}] modal`}
+      className={borderColor + " modal !bg-black/80 max-h-[90vh] "}
       id="main-div"
       style={{
         overlay: {
diff --git a/src/components/Error/css/style.css b/src/components/Error/css/style.css
index cd7b97a..9fc69d5 100644
--- a/src/components/Error/css/style.css
+++ b/src/components/Error/css/style.css
@@ -7,7 +7,8 @@ h3 {
 
 #scroll-solution{
   overflow-y:scroll;
-  height: 100px;
+  min-height: 100px;
+  max-height: 90vh;
   width: 100%;
   padding: 0px 10px 0px 10px;
   text-align: left;
diff --git a/src/components/Search/SearchInput.jsx b/src/components/Search/SearchInput.jsx
index ec3469e..c1c1735 100644
--- a/src/components/Search/SearchInput.jsx
+++ b/src/components/Search/SearchInput.jsx
@@ -52,23 +52,21 @@ function SearchInput({ search, setSearch, setType }) {
             {errorType.map((item, i) => (
               <li
                 key={i}
-                className={`${
-                  item === "add"
-                    ? "bg-[#4024e0]"
+                className={`${item === "add"
+                    ? "bg-add"
                     : item === "commit"
-                      ? "bg-[#1a5ba5]"
+                      ? "bg-commit"
                       : item === "merge"
-                        ? "bg-[#118d7c]"
+                        ? "bg-merge"
                         : item === "push"
-                          ? "bg-[#8d54e1]"
+                          ? "bg-push"
                           : item === "cmd"
-                            ? "bg-[#e100ff]"
+                            ? "bg-cmd"
                             : item === "branch"
-                              ? "bg-[#099104]"
-                              : "bg-[#7e1aa5]"
-                } ${
-                  selectedTag === item ? "ring-4 ring-red-500" : ""
-                } w-full md:w-auto rounded-md capitalize text-white font-bold py-1 px-3 cursor-pointer`}
+                              ? "bg-branch"
+                              : "bg-default"
+                  } ${selectedTag === item ? "ring-4 ring-red-500" : ""
+                  } w-full md:w-auto rounded-md capitalize text-white font-bold py-1 px-3 cursor-pointer`}
                 onClick={() => {
                   setSelectedTag(item);
                   setType(item);
@@ -97,30 +95,27 @@ function SearchInput({ search, setSearch, setType }) {
                   transition={{ duration: 0.5 }}
                 >
                   <ul
-                    className={`animate flex flex-col sm:flex-row mx-auto mt-2 items-start gap-4 py-3 pt-4 px-6 rounded-lg bg-white backdrop-blur-md w-[60vw] md:w-auto text-left ${
-                      open ? "hidden" : "block"
-                    }`}
+                    className={`animate flex flex-col sm:flex-row mx-auto mt-2 items-start gap-4 py-3 pt-4 px-6 rounded-lg bg-white backdrop-blur-md w-[60vw] md:w-auto text-left ${open ? "hidden" : "block"
+                      }`}
                   >
                     {errorType.map((item, i) => (
                       <li
                         key={i}
-                        className={`${
-                          item === "add"
-                            ? "bg-[#4024e0]"
-                            : item === "commit"
-                              ? "bg-[#1a5ba5]"
-                              : item === "merge"
-                                ? "bg-[#118d7c]"
-                                : item === "push"
-                                  ? "bg-[#8d54e1]"
-                                  : item === "cmd"
-                                    ? "bg-[#40f058a8]"
-                                    : item === "branch"
-                                      ? "bg-[#099104]"
-                                      : "bg-[#7e1aa5]"
-                        } ${
-                          selectedTag === item ? "ring-4 ring-red-500" : ""
-                        } w-full md:w-auto rounded-md text-white font-bold py-2 px-3 cursor-pointer`}
+                        className={`${item === "add"
+                          ? "bg-[#4024e0]"
+                          : item === "commit"
+                            ? "bg-[#1a5ba5]"
+                            : item === "merge"
+                              ? "bg-merge"
+                              : item === "push"
+                                ? "bg-push"
+                                : item === "cmd"
+                                  ? "bg-[#40f058a8]"
+                                  : item === "branch"
+                                    ? "bg-branch"
+                                    : "bg-default"
+                          } ${selectedTag === item ? "ring-4 ring-red-500" : ""
+                          } w-full md:w-auto rounded-md text-white font-bold py-2 px-3 cursor-pointer`}
                         onClick={() => {
                           setSelectedTag(item);
                           setType(item);
@@ -137,7 +132,7 @@ function SearchInput({ search, setSearch, setType }) {
           </div>
         )}
       </div>
-    </div>
+    </div >
   );
 }
 
diff --git a/src/data/error.json b/src/data/error.json
index 21e8112..49b8678 100644
--- a/src/data/error.json
+++ b/src/data/error.json
@@ -166,7 +166,7 @@
       "type": "branch",
       "title": "error: You have local changes to <branch_name>; cannot switch branches.",
       "description": "This error occurs when switching a branch without commiting the changes made to that branch",
-      "solutions": "[{'git stash':'stash your current changes'},{'git reset --hard HEAD':'if you dont' mind losing those minor changes'},{'git checkout -b <branch_name>':'When switching branches, proceed even if the index or the working tree differs from HEAD. This is used to throw away local changes.'},{'git switch -f <branch-name>':'-f is short for --force, which is an alias for --discard-changes , works for git 2.23'}]"
+      "solutions": "git stash :'stash your current changes' < git reset --hard HEAD :'if you dont' mind losing those minor changes' < git checkout -b branch_name :'When switching branches, proceed even if the index or the working tree differs from HEAD. This is used to throw away local changes.'<git switch -f branch-name :'-f is short for --force, which is an alias for --discard-changes , works for git 2.23'"
     },
     {
       "type": "push",
diff --git a/src/hooks/useColorBorderBox.js b/src/hooks/useColorBorderBox.js
index 4e050c4..4976a7d 100644
--- a/src/hooks/useColorBorderBox.js
+++ b/src/hooks/useColorBorderBox.js
@@ -1,29 +1,21 @@
-import { useState, useEffect } from "react";
+const useColorBorderBox = (error = "") => {
+  let item = error.type;
+  let borderColor = `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/5 dark:bg-white/5 backdrop-blur-[10px] flex flex-col hover:scale-105 duration-300 ${item === "add"
+    ? "border-add"
+    : item === "commit"
+      ? "border-commit"
+      : item === "merge"
+        ? "border-merge"
+        : item === "push"
+          ? "border-push"
+          : item === "cmd"
+            ? "border-cmd"
+            : item === "branch"
+              ? "border-branch"
+              : "border-default"
+    }`
 
-const useColorBorderBox = (errorType = "") => {
-  const [errorTypeColor, setErrorTypeColor] = useState("#7e1aa5");
 
-  useEffect(() => {
-    if (errorType == "add") {
-      return setErrorTypeColor("#4024e0");
-    }
-    if (errorType == "branch") {
-      return setErrorTypeColor("#099104");
-    }
-    if (errorType == "push") {
-      return setErrorTypeColor("#8d54e1");
-    }
-    if (errorType == "merge") {
-      return setErrorTypeColor("#118d7c");
-    }
-    if (errorType == "commit") {
-      return setErrorTypeColor("#1a5ba5");
-    }
-    return setErrorTypeColor("#7e1aa5");
-  }, [errorType]);
-
-
-  return { errorTypeColor, setErrorTypeColor };
+  return { borderColor }
 }
-
 export default useColorBorderBox;
\ No newline at end of file
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 50a93e8..e79766a 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -12,7 +12,15 @@ module.exports = {
         white: "#F4F7F5",
         gray: "#A7A2A9",
         dark: "#1E1E1F",
-        "dark-secondary": "#28282A",
+        darkSecondary: "#28282A",
+        branch: "#099104",
+        cmd: "#e100ff",
+        add: "#4024e0",
+        pull: "#4024e0",
+        commit: "#1a5ba5",
+        merge: "#118d7c",
+        push: "#8d54e1",
+        default: "#7e1aa5",
       },
       typography: (theme) => ({
         DEFAULT: {

From 4457f0a862f64dfeaa66e82c2f1f1687317f01c6 Mon Sep 17 00:00:00 2001
From: devvsakib <devvsakib@gmail.com>
Date: Wed, 31 Jul 2024 12:19:41 +0600
Subject: [PATCH 4/4] ui improved issue #234

---
 src/components/Error/Error.jsx        |   2 +-
 src/components/Error/ErrorCard.jsx    |   9 +-
 src/components/Header/Header.jsx      |   2 +-
 src/components/Search/SearchInput.jsx | 137 +++++++++++---------------
 4 files changed, 64 insertions(+), 86 deletions(-)

diff --git a/src/components/Error/Error.jsx b/src/components/Error/Error.jsx
index 2aab25b..abcc9c4 100644
--- a/src/components/Error/Error.jsx
+++ b/src/components/Error/Error.jsx
@@ -38,7 +38,7 @@ const Error = ({ search, type }) => {
           }}
         ></Toaster>
       </div>
-      <section className="mx-4 md:w-5/6 my-12 grid grid-cols-12 px-5 md:px-0 justify-center gap-8 md:mx-auto ">
+      <section className="mx-4 md:w-5/6 my-12 grid  px-5 md:px-0 justify-center gap-2 md:mx-auto ">
         {filteredErrorByType.length === 0 ? (
           <div className="col-span-12">
             <h1 className="text-center text-2xl text-gray-500 mx-auto">
diff --git a/src/components/Error/ErrorCard.jsx b/src/components/Error/ErrorCard.jsx
index c630885..bf68235 100644
--- a/src/components/Error/ErrorCard.jsx
+++ b/src/components/Error/ErrorCard.jsx
@@ -18,11 +18,12 @@ function ErrorCard({ error }) {
   return (
     <div
       id="main-div"
-      className={borderColor}
+      className={borderColor + " relative"}
     >
       <h3 className="title">{error.title}</h3>
-
-      <ErrorType type={error.type} />
+      <div className="absolute h-full -right-2 -top-2">
+        <ErrorType type={error.type} />
+      </div>
 
       <div className="bg-primary w-full h-[2px] my-4" />
 
@@ -44,7 +45,7 @@ function ErrorCard({ error }) {
       </div>
 
       <button
-        className="flex mt-8 items-center gap-2 px-3 py-2 border border-gray rounded-lg hover:border-primary hover:text-primary"
+        className="flex mt-2 items-center gap-2 px-3 py-2 border border-white/40 rounded-lg hover:border-primary hover:text-primary"
         onClick={() => setOpenModal((prev) => !prev)}
       >
         <span className="text-xs">Solution</span>
diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
index 6581735..1b4b4b0 100644
--- a/src/components/Header/Header.jsx
+++ b/src/components/Header/Header.jsx
@@ -50,7 +50,7 @@ function Header({notice }) {
   ];
 
   return (
-    <header className="p-4 shadow-lg backdrop-blur-sm  z-50">
+    <header className="p-4 shadow-lg backdrop-blur-sm  z-40">
       <div className="w-full md:w-5/6 mx-auto flex flex-row md:flex-row justify-between items-center">
         {/* Logo */}
         <Link to={"/"}>
diff --git a/src/components/Search/SearchInput.jsx b/src/components/Search/SearchInput.jsx
index c1c1735..886644c 100644
--- a/src/components/Search/SearchInput.jsx
+++ b/src/components/Search/SearchInput.jsx
@@ -1,7 +1,12 @@
-import React, { useState } from "react";
-import { MdSearch, MdClear } from "react-icons/md";
+import React, { useEffect, useState } from "react";
+import { MdSearch, MdClear, MdCancel, MdCancelPresentation } from "react-icons/md";
 import { motion, AnimatePresence } from "framer-motion";
 import "./css/style.css";
+import useWindowsize from "../../hooks/useWindowsize";
+import { FaFilter } from "react-icons/fa";
+import { RxCross2 } from "react-icons/rx";
+import { CheckCircleOutlined } from "@ant-design/icons";
+
 const errorType = [
   "All",
   "push",
@@ -12,18 +17,35 @@ const errorType = [
   "branch",
   "cmd",
 ];
-import useWindowsize from "../../hooks/useWindowsize";
 
 function SearchInput({ search, setSearch, setType }) {
-  const [open, setOpen] = useState(true);
+  const [open, setOpen] = useState(false);
   const { width } = useWindowsize();
+  const [scrolling, setScrolling] = useState(false);
   const [selectedTag, setSelectedTag] = useState("All");
 
+  useEffect(() => {
+    const handleScroll = () => {
+      if (window.scrollY > 100) {
+        setScrolling(true);
+      } else {
+        setScrolling(false);
+      }
+    };
+
+    window.addEventListener("scroll", handleScroll);
+
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+
   return (
-    <div className="flex flex-col mx-auto mt-12 items-center gap-4 py-3 px-6 rounded-lg w-11/12 md:w-5/6">
+    <div className={`flex mx-auto mt-12 justify-center items-center gap-4 py-3 px-6 rounded-lg md:w-5/6
+      sticky top-0 z-40 transition-all ${scrolling && "backdrop-blur-[1.5rem] saturate-50"}`}>
       <form
         onSubmit={(e) => e.preventDefault()}
-        className="flex mx-auto mt-12 items-center border border-zinc-300 gap-4 py-3 px-6 rounded-lg bg-white w-11/12 md:w-5/6"
+        className="flex items-center border border-primary gap-4 py-2 px-6 rounded-lg w-11/12 md:w-4/6"
       >
         <MdSearch className="text-gray text-2xl" />
         <input
@@ -44,94 +66,49 @@ function SearchInput({ search, setSearch, setType }) {
           <MdClear className="text-gray text-xl" />
         </button>
       </form>
-      <div className="types mt-4">
-        {width > 768 ? (
+      <div className={"" + selectedTag !== "All" && "text-green-400"}>
+        <FaFilter
+          onClick={e => setOpen(!open)}
+          className={"text-xl !cursor-pointer"}
+        />
+      </div>
+      {
+        open &&
+        <div className="h-dvh bg-dark fixed top-0 !-right-[0] w-[60vw] md:w-[40vw] px-5 z-[9999]">
+          <RxCross2 onClick={e => setOpen(!open)} className="ml-auto mt-5 text-2xl cursor-pointer" />
           <ul
-            className={`flex flex-col sm:flex-row mx-auto mt-2 border border-zinc-300 items-start gap-4 py-3 px-6 rounded-lg bg-white w-full md:w-12/12  md:w-auto`}
+            className={`grid mx-auto items-start gap-4 py-3 px-6 rounded-lg w-full md:w-12/12  md:w-auto mt-20`}
           >
             {errorType.map((item, i) => (
               <li
                 key={i}
-                className={`${item === "add"
-                    ? "bg-add"
-                    : item === "commit"
-                      ? "bg-commit"
-                      : item === "merge"
-                        ? "bg-merge"
-                        : item === "push"
-                          ? "bg-push"
-                          : item === "cmd"
-                            ? "bg-cmd"
-                            : item === "branch"
-                              ? "bg-branch"
-                              : "bg-default"
-                  } ${selectedTag === item ? "ring-4 ring-red-500" : ""
-                  } w-full md:w-auto rounded-md capitalize text-white font-bold py-1 px-3 cursor-pointer`}
+                className={`w-full md:w-auto rounded-md capitalize text-white font-bold py-1 px-3 cursor-pointer flex items-center gap-5`}
                 onClick={() => {
                   setSelectedTag(item);
                   setType(item);
+                  setOpen(false)
                 }}
               >
+                {selectedTag && selectedTag == item && <CheckCircleOutlined className={`${item === "add"
+                  ? "text-add"
+                  : item === "commit"
+                    ? "text-commit"
+                    : item === "merge"
+                      ? "text-merge"
+                      : item === "push"
+                        ? "text-push"
+                        : item === "cmd"
+                          ? "text-cmd"
+                          : item === "branch"
+                            ? "text-branch"
+                            : "text-default"
+                  } filter brightness-200`} />}
                 {item}
               </li>
             ))}
           </ul>
-        ) : (
-          <div className="text-center">
-            <button
-              className="bg-white py-3 pt-4 px-6 rounded-lg text-left text-black font-normal"
-              onClick={() => {
-                setOpen(!open);
-              }}
-            >
-              Filter By Type
-            </button>
-            <AnimatePresence>
-              {!open && (
-                <motion.div
-                  initial={{ opacity: 0 }}
-                  animate={{ opacity: 1 }}
-                  exit={{ opacity: 0 }}
-                  transition={{ duration: 0.5 }}
-                >
-                  <ul
-                    className={`animate flex flex-col sm:flex-row mx-auto mt-2 items-start gap-4 py-3 pt-4 px-6 rounded-lg bg-white backdrop-blur-md w-[60vw] md:w-auto text-left ${open ? "hidden" : "block"
-                      }`}
-                  >
-                    {errorType.map((item, i) => (
-                      <li
-                        key={i}
-                        className={`${item === "add"
-                          ? "bg-[#4024e0]"
-                          : item === "commit"
-                            ? "bg-[#1a5ba5]"
-                            : item === "merge"
-                              ? "bg-merge"
-                              : item === "push"
-                                ? "bg-push"
-                                : item === "cmd"
-                                  ? "bg-[#40f058a8]"
-                                  : item === "branch"
-                                    ? "bg-branch"
-                                    : "bg-default"
-                          } ${selectedTag === item ? "ring-4 ring-red-500" : ""
-                          } w-full md:w-auto rounded-md text-white font-bold py-2 px-3 cursor-pointer`}
-                        onClick={() => {
-                          setSelectedTag(item);
-                          setType(item);
-                          setOpen(!open);
-                        }}
-                      >
-                        {item}
-                      </li>
-                    ))}
-                  </ul>
-                </motion.div>
-              )}
-            </AnimatePresence>
-          </div>
-        )}
-      </div>
+        </div>
+      }
     </div >
   );
 }
