add not found page

src/app.tsx

@@ -4,7 +4,7 @@ import './app.css'
 import { DefaultLayout } from './layouts'
 import routes from './routes'
 import "yet-another-react-lightbox/styles.css";
-import { Login } from './pages'
+import { Login, NotFound } from './pages'
 import { Provider } from 'react-redux'
 import { persistore, store } from './store/config'
 import { PersistGate } from 'redux-persist/integration/react'
@@ -13,27 +13,27 @@ import { PersistGate } from 'redux-persist/integration/react'
 export function App() {
   return (
     <>
-    <Provider store={store}>
+        <Provider store={store}>
-      <PersistGate persistor={persistore}>
+          <PersistGate persistor={persistore}>
-
+            <Router>
-      <Router>
+              <Routes>
-        <Routes>
+                <Route path='/login' element={<Login />} />
-          <Route path='/login' element={<Login />} />
+                <Route element={<DefaultLayout />}>
-          <Route element={<DefaultLayout />}>
+                  {routes.map(({ path, name, element }) => (
-            {routes.map(({ path, name, element}) => (
+                    <>
-              <>
+                      <Route
-              <Route
+                        path={path}
-                path={path}
+                        id={name}
-                id={name}
+                        element={element}
-                element={element} 
+                      />
-              />
+                    </>
-              </>
+                  ))}
-            ))}
+                </Route>
-          </Route>
+                <Route path="*" element={<NotFound />} />
-        </Routes>
+              </Routes>
-          </Router>
+            </Router>
-      </PersistGate>
+          </PersistGate>
-    </Provider>
+        </Provider>
     </>
   )
 }

src/pages/NotFound/index.tsx

@@ -0,0 +1,9 @@
+const NotFound = () => (
+  <div class={'main-content content'}>
+    <img 
+      src={'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia.tenor.com%2FUWHgJ8QRcZsAAAAi%2Fturtle-huh-meme.gif&f=1&nofb=1&ipt=64af045b4bd24f01c00528f14b53fb17c49ed5b603fc58332e8a5de65a1b89ef&ipo=images'}
+    />
+  </div>
+)
+
+export default NotFound;

src/pages/index.tsx

@@ -5,12 +5,15 @@ import Story from "./Stories";
 import NewsEvent from "./NewsEvents";
 import LocationDetail from "./LocationDetail";
 import Login from './Login';
+import NotFound  from "./NotFound";
 
 export {
   Login,
 
   Home,
 
+  NotFound,
+
   BestLocation,
   LocationDetail,