96e52666c5
=== NEW === - studio/ — MCPEngine Studio scaffold (Next.js monorepo, build plan) - docs/FACTORY-V2.md — Factory v2 architecture doc - docs/CALENDLY_MCP_BUILD_SUMMARY.md — Calendly MCP build report === UPDATED SERVERS === - fieldedge: Added jobs-tools, UI build script, main entry update - lightspeed: Updated main + server entry points - squarespace: Added collection-browser + page-manager apps - toast: Added main + server entry points === INFRA === - infra/command-center/state.json — Updated pipeline state - infra/command-center/FACTORY-V2.md — Factory v2 operator playbook
347 lines
15 KiB
TypeScript
347 lines
15 KiB
TypeScript
"use client";
|
|
|
|
import { Button, Card } from "@mcpengine/ui";
|
|
import Link from "next/link";
|
|
|
|
const templates = [
|
|
{ name: "Trello", desc: "Project management boards, cards, and automation", icon: "📋" },
|
|
{ name: "Zendesk", desc: "Support tickets, agents, and customer satisfaction", icon: "🎧" },
|
|
{ name: "Mailchimp", desc: "Email campaigns, audiences, and analytics", icon: "📧" },
|
|
{ name: "Stripe", desc: "Payments, subscriptions, and invoicing", icon: "💳" },
|
|
{ name: "HubSpot", desc: "CRM contacts, deals, and marketing automation", icon: "🔶" },
|
|
{ name: "Shopify", desc: "Products, orders, and storefront management", icon: "🛍️" },
|
|
];
|
|
|
|
const pricingTiers = [
|
|
{
|
|
name: "Free",
|
|
price: "$0",
|
|
period: "forever",
|
|
features: ["3 MCP servers", "Local development only", "Community templates", "CLI access"],
|
|
cta: "Get Started Free",
|
|
popular: false,
|
|
},
|
|
{
|
|
name: "Pro",
|
|
price: "$29",
|
|
period: "/mo",
|
|
features: ["20 MCP servers", "Cloud hosting included", "MCP Apps designer", "npm publish", "Priority support"],
|
|
cta: "Start Pro Trial",
|
|
popular: true,
|
|
},
|
|
{
|
|
name: "Team",
|
|
price: "$79",
|
|
period: "/mo + $15/seat",
|
|
features: ["Unlimited servers", "50K requests/day", "Team collaboration", "Shared templates", "Role-based access"],
|
|
cta: "Start Team Trial",
|
|
popular: false,
|
|
},
|
|
{
|
|
name: "Enterprise",
|
|
price: "$500+",
|
|
period: "/mo",
|
|
features: ["SSO / SAML", "Audit logs", "99.9% SLA", "On-premise deployment", "Dedicated support"],
|
|
cta: "Contact Sales",
|
|
popular: false,
|
|
},
|
|
];
|
|
|
|
export default function MarketingPage() {
|
|
return (
|
|
<main className="min-h-screen bg-gray-950 text-white">
|
|
{/* ─── HERO ─── */}
|
|
<section className="relative overflow-hidden pt-32 pb-24 px-6">
|
|
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-indigo-900/20 via-gray-950 to-gray-950" />
|
|
<div className="relative mx-auto max-w-5xl text-center">
|
|
<h1 className="text-5xl md:text-6xl font-extrabold leading-tight tracking-tight">
|
|
<span className="bg-gradient-to-r from-indigo-400 to-emerald-400 bg-clip-text text-transparent">
|
|
Build MCP Servers Visually.
|
|
</span>
|
|
<br />
|
|
<span className="bg-gradient-to-r from-indigo-400 to-emerald-400 bg-clip-text text-transparent">
|
|
Ship AI Apps Instantly.
|
|
</span>
|
|
</h1>
|
|
<p className="mt-6 text-xl text-gray-400 max-w-2xl mx-auto">
|
|
37 production templates. Drag-and-drop builder. Zero boilerplate.
|
|
From idea to deployed MCP server in 60 seconds.
|
|
</p>
|
|
<div className="mt-10 flex items-center justify-center gap-4 flex-wrap">
|
|
<Link href="/dashboard">
|
|
<Button size="lg" className="bg-indigo-600 hover:bg-indigo-500 text-white px-8 py-3 rounded-xl text-lg font-semibold">
|
|
Get Started Free
|
|
</Button>
|
|
</Link>
|
|
<Button
|
|
size="lg"
|
|
variant="ghost"
|
|
className="border border-gray-700 text-gray-300 hover:text-white hover:border-gray-500 px-8 py-3 rounded-xl text-lg font-semibold"
|
|
>
|
|
<svg className="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
Watch Demo
|
|
</Button>
|
|
</div>
|
|
{/* Product mockup placeholder */}
|
|
<div className="mt-16 mx-auto max-w-4xl rounded-2xl border border-gray-700 bg-gray-900 aspect-video flex items-center justify-center">
|
|
<div className="text-center text-gray-600">
|
|
<svg className="w-16 h-16 mx-auto mb-3 opacity-40" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
|
|
</svg>
|
|
<p className="text-sm">MCPEngine Studio — Visual Builder</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ─── VALUE PROPS ─── */}
|
|
<section className="py-24 px-6">
|
|
<div className="mx-auto max-w-5xl grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
{[
|
|
{
|
|
icon: (
|
|
<svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
|
|
</svg>
|
|
),
|
|
title: "Upload Any Spec",
|
|
desc: "Drop in an OpenAPI spec, Swagger file, or paste a URL. We parse it instantly and map every endpoint.",
|
|
},
|
|
{
|
|
icon: (
|
|
<svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm0 8a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zm10 0a1 1 0 011-1h4a1 1 0 011 1v6a1 1 0 01-1 1h-4a1 1 0 01-1-1v-6z" />
|
|
</svg>
|
|
),
|
|
title: "Customize Visually",
|
|
desc: "Drag-and-drop tools, edit schemas, configure auth — all in a visual builder. No YAML wrangling.",
|
|
},
|
|
{
|
|
icon: (
|
|
<svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.59 14.37a6 6 0 01-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 006.16-12.12A14.98 14.98 0 009.631 8.41m5.96 5.96a14.926 14.926 0 01-5.841 2.58m-.119-8.54a6 6 0 00-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 00-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 01-2.448-2.448 14.9 14.9 0 01.06-.312m-2.24 2.39a4.493 4.493 0 00-1.757 4.306 4.493 4.493 0 004.306-1.758M16.5 9a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" />
|
|
</svg>
|
|
),
|
|
title: "Deploy Anywhere",
|
|
desc: "One-click deploy to Cloudflare Workers, npm, or Docker. Production-ready with auth, rate limiting, and monitoring.",
|
|
},
|
|
].map((card) => (
|
|
<Card key={card.title} className="bg-gray-900 border-gray-800 p-8 rounded-2xl hover:border-gray-700 transition-colors">
|
|
<div className="w-12 h-12 rounded-full bg-indigo-600/20 flex items-center justify-center mb-5">
|
|
{card.icon}
|
|
</div>
|
|
<h3 className="text-xl font-bold text-white mb-2">{card.title}</h3>
|
|
<p className="text-gray-400 leading-relaxed">{card.desc}</p>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
{/* ─── SOCIAL PROOF ─── */}
|
|
<section className="py-16 px-6 border-y border-gray-800">
|
|
<div className="mx-auto max-w-4xl">
|
|
<p className="text-center text-sm font-medium text-gray-500 uppercase tracking-widest mb-8">
|
|
Built on
|
|
</p>
|
|
<div className="flex items-center justify-center gap-12 flex-wrap">
|
|
{["MCP Protocol", "Anthropic Claude", "Cloudflare Workers"].map((name) => (
|
|
<div key={name} className="flex items-center gap-2 text-gray-400 hover:text-gray-300 transition-colors">
|
|
<div className="w-8 h-8 rounded bg-gray-800 flex items-center justify-center text-xs font-bold">
|
|
{name.charAt(0)}
|
|
</div>
|
|
<span className="text-sm font-medium">{name}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ─── TEMPLATE SHOWCASE ─── */}
|
|
<section className="py-24 px-6">
|
|
<div className="mx-auto max-w-5xl">
|
|
<div className="text-center mb-12">
|
|
<h2 className="text-3xl md:text-4xl font-extrabold text-white">
|
|
37 Production Templates
|
|
</h2>
|
|
<p className="mt-3 text-gray-400 text-lg">
|
|
Pre-built MCP servers for the tools your team already uses.
|
|
</p>
|
|
</div>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{templates.map((t) => (
|
|
<Card
|
|
key={t.name}
|
|
className="bg-gray-900 border-gray-800 p-6 rounded-xl hover:border-indigo-500/50 transition-colors cursor-pointer group"
|
|
>
|
|
<div className="flex items-start gap-4">
|
|
<span className="text-3xl">{t.icon}</span>
|
|
<div>
|
|
<h3 className="text-lg font-bold text-white group-hover:text-indigo-400 transition-colors">
|
|
{t.name}
|
|
</h3>
|
|
<p className="text-sm text-gray-400 mt-1">{t.desc}</p>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
<div className="text-center mt-10">
|
|
<Link
|
|
href="/templates"
|
|
className="text-indigo-400 hover:text-indigo-300 font-medium text-lg transition-colors"
|
|
>
|
|
Browse All Templates →
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ─── PRICING ─── */}
|
|
<section className="py-24 px-6 bg-gray-900/50">
|
|
<div className="mx-auto max-w-6xl">
|
|
<div className="text-center mb-14">
|
|
<h2 className="text-3xl md:text-4xl font-extrabold text-white">
|
|
Simple, Transparent Pricing
|
|
</h2>
|
|
<p className="mt-3 text-gray-400 text-lg">
|
|
Start free. Scale when you're ready.
|
|
</p>
|
|
</div>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
{pricingTiers.map((tier) => (
|
|
<Card
|
|
key={tier.name}
|
|
className={`relative bg-gray-900 border rounded-2xl p-8 flex flex-col ${
|
|
tier.popular
|
|
? "border-indigo-500 ring-1 ring-indigo-500/50"
|
|
: "border-gray-800"
|
|
}`}
|
|
>
|
|
{tier.popular && (
|
|
<span className="absolute -top-3 left-1/2 -translate-x-1/2 bg-indigo-600 text-white text-xs font-bold px-4 py-1 rounded-full">
|
|
Most Popular
|
|
</span>
|
|
)}
|
|
<h3 className="text-xl font-bold text-white">{tier.name}</h3>
|
|
<div className="mt-4 mb-6">
|
|
<span className="text-4xl font-extrabold text-white">{tier.price}</span>
|
|
<span className="text-gray-400 text-sm ml-1">{tier.period}</span>
|
|
</div>
|
|
<ul className="space-y-3 flex-1 mb-8">
|
|
{tier.features.map((f) => (
|
|
<li key={f} className="flex items-start gap-2 text-sm text-gray-300">
|
|
<svg className="w-5 h-5 text-emerald-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
{f}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<Button
|
|
className={`w-full rounded-xl py-2.5 font-semibold ${
|
|
tier.popular
|
|
? "bg-indigo-600 hover:bg-indigo-500 text-white"
|
|
: "bg-gray-800 hover:bg-gray-700 text-gray-300"
|
|
}`}
|
|
>
|
|
{tier.cta}
|
|
</Button>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ─── FINAL CTA ─── */}
|
|
<section className="py-24 px-6">
|
|
<div className="mx-auto max-w-2xl text-center">
|
|
<h2 className="text-3xl md:text-4xl font-extrabold text-white">
|
|
Ready to build?
|
|
</h2>
|
|
<p className="mt-4 text-gray-400 text-lg">
|
|
Join thousands of developers building MCP servers with MCPEngine.
|
|
</p>
|
|
<div className="mt-8 flex items-center gap-3 max-w-md mx-auto">
|
|
<input
|
|
type="email"
|
|
placeholder="you@company.com"
|
|
className="flex-1 bg-gray-900 border border-gray-700 rounded-xl px-5 py-3 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
|
|
/>
|
|
<Button className="bg-indigo-600 hover:bg-indigo-500 text-white px-6 py-3 rounded-xl font-semibold whitespace-nowrap">
|
|
Get Started
|
|
</Button>
|
|
</div>
|
|
<p className="mt-4 text-sm text-gray-500">
|
|
Free forever. No credit card required.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ─── FOOTER ─── */}
|
|
<footer className="border-t border-gray-800 py-16 px-6">
|
|
<div className="mx-auto max-w-5xl grid grid-cols-2 md:grid-cols-4 gap-8">
|
|
<div>
|
|
<h4 className="text-sm font-semibold text-white uppercase tracking-wider mb-4">Product</h4>
|
|
<ul className="space-y-2">
|
|
{["Features", "Templates", "Pricing", "Changelog"].map((l) => (
|
|
<li key={l}>
|
|
<Link href="#" className="text-sm text-gray-400 hover:text-gray-300 transition-colors">
|
|
{l}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4 className="text-sm font-semibold text-white uppercase tracking-wider mb-4">Resources</h4>
|
|
<ul className="space-y-2">
|
|
{["Documentation", "API Reference", "Blog", "Community"].map((l) => (
|
|
<li key={l}>
|
|
<Link href="#" className="text-sm text-gray-400 hover:text-gray-300 transition-colors">
|
|
{l}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4 className="text-sm font-semibold text-white uppercase tracking-wider mb-4">Company</h4>
|
|
<ul className="space-y-2">
|
|
{["About", "Careers", "Contact", "Partners"].map((l) => (
|
|
<li key={l}>
|
|
<Link href="#" className="text-sm text-gray-400 hover:text-gray-300 transition-colors">
|
|
{l}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4 className="text-sm font-semibold text-white uppercase tracking-wider mb-4">Legal</h4>
|
|
<ul className="space-y-2">
|
|
{["Privacy", "Terms", "Security", "GDPR"].map((l) => (
|
|
<li key={l}>
|
|
<Link href="#" className="text-sm text-gray-400 hover:text-gray-300 transition-colors">
|
|
{l}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div className="mt-12 pt-8 border-t border-gray-800 text-center">
|
|
<p className="text-sm text-gray-500">
|
|
© {new Date().getFullYear()} MCPEngine. All rights reserved.
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
</main>
|
|
);
|
|
}
|