Feat/404 page

webapp/public/locales/en/translation.json

@@ -98,5 +98,9 @@
         "title": "About",
         "description1": "We are the WIQ_EN2B group and we are delighted that you like 🥝KIWIQ🥝. Enjoy your meal!!!",
         "tableheader": "Developers"
+    },
+    "page404": {
+        "title": "404 - Page not found",
+        "text": "Woops! You seem lost! Click on go back to find your way."
     }
 }

webapp/public/locales/es/translation.json

@@ -97,5 +97,9 @@
         "title": "Sobre nosotros",
         "description1": "Somos el grupo WIQ_EN2B y estamos encantados de que te guste 🥝KIWIQ🥝. Que aproveche!!!",
         "tableheader": "Desarrolladores"
+    },
+    "page404": {
+        "title": "404 - Página no encontrada",
+        "text": "Qué liaste ho? Haz click en volver para regresar pa casina."
     }
 }

webapp/src/components/Router.jsx

@@ -12,6 +12,7 @@ import Statistics from "pages/Statistics";
 import ProtectedRoute from "./utils/ProtectedRoute";
 import Logout from "pages/Logout";
 import About from "pages/About";
+import NotFound from "pages/NotFound";
 
 export default createRoutesFromElements(
   <Route path="/">
@@ -27,5 +28,6 @@ export default createRoutesFromElements(
       <Route path="/dashboard/statistics" element={<Statistics />} />
       <Route path="/logout" element={<Logout />} />
     </Route>
+      <Route path="*" element={<NotFound />} />
   </Route>
 )

webapp/src/components/menu/LateralMenu.jsx

@@ -100,6 +100,7 @@ const LateralMenu = ({ isOpen, onClose, changeLanguage, isDashboard }) => {
                         </Box>
                     </DrawerBody>
                     <DrawerFooter>
+                        <Image src='/img/kiwi-3.gif' alt='404Kiwi' boxSize='60px' />
                         <Flex justify="flex-end" align="center" w="100%">
                             {isLoggedIn && (
                                 <Button data-testid={"LogOut"} type="submit" colorScheme="raw_umber" margin={"10px"} className={"custom-button effect1"} onClick={handleLogout} width="70%">{t("common.logout")}</Button>

webapp/src/pages/NotFound.jsx

@@ -0,0 +1,36 @@
+import React, { useState } from "react";
+import { useTranslation } from 'react-i18next';
+import { Center, Heading, Stack, Box, Text, Image, Container} from '@chakra-ui/react';
+import { InfoIcon } from '@chakra-ui/icons';
+
+import LateralMenu from '../components/menu/LateralMenu';
+import MenuButton from '../components/menu/MenuButton';
+import GoBack from "components/GoBack";
+import "../styles/animations.css";
+export default function About() {
+  const { t, i18n } = useTranslation();
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  const changeLanguage = (selectedLanguage) => {
+    i18n.changeLanguage(selectedLanguage);
+  };
+
+  return (
+    <Center display={"flex"} flexDirection={"column"} w={"100wh"} h={"100vh"}
+    justifyContent={"center"} alignItems={"center"} bgImage="/background.svg">
+        <MenuButton data-testid="menu-button" onClick={() => setIsMenuOpen(true)} />
+        <LateralMenu isOpen={isMenuOpen} onClose={() => setIsMenuOpen(false)} changeLanguage={changeLanguage} isDashboard={false}/>
+        <Container maxW="lg">
+            <Box textAlign="center">
+              <InfoIcon boxSize={10} color="pigment_green.500" />
+              <Heading as="h2">{t('page404.title')}</Heading>
+            </Box> 
+            <Stack spacing={4} p="1rem" backgroundColor="whiteAlpha.900" boxShadow="md" rounded="1rem" data-testid={"About page"} alignItems="center">
+                <Image src='/img/kiwi.gif' alt='404Kiwi' boxSize='120px' />
+                <Text fontWeight='extrabold' color={"forest_green.400"} textAlign={"center"} fontSize={"md"}>{t("page404.text")}</Text>
+                <GoBack/>
+            </Stack>
+        </Container>
+    </Center>
+  );
+}

webapp/src/tests/PageNotFound404.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { render, fireEvent, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { MemoryRouter } from 'react-router-dom';
+import PageNotFound from '../pages/NotFound';
+import theme from '../styles/theme';
+import { ChakraProvider } from '@chakra-ui/react';
+
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: key => key,
+    i18n: {
+        changeLanguage: () => new Promise(() => {}),
+    },
+  }),
+}));
+
+describe('404 page', () => {
+    it('renders title and description correctly', () => {
+        const { getByText } = render(<ChakraProvider theme={theme}><MemoryRouter><PageNotFound /></MemoryRouter></ChakraProvider>);
+
+        expect(getByText('page404.title')).toBeInTheDocument();
+        expect(getByText('page404.text')).toBeInTheDocument();
+    });
+});