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 (
+
+
+

+
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;
+ }
+}