Add 404 page

assets/js/components/NotFound/NotFound.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import Button from '@components/Button';
+import TrentoLogo from '../../../static/trento-icon.png';
+
+const NotFound = () => {
+  const navigate = useNavigate();
+
+  return (
+    <main className="bg-white relative overflow-hidden h-screen relative">
+      <div className="container mx-auto h-screen pt-32 md:pt-0 px-6 z-10 flex items-center justify-between">
+        <div className="container mx-auto px-6 flex flex-col-reverse lg:flex-row justify-between items-center relative">
+          <div className="w-full mb-16 md:mb-8 text-center lg:text-left">
+            <h1 className="font-light font-sans text-center lg:text-left text-5xl lg:text-8xl mt-12 md:mt-0 text-gray-700">
+              Sorry,<br></br>the page is in antoher castle.
+            </h1>
+            <Button
+              className="px-2 py-2 w-36 mt-16"
+              type="secondary"
+              onClick={() => {
+                navigate(`/`);
+              }}
+            >
+              Go back home
+            </Button>
+          </div>
+          <div className="block w-full mx-auto md:mt-0 relative max-w-md lg:max-w-2xl">
+            <img src={TrentoLogo} />
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+};
+
+export default NotFound;

assets/js/components/NotFound/index.js

@@ -0,0 +1,3 @@
+import NotFound from './NotFound';
+
+export default NotFound;

assets/js/trento.jsx

@@ -22,6 +22,7 @@ import DatabasesOverview from '@components/DatabasesOverview';
 import SapSystemDetails from './components/SapSystemDetails/SapSystemDetails';
 import DatabaseDetails from './components/DatabaseDetails';
 import ChecksCatalog from '@components/ChecksCatalog';
+import NotFound from '@components/NotFound';
 
 const App = () => {
   return (
@@ -51,6 +52,7 @@ const App = () => {
               <Route path="databases/:id" element={<DatabaseDetails />} />
               <Route path="clusters/:clusterID" element={<ClusterDetails />} />
             </Route>
+            <Route path="*" element={<NotFound />} />
           </Routes>
         </BrowserRouter>
       </Provider>