Roadmap Added

app/roadmap/page.tsx

@@ -0,0 +1,114 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { Globe, Map, Info } from "lucide-react";
+import { ThemeToggle } from "@/components/theme-toggle";
+import { RoadmapFlowchart } from "@/components/roadmap-flowchart";
+import { Badge } from "@/components/ui/badge";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+} from "@/components/ui/card";
+
+export const metadata: Metadata = {
+  title: "Roadmap",
+  description: "Visual roadmap and development phases for VectorDNS.",
+};
+
+export default function RoadmapPage() {
+  return (
+    <div className="flex min-h-screen flex-col">
+      {/* Header */}
+      <header className="border-b bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/60 sticky top-0 z-50">
+        <div className="container mx-auto flex h-14 items-center justify-between px-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>
+          <div className="flex items-center gap-4">
+            <Link
+              href="/docs"
+              className="text-sm text-muted-foreground transition-colors hover:text-foreground"
+            >
+              Docs
+            </Link>
+            <Link
+              href="/roadmap"
+              className="text-sm font-medium text-foreground transition-colors"
+            >
+              Roadmap
+            </Link>
+            <ThemeToggle />
+          </div>
+        </div>
+      </header>
+
+      <main className="flex-1">
+        <div className="container mx-auto px-4 py-12">
+          {/* Page Header */}
+          <div className="mb-12 flex flex-col items-center text-center gap-4">
+            <Badge
+              variant="outline"
+              className="px-3 py-1 gap-1.5 border-primary/20 bg-primary/5 text-primary"
+            >
+              <Map className="size-3.5" />
+              Project Roadmap
+            </Badge>
+            <h1 className="text-4xl font-extrabold tracking-tight lg:text-5xl">
+              Building the Future of{" "}
+              <span className="text-primary">DNS Monitoring</span>
+            </h1>
+            <p className="max-w-2xl text-lg text-muted-foreground">
+              Follow our journey from foundation to a full-featured domain
+              toolkit. Drag, zoom, and explore the development phases below.
+            </p>
+          </div>
+
+          {/* Interactive Flowchart */}
+          <div className="mb-12">
+            <RoadmapFlowchart />
+          </div>
+
+          {/* Additional Context Cards */}
+          <div className="grid gap-6 md:grid-cols-2">
+            <Card className="border-primary/10 bg-primary/5">
+              <CardHeader>
+                <div className="flex items-center gap-2 text-primary mb-1">
+                  <Info className="size-5" />
+                  <CardTitle className="text-lg">Project Philosophy</CardTitle>
+                </div>
+                <CardDescription>
+                  VectorDNS is built on three core pillars: speed, accuracy, and
+                  transparency. Every phase of our roadmap is designed to ensure
+                  the highest quality data while maintaining a modern,
+                  user-friendly experience.
+                </CardDescription>
+              </CardHeader>
+            </Card>
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-lg">Contributing</CardTitle>
+                <CardDescription>
+                  We are currently in the early development stages. If
+                  you&apos;re interested in contributing to the Go DNS API or
+                  the Next.js frontend, please check out our GitHub repository
+                  and open an issue or PR.
+                </CardDescription>
+              </CardHeader>
+            </Card>
+          </div>
+        </div>
+      </main>
+
+      {/* Footer */}
+      <footer className="border-t py-6">
+        <div className="container mx-auto px-4 text-center text-sm text-muted-foreground">
+          <p>&copy; {new Date().getFullYear()} VectorDNS</p>
+        </div>
+      </footer>
+    </div>
+  );
+}