feat: add 404 page (#114)

src/router/index.ts

@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from "vue-router";
 import HomeView from "../views/HomeView.vue";
 import ArticleView from "../views/ArticleView.vue";
 import CollectionView from "../views/CollectionView.vue";
+import NotFoundView from "../views/NotFoundView.vue";
 import { useHead } from 'unhead'
 
 
@@ -23,6 +24,11 @@ const router = createRouter({
       name: "article",
       component: ArticleView,
     },
+    {
+      path: "/:pathMatch(.*)*",
+      name: "notfound",
+      component: NotFoundView,
+    }
   ],
 });
 

src/views/NotFoundView.vue

@@ -0,0 +1,13 @@
+<template>
+    <section class="bg-gray-100 dark:bg-gray-800 text-black dark:text-gray-200">
+        <div class="container mx-auto py-20 px-4 text-center print:text-black">
+            <h1 class="text-6xl font-extrabold animate-pulse">404</h1>
+            <h2 class="text-2xl font-bold">Not Found</h2>
+            <p class="mt-4">The page you are looking for does not exist.</p>
+        </div>
+    </section>
+    <section class="text-center mt-10 flex gap-6 flex-col lg:w-[55%] mx-auto sm:w-full items-center justify-center">
+    <img src="https://i.imgflip.com/6pvb0b.png" alt="404" class="rounded-xl w-[85%]">
+    <a href="/" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-6 sm:w-[50%] md:w-[30%] lg:w-[20%]">Go Home</a>
+    </section>
+</template>