Added a custom 404 not found page

src/App.jsx

@@ -1,8 +1,8 @@
 import React from "react";
 import Homepage from "./pages/Homepage";
 import Navbar from "./components/Navbar";
-import Team from "./pages/Team"
-import Contacts from "./pages/Contacts"
+import Team from "./pages/Team";
+import Contacts from "./pages/Contacts";
 import About from "./pages/AboutOrg";
 import Buiding from "./pages/Buiding";
 import ReactDOM from "react-dom/client";
@@ -11,8 +11,8 @@ import Faqs from "./pages/Faqs";
 import Resources from "./pages/Resources";
 import Privacy from "./pages/Privacy";
 import Frontends from "./pages/FrontEnds";
-import HTMLCSS from "./pages/Frontend/HTMLCSS"
-import JS from "./pages/Frontend/JSc"
+import HTMLCSS from "./pages/Frontend/HTMLCSS";
+import JS from "./pages/Frontend/JSc";
 import Eletron from "./pages/Frontend/Eletron";
 import Reactjs from "./pages/Frontend/Reactjs";
 import Next__js from "./pages/Frontend/Next__js";
@@ -24,42 +24,45 @@ import Three__js from "./pages/Frontend/Three__js";
 // import About from './components/About'
 // import AboutOrg from "./pages/AboutOrg";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
+import PageNotFound from "./pages/PageNotFound";
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(<App />);
 
 function App() {
-  return ( 
+  return (
     <BrowserRouter>
       <Routes>
         <Route path="/" element={<Homepage />}></Route>
         <Route path="/team" element={<Team />}></Route>
-        <Route path="/contact" element={<Contacts/>}></Route>
-        <Route path="/about" element={<About/>}></Route>
-        <Route path="/building" element={<Buiding/>}></Route>
-        <Route path="/guide" element={<Guide/>}></Route>
-        <Route path="/faq" element={<Faqs/>}></Route>
-        <Route path="/resource" element={<Resources/>}></Route>
-        <Route path="/privacypolicy" element={<Privacy/>}></Route>
-        <Route path="/frontend" element={<Frontends/>}></Route>
-        <Route path="/html_css" element={<HTMLCSS/>}></Route>
-        <Route path="/javascript" element={<JS/>}></Route>
-        <Route path="/electron" element={<Eletron/>}></Route>
-        <Route path="/reactjs" element={<Reactjs/>}></Route>
-        <Route path="/nextjs" element={<Next__js/>}></Route>
-        <Route path="/tailwind" element={<Tail_wind/>}></Route>
-        <Route path="/vuejs" element={<Vue__js/>}></Route>
-        <Route path="/threejs" element={<Three__js/>}></Route>
-        <Route path="/reactnative" element={<React__native/>}></Route>
+        <Route path="/contact" element={<Contacts />}></Route>
+        <Route path="/about" element={<About />}></Route>
+        <Route path="/building" element={<Buiding />}></Route>
+        <Route path="/guide" element={<Guide />}></Route>
+        <Route path="/faq" element={<Faqs />}></Route>
+        <Route path="/resource" element={<Resources />}></Route>
+        <Route path="/privacypolicy" element={<Privacy />}></Route>
+        <Route path="/frontend" element={<Frontends />}></Route>
+        <Route path="/html_css" element={<HTMLCSS />}></Route>
+        <Route path="/javascript" element={<JS />}></Route>
+        <Route path="/electron" element={<Eletron />}></Route>
+        <Route path="/reactjs" element={<Reactjs />}></Route>
+        <Route path="/nextjs" element={<Next__js />}></Route>
+        <Route path="/tailwind" element={<Tail_wind />}></Route>
+        <Route path="/vuejs" element={<Vue__js />}></Route>
+        <Route path="/threejs" element={<Three__js />}></Route>
+        <Route path="/reactnative" element={<React__native />}></Route>
+        <Route path="*" element={<PageNotFound />}></Route>
       </Routes>
     </BrowserRouter>
   );
 }
 
 export default App;
 
-
-{/* <Navbar />
+{
+  /* <Navbar />
 <Hero />
 <About />
-<Newsletter/> */}
+<Newsletter/> */
+}

src/pages/PageNotFound.jsx

@@ -0,0 +1,23 @@
+import { Link } from "react-router-dom";
+
+function PageNotFound() {
+  return (
+    <div className="flex   text-white flex-col items-center justify-center  p-10">
+      <img
+        className="w-96 mx-auto "
+        src="src\assets\img\page_not_found_img\404-error.png"
+        alt="404-page-not-found"
+      />
+      <p className="font-bold md:text-3xl  sm:text-2xl text-xl p-4 text-white">
+        Sorry the page you are looking for does not exist.
+      </p>
+      <button className="hover:bg-green-800 bg-[#0dff1c] w-[190px] h-[60px]  rounded-md font-medium my-4 py-3 text-black">
+        <button>
+          <Link to="/">GO BACK HOME</Link>
+        </button>
+      </button>
+    </div>
+  );
+}
+
+export default PageNotFound;