feat: [110] add error pages

frontend/src/App.jsx

@@ -16,6 +16,8 @@ import ToursDefaultPage from "./scenes/tours/ToursDefaultPage";
 import PopupDefaultPage from "./scenes/popup/PopupDefaultPage";
 import HintDefaultPage from "./scenes/hints/HintDefaultPage";
 import CreatePopupPage from "./scenes/popup/CreatePopupPage";
+import { Error404 } from "./scenes/errors/404";
+import { Error403 } from "./scenes/errors/403";
 
 function App() {
   const { isLoggedIn } = useAuth(); //commented out for testing
@@ -40,6 +42,8 @@ function App() {
         <Route path="/link" element={<LinksDefaultPage />} />
         <Route path="/tour" element={<ToursDefaultPage />} />
         <Route path="/hint" element={<HintDefaultPage />} />
+        <Route path="/403" element={<Error403 />} />
+        <Route path="*" element={<Error404 />} />
       </Routes>    
     </>
   );

frontend/src/scenes/errors/403.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+import { ErrorComponent } from './Error'
+import { NAVIGATE_403_URL, TEXT_403 } from './constant'
+
+export const Error403 = () => {
+  return (
+    <ErrorComponent text={TEXT_403} navigateUrl={NAVIGATE_403_URL} />
+  )
+}

frontend/src/scenes/errors/404.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+import { ErrorComponent } from './Error';
+import { NAVIGATE_404_URL, TEXT_404 } from './constant';
+
+export const Error404 = () => {
+  return (
+    <ErrorComponent text={TEXT_404} navigateUrl={NAVIGATE_404_URL} />
+  )
+}

frontend/src/scenes/errors/Error.jsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import PropTypes from "prop-types";
+import styles from './Error.module.scss';
+import Button from '../../components/Button/Button';
+import { useNavigate } from 'react-router';
+
+export const ErrorComponent = ({ text, navigateUrl }) => {
+  const navigate = useNavigate()
+  const errorButtonStyle = {
+    borderRadius: '8px',
+    marginTop: '58px',
+    fontSize: '13px',
+    lineHeight: '24px',
+    padding: '5px 27px'
+  }
+
+  return (
+    <div className={styles.errorContainer}>
+       <div className={styles.info}>
+          <div className={styles.infoHeader}>We cannot find this page</div>
+          <div className={styles.infoText}>{text}</div>
+       </div>
+       <Button 
+        style={errorButtonStyle}
+        onClick={() => navigate(navigateUrl)}
+        text='Go to the main dashboard' 
+      />
+    </div>
+  )
+};
+
+ErrorComponent.propTypes = {
+  text: PropTypes.string,
+  navigateUrl: PropTypes.string
+}

frontend/src/scenes/errors/Error.module.scss

@@ -0,0 +1,35 @@
+.errorContainer {
+  background-color: var(--background-color);
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  .info {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    gap: 18px;
+
+    .infoHeader {
+      font-weight: 600;
+      color: var(--main-text-color);
+      font-size: 16px;
+      line-height: 30px;
+    }
+
+    .infoText {
+      font-size: 13px;
+      font-weight: 400;
+      line-height: 23px;
+    }
+  }
+
+  .navigateButton {
+    margin-top: 58px;
+    border-radius: 8px;
+  }
+}

frontend/src/scenes/errors/constant.js

@@ -0,0 +1,5 @@
+export const TEXT_404 = 'The URL doesn’t exist';
+export const TEXT_403 = 'You don’t have access to it.';
+
+export const NAVIGATE_404_URL = '/'
+export const NAVIGATE_403_URL = '/'