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'
@@ -15,12 +15,11 @@ export function App() {
     <>
         <Provider store={store}>
           <PersistGate persistor={persistore}>
-
             <Router>
               <Routes>
                 <Route path='/login' element={<Login />} />
                 <Route element={<DefaultLayout />}>
-            {routes.map(({ path, name, element}) => (
+                  {routes.map(({ path, name, element }) => (
                     <>
                       <Route
                         path={path}
@@ -30,6 +29,7 @@ export function App() {
                     </>
                   ))}
                 </Route>
+                <Route path="*" element={<NotFound />} />
               </Routes>
             </Router>
           </PersistGate>

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,