website refactor

apps/website/app/404/page.tsx

@@ -1,22 +1,20 @@
-import Link from 'next/link';
+import { ErrorPageContainer } from '@/ui/ErrorPageContainer';
+import { ErrorActionButtons } from '@/ui/ErrorActionButtons';
+import { routes } from '@/lib/routing/RouteConfig';
+import { useRouter } from 'next/navigation';
 
 export default function Custom404Page() {
+  const router = useRouter();
+  
   return (
-    <main className="min-h-screen flex items-center justify-center bg-deep-graphite text-white px-6">
-      <div className="max-w-md text-center space-y-4">
-        <h1 className="text-3xl font-semibold">404</h1>
-        <p className="text-sm text-gray-400">
-          This page doesn't exist.
-        </p>
-        <div className="pt-2">
-          <Link
-            href="/"
-            className="inline-flex items-center justify-center rounded-md bg-primary-blue px-4 py-2 text-sm font-medium text-white hover:bg-primary-blue/80 transition-colors"
-          >
-            Drive home
-          </Link>
-        </div>
-      </div>
-    </main>
+    <ErrorPageContainer
+      errorCode="404"
+      description="This page doesn't exist."
+    >
+      <ErrorActionButtons 
+        onHomeClick={() => router.push(routes.public.home)}
+        homeLabel="Drive home"
+      />
+    </ErrorPageContainer>
   );
 }