fixes #29

cypress/e2e/about.cy.ts

@@ -2,7 +2,7 @@ describe("About page", () => {
   it("displays information after navigating to tab", () => {
     cy.visit("/");
 
-    cy.contains("About").click();
+    cy.contains("About").click({ force: true });
 
     cy.contains("Upstate / Greenville SC Open Data Map Layers Demo");
   });

src/router/index.ts

@@ -1,5 +1,6 @@
 import { createRouter, createWebHistory } from "vue-router";
 import MapView from "../views/MapView.vue";
+import NotFoundView from "../views/NotFoundView.vue";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -17,6 +18,11 @@ const router = createRouter({
       // which is lazy-loaded when the route is visited.
       component: () => import("../views/AboutView.vue"),
     },
+    {
+      path: "/:pathMatch(.*)",
+      name: "404",
+      component: NotFoundView,
+    },
   ],
 });
 

src/views/NotFoundView.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="star star1"></div>
+  <div class="star star2"></div>
+  <div class="star star3"></div>
+  <div class="star star4"></div>
+  <div class="star star5"></div>
+
+  <div class="error grid justify-items-center h-full place-content-center">
+    <div class="text-white text-[10em]">404</div>
+    <div class="text-white text-[2em]">Page Not Found</div>
+  </div>
+</template>
+
+<style>
+html,
+body {
+  margin: 0px;
+  background: linear-gradient(
+    90deg,
+    rgba(47, 54, 64, 1) 23%,
+    rgba(24, 27, 32, 1) 100%
+  );
+}
+
+.star {
+  background: rgb(230, 230, 90);
+  position: absolute;
+  width: 5px;
+  height: 5px;
+  content: "";
+  border-radius: 100%;
+  transform: rotate(250deg);
+  opacity: 0.4;
+  animation-name: shimmer;
+  animation-duration: 1.5s;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+
+.star1 {
+  top: 40%;
+  left: 75%;
+  animation-delay: 1s;
+}
+
+.star2 {
+  top: 60%;
+  left: 90%;
+  animation-delay: 3s;
+}
+
+.star3 {
+  top: 10%;
+  left: 70%;
+  animation-delay: 2s;
+}
+
+.star4 {
+  top: 90%;
+  left: 40%;
+}
+
+.star5 {
+  top: 20%;
+  left: 30%;
+  animation-delay: 0.5s;
+}
+</style>