From 166e31b5d18c27d91b3b6a8b4c77732d099602ed Mon Sep 17 00:00:00 2001 From: Erison Date: Wed, 5 Feb 2025 23:41:21 -0300 Subject: [PATCH] feat: add responsive 404 error page with modern design and decorations --- public/404.svg | 1 + src/components/NotFound.tsx | 25 +++++++++ src/styles/main.css | 108 ++++++++++++++++++++++++++++++++++++ 3 files changed, 134 insertions(+) create mode 100644 public/404.svg create mode 100644 src/components/NotFound.tsx diff --git a/public/404.svg b/public/404.svg new file mode 100644 index 00000000..962c5dbc --- /dev/null +++ b/public/404.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/NotFound.tsx b/src/components/NotFound.tsx new file mode 100644 index 00000000..3ea61222 --- /dev/null +++ b/src/components/NotFound.tsx @@ -0,0 +1,25 @@ +import React from "react"; +import svg404 from "public/404.svg"; // Altere para o caminho correto da imagem 404 + +const NotFound: React.FC = () => { + return ( +
+
+ 404 +

Oops! Page Not Found

+

+ We’re sorry, the page you’re looking for cannot be found. +

+ + Go Back to Home + +
+
+
+
+
+
+ ); +}; + +export default NotFound; diff --git a/src/styles/main.css b/src/styles/main.css index d0f2a08f..769a105c 100644 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -764,3 +764,111 @@ body:has(.modal-overlay) { grid-area: footer_content; max-width: 60ch; } + +.notfound-container { + position: relative; + width: 100vw; + height: 100vh; + background: #f2f2f2; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + overflow: hidden; + text-align: center; + padding: 20px; +} + +.notfound-content { + position: relative; + z-index: 2; + max-width: 600px; +} + +.notfound-image-404 { + width: 70%; + max-width: 500px; + margin: 0 auto; +} + +.notfound-title { + font-family: "Rubik", sans-serif; + font-size: 32px; + font-weight: 700; + color: #000000; + margin: 20px 0; +} + +.notfound-description { + font-family: "Rubik", sans-serif; + font-size: 18px; + font-weight: 400; + color: #555555; + margin-bottom: 30px; + padding: 0 10px; +} + +.notfound-back-button { + display: inline-block; + padding: 12px 24px; + background: #007dfe; + color: #ffffff; + font-family: "Rubik", sans-serif; + font-size: 16px; + font-weight: 500; + text-decoration: none; + border-radius: 8px; + box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.25); + transition: background 0.3s ease, transform 0.2s ease; +} + +.notfound-back-button:hover { + background: #005bb5; + transform: scale(1.05); +} + +.notfound-decorations { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1; + overflow: hidden; +} + +.notfound-ellipse { + position: absolute; + border-radius: 50%; + z-index: -1; +} + +.notfound-ellipse-1 { + width: 350px; + height: 500px; + top: 10%; + left: -80px; + background: linear-gradient(180deg, rgba(191, 216, 255, 0.8) 0%, rgba(0, 125, 254, 0.8) 100%); + transform: rotate(30deg); +} + +.notfound-ellipse-2 { + width: 300px; + height: 400px; + bottom: 10%; + right: -50px; + background: linear-gradient(180deg, rgba(214, 230, 255, 0.8) 0%, rgba(0, 125, 254, 0.8) 100%); + transform: rotate(-30deg); +} + +@media (max-width: 768px) { + .notfound-image-404 { + width: 80%; + } + + .notfound-ellipse-1, + .notfound-ellipse-2 { + width: 200px; + height: 300px; + } +}