import Link from "next/link";
import { Activity, Brain, Search, PackageOpen, Minimize2, Network, ArrowRight, Github, Zap } from "lucide-react";
const features = [
{ icon: Brain, title: "memory_upsert", description: "Store documents with automatic chunking, embedding generation, and full-text indexing." },
{ icon: Search, title: "memory_search", description: "Semantic similarity search over stored documents using vector embeddings." },
{ icon: PackageOpen, title: "context_pack", description: "Combine vector + text search, deduplicate, and synthesize context with LLM." },
{ icon: Minimize2, title: "context_compress", description: "Compress text into bullets, JSON, steps, or summaries to save tokens." },
{ icon: Network, title: "proxy_call", description: "Call tools on sub-MCP servers with built-in post-processing." },
];
export default function LandingPage() {
return (
<div className="min-h-screen bg-white dark:bg-zinc-950">
{/* Nav */}
<nav className="border-b border-zinc-200 dark:border-zinc-800">
<div className="mx-auto flex h-16 max-w-6xl items-center justify-between px-6">
<div className="flex items-center gap-2">
<Activity className="h-6 w-6 text-blue-600" />
<span className="font-bold text-lg">MCP Context Hub</span>
</div>
<div className="flex items-center gap-4">
<Link href="https://github.com/diego-nogueira/mcp-context-hub" className="text-sm text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300" target="_blank" rel="noopener">
GitHub
</Link>
<Link href="/login" className="rounded-md bg-zinc-900 px-4 py-2 text-sm font-medium text-white hover:bg-zinc-800 dark:bg-zinc-50 dark:text-zinc-900 dark:hover:bg-zinc-200">
Dashboard
</Link>
</div>
</div>
</nav>
{/* Hero */}
<section className="mx-auto max-w-6xl px-6 py-24 text-center">
<div className="mx-auto max-w-3xl">
<div className="mb-6 inline-flex items-center gap-2 rounded-full border border-zinc-200 bg-zinc-50 px-4 py-1.5 text-sm dark:border-zinc-800 dark:bg-zinc-900">
<Zap size={14} className="text-blue-600" />
Open-source MCP server for context optimization
</div>
<h1 className="text-5xl font-bold tracking-tight sm:text-6xl">
MCP Context Hub
</h1>
<p className="mt-6 text-xl text-zinc-600 dark:text-zinc-400">
A local MCP server providing RAG memory, semantic search, context compression,
semantic caching, and sub-MCP proxy — all powered by Ollama.
</p>
<div className="mt-10 flex items-center justify-center gap-4">
<Link href="/login" className="inline-flex items-center gap-2 rounded-md bg-blue-600 px-6 py-3 text-sm font-medium text-white hover:bg-blue-700">
Open Dashboard <ArrowRight size={16} />
</Link>
<Link href="https://github.com/diego-nogueira/mcp-context-hub" className="inline-flex items-center gap-2 rounded-md border border-zinc-200 px-6 py-3 text-sm font-medium hover:bg-zinc-50 dark:border-zinc-700 dark:hover:bg-zinc-900" target="_blank" rel="noopener">
<Github size={16} /> View on GitHub
</Link>
</div>
</div>
</section>
{/* Features */}
<section className="border-t border-zinc-200 bg-zinc-50 py-24 dark:border-zinc-800 dark:bg-zinc-900/50">
<div className="mx-auto max-w-6xl px-6">
<h2 className="text-center text-3xl font-bold">5 MCP Tools</h2>
<p className="mt-2 text-center text-zinc-500">Everything an AI agent needs for optimal context management</p>
<div className="mt-12 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
{features.map((f) => (
<div key={f.title} className="rounded-lg border border-zinc-200 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-950">
<f.icon className="mb-4 h-8 w-8 text-blue-600" />
<h3 className="font-mono font-semibold">{f.title}</h3>
<p className="mt-2 text-sm text-zinc-500">{f.description}</p>
</div>
))}
</div>
</div>
</section>
{/* How it works */}
<section className="py-24">
<div className="mx-auto max-w-6xl px-6">
<h2 className="text-center text-3xl font-bold">How It Works</h2>
<div className="mt-12 flex flex-col items-center gap-4 md:flex-row md:justify-center md:gap-8">
{[
{ label: "AI Agent", sub: "Claude, GPT, etc." },
{ label: "MCP Protocol", sub: "Standardized API" },
{ label: "Context Hub", sub: "RAG + Cache + Proxy" },
{ label: "Ollama", sub: "Local LLM + Embeddings" },
].map((step, i) => (
<div key={step.label} className="flex items-center gap-4 md:gap-8">
<div className="rounded-lg border border-zinc-200 bg-white p-4 text-center dark:border-zinc-800 dark:bg-zinc-950">
<p className="font-semibold">{step.label}</p>
<p className="text-xs text-zinc-400">{step.sub}</p>
</div>
{i < 3 && <ArrowRight className="hidden text-zinc-300 md:block" />}
</div>
))}
</div>
</div>
</section>
{/* Quick Start */}
<section className="border-t border-zinc-200 bg-zinc-50 py-24 dark:border-zinc-800 dark:bg-zinc-900/50">
<div className="mx-auto max-w-3xl px-6">
<h2 className="text-center text-3xl font-bold">Quick Start</h2>
<p className="mt-2 text-center text-zinc-500">Add to your Claude MCP configuration</p>
<pre className="mt-8 overflow-x-auto rounded-lg bg-zinc-900 p-6 text-sm text-zinc-300">
<code>{`{
"mcpServers": {
"context-hub": {
"url": "http://localhost:3100/mcp",
"headers": {
"Authorization": "Bearer YOUR_TOKEN",
"Accept": "application/json, text/event-stream"
}
}
}
}`}</code>
</pre>
</div>
</section>
{/* Footer */}
<footer className="border-t border-zinc-200 py-8 dark:border-zinc-800">
<div className="mx-auto max-w-6xl px-6 text-center text-sm text-zinc-400">
<p>MCP Context Hub — MIT License</p>
<div className="mt-2 flex items-center justify-center gap-4">
<Link href="https://github.com/diego-nogueira/mcp-context-hub" className="hover:text-zinc-600 dark:hover:text-zinc-300" target="_blank" rel="noopener">
GitHub
</Link>
<Link href="/dashboard" className="hover:text-zinc-600 dark:hover:text-zinc-300">
Dashboard
</Link>
</div>
</div>
</footer>
</div>
);
}
