Add components and improve error page

src/routes/+error.svelte

@@ -1,69 +1,72 @@
 <script lang="ts">
-    import { page } from '$app/state';
-import { error } from 'console';
+	import { page } from '$app/state';
+
+	import stopErr from '$lib/assets/img/stop-error.svg';
+	import Button from '$lib/components/ui/Button.svelte';
 </script>
 
 <div class="error-wrapper">
-    <div class="signal-icon">
-        <div class="red-light"></div>
-    </div>
+	<img class="err-img" src={stopErr} alt="" role="presentation" width="150" height="210" />
 
-    <h2 class="label">Signal Failure: {page.status}</h2>
+	<h2 class="label">{page.status}</h2>
 
-    <p class="error-message">
-        {page.error?.message ?? "An unexpected derailment occurred."}
-    </p>
+	<p class="error-message">
+		{page.error?.message ?? 'An unexpected derailment occurred.'}
+	</p>
 
-    {#if page.error?.owlCode}
-        <div class="debug-info">
-            <code>Ref: {page.error.owlCode}</code>
-        </div>
-    {/if}
+	{#if page.error?.owlCode}
+		<div class="debug-info">
+			<code>Ref: {page.error.owlCode}</code>
+		</div>
+	{/if}
 
-    <a href="/" class="retry-button">Return to Home</a>
+	<Button href={'/'} color={'accent'}>Return to Home</Button>
 </div>
 
 <style>
-    .error-wrapper {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        height: calc(100vh - 140px);
-        padding: 20px;
-        text-align: center;
-        font-family: 'URW Gothic', sans-serif;
-    }
+	.error-wrapper {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		height: calc(100vh - 140px);
+		padding: 0;
+		text-align: center;
+		font-family: 'URW Gothic', sans-serif;
+	}
 
-    .label {
-        color: #ff4444;
-        letter-spacing: 0.2rem;
-        margin-bottom: 10px;
-    }
+	.err-img {
+		height: 40%;
+		width: auto;
+		max-width: 180px;
+		max-height: 252px;
+	}
 
-    .error-message {
-        font-size: 1.1rem;
-        color: var(--color-title);
-        max-width: 300px;
-        margin-bottom: 30px;
-    }
+	@media (max-height: 600px), (max-width: 270px) {
+		.err-img {
+			display: none;
+		}
+	}
 
-    .debug-info {
-        background: rgba(255,255,255,0.05);
-        padding: 5px 12px;
-        border-radius: 4px;
-        font-size: 0.8rem;
-        opacity: 0.6;
-    }
+	.label {
+		color: #ff4444;
+		letter-spacing: 0.2rem;
+		margin-bottom: 0px;
+	}
 
-    .retry-button {
-        margin-top: 40px;
-        padding: 12px 24px;
-        background: var(--color-brand);
-        color: var(--color-title);
-        text-decoration: none;
-        font-weight: 600;
-        border-radius: 6px;
-        letter-spacing: 0.05rem;
-    }
-</style>
+	.error-message {
+		font-size: 1.1rem;
+		color: var(--color-title);
+		max-width: 300px;
+        margin-top: 5px;
+		margin-bottom: 30px;
+	}
+
+	.debug-info {
+		background: rgba(255, 255, 255, 0.05);
+		padding: 5px 12px;
+		border-radius: 4px;
+		font-size: 0.8rem;
+		opacity: 0.6;
+	}
+</style>