feat: Implement error page with responsive design and styling adjustments

Author: DMVMarcio

apps/client/assets/scss/app.scss

@@ -18,7 +18,7 @@
 
 .light-mode {
 	.app-main {
-		color: colors.$black_950;
+		color: colors.$black_900;
 		background-color: colors.$white_50;
 	}
 }

apps/client/assets/scss/components/contributors.scss

@@ -47,11 +47,11 @@
 
 .light-mode {
 	.contributors-item-more {
-		color: colors.$black_50;
-		background-color: colors.$black_600;
+		color: colors.$white_50;
+		background-color: colors.$black_500;
 
 		&:hover {
-			background-color: colors.$black_900;
+			background-color: colors.$black_700;
 		}
 	}
 }

apps/client/assets/scss/error.scss

@@ -0,0 +1,75 @@
+@use '~/assets/scss/utils/_colors.scss';
+
+.error-main {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	min-width: 100%;
+	min-height: 100vh;
+}
+
+.error-main-image {
+	position: fixed;
+	right: 0;
+	bottom: 0;
+	height: 100vh;
+	min-height: 25rem;
+	opacity: 0.5;
+	transform: translate(5%, 35%);
+	z-index: 1;
+}
+
+.error-main-content {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	z-index: 2;
+	padding: 0 1rem;
+
+	& > h1 {
+		font-size: 8rem;
+		font-weight: 700;
+		line-height: 7rem;
+	}
+
+	& > h2 {
+		font-size: 2rem;
+		font-weight: 400;
+	}
+
+	& > p {
+		font-size: 1rem;
+		font-weight: 400;
+		max-width: 25rem;
+		margin-top: 1rem;
+		text-align: center;
+	}
+}
+
+.light-mode {
+	.error-main-content {
+		& > h1 {
+			color: colors.$primary_400;
+		}
+	}
+
+	.error-main {
+		color: colors.$black_700;
+		background-color: colors.$white_50;
+	}
+}
+
+.dark-mode {
+	.error-main-content {
+		& > h1 {
+			color: colors.$primary_300;
+		}
+	}
+
+	.error-main {
+		color: colors.$white_100;
+		background-color: colors.$black_900;
+	}
+}

apps/client/assets/scss/pages/about.scss

@@ -40,9 +40,3 @@
 	font-weight: 400;
 	white-space: pre-wrap;
 }
-
-.light-mode {
-	.about-logo {
-		filter: drop-shadow(1px 2px 0px #00000048);
-	}
-}

apps/client/assets/scss/pages/index.scss

@@ -49,7 +49,10 @@
 		font-weight: 500;
 		border: none;
 		border-radius: 0.5rem;
-		transition: background-color 0.3s, transform 0.3s, color 0.3s;
+		transition:
+			background-color 0.3s,
+			transform 0.3s,
+			color 0.3s;
 		transform: translateY(0);
 
 		&:hover {
@@ -67,10 +70,6 @@
 }
 
 .light-mode {
-	.home-logo {
-		filter: drop-shadow(1px 2px 0px #00000048);
-	}
-
 	.home-title {
 		& > span {
 			background: linear-gradient(to right, colors.$primary_300, colors.$primary_400);

apps/client/error.vue

@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+import type { NuxtError } from '#app';
+
+const props = defineProps({
+	error: Object as () => NuxtError
+});
+
+const handleClear = () => clearError({ redirect: '/' });
+</script>
+
+<style lang="scss">
+@use '~/assets/scss/global.scss';
+</style>
+
+<style lang="scss" scoped>
+@use '~/assets/scss/error.scss';
+</style>
+
+<template>
+	<div class="error-main" role="main">
+		<div class="error-main-content">
+			<h1>{{ props.error?.statusCode }}</h1>
+
+			<template v-if="props.error?.statusCode === 404">
+				<h2>Page not found</h2>
+
+				<p>Sorry, the page you are looking for does not exist or has been moved.</p>
+			</template>
+			<template v-else>
+				<h2>Oops! An error occurred.</h2>
+
+				<p>Sorry, an error has occurred on the server.</p>
+			</template>
+
+			<Button @click="handleClear" theme="primary" class="mt-8">
+				<Icon name="material-symbols:arrow-back-rounded" /> Go back
+			</Button>
+		</div>
+
+		<NuxtImg src="images/zyro-color.webp" class="error-main-image" :draggable="false" />
+	</div>
+</template>