Add documentation pages with interactive architecture diagram

- /docs route with sidebar navigation and index page
- Architecture section: system overview with React Flow diagram, data flow, database schema
- API reference, configuration guide, and self-hosting docs for Go DNS server
- Feature planning document for future development
- Added docs link to landing page nav

components/docs/sidebar.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import {
+  BookOpen,
+  Layers,
+  ArrowRightLeft,
+  Database,
+  FileCode,
+  Settings,
+  Server,
+} from "lucide-react";
+
+const sections = [
+  {
+    title: "Getting Started",
+    items: [{ title: "Overview", href: "/docs", icon: BookOpen }],
+  },
+  {
+    title: "Architecture",
+    items: [
+      { title: "System Overview", href: "/docs/architecture", icon: Layers },
+      {
+        title: "Data Flow",
+        href: "/docs/architecture/data-flow",
+        icon: ArrowRightLeft,
+      },
+      {
+        title: "Database Schema",
+        href: "/docs/architecture/database",
+        icon: Database,
+      },
+    ],
+  },
+  {
+    title: "API",
+    items: [
+      { title: "API Reference", href: "/docs/api", icon: FileCode },
+      { title: "Configuration", href: "/docs/configuration", icon: Settings },
+    ],
+  },
+  {
+    title: "Deployment",
+    items: [
+      { title: "Self-Hosting", href: "/docs/self-hosting", icon: Server },
+    ],
+  },
+];
+
+export function DocsSidebar() {
+  const pathname = usePathname();
+
+  return (
+    <nav className="space-y-6">
+      {sections.map((section) => (
+        <div key={section.title}>
+          <h4 className="mb-2 text-sm font-semibold tracking-tight text-muted-foreground">
+            {section.title}
+          </h4>
+          <ul className="space-y-1">
+            {section.items.map((item) => {
+              const isActive = pathname === item.href;
+              return (
+                <li key={item.href}>
+                  <Link
+                    href={item.href}
+                    className={`flex items-center gap-2 rounded-md px-3 py-2 text-sm transition-colors hover:bg-muted ${
+                      isActive
+                        ? "bg-muted font-medium text-foreground"
+                        : "text-muted-foreground"
+                    }`}
+                  >
+                    <item.icon className="size-4" />
+                    {item.title}
+                  </Link>
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+      ))}
+    </nav>
+  );
+}