ATL-10: Add catch-all 404 route/page

src/App.vue

@@ -5,3 +5,7 @@
 <script lang="ts" setup>
   //
 </script>
+
+<style>
+@import '@/styles/hartsfield-global.scss'
+</style>

src/router.ts

@@ -1,7 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import DefaultVue from '@/layouts/default/Default.vue'
 import Home from '@/views/Home.vue'
-import Login from '@/views/Login.vue'
+import NotFound from '@/views/NotFound.vue'
 
 
 const routes = [
@@ -15,6 +15,17 @@ const routes = [
         component: Home,
       },
     ],
+  },
+  {
+    path: '/',
+    component: DefaultVue,
+    children: [ 
+      {
+        path: '/:pathMatch(.*)*',
+        name: 'NotFound',
+        component:  NotFound,
+      },
+    ],
   }
 ]
 

src/styles/hartsfield-global.scss

@@ -0,0 +1,3 @@
+.frosted {
+    background-color: #6d8cb4c3!important;
+}

src/views/Login.vue

@@ -1,5 +1,5 @@
 <template>
-<v-container class="fill-height" style="">
+<v-container class="fill-height">
     <v-responsive class="d-flex align-center text-center fill-height ">
       <v-sheet
           border
@@ -45,8 +45,4 @@
 .accent-border {
   border: 1px solid #083c7c !important;
 }
-
-.frosted {
-  background-color: #6d8cb4c3!important;
-}
 </style>

src/views/NotFound.vue

@@ -0,0 +1,29 @@
+<template>
+  <v-container class="fill-height">
+    <v-responsive class="d-flex align-center text-center fill-height ">
+      <v-sheet
+          border
+          rounded
+          :height="300"
+          :width="800"
+          class="frosted px-8 py-6 accent-border accent-text mx-auto "
+      >
+        <p class="mt-3 text-h1">404</p>
+
+        <p class="mt-8 text-h5 font-weight-light" >
+            Page not found
+        </p>
+
+        <div class="mt-8">
+          <router-link to="/" class="font-weight-light">Go back to the home page</router-link>
+        </div>
+      </v-sheet>
+    </v-responsive>
+  </v-container>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'NotFound'
+  }
+</script>