feat(docs): enhance error boundary UI and add 404 page

1 files changed, 21 insertions, 6 deletions

diff --git a/packages/docs/app/root.tsx b/packages/docs/app/root.tsx
index 08b8aa8..a6c807e 100644
--- a/packages/docs/app/root.tsx
+++ b/packages/docs/app/root.tsx
@@ -1,5 +1,6 @@
 import {
   isRouteErrorResponse,
+  Link,
   Links,
   Meta,
   Outlet,
@@ -60,13 +61,27 @@ export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
   }
 
   return (
-    <main className="pt-16 p-4 w-full max-w-[1400px] mx-auto">
-      <h1>{message}</h1>
-      <p>{details}</p>
+    <main className="flex-1 flex flex-col items-center p-4 mt-40 text-center">
+      <h1 className="text-9xl font-black mb-4 bg-gradient-to-r from-blue-600 to-cyan-500 bg-clip-text text-transparent opacity-50">
+        {message}
+      </h1>
+      <p className="text-2xl font-semibold mb-2">{details}</p>
+      <p className="text-fd-muted-foreground mb-8 max-w-md">
+        Sorry, we couldn't find the page you're looking for. It might have been moved or deleted.
+      </p>
+      <Link
+        to="/"
+        className="bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-full px-8 py-3 shadow-lg shadow-blue-500/30 transition-all hover:scale-105 active:scale-95"
+      >
+        Return Home / 返回首页
+      </Link>
       {stack && (
-        <pre className="w-full p-4 overflow-x-auto">
-          <code>{stack}</code>
-        </pre>
+        <div className="mt-12 w-full max-w-2xl text-left">
+          <p className="text-xs font-mono text-fd-muted-foreground mb-2 uppercase tracking-widest">Error Stack</p>
+          <pre className="p-4 overflow-x-auto text-sm bg-fd-muted rounded-xl border border-fd-border font-mono whitespace-pre-wrap break-all shadow-inner">
+            <code>{stack}</code>
+          </pre>
+        </div>
       )}
     </main>
   );