not found pages improved

src/components/icons/IconCloudQuestion.vue

@@ -0,0 +1,8 @@
+<template>
+  <svg viewBox="0 0 24 24">
+    <path
+      d="M19.35 10.03A7.49 7.49 0 0 0 12 4C9.11 4 6.6 5.64 5.35 8.03A6.004 6.004 0 0 0 0 14a6 6 0 0 0 6 6h13a5 5 0 0 0 5-5c0-2.64-2.05-4.78-4.65-4.97M13 17h-2v-2h2v2m1.8-5.18c-.3.39-.67.68-1.13.93c-.26.16-.43.32-.52.51A1.7 1.7 0 0 0 13 14h-2c0-.55.11-.92.3-1.18c.2-.26.55-.57 1.07-.91c.26-.16.47-.35.63-.59c.15-.23.23-.51.23-.82c0-.32-.09-.56-.27-.74c-.18-.2-.46-.29-.76-.29c-.27 0-.49.08-.7.23c-.15.15-.25.38-.25.69H9.28c-.05-.75.22-1.39.78-1.8C10.6 8.2 11.31 8 12.2 8c.94 0 1.69.23 2.23.68c.54.45.81 1.07.81 1.82c0 .5-.15.91-.44 1.32z"
+      fill="currentColor"
+    ></path>
+  </svg>
+</template>

src/components/icons/index.ts

@@ -6,3 +6,4 @@ export { default as IconSpinner } from './IconSpinner.vue'
 export { default as IconNoGift } from './IconNoGift.vue'
 export { default as IconLightDark } from './IconLightDark.vue'
 export { default as IconMenu } from './IconMenu.vue'
+export { default as IconCloudQuestion } from './IconCloudQuestion.vue'

src/config/locales/de-DE.json

@@ -9,7 +9,7 @@
   },
   "errors": {
     "not-found": {
-      "text": "Ups, es sieht so aus, als ob die Seite, die du suchst, nicht existiert."
+      "text": "Ups, die aufgerufene Seite existiert nicht."
     },
     "generic": {
       "text": "Es ist ein Fehler aufgetreten..."

src/config/locales/en-US.json

@@ -9,7 +9,7 @@
   },
   "errors": {
     "not-found": {
-      "text": "Oops, it looks like the page you're looking for doesn't exist."
+      "text": "Oops, the requested page does not exist."
     },
     "generic": {
       "text": "An error has occurred..."

src/views/NotFound.vue

@@ -1,7 +1,13 @@
 <template>
-  <h1>{{ t('errors.not-found.text') }}</h1>
+  <div
+    class="mt-20 flex flex-wrap flex-col sm:flex-row items-center sm:space-x-2 justify-center text-center sm:text-left text-xl"
+  >
+    <IconCloudQuestion class="h-12 w-12" />
+    <h1>{{ t('errors.not-found.text') }}</h1>
+  </div>
 </template>
 <script setup lang="ts">
+import { IconCloudQuestion } from '@/components/icons'
 import { useI18n } from 'vue-i18n'
 const { t } = useI18n()
 </script>