feat: add not found page (#22)

src/pages/notFound/notFound.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Text, Button, Center, VStack, Heading } from '@chakra-ui/react';
+import { Link } from 'react-router-dom';
+import { Player } from '@lottiefiles/react-lottie-player';
+import animate from '../../assets/animation/notFound.json';
+import i18next from 'i18next';
+
+const NotFound = () => {
+  return (
+    <Center minH='100vh'>
+      <VStack spacing={4} textAlign='center'>
+        <Player
+          autoplay
+          loop
+          src={animate}
+          style={{
+            height: '100%',
+            width: '100%',
+            maxHeight: '450px',
+            maxWidth: '450px',
+          }}
+        />
+        <Heading fontSize='xl'>
+          {i18next.t(`dry-wash.arm.notFound.title`)}
+        </Heading>
+        <Text fontSize='lg'>
+          {i18next.t(`dry-wash.arm.notFound.description`)}
+        </Text>
+        <Button
+          as={Link}
+          to='/dry-wash'
+          colorScheme='teal'
+          size='lg'
+          variant='outline'
+        >
+          {i18next.t(`dry-wash.arm.notFound.button.back`)}
+        </Button>
+      </VStack>
+    </Center>
+  );
+};
+
+export default NotFound;

src/routes.tsx

@@ -2,6 +2,7 @@ import React, { lazy, Suspense } from 'react';
 import { Routes, Route } from 'react-router-dom';
 import { PageSpinner } from './components';
 import Arm from './pages/arm';
+import NotFound from './pages/notFound/notFound';
 
 const Landing = lazy(() => import('./pages/landing'));
 const OrderForm = lazy(() => import('./pages/order-form'));
@@ -19,9 +20,9 @@ const Routers = () => {
           <Route path='order-view' element={<OrderView />} />
         </Route>
         <Route path='/dry-wash/arm/*' element={<Arm />}></Route>
+        <Route path='*' element={<NotFound />} />
       </Routes>
     </Suspense>
-
   );
 };