From 7106afacb9ac99f13aa28b213445007aeefbb05f Mon Sep 17 00:00:00 2001
From: Gabriel Cozma <me@gabs.eu.org>
Date: Mon, 5 Aug 2024 17:19:34 +0300
Subject: [PATCH] feat: add 404 page (#114)

---
 src/router/index.ts        |  6 ++++++
 src/views/NotFoundView.vue | 13 +++++++++++++
 2 files changed, 19 insertions(+)
 create mode 100644 src/views/NotFoundView.vue

diff --git a/src/router/index.ts b/src/router/index.ts
index 40be737..d17c6dc 100644
--- a/src/router/index.ts
+++ b/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,
+    }
   ],
 });
 
diff --git a/src/views/NotFoundView.vue b/src/views/NotFoundView.vue
new file mode 100644
index 0000000..599119f
--- /dev/null
+++ b/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>