Initial commit

apps/frontend/src/features/server-error/server-error-page.tsx

@@ -0,0 +1,51 @@
+import { Link, type ErrorComponentProps } from '@tanstack/react-router'
+import { AlertTriangle, Home, RefreshCw, Route } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+
+export function ServerErrorPage({ error, reset }: ErrorComponentProps) {
+  return (
+    <main className="relative isolate mx-auto flex min-h-screen w-full max-w-5xl items-center justify-center overflow-hidden px-6 py-10">
+      <div className="pointer-events-none absolute inset-0 -z-10 bg-[radial-gradient(circle_at_15%_10%,rgba(248,113,113,0.14),transparent_42%),radial-gradient(circle_at_80%_20%,rgba(251,191,36,0.12),transparent_38%),radial-gradient(circle_at_60%_90%,rgba(59,130,246,0.10),transparent_42%)]" />
+
+      <section className="w-full max-w-2xl rounded-2xl border bg-card/80 p-8 text-card-foreground shadow-xl backdrop-blur">
+        <div className="mb-6 inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs text-muted-foreground">
+          <AlertTriangle className="size-3.5" />
+          Error interno
+        </div>
+
+        <p className="text-sm font-medium tracking-wide text-muted-foreground">500</p>
+        <h1 className="mt-2 text-4xl font-semibold tracking-tight">Algo salió mal</h1>
+        <p className="mt-4 text-sm leading-relaxed text-muted-foreground">
+          Ocurrió un error inesperado en la aplicación. Podés reintentar o volver a una ruta segura.
+        </p>
+
+        {error?.message && (
+          <pre className="mt-5 overflow-x-auto rounded-lg border bg-muted/50 p-3 text-xs text-muted-foreground">
+            {error.message}
+          </pre>
+        )}
+
+        <div className="mt-8 flex flex-wrap gap-3">
+          <Button type="button" onClick={() => reset()}>
+            <RefreshCw className="size-4" />
+            Reintentar
+          </Button>
+
+          <Button asChild variant="outline">
+            <Link to="/" preload="intent">
+              <Home className="size-4" />
+              Ir al inicio
+            </Link>
+          </Button>
+
+          <Button asChild variant="outline">
+            <Link to="/onboard" preload="intent">
+              <Route className="size-4" />
+              Ir a onboard
+            </Link>
+          </Button>
+        </div>
+      </section>
+    </main>
+  )
+}