From 765dea6430654cfbf2da1339a15d9cd3948a2c14 Mon Sep 17 00:00:00 2001
From: Nicola Spadari <NicolaSpadari@users.noreply.github.com>
Date: Sun, 9 Feb 2025 13:12:48 +0100
Subject: [PATCH] Update 404 page

---
 app/components/Btn.vue       |  5 -----
 app/components/Hyperlink.vue |  5 -----
 app/components/NavLink.vue   |  5 -----
 app/pages/[...all].vue       | 26 +++++++++++++-------------
 4 files changed, 13 insertions(+), 28 deletions(-)
 delete mode 100644 app/components/Btn.vue
 delete mode 100644 app/components/Hyperlink.vue
 delete mode 100644 app/components/NavLink.vue

diff --git a/app/components/Btn.vue b/app/components/Btn.vue
deleted file mode 100644
index 08cccbb..0000000
--- a/app/components/Btn.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-	<button class="gap-1 rounded-md bg-emerald-500 px-3.5 py-2.5 text-sm text-white font-semibold shadow-sm transition-colors disabled:(cursor-not-allowed opacity-60)" hover="bg-emerald-600" focus-visible="outline-2 outline-emerald-600 outline-offset-2 outline">
-		<slot />
-	</button>
-</template>
diff --git a/app/components/Hyperlink.vue b/app/components/Hyperlink.vue
deleted file mode 100644
index 918719a..0000000
--- a/app/components/Hyperlink.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-	<NuxtLink class="gap-1 rounded-md bg-emerald-500 px-3.5 py-2.5 text-sm text-white font-semibold shadow-sm transition-colors" hover="bg-emerald-600" focus-visible="outline-2 outline-emerald-600 outline-offset-2 outline">
-		<slot />
-	</NuxtLink>
-</template>
diff --git a/app/components/NavLink.vue b/app/components/NavLink.vue
deleted file mode 100644
index 09230db..0000000
--- a/app/components/NavLink.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-	<NuxtLink class="block py-2 text-white font-semibold leading-6" lg="inline text-sm py-0">
-		<slot />
-	</NuxtLink>
-</template>
diff --git a/app/pages/[...all].vue b/app/pages/[...all].vue
index b05374f..9f691ea 100644
--- a/app/pages/[...all].vue
+++ b/app/pages/[...all].vue
@@ -1,20 +1,20 @@
 <template>
-	<div class="grid place-items-center px-6 py-24" sm="py-32" lg="px-8">
-		<div class="text-center">
-			<p class="text-base text-emerald-500 font-semibold">
+	<div class="grid place-items-center py-12 md:py-24">
+		<div class="flex flex-col items-center gap-y-4 md:gap-y-8">
+			<p class="text-(--ui-success) font-semibold">
 				404
 			</p>
-			<h1 class="mt-4 text-3xl text-neutral-300 font-bold tracking-tight" sm="text-5xl">
-				Page not found
-			</h1>
-			<p class="mt-6 text-base text-neutral-400 leading-7">
-				Sorry, we couldn't find the page you're looking for.
-			</p>
-			<div class="mt-10 flex items-center justify-center gap-x-6">
-				<Hyperlink to="/" class="px-7">
-					Back
-				</Hyperlink>
+			<div class="text-center space-y-3">
+				<h1 class="text-3xl font-bold tracking-tight" sm="text-5xl">
+					Page not found
+				</h1>
+				<p class="text-base text-(--ui-muted) leading-7">
+					Sorry, we couldn't find the page you're looking for.
+				</p>
 			</div>
+			<UButton to="/" variant="outline" size="lg" :ui="{ base: 'px-5' }">
+				Go home
+			</UButton>
 		</div>
 	</div>
 </template>