feat(web): surface the template marketplace on the landing page

The marketplace is the distribution channel — fork a working server or
publish your own — but it was absent from the landing page. Adds a
section between Examples and Pricing with a second conversion path into
/templates.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Marco Sadjadi 2026-05-21 00:37:06 +02:00
parent 8a7ffe673d
commit e46a9a1cf8

View File

@ -30,6 +30,21 @@ const EXAMPLES: { title: string; desc: string }[] = [
{ title: 'Custom REST', desc: 'Wrap any HTTP API behind one prompt-defined tool surface.' }, { title: 'Custom REST', desc: 'Wrap any HTTP API behind one prompt-defined tool surface.' },
]; ];
const MARKETPLACE_POINTS: { t: string; d: string }[] = [
{
t: 'Fork and own',
d: 'Start from a server someone already shipped. Fork it, paste your own credentials, deploy — no prompt required.',
},
{
t: 'Secrets never travel',
d: "A template carries the spec and generated code, never the author's API keys. You add your own on fork.",
},
{
t: 'Ranked by real usage',
d: 'Templates rise on fork count and active deploys — not vanity stars. The useful ones surface themselves.',
},
];
const FAQ: { q: string; a: string }[] = [ const FAQ: { q: string; a: string }[] = [
{ {
q: 'What is MCP?', q: 'What is MCP?',
@ -212,6 +227,37 @@ export default function Landing() {
</div> </div>
</section> </section>
{/* Marketplace */}
<section className="border-b border-[--color-border] py-20">
<div className="mx-auto max-w-6xl px-6">
<div className="mb-10 flex flex-wrap items-end justify-between gap-4">
<div className="max-w-2xl">
<h2 className="text-[28px] font-semibold tracking-tight">
Start from a template, ship in seconds
</h2>
<p className="mt-2 text-[14px] text-[--color-fg-muted]">
The marketplace is a library of working MCP servers the community already built.
Fork one to skip the prompt or publish your own and let others build on it.
</p>
</div>
<Link
href="/templates"
className="inline-flex h-9 shrink-0 items-center justify-center rounded-md border border-[--color-border] bg-[--color-bg-elevated] px-4 text-[13px] text-[--color-fg-muted] transition-colors hover:text-[--color-fg]"
>
Browse the marketplace
</Link>
</div>
<div className="grid gap-3 md:grid-cols-3">
{MARKETPLACE_POINTS.map((p) => (
<div key={p.t} className="panel p-5">
<h3 className="text-[15px] font-semibold tracking-tight">{p.t}</h3>
<p className="mt-2 text-[13px] leading-relaxed text-[--color-fg-muted]">{p.d}</p>
</div>
))}
</div>
</div>
</section>
{/* Pricing */} {/* Pricing */}
<section id="pricing" className="border-b border-[--color-border] py-20"> <section id="pricing" className="border-b border-[--color-border] py-20">
<div className="mx-auto max-w-6xl px-6"> <div className="mx-auto max-w-6xl px-6">