feat: add 404 page

src/pages/BlogPage.vue

@@ -9,7 +9,7 @@
       <div
         class="absolute bg-gray-bg blur-[58px] rounded-[190px] w-[380px] h-[380px] z-0 -right-[82px] -top-[51px]"
       ></div>
-      
+
       <section class="relative z-10 px-[6.7%] mt-6">
         <router-link
           to="/blogs"
@@ -57,10 +57,10 @@ export default {
   mounted() {
     window.addEventListener("scroll", this.onScroll);
 
-    if (!this.$route.params.id || !this.blogs[this.$route.params.id - 1]) {
-      this.$router.push("/blogs");
-      return;
-    }
+    // if (!this.$route.params.id || !this.blogs[this.$route.params.id - 1]) {
+    //   this.$router.push("/blogs");
+    //   return;
+    // }
 
     this.blog = this.blogs[this.$route.params.id - 1];
   },

src/pages/NotFoundPage.vue

+<template>
+  <div class="min-h-screen bg-cover bg-no-repeat bg-center bg-blend-multiply bg-gray-300 bg-[url('../public/img/404.png')]">
+    <HeaderComponent
+      current-page="404"
+      transparent
+      text-white
+    ></HeaderComponent>
+  
+    <h1 class="text-white font-medium text-[3.375rem] leading-[4.5rem] mt-10 sm:mt-20 md:mt-[214px] w-max mx-auto relative">
+      <FeatureLeftSvg class="absolute -translate-x-[91%] w-[51px] h-[51px] text-blue -top-[25px]"></FeatureLeftSvg>
+      Oops!
+    </h1>
+    <p class="mt-2 text-white leading-[1.625rem] text-center text-lg w-auto mx-auto">
+      It looks like something went wrong <br>
+Reload the page or return to the home screen
+    </p>
+    <div class="flex justify-center mt-[30px]">
+      <router-link to="/" class="text-white rounded leading-[1.813rem] text-lg py-[14px] px-10 text-center w-max bg-blue hover:bg-blue-700 transition-colors">
+      Go to main page
+    </router-link>
+    </div>
+    
+  </div>
+</template>
+
+<script>
+import HeaderComponent from "../components/HeaderComponent.vue";
+import FeatureLeftSvg from "../components/svg/FeatureLeftSvg.vue";
+
+export default {
+  name: "NotFoundPage",
+  data() {
+    return {
+      scroll: window.scrollY,
+      blog: {},
+    };
+  },
+  mounted() {
+    window.addEventListener("scroll", this.onScroll);
+
+    if (!this.$route.params.id || !this.blogs[this.$route.params.id - 1]) {
+      this.$router.push("/blogs");
+      return;
+    }
+
+    this.blog = this.blogs[this.$route.params.id - 1];
+  },
+  beforeDestroy() {
+    window.removeEventListener("scroll", this.onScroll);
+  },
+  methods: {
+    onScroll() {
+      this.scroll = window.scrollY;
+    },
+  },
+  components: { HeaderComponent, FeatureLeftSvg },
+};
+</script>

src/plugins/router.js

@@ -4,6 +4,7 @@ import HomePage from "../pages/HomePage";
 import ServicesPage from "../pages/ServicesPage";
 import BlogsPage from "../pages/BlogsPage";
 import BlogPage from "../pages/BlogPage";
+import NotFoundPage from "../pages/NotFoundPage";
 
 Vue.use(VueRouter);
 const router = new VueRouter({
@@ -24,6 +25,10 @@ const router = new VueRouter({
             path: "/blogs/:id",
             component: BlogPage,
         },
+        {
+            path: "/:pathMatch(.*)*",
+            component: NotFoundPage,
+        },
     ],
     mode: "history",
 });