feat(404): redesign not-found page with agent onboarding card

app/not-found.tsx

@@ -1,24 +1,46 @@
-'use client';
+// ABOUTME: Standalone 404 page for the docs site with on-brand navigation cards.
+// ABOUTME: Self-owns the dark theme since the runtime not-found shell drops the root layout.
+import type { Metadata } from 'next';
+import { Card, Cards } from '@/components/card';
+import { LlmsHintCard } from '@/components/home/llms-hint-card';
 
-import Link from 'next/link';
-
-// Force dynamic rendering to prevent SSR issues
-export const dynamic = 'force-dynamic';
+export const metadata: Metadata = {
+  title: 'Page not found',
+  other: {
+    'ai-context':
+      'Steel documentation 404. For an LLM-optimized index of all Steel docs (Sessions API, CAPTCHAs, proxies, SDKs), fetch https://docs.steel.dev/llms.txt',
+  },
+};
 
 export default function NotFound() {
   return (
-    <div className="min-h-screen flex items-center justify-center">
-      <div className="text-center px-4">
-        <h1 className="text-3xl font-regular mb-4">Page not found</h1>
-        <p className="text-muted-foreground max-w-md mb-6">
-          The page you are looking for doesn&apos;t exist or has been moved.
-        </p>
-        <Link
-          href="/overview"
-          className="inline-flex h-9 items-center rounded-md bg-yellow-300 px-4 text-sm font-medium text-neutral-900 transition-colors hover:bg-yellow-400"
-        >
-          Back to homepage
-        </Link>
+    <div className="dark flex min-h-screen items-center justify-center bg-background px-6 py-16 text-foreground">
+      <div className="w-full max-w-2xl space-y-10">
+        <div className="space-y-3 text-center">
+          <p className="font-mono text-sm uppercase tracking-widest text-muted-foreground">
+            Error 404
+          </p>
+          <h1 className="text-3xl font-regular">Page not found</h1>
+          <p className="mx-auto max-w-md text-muted-foreground">
+            The page you are looking for doesn&apos;t exist or has been moved. Here&apos;s where to
+            head next.
+          </p>
+        </div>
+        <Cards>
+          <Card
+            href="/overview/sessions-api/quickstart"
+            title="Quickstart"
+            description="Spin up your first Steel session in a few minutes."
+            tags={['Guide', 'Quickstart']}
+          />
+          <Card
+            href="/overview/skills"
+            title="Steel Skills"
+            description="Install Steel Skills so coding agents can use Steel cloud browsers."
+            tags={['Agents', 'Skills']}
+          />
+        </Cards>
+        <LlmsHintCard />
       </div>
     </div>
   );

components/home/llms-hint-card.tsx

@@ -0,0 +1,55 @@
+// ABOUTME: Card that points AI agents to the llms-full.txt index with a copyable URL.
+// ABOUTME: Mirrors CLIInstallCard styling; used on the 404 page to onboard agents.
+'use client';
+
+import { Check, Copy, Sparkles } from 'lucide-react';
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+const LLMS_URL = 'https://docs.steel.dev/llms-full.txt';
+
+export function LlmsHintCard() {
+  const [copied, setCopied] = React.useState(false);
+
+  return (
+    <div className="relative block rounded-lg bg-border p-[1.5px]">
+      <div className="h-full space-y-4 rounded-[calc(0.5rem-1.5px)] bg-card p-5">
+        <div className="space-y-1">
+          <h3 className="flex items-center gap-2 text-lg">
+            <Sparkles className="h-4 w-4 text-muted-foreground" aria-hidden="true" />
+            Building with an AI agent?
+          </h3>
+          <p className="text-muted-foreground text-sm text-stone-500">
+            Point your coding agent to docs.steel.dev/llms-full.txt for a fast start with Steel.
+          </p>
+        </div>
+        <button
+          type="button"
+          aria-label={`Copy URL: ${LLMS_URL}`}
+          className={cn(
+            'flex w-full cursor-pointer items-center gap-2 rounded-lg border px-3 py-[7px]',
+            'font-mono text-[12.5px] text-foreground transition-colors',
+            copied
+              ? 'border-primary/30 bg-primary/5'
+              : 'border-border bg-background hover:border-primary/30 hover:bg-accent/30',
+          )}
+          onClick={() => {
+            navigator.clipboard.writeText(LLMS_URL);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 1200);
+          }}
+        >
+          <span className="select-none text-muted-foreground/50">$</span>
+          <span className="min-w-0 flex-1 overflow-x-auto text-left whitespace-nowrap [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
+            curl {LLMS_URL} and save it for future reference
+          </span>
+          {copied ? (
+            <Check className="h-3.5 w-3.5 shrink-0 text-muted-foreground/70" aria-hidden="true" />
+          ) : (
+            <Copy className="h-3.5 w-3.5 shrink-0 text-muted-foreground/50" aria-hidden="true" />
+          )}
+        </button>
+      </div>
+    </div>
+  );
+}