feat(frontend): redesign 404 page

frontend/package.json

@@ -22,46 +22,47 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "vue": "^3.5.13",
-    "vue-router": "^4.5.0",
-    "pinia": "^2.2.6",
     "@iconify/vue": "^4.1.2",
+    "@untitledui-icons/vue": "^1.0.3",
     "@vueuse/core": "^10.11.1",
     "copy-to-clipboard": "^3.3.3",
     "normalize.css": "^8.0.1",
+    "pinia": "^2.2.6",
     "postcss-uncss": "^0.17.0",
     "query-string": "^8.2.0",
     "set-interval-async": "^3.0.3",
     "uncss": "^0.17.3",
     "unplugin-vue-router": "^0.10.9",
     "v-click-outside": "^3.2.0",
+    "vue": "^3.5.13",
     "vue-i18n": "^9.14.2",
+    "vue-router": "^4.5.0",
     "vue-template-compiler": "^2.7.16"
   },
   "devDependencies": {
-    "@tsconfig/node22": "^22.0.0",
-    "@types/node": "^22.9.3",
-    "@vitejs/plugin-vue": "^5.2.1",
-    "@vitejs/plugin-vue-jsx": "^4.1.1",
-    "@vue/tsconfig": "^0.7.0",
     "@intlify/unplugin-vue-i18n": "^1.6.0",
     "@plugin-web-update-notification/vite": "^1.7.1",
     "@rushstack/eslint-patch": "^1.10.4",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
+    "@tsconfig/node22": "^22.0.0",
+    "@types/node": "^22.9.3",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vitejs/plugin-vue-jsx": "^4.1.1",
     "@vue/eslint-config-prettier": "^10.1.0",
     "@vue/eslint-config-typescript": "^14.1.3",
     "@vue/runtime-dom": "^3.5.13",
+    "@vue/tsconfig": "^0.7.0",
     "autoprefixer": "^10.4.20",
     "eslint": "^9.16.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-vue": "^9.32.0",
     "naive-ui": "^2.40.3",
+    "npm-run-all2": "^7.0.1",
     "postcss": "^8.4.49",
     "prettier": "^3.4.2",
     "sass": "^1.82.0",
     "typescript": "~5.6.3",
     "unplugin-vue-components": "^0.25.2",
-    "npm-run-all2": "^7.0.1",
     "vite": "^6.0.1",
     "vite-plugin-vue-devtools": "^7.6.5",
     "vue-tsc": "^2.1.10"

frontend/src/App.vue

@@ -14,7 +14,7 @@ router.isReady().finally(() => {
 </script>
 
 <template>
-  <Highlights />
+  <Highlights v-if="!$route.meta.hideHighlight" />
   <div v-if="!isRouterReady" class="app-loader">
     <IconLoading />
   </div>

frontend/src/router/index.ts

@@ -27,6 +27,7 @@ const router = createRouter({
     {
       path: '/:pathMatch(.*)*',
       component: () => import('@/views/PageNotFoundView.vue'),
+      meta: { hideHighlight: true },
     },
   ],
 })

frontend/src/views/PageNotFoundView.vue

@@ -1,13 +1,48 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import UiButton from "@/components/ui/uiButton.vue";
+import { ArrowLeftIcon } from '@untitledui-icons/vue/solid'
+</script>
 
 <template>
   <main>
     <div class="main__body">
       <div class="main__container">
-        <h1>Page not found :(</h1>
+        <img class="s404" src="/404.png" alt="">
+        <h1 class="title">Whooops, this page is gone</h1>
+        <p class="subtitle">This page is missing or you wrote the link incorrectly.</p>
       </div>
+      <ui-button @click="$router.push('/')"><ArrowLeftIcon class="arrow-icon"/>Back to home</ui-button>
     </div>
   </main>
 </template>
 
-<style scoped></style>
+<style lang="scss" scoped>
+.s404 {
+  filter: drop-shadow(0 0 100px #FF0016);
+  width: 100%;
+  margin-bottom: 20px;
+}
+
+.title {
+  margin: 0;
+  font-weight: bold;
+  font-size: 34px;
+}
+
+.subtitle {
+  margin: 0;
+  font-weight: 300;
+  font-size: 15px;
+  color: #9F9F9F;
+  position: relative;
+  top: -20px;
+}
+
+svg {
+  width: 15px;
+}
+
+button {
+  margin-top: 15%;
+}
+</style>