feat(web): real 3-step wizard, settings, audit, docs, marketing pages
Sprint 3.5: close every dead link and replace the single-step wizard with the spec-mandated 3-step flow. Wizard: - Step 1 collects prompt + name + slug, calls /v1/servers/preview. - Step 2 renders parsed tools (name, description, input schema as copyable JSON) + a credential field per requiredSecret Claude actually identified. Self-contained servers see 'No credentials needed' instead of generic Notion placeholders. - Step 3 streams the live build over WebSocket and shows install snippets. New dashboard pages: - /settings — org, plan/usage, members table, API keys + billing stubs (Sprint 4), encryption status. Reads /v1/me/org. - /audit — filterable table over /v1/audit with action pills, resource refs, IP, metadata JSON. Docs site (/docs + 6 sub-pages): - Sticky 240px sidebar, max-w-prose article column, shared DocsTitle/H2/Code primitives. - Quickstart, MCP concepts, OAuth 2.1 flow (full walkthrough with curl), Authoring tools, Self-hosting, API reference, FAQ. Marketing pages: - /changelog with tagged release timeline. - /security with 8 pillars + disclosure. - /privacy with GDPR-aware sections. - /terms (10 clauses). - /pricing full page (nav now points here instead of /#pricing anchor). - /status with live 10s probes against /api/health and /login. Footer 'system status' badge now links to /status. All 20 routes 200 OK in smoke crawl. Typecheck clean across packages.
This commit is contained in:
Marco Sadjadi
149
apps/web/app/(marketing)/pricing/page.tsx
Normal file
149
apps/web/app/(marketing)/pricing/page.tsx
Normal file
@@ -0,0 +1,149 @@
|
||||
import Link from 'next/link';
|
||||
|
||||
export const metadata = { title: 'Pricing — BuildMyMCPServer' };
|
||||
|
||||
const TIERS = [
|
||||
{
|
||||
name: 'Hobby',
|
||||
price: '€0',
|
||||
tag: 'Forever free',
|
||||
description: 'For trying things out and shipping single-user tools.',
|
||||
features: [
|
||||
'1 MCP server',
|
||||
'100,000 tool calls / month',
|
||||
'BuildMyMCP subdomain',
|
||||
'Community support',
|
||||
],
|
||||
cta: 'Start free',
|
||||
href: '/login',
|
||||
},
|
||||
{
|
||||
name: 'Pro',
|
||||
price: '€49',
|
||||
tag: '/ month',
|
||||
description: 'For solo founders and small teams shipping production tools.',
|
||||
features: [
|
||||
'5 MCP servers',
|
||||
'1M tool calls / month',
|
||||
'Custom domain',
|
||||
'Priority build queue',
|
||||
'Email support, 1 business-day SLA',
|
||||
],
|
||||
cta: 'Start Pro',
|
||||
href: '/login',
|
||||
highlight: true,
|
||||
},
|
||||
{
|
||||
name: 'Team',
|
||||
price: '€149',
|
||||
tag: '/ month',
|
||||
description: 'For teams with RBAC, audit, and 99.9% SLA needs.',
|
||||
features: [
|
||||
'25 MCP servers',
|
||||
'10M tool calls / month',
|
||||
'RBAC + extended audit log',
|
||||
'99.9% uptime SLA',
|
||||
'Shared Slack channel support',
|
||||
],
|
||||
cta: 'Start Team',
|
||||
href: '/login',
|
||||
},
|
||||
{
|
||||
name: 'Enterprise',
|
||||
price: '€499+',
|
||||
tag: '/ month',
|
||||
description: 'For organizations bringing their own cloud, SSO and dedicated infra.',
|
||||
features: [
|
||||
'Unlimited servers',
|
||||
'BYOC (AWS, GCP, Azure, Hetzner)',
|
||||
'SSO / SAML',
|
||||
'Dedicated cluster',
|
||||
'Customer success manager',
|
||||
],
|
||||
cta: 'Contact sales',
|
||||
href: 'mailto:sales@buildmymcpserver.com',
|
||||
},
|
||||
];
|
||||
|
||||
const FAQ = [
|
||||
{
|
||||
q: 'What counts as a tool call?',
|
||||
a: 'Every successful invocation of a tool exposed by your MCP server. Failed calls do not count.',
|
||||
},
|
||||
{
|
||||
q: 'What happens if I exceed my quota?',
|
||||
a: 'Hobby: 429 with a hint to upgrade. Pro/Team: overage at €0.02 per 1000 calls, billed the following month. Soft caps configurable.',
|
||||
},
|
||||
{
|
||||
q: 'Annual billing?',
|
||||
a: 'Yes — save 20% on Pro and Team paying annually. Enterprise is annual by default.',
|
||||
},
|
||||
{
|
||||
q: 'Plan changes?',
|
||||
a: 'Upgrade any time, pro-rated. Downgrade at end of billing period.',
|
||||
},
|
||||
];
|
||||
|
||||
export default function Pricing() {
|
||||
return (
|
||||
<div className="mx-auto max-w-6xl px-6 py-16">
|
||||
<header className="mb-12 max-w-2xl">
|
||||
<div className="text-[11px] uppercase tracking-[0.16em] text-[--color-fg-subtle]">
|
||||
Pricing
|
||||
</div>
|
||||
<h1 className="mt-2 text-[36px] font-semibold leading-tight tracking-tight">
|
||||
Pay for tool calls, not boilerplate.
|
||||
</h1>
|
||||
<p className="mt-4 text-[15px] leading-relaxed text-[--color-fg-muted]">
|
||||
Build infinite servers, pay for the traffic they actually serve. Cancel any time, export
|
||||
everything, no lock-in.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<div className="grid gap-3 md:grid-cols-4">
|
||||
{TIERS.map((t) => (
|
||||
<div
|
||||
key={t.name}
|
||||
className={`panel flex h-full flex-col p-5 ${t.highlight ? 'border-[--color-accent]/40' : ''}`}
|
||||
>
|
||||
<div className="text-[12px] uppercase tracking-wider text-[--color-fg-subtle]">
|
||||
{t.name}
|
||||
</div>
|
||||
<div className="mt-2 flex items-baseline gap-1">
|
||||
<span className="text-[28px] font-semibold tracking-tight">{t.price}</span>
|
||||
<span className="text-[12px] text-[--color-fg-subtle]">{t.tag}</span>
|
||||
</div>
|
||||
<p className="mt-2 text-[12px] leading-relaxed text-[--color-fg-muted]">{t.description}</p>
|
||||
<ul className="mt-4 space-y-1.5 text-[12.5px] text-[--color-fg-muted]">
|
||||
{t.features.map((f) => (
|
||||
<li key={f}>— {f}</li>
|
||||
))}
|
||||
</ul>
|
||||
<Link
|
||||
href={t.href}
|
||||
className={`mt-6 inline-flex h-8 items-center justify-center rounded-md px-3 text-[12.5px] font-medium transition-colors duration-200 ${
|
||||
t.highlight
|
||||
? 'bg-[--color-accent] text-white hover:bg-[#5557e8]'
|
||||
: 'border border-[--color-border] bg-[--color-bg-elevated] text-[--color-fg] hover:bg-[--color-bg-subtle]'
|
||||
}`}
|
||||
>
|
||||
{t.cta}
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<section className="mt-20">
|
||||
<h2 className="text-[22px] font-semibold tracking-tight">Pricing FAQ</h2>
|
||||
<div className="mt-6 grid gap-x-12 gap-y-6 md:grid-cols-2">
|
||||
{FAQ.map((f) => (
|
||||
<div key={f.q}>
|
||||
<h3 className="text-[14px] font-semibold tracking-tight">{f.q}</h3>
|
||||
<p className="mt-1.5 text-[13px] leading-relaxed text-[--color-fg-muted]">{f.a}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user