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

app/docs/layout.tsx

@@ -0,0 +1,72 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { Globe, BookOpen, Menu } from "lucide-react";
+import { ThemeToggle } from "@/components/theme-toggle";
+import { DocsSidebar } from "@/components/docs/sidebar";
+
+export const metadata: Metadata = {
+  title: {
+    default: "Documentation",
+    template: "%s | VectorDNS Docs",
+  },
+};
+
+export default function DocsLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex min-h-screen flex-col">
+      {/* Header */}
+      <header className="sticky top-0 z-50 border-b bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/60">
+        <div className="container mx-auto flex h-14 items-center justify-between px-4">
+          <div className="flex items-center gap-4">
+            <Link href="/" className="flex items-center gap-2">
+              <Globe className="size-5 text-primary" />
+              <span className="text-lg font-semibold tracking-tight">
+                VectorDNS
+              </span>
+            </Link>
+            <span className="text-muted-foreground">/</span>
+            <Link
+              href="/docs"
+              className="flex items-center gap-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground"
+            >
+              <BookOpen className="size-4" />
+              Docs
+            </Link>
+          </div>
+          <ThemeToggle />
+        </div>
+      </header>
+
+      <div className="container mx-auto flex flex-1 px-4">
+        {/* Mobile sidebar toggle */}
+        <input type="checkbox" id="sidebar-toggle" className="peer hidden" />
+        <label
+          htmlFor="sidebar-toggle"
+          className="fixed bottom-4 right-4 z-40 flex size-12 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg md:hidden"
+        >
+          <Menu className="size-5" />
+        </label>
+
+        {/* Sidebar */}
+        <aside className="fixed inset-y-0 left-0 z-30 w-64 -translate-x-full border-r bg-background p-6 pt-20 transition-transform peer-checked:translate-x-0 md:sticky md:top-14 md:z-auto md:block md:h-[calc(100vh-3.5rem)] md:w-56 md:translate-x-0 md:border-r-0 md:p-0 md:py-8 md:pr-6 lg:w-64">
+          <DocsSidebar />
+        </aside>
+
+        {/* Overlay for mobile sidebar */}
+        <label
+          htmlFor="sidebar-toggle"
+          className="fixed inset-0 z-20 hidden bg-black/50 peer-checked:block md:hidden!"
+        />
+
+        {/* Main content */}
+        <main className="min-w-0 flex-1 py-8 md:pl-6 md:border-l">
+          <div className="mx-auto max-w-3xl">{children}</div>
+        </main>
+      </div>
+    </div>
+  );
+}