https://www.allhousesbcn.com/app_support/error_pages/404.html

1<!DOCTYPE html>
2<html lang="es">
3<head>
4	<meta charset="UTF-8">
5	<meta name="viewport" content="width=device-width, initial-scale=1.0">
6	<title>Error 404 - Página no encontrada</title>
7	

7<script src="https://cdn.tailwindcss.com"></script>

7
8	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
9	<style>
10		body {
11			font-family: 'Inter', sans-serif;
12		}
13
14		.fade-in {
15			animation: fadeIn 0.8s ease-out forwards;
16			opacity: 0;
17			transform: translateY(20px);
18		}
19
20		@keyframes fadeIn {
21			to {
22				opacity: 1;
23				transform: translateY(0);
24			}
25		}
26	</style>
27</head>
28<body class="bg-slate-50 text-slate-600 min-h-screen flex flex-col">
29
30	<!-- Header Simplificado (Solo visual, sin marca) -->
31	<header class="w-full py-6 px-8 flex justify-center md:justify-start bg-white border-b border-slate-200">
32		<div class="flex items-center gap-2">
33			<!-- Icono de Alerta Genérico -->
34			<div class="w-8 h-8 bg-indigo-600 rounded-lg flex items-center justify-center text-white">
35				<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
36			</div>
37			<!-- Texto eliminado para ser genérico -->
38		</div>
39	</header>
40
41	<!-- Contenido Principal -->
42	<main class="flex-grow flex items-center justify-center p-6">
43		<div class="max-w-2xl w-full text-center fade-in">
44
45			<!-- Ilustración SVG -->
46			<div class="mb-8 flex justify-center">
47				<svg class="w-32 h-32 text-indigo-100" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
48					<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
49				</svg>
50			</div>
51
52			<!-- Código de Error Grande -->
53			<h1 class="text-6xl font-bold text-slate-900 mb-2">404</h1>
54
55			<!-- Mensaje Solicitado -->
56			<h2 class="text-2xl font-semibold text-slate-800 mb-4">Error</h2>
57			<p class="text-lg text-slate-500 mb-8 max-w-md mx-auto">
58				La página a la que intenta acceder no existe.
59			</p>
60
61			<!-- Texto Adicional Profesional -->
62			<p class="text-sm text-slate-400 mb-10 max-w-lg mx-auto">
63				Es posible que el enlace que siguió esté roto, que la página haya sido eliminada o que la dirección (URL) escrita sea incorrecta.
64			</p>
65
66			<!-- Botones de Acción (Simplificado) -->
67			<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
68				<a href="/" class="px-6 py-3 bg-indigo-600 text-white font-medium rounded-lg hover:bg-indigo-700 transition-colors shadow-lg shadow-indigo-200 w-full sm:w-auto">
69					Volver al Inicio
70				</a>
71			</div>
72
73			<!-- Botón de "Regresar" (Historial) -->
74			<div class="mt-8">
75				<button onclick="history.back()" class="text-indigo-600 hover:text-indigo-800 text-sm font-medium flex items-center justify-center gap-1 mx-auto transition-colors">
76					<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
77					Regresar a la página anterior
78				</button>
79			</div>
80		</div>
81	</main>
82
83	<!-- Footer Minimalista -->
84	<footer class="w-full py-6 text-center text-slate-400 text-xs border-t border-slate-200 bg-white">
85		<p>Todos los derechos reservados.</p>
86	</footer>
87
88</body>
89</html>