Configuración inicial del proyecto: estructura de directorios y dependencias mínimas instaladas

app/error.tsx

@@ -0,0 +1,51 @@
+'use client'
+
+import { useEffect } from 'react';
+import Link from 'next/link';
+import { ROUTES } from '@/lib/constants/routes';
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    // Log error to monitoring service (Sentry, etc.)
+    console.error('Error:', error);
+  }, [error]);
+
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center p-4">
+      <div className="text-center space-y-4 max-w-md">
+        <h2 className="text-2xl font-bold text-turo-primary">
+          Algo salió mal
+        </h2>
+        <p className="text-muted-foreground">
+          {error.message || 'Ocurrió un error inesperado'}
+        </p>
+        {error.digest && (
+          <p className="text-sm text-muted-foreground">
+            Error ID: {error.digest}
+          </p>
+        )}
+        <div className="flex gap-4 justify-center">
+          <button
+            onClick={reset}
+            className="px-4 py-2 bg-turo-accent text-white rounded-lg hover:bg-turo-accent-hover transition-colors"
+          >
+            Intentar de nuevo
+          </button>
+          <Link
+            href={ROUTES.HOME}
+            className="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
+          >
+            Volver al inicio
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}
+