Made custom error page 404 error

src/App.jsx

@@ -4,20 +4,26 @@ import Error from "./components/Error/Error";
 import SearchInput from "./components/Search/SearchInput";
 import Layout from "./components/Layout/Layout";
 import BGShape from "./components/BGShape";
+// import { Route, Routes } from "react-router-dom";
+// import NotFound from "./pages/404";
+
 
 function App() {
   const [search, setSearch] = useState('')
   const [type, setType] = useState('')
   return (
 
     <>
+    {/* <Routes>
+    <Route errorElement={<NotFound></NotFound>} path='*'/>
+    </Routes> */}
       <Layout>
         <SearchInput
           search={search}
           setSearch={setSearch}
           setType={setType}
         />
-        <Error
+         <Error
           search={search}
           type={type}
         />

src/main.jsx

@@ -8,6 +8,7 @@ import {
 import Doc from "./components/Doc/Doc";
 import Contributors from "./components/Contributors/contributors";
 import BGShape from "./components/BGShape";
+import NotFound from "./pages/404";
 /* Creating a router object that is used to render the correct component based on the url. */
 const router = createBrowserRouter(
   [
@@ -22,6 +23,9 @@ const router = createBrowserRouter(
     {
       path: '/Contributors',
       element: <Contributors />
+    },
+    {path: '*',
+    element: <NotFound />
     }
 
   ]
@@ -32,4 +36,4 @@ ReactDOM.createRoot(document.getElementById("root")).render(
     <BGShape />
     <RouterProvider router={router} />
   </React.StrictMode>
-);
+);

src/pages/404.jsx

@@ -0,0 +1,13 @@
+import { Link } from "react-router-dom";
+
+export default function NotFound() {
+    return (
+        <div class="flex h-screen">
+                <div class="m-auto">
+                    <h1 class="mb-5">Not found</h1>
+
+                    <Link to='/' class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Home</Link>
+            </div>
+        </div>
+    )
+}