From 6d5979ff676cab609232639987ae6afec1b42e81 Mon Sep 17 00:00:00 2001
From: Marios Antonoudiou <mariosant@sent.com>
Date: Sun, 27 Apr 2025 21:15:28 +0300
Subject: [PATCH] Add error page

---
 app/error.vue    | 36 ++++++++++++++++++++++++++++++++++++
 public/error.svg |  1 +
 2 files changed, 37 insertions(+)
 create mode 100644 app/error.vue
 create mode 100644 public/error.svg

diff --git a/app/error.vue b/app/error.vue
new file mode 100644
index 0000000..40d4459
--- /dev/null
+++ b/app/error.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+const error = useError();
+</script>
+
+<template>
+  <UContainer class="max-w-lg p-8 md:p-16">
+    <UCard>
+      <div class="grid gap-4">
+        <div class="text-center font-bold text-4xl md:text-6xl">
+          {{ error?.statusCode }}
+        </div>
+        <NuxtImg
+          src="https://images.unsplash.com/photo-1644365977963-e96e883a8e74?q=80&w=512&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+        />
+
+        <div class="text-center">Uh oh... Something went super wrong.</div>
+
+        <div class="text-center font-mono p-4 bg-neutral-100 text-sm">
+          {{ error?.message }}
+        </div>
+      </div>
+
+      <template #footer>
+        <div class="w-full flex justify-center">
+          <UButton
+            label="Navigate back home"
+            to="/"
+            icon="heroicons:arrow-left"
+          />
+        </div>
+      </template>
+    </UCard>
+  </UContainer>
+
+  <AppFooter />
+</template>
diff --git a/public/error.svg b/public/error.svg
new file mode 100644
index 0000000..fc4d280
--- /dev/null
+++ b/public/error.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="799.031" height="618.112" viewBox="0 0 799.031 618.112" xmlns:xlink="http://www.w3.org/1999/xlink" role="img" artist="Katerina Limpitsouni" source="https://undraw.co/"><g transform="translate(-893 -197)"><path d="M15.18,488.763c0,.872.478,1.573,1.073,1.573h535.1c.6,0,1.073-.7,1.073-1.573s-.478-1.573-1.073-1.573H16.253C15.658,487.191,15.18,487.891,15.18,488.763Z" transform="translate(1007.711 324.776)" fill="#ccc"/><rect width="19.105" height="3.371" transform="translate(1198.162 808.354)" fill="#b6b3c5"/><rect width="19.105" height="3.371" transform="translate(1367.295 808.917)" fill="#b6b3c5"/><path d="M352.955,370.945a27.529,27.529,0,0,1-54.321,0H229.146V521.536h193.3V370.945Z" transform="translate(966.721 287.378)" fill="#d6d6e3"/><rect width="193.296" height="5.242" transform="translate(1196.43 796.983)" fill="#090814"/><path d="M788.255,487.17H10.776A10.788,10.788,0,0,1,0,476.394V32.688A10.788,10.788,0,0,1,10.776,21.911H788.255a10.789,10.789,0,0,1,10.776,10.776V476.394a10.789,10.789,0,0,1-10.776,10.776Z" transform="translate(893 175.089)" fill="#090814"/><rect width="760.822" height="429.297" transform="translate(911.104 213.968)" fill="#fff"/><g transform="translate(20.477 16.308)"><path d="M604.463,379.271H317.442a8.655,8.655,0,0,1-8.645-8.645V273.8a8.655,8.655,0,0,1,8.645-8.645H604.463a8.655,8.655,0,0,1,8.645,8.645v96.826a8.655,8.655,0,0,1-8.645,8.645Z" transform="translate(811.648 85.826)" fill="#ff6900"/><rect width="76.078" height="8.645" rx="2" transform="translate(1165.4 380.374)" fill="#fff"/><ellipse cx="5.187" cy="5.187" rx="5.187" ry="5.187" transform="translate(1336.576 380.374)" fill="#090814"/><ellipse cx="5.187" cy="5.187" rx="5.187" ry="5.187" transform="translate(1353.865 380.374)" fill="#090814"/><ellipse cx="5.187" cy="5.187" rx="5.187" ry="5.187" transform="translate(1371.156 380.374)" fill="#090814"/></g><ellipse cx="40.952" cy="40.952" rx="40.952" ry="40.952" transform="translate(1404.281 440.452)" fill="#090814"/><path d="M10.863-57.7l-.524-29.6h8.246l-.554,29.6Zm3.613,14.307a4.7,4.7,0,0,1-3.409-1.3,4.368,4.368,0,0,1-1.34-3.278,4.39,4.39,0,0,1,1.34-3.322,4.732,4.732,0,0,1,3.409-1.282,4.732,4.732,0,0,1,3.409,1.282,4.39,4.39,0,0,1,1.34,3.322,4.368,4.368,0,0,1-1.34,3.278A4.7,4.7,0,0,1,14.476-43.394Z" transform="translate(1430.76 546.754)" fill="#fff"/></g></svg>
\ No newline at end of file