feat: Add custom 404 error page

README.md

@@ -80,6 +80,7 @@ And that's it! Your `SkateHub Frontend` should now be up and running locally on
 
 ### 2024
 
+- 2024-12-07 - Add custom `404 error` page [#91](https://github.com/jpcmf/Frontend-GraduateProgram-FullStack-2024/pull/91) _(v0.1.28)_
 - 2024-12-07 - Implement user profile update functionality in AuthContext [#89](https://github.com/jpcmf/Frontend-GraduateProgram-FullStack-2024/pull/89) _(v0.1.27)_
 - 2024-12-07 - Create `textarea` form component [#88](https://github.com/jpcmf/Frontend-GraduateProgram-FullStack-2024/pull/88) _(v0.1.26)_
 - 2024-11-19 - Add reCAPTCHA verification to sign-up process [#70](https://github.com/jpcmf/Frontend-GraduateProgram-FullStack-2024/pull/70) _(v0.1.25)_

package.json

@@ -1,6 +1,6 @@
 {
   "name": "skatehub-frontend",
-  "version": "0.1.27",
+  "version": "0.1.28",
   "private": true,
   "scripts": {
     "dev": "next dev",

src/pages/404.tsx

@@ -0,0 +1,25 @@
+import Link from "next/link";
+import Image from "next/image";
+import { Container, Flex, Text } from "@chakra-ui/react";
+
+export default function Error404() {
+  return (
+    <Container minHeight="100vh" display="flex" justifyContent="center" alignItems="center" flexDirection="column">
+      <Flex marginBottom="4">
+        <Image src="/error404.gif" alt="404 Page Not Found" width={475} height={267} quality={80} />
+      </Flex>
+      <Text as="h1" fontSize="4xl" fontWeight="bold" textAlign="center" color="red.500">
+        404 Página Não Encontrada
+      </Text>
+      <Text as="h2" fontSize="2xl" fontWeight="bold">
+        Oops! Algo deu errado.
+      </Text>
+      <Text as="p" marginTop="4" fontSize="lg" textAlign="center">
+        A página que você está procurando pode ter sido removida ou está temporariamente indisponível.
+      </Text>
+      <Flex marginTop="4">
+        <Link href="/">Voltar para a página inicial</Link>
+      </Flex>
+    </Container>
+  );
+}