Added error page

src/components/Card.module.css

@@ -28,6 +28,7 @@
   flex-direction: column;
   align-items: center;
 }
+
 button {
   width: 100px;
   height: 30px;
@@ -40,9 +41,11 @@ button {
   border: 0;
   margin: 0;
 }
+
 .button:hover {
   background-color: rgb(90, 145, 155);
 }
+
 @media (max-width: 768px) {
   .card {
     width: 100%;

src/index.css

@@ -9,3 +9,7 @@ body {
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
 }
+
+main {
+  text-align: center;
+}

src/pages/Error.js

@@ -0,0 +1,15 @@
+import MainNavigation from '../components/MainNavigation';
+
+function ErrorPage() {
+  return (
+    <>
+      <MainNavigation />
+      <hr />
+      <main>
+        <h2>An error occurred!</h2>
+        <p>Could not find this page!</p>
+      </main>
+    </>
+  );
+}
+export default ErrorPage;

src/router/router.js

@@ -2,12 +2,14 @@ import { createBrowserRouter } from 'react-router-dom';
 import UserDetailPage, { loader as userDetailLoader } from '../pages/UserDetails';
 import UsersListPage, { loader as usersLoader } from '../pages/UsersList';
 import RootLayout from '../pages/Root';
+import ErrorPage from '../pages/Error';
 
 const router = createBrowserRouter([
   {
     path: '/',
     id: 'user-detail',
     element: <RootLayout />,
+    errorElement: <ErrorPage />,
     children: [
       {
         path: '/',