notfound

src/app/NotFound.css

@@ -0,0 +1,44 @@
+.notfound {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background: linear-gradient(135deg, #f3f4f5, #f3f4f5);
+  color: #f50a0a;
+  text-align: center;
+  font-family: "Inter", sans-serif;
+  padding: 2rem;
+}
+
+.notfound h1 {
+  font-size: 6rem;
+  color: #ff4d4d;
+  margin-bottom: 0.5rem;
+}
+
+.notfound h2 {
+  font-size: 2rem;
+  margin-bottom: 1rem;
+}
+
+.notfound p {
+  color: #050505;
+  max-width: 500px;
+  margin-bottom: 2rem;
+}
+
+.notfound button {
+  background: #ff4d4d;
+  border: none;
+  color: white;
+  padding: 0.8rem 2rem;
+  border-radius: 10px;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: background 0.3s ease;
+}
+
+.notfound button:hover {
+  background: #e60000;
+}

src/app/not-found.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import "./NotFound.css";
+
+export default function NotFound() {
+  const router = useRouter();
+
+  return (
+    <section className="notfound">
+      <h1>404</h1>
+      <h2>Página no encontrada</h2>
+      <p>
+        Lo sentimos, la página que buscas no existe o ha sido movida. Verifica
+        la URL o regresa a la página principal.
+      </p>
+      <button onClick={() => router.push("/front-Censo")}>
+        Regresar al inicio
+      </button>
+    </section>
+  );
+}