404.astro

---
import BaseLayout from '../layouts/BaseLayout.astro';
---

<BaseLayout title="404 — Page Not Found | AgentCrew" description="The page you are looking for does not exist.">
  <div class="min-h-[calc(100vh-4rem)] flex items-center justify-center px-4 py-24">
    <div class="text-center max-w-md">
      <!-- 404 display -->
      <div class="mb-6">
        <span class="text-8xl font-extrabold" style="background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">404</span>
      </div>

      <h1 class="text-2xl font-bold text-white mb-3">Page not found</h1>
      <p class="text-slate-400 mb-10 leading-relaxed">
        The page you are looking for doesn't exist or may have been moved.
      </p>

      <div class="flex flex-col sm:flex-row items-center justify-center gap-3">
        <a
          href="/"
          class="inline-flex items-center gap-2 bg-blue-600 hover:bg-blue-500 text-white font-semibold px-6 py-3 rounded-lg transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-400"
        >
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
            <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
            <polyline points="9 22 9 12 15 12 15 22"/>
          </svg>
          Go home
        </a>
        <a
          href="/docs"
          class="inline-flex items-center gap-2 border border-slate-700 hover:border-slate-500 text-slate-300 hover:text-white font-semibold px-6 py-3 rounded-lg transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-400"
        >
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
            <polyline points="14 2 14 8 20 8"/>
          </svg>
          Browse docs
        </a>
      </div>
    </div>
  </div>
</BaseLayout>