[Enhancement] 404 not found page

frontend/src/App.jsx

@@ -6,6 +6,7 @@ import { lookInSession } from "./common/session";
 import Editor from "./pages/Editor";
 import Home from "./pages/Home";
 import SearchPage from "./pages/Search";
+import PageNotFound from "./pages/404";
 
 export const UserContext = createContext({});
 
@@ -27,6 +28,7 @@ function App() {
           <Route path="login" element={<UserAuthForm type="login" />} />
           <Route path="signup" element={<UserAuthForm type="signup" />} />
           <Route path="search/:query" element={<SearchPage />} />
+          <Route path="*" element={<PageNotFound />} />
         </Route>
       </Routes>
     </UserContext.Provider>

frontend/src/components/Navbar.jsx

@@ -34,7 +34,7 @@ const Navbar = () => {
         <>
             <nav className="navbar">
                 <Link to="/" className="flex-none w-10">
-                    <img src="logo.png" alt="" className="w-full" />
+                    <img src="/logo.png" alt="" className="w-full" />
                 </Link>
                 <div className={"absolute bg-white w-full left-0 top-full mt-0.5 border-b border-gray-200 py-4 px-[5vw] md:border-0 md:relative md:inset-0 md:p-0 md:w-auto " + (searchBoxVisibility ? "show" : "hidden md:block")}
                 >

frontend/src/pages/404.jsx

@@ -0,0 +1,18 @@
+import { Link } from "react-router-dom";
+
+const PageNotFound = () => {
+    return (
+        <section className="h-cover relative p-10 flex flex-col items-center gap-20 text-center">
+            <img src="/404.png" alt="" className="select-none border-2 border-gray-200 w-144 aspect-video object-cover rounded" />
+            <h1 className="text-4xl font-gelasio leading-7">Page not found</h1>
+            <p className="text-gray-600 text-xl leading-7 -mt-8">The page you are looking for does not exists. Head back to the <Link to="/" className="text-black underline">home page</Link>.</p>
+
+            <div className="mt-auto">
+                <img src="/full-logo.svg" alt="" className="h-8 object-contain block mx-auto select-none" />
+                <p className="mt-5 text-gray-600">Read millions of projects script around the world.</p>
+            </div>
+        </section>
+    )
+}
+
+export default PageNotFound;