404 Not Found Page

src/App.js

@@ -11,6 +11,7 @@ import ProjectShowcase from './Page/ProjectShowcase.jsx';
 import ResumeBuilder from './Page/ResumeBuilder.jsx';
 import Resources from './Page/Resources.jsx';
 import Discussions from './Page/Discussions.jsx';
+import NotFoundPage from './Page/NotFoundPage.jsx';
 
 function App() {
   return (
@@ -72,6 +73,8 @@ function App() {
         <Route path="/ResumeBuilder" element={<ResumeBuilder />} />
         <Route path="/Resources" element={<Resources />} />
         <Route path="/Discussions" element={<Discussions />} />
+        {/* Catch-all route for 404 page */}
+        <Route path="*" element={<NotFoundPage />} />
       </Routes>
     </BrowserRouter>
   );

src/Page/NotFoundPage.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+const NotFoundPage = () => {
+  const navigate = useNavigate();
+
+  const handleHomeClick = () => {
+    navigate('/');
+  };
+
+  return (
+    <div
+      className="flex h-screen w-full items-center justify-center bg-cover bg-center"
+      style={{
+        backgroundImage: `url('https://img.freepik.com/free-vector/404-error-with-man-thinking_24908-77772.jpg?t=st=1731744528~exp=1731748128~hmac=45deb8996535d67e7b7e02a75f5eeff8388ef4d4a955f7288900dba090980121&w=740')`,
+        backgroundSize: 'cover',
+        height: '100vh',
+        width: '100vw',
+      }}
+    >
+      <div className="space-y-8 text-center">
+        <h1 className="animate__animated animate__fadeInUp text-6xl font-extrabold text-white drop-shadow-2xl">
+          Oops! Page Not Found
+        </h1>
+
+        <button
+          onClick={handleHomeClick}
+          className="transform rounded-full bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 px-8 py-4 text-xl font-semibold text-white shadow-2xl transition-all duration-300 ease-in-out hover:scale-105"
+        >
+          Go to Home
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default NotFoundPage;