diff --git a/webapp/public/img/kiwi-2.gif b/webapp/public/img/kiwi-2.gif
new file mode 100644
index 00000000..19590de3
Binary files /dev/null and b/webapp/public/img/kiwi-2.gif differ
diff --git a/webapp/public/img/kiwi-3.gif b/webapp/public/img/kiwi-3.gif
new file mode 100644
index 00000000..e005034e
Binary files /dev/null and b/webapp/public/img/kiwi-3.gif differ
diff --git a/webapp/public/img/kiwi.gif b/webapp/public/img/kiwi.gif
new file mode 100644
index 00000000..a5205b74
Binary files /dev/null and b/webapp/public/img/kiwi.gif differ
diff --git a/webapp/public/img/kiwi.png b/webapp/public/img/kiwi.png
new file mode 100644
index 00000000..dbdac5df
Binary files /dev/null and b/webapp/public/img/kiwi.png differ
diff --git a/webapp/public/locales/en/translation.json b/webapp/public/locales/en/translation.json
index 3bd09ec6..bcc4745e 100644
--- a/webapp/public/locales/en/translation.json
+++ b/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."
}
}
\ No newline at end of file
diff --git a/webapp/public/locales/es/translation.json b/webapp/public/locales/es/translation.json
index 0b17fb8b..8571b983 100644
--- a/webapp/public/locales/es/translation.json
+++ b/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."
}
}
\ No newline at end of file
diff --git a/webapp/src/components/Router.jsx b/webapp/src/components/Router.jsx
index 3ef7bd6d..d3fa1261 100644
--- a/webapp/src/components/Router.jsx
+++ b/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(
@@ -27,5 +28,6 @@ export default createRoutesFromElements(
} />
} />
+ } />
)
diff --git a/webapp/src/components/menu/LateralMenu.jsx b/webapp/src/components/menu/LateralMenu.jsx
index f51a592b..fa964b03 100644
--- a/webapp/src/components/menu/LateralMenu.jsx
+++ b/webapp/src/components/menu/LateralMenu.jsx
@@ -100,6 +100,7 @@ const LateralMenu = ({ isOpen, onClose, changeLanguage, isDashboard }) => {
+
{isLoggedIn && (
diff --git a/webapp/src/pages/NotFound.jsx b/webapp/src/pages/NotFound.jsx
new file mode 100644
index 00000000..d9ace535
--- /dev/null
+++ b/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 (
+
+ setIsMenuOpen(true)} />
+ setIsMenuOpen(false)} changeLanguage={changeLanguage} isDashboard={false}/>
+
+
+
+ {t('page404.title')}
+
+
+
+ {t("page404.text")}
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/webapp/src/tests/PageNotFound404.js b/webapp/src/tests/PageNotFound404.js
new file mode 100644
index 00000000..02fe0f55
--- /dev/null
+++ b/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();
+
+ expect(getByText('page404.title')).toBeInTheDocument();
+ expect(getByText('page404.text')).toBeInTheDocument();
+ });
+});