From 7d174ab05156b658fac30a64c0edd2f03f7cafcf Mon Sep 17 00:00:00 2001
From: mike <mike@windows>
Date: Fri, 25 Oct 2024 04:06:49 -0400
Subject: [PATCH] feat: 404 page

---
 src/App.jsx                 |  2 ++
 src/components/NotFound.jsx | 13 +++++++++++++
 2 files changed, 15 insertions(+)
 create mode 100644 src/components/NotFound.jsx

diff --git a/src/App.jsx b/src/App.jsx
index 6048720..8ff12f0 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -4,6 +4,7 @@ import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import Header from './components/Header';
 import Footer from './components/Footer';
 import Home from './components/Home';
+import NotFound from './components/NotFound';
 import About from './components/About';
 import Roadmap from './components/Roadmap';
 import RoadmapDetail from './components/RoadmapDetail'; // Import the RoadmapDetail component
@@ -25,6 +26,7 @@ const App = () => {
           <Route path="/roadmap" element={<Roadmap />}>
             <Route path=":id" element={<RoadmapDetail />} />
           </Route>
+          <Route path="*" element={<NotFound />} />
         </Routes>
       </main>
       <Footer />
diff --git a/src/components/NotFound.jsx b/src/components/NotFound.jsx
new file mode 100644
index 0000000..7f9f010
--- /dev/null
+++ b/src/components/NotFound.jsx
@@ -0,0 +1,13 @@
+import { Link } from 'react-router-dom';
+
+const NotFound = () => {
+    return (
+        <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
+            <h1 className="text-6xl font-bold text-gray-900 mb-8">404</h1>
+            <p className="text-lg text-gray-700 mb-8">Oops! The page you're looking for doesn't exist.</p>
+            <Link to="/" className="px-6 py-3 bg-green-600 text-white text-lg font-semibold rounded hover:bg-green-700 transition duration-300">
+                Go Back Home
+            </Link>
+        </div>
+    );
+};
\ No newline at end of file