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/page.tsx

@@ -0,0 +1,73 @@
+import Link from "next/link";
+import { Layers, FileCode, Settings, Server } from "lucide-react";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+} from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+
+const docSections = [
+  {
+    icon: Layers,
+    title: "Architecture",
+    description:
+      "Understand the system design, data flow between the Next.js frontend and Go DNS microservice, and database schema.",
+    href: "/docs/architecture",
+  },
+  {
+    icon: FileCode,
+    title: "API Reference",
+    description:
+      "Explore all available API endpoints for DNS lookups, WHOIS queries, and domain monitoring.",
+    href: "/docs/api",
+  },
+  {
+    icon: Settings,
+    title: "Configuration",
+    description:
+      "Learn how to configure the DNS server, set environment variables, and customize behavior.",
+    href: "/docs/configuration",
+  },
+  {
+    icon: Server,
+    title: "Self-Hosting",
+    description:
+      "Deploy VectorDNS on your own infrastructure with Docker, systemd, or cloud providers.",
+    href: "/docs/self-hosting",
+  },
+];
+
+export default function DocsPage() {
+  return (
+    <div className="space-y-8">
+      <div className="space-y-4">
+        <Badge variant="secondary" className="text-sm">
+          Documentation
+        </Badge>
+        <h1 className="text-3xl font-bold tracking-tight sm:text-4xl">
+          VectorDNS Documentation
+        </h1>
+        <p className="text-lg text-muted-foreground">
+          Everything you need to understand, configure, and deploy VectorDNS —
+          the open-source DNS lookup, WHOIS, and domain monitoring toolkit.
+        </p>
+      </div>
+
+      <div className="grid gap-4 sm:grid-cols-2">
+        {docSections.map((section) => (
+          <Link key={section.href} href={section.href} className="group">
+            <Card className="h-full transition-colors group-hover:border-primary/50">
+              <CardHeader>
+                <section.icon className="mb-2 size-8 text-primary" />
+                <CardTitle>{section.title}</CardTitle>
+                <CardDescription>{section.description}</CardDescription>
+              </CardHeader>
+            </Card>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}