-
-
-
System status
-
-
-
- Docs
-
-
- Contact
-
-
- Security
-
-
- Privacy
-
-
- AGB
-
-
- Impressum
-
-
- Terms
-
+
);
}
+
+function FooterColumn({
+ title,
+ links,
+}: {
+ title: string;
+ links: { href: string; label: string }[];
+}) {
+ return (
+
+
+ {title}
+
+
+ {links.map((l) => (
+ -
+
+ {l.label}
+
+
+ ))}
+
+
+ );
+}
diff --git a/apps/web/app/(marketing)/page.tsx b/apps/web/app/(marketing)/page.tsx
index 60e411e..183037a 100644
--- a/apps/web/app/(marketing)/page.tsx
+++ b/apps/web/app/(marketing)/page.tsx
@@ -12,31 +12,11 @@ import { JsonLd } from '@/components/json-ld';
import { ParticleHero } from '@/components/particle-hero';
import { PulseLink } from '@/components/pulse';
import { ScrollCue } from '@/components/scroll-cue';
-import { StaticCodeBlock } from '@/components/static-code-block';
+import { TIERS } from '@/lib/pricing';
import { FAQ, faqJsonLd } from '@/lib/seo';
-import { ChevronDown } from 'lucide-react';
-import type { ComponentType } from 'react';
+import { Activity, ChevronDown, Container, ShieldCheck } from 'lucide-react';
import Link from 'next/link';
-
-const PROMPT_EXAMPLE = `Create an MCP server that searches our Notion workspace.
-Tools: search_pages, get_page_content.
-Auth: NOTION_API_KEY.`;
-
-const OUTPUT_EXAMPLE = `> Generating spec... OK (2 tools)
-> Static checks OK
-> Building image bmm-mcp-notion OK 17.2s
-> Deploying container OK
-> Live at https://notion-x9.mcp.buildmymcpserver.com
-> First request: 401 → token → 200 OK`;
-
-const INSTALL_SNIPPET = `{
- "mcpServers": {
- "notion": {
- "url": "https://notion-x9.mcp.buildmymcpserver.com/mcp",
- "auth": "oauth2"
- }
- }
-}`;
+import type { ComponentType } from 'react';
interface ExampleEntry {
title: string;
@@ -50,41 +30,58 @@ interface ExampleEntry {
}
const EXAMPLES: ExampleEntry[] = [
- { title: 'PostgreSQL', desc: 'Read-only access to your tables with schema introspection.', Icon: PostgresIcon, bg: '#336791', fg: '#ffffff' },
- { title: 'Salesforce', desc: 'Query opportunities, accounts and leads from Claude.', Icon: SalesforceCloudIcon, bg: '#00a1e0', fg: '#ffffff' },
- { title: 'Notion', desc: 'Search pages, read content, append blocks.', Icon: NotionIcon, bg: '#ffffff', fg: '#0a0a0b' },
- { title: 'GitHub', desc: 'List issues, search code, post comments. Scoped to one repo.', Icon: GitHubIcon, bg: '#181717', fg: '#ffffff' },
- { title: 'Stripe', desc: 'Look up charges, customers, refunds (read-only by default).', Icon: StripeIcon, bg: '#635bff', fg: '#ffffff' },
- { title: 'Custom REST',desc: 'Wrap any HTTP API behind one prompt-defined tool surface.', Icon: RestIcon, bg: '#6366f1', fg: '#ffffff' },
+ {
+ title: 'PostgreSQL',
+ desc: 'Read-only access to your tables with schema introspection.',
+ Icon: PostgresIcon,
+ bg: '#336791',
+ fg: '#ffffff',
+ },
+ {
+ title: 'Salesforce',
+ desc: 'Query opportunities, accounts and leads from Claude.',
+ Icon: SalesforceCloudIcon,
+ bg: '#00a1e0',
+ fg: '#ffffff',
+ },
+ {
+ title: 'Notion',
+ desc: 'Search pages, read content, append blocks.',
+ Icon: NotionIcon,
+ bg: '#ffffff',
+ fg: '#0a0a0b',
+ },
+ {
+ title: 'GitHub',
+ desc: 'List issues, search code, post comments. Scoped to one repo.',
+ Icon: GitHubIcon,
+ bg: '#181717',
+ fg: '#ffffff',
+ },
+ {
+ title: 'Stripe',
+ desc: 'Look up charges, customers, refunds (read-only by default).',
+ Icon: StripeIcon,
+ bg: '#635bff',
+ fg: '#ffffff',
+ },
+ {
+ title: 'Custom REST',
+ desc: 'Wrap any HTTP API behind one prompt-defined tool surface.',
+ Icon: RestIcon,
+ bg: '#6366f1',
+ fg: '#ffffff',
+ },
];
-interface ClientEntry {
- name: string;
- /** Single-character mark for inline visual identity. */
- mark: string;
-}
-
-const CLIENTS: ClientEntry[] = [
- { name: 'Claude Desktop', mark: 'C' },
- { name: 'Cursor', mark: '⌘' },
- { name: 'ChatGPT', mark: '✦' },
- { name: 'VS Code Copilot', mark: '<>' },
- { name: 'Continue.dev', mark: '→' },
-];
-
-interface MockTemplate {
- name: string;
- author: string;
- tools: number;
- forks: number;
- verified: boolean;
-}
-
-const MOCK_TEMPLATES: MockTemplate[] = [
- { name: 'notion-search', author: 'core', tools: 2, forks: 247, verified: true },
- { name: 'github-issues', author: 'core', tools: 3, forks: 89, verified: true },
- { name: 'stripe-readonly', author: 'core', tools: 4, forks: 156, verified: true },
- { name: 'linear-tasks', author: 'community', tools: 5, forks: 34, verified: false },
+// Honest marketplace preview data: template names + tool counts only. These
+// mirror the first-party starter templates; no invented fork counts, no
+// "verified" theatre — the frame is labelled as a preview of the card format.
+const PREVIEW_TEMPLATES: { name: string; author: string; tools: number }[] = [
+ { name: 'notion-search', author: 'core', tools: 2 },
+ { name: 'github-issues', author: 'core', tools: 3 },
+ { name: 'stripe-readonly', author: 'core', tools: 4 },
+ { name: 'postgres-readonly', author: 'core', tools: 3 },
];
const MARKETPLACE_POINTS: { t: string; d: string }[] = [
@@ -97,94 +94,104 @@ const MARKETPLACE_POINTS: { t: string; d: string }[] = [
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.',
+ t: 'Open from day one',
+ d: 'Publish a server you built and anyone can fork it. The marketplace is young — early templates set the standard.',
},
];
-const TIERS = [
+// Proof-by-specificity band: three claims a visitor can verify with one
+// click instead of taking our word for it. Substitute for social proof
+// until there is social proof.
+const PROOF_POINTS: {
+ t: string;
+ d: string;
+ href: string;
+ linkLabel: string;
+ Icon: ComponentType<{ size?: number; className?: string }>;
+}[] = [
{
- name: 'Hobby',
- price: '€0',
- tag: 'Forever free',
- features: ['1 server', '100k calls/mo', 'BMM subdomain', 'Community support'],
+ t: 'OAuth 2.1 authorization server',
+ d: 'PKCE, Dynamic Client Registration and Resource Indicators (RFC 8707) in front of every server.',
+ href: '/docs/oauth',
+ linkLabel: 'Read the auth docs',
+ Icon: ShieldCheck,
},
{
- name: 'Pro',
- price: '€49',
- tag: '/ month',
- features: [
- '5 servers',
- '1M calls/mo',
- 'Priority build queue',
- 'Custom domain · soon',
- 'Email support',
- ],
+ t: 'Live system status',
+ d: 'Uptime and incident history, public. If a build queue slows down, you see it before we tell you.',
+ href: '/status',
+ linkLabel: 'Check status now',
+ Icon: Activity,
},
{
- name: 'Team',
- price: '€199',
- tag: '/ month',
- features: ['25 servers', '10M calls/mo', 'Audit log', 'RBAC · soon', 'Slack support'],
- },
- {
- name: 'Enterprise',
- price: 'Custom',
- tag: 'talk to us',
- features: ['Unlimited', 'Custom infra · on request', 'SSO/SAML · on request', 'Dedicated hosting', 'Customer success'],
+ t: 'Per-server container isolation',
+ d: 'Every generated server runs in its own Docker container. Secrets AES-256-GCM encrypted at rest.',
+ href: '/security',
+ linkLabel: 'Security architecture',
+ Icon: Container,
},
];
+const PIPELINE_STEPS: { n: string; t: string; d: string }[] = [
+ {
+ n: '01',
+ t: 'Describe your tool',
+ d: 'A sentence is enough. List your secrets and which APIs to call.',
+ },
+ {
+ n: '02',
+ t: 'We generate, check, deploy',
+ d: 'Claude writes the spec. We render TypeScript, run static checks, build a container, deploy to your subdomain.',
+ },
+ {
+ n: '03',
+ t: 'Install in your client',
+ d: 'Copy the snippet into Claude Desktop, Cursor or ChatGPT. OAuth flow on first use.',
+ },
+];
+
+/** Mono shell-comment section kicker: `## how_it_works` */
+function Kicker({ children }: { children: string }) {
+ return
## {children}
;
+}
+
export default function Landing() {
+ const teaserTiers = TIERS.filter((t) => t.name === 'Hobby' || t.name === 'Pro');
return (
<>
- {/* Hero — left: copy + CTAs, right: cycling step-rotator tile.
- The old layout stacked three static code blocks vertically; the
- new layout shows one centered tile that cycles through the same
- three artifacts (prompt → build.log → claude config) with a
- mouse-reactive 3D tilt and a step indicator. Shorter overall
- so the video section below is teased above the fold. */}
+ {/* Hero — left: copy + CTAs, right: cycling terminal tile. The WebGL
+ particle field sits behind at z-0 with pointer-events:none so the
+ CTAs stay interactive. */}
- {/* WebGL particle field — capability-detected client component.
- Sits behind the hero content at z-0 with pointer-events:none
- so the CTAs above remain fully interactive. The canvas listens
- for pointermove on window itself, so the ring still tracks
- the cursor through the content above. With the hero now
- filling the full first-viewport (minus the 48px sticky nav),
- the field has cinematic-scale room and the indigo radial
- glow + dot mask read as the dominant background motif. */}
-
- v0.1 · updated 2026-05-20
-
-
+
Describe your tool.
We host the server.
AI uses it.
-
+
From prompt to production MCP server in 60 seconds. OAuth 2.1, Streamable HTTP, ready
for Claude, Cursor and ChatGPT.
-
+
- Start building free
+ Start building free →
- Read the docs
+ See a live build
@@ -208,28 +215,17 @@ export default function Landing() {
- {/* Scroll cue — fixed at the bottom of the loadscreen rather than
- inside the hero, so it sits at the natural lower edge of the
- first viewport regardless of how tall the hero ends up. Fades
- out once the user has scrolled past the loadscreen. */}
- {/* Flow video — full-width edge-to-edge under the hero. The clip
- shows the real flow (prompt → server schematic → live connection
- to Claude Desktop) in three smooth phases. autoplay-muted-loop +
- playsInline satisfies every mobile browser autoplay policy; the
- `poster` carries first paint while the video decodes. */}
+ {/* Flow video — full-width edge-to-edge under the hero. Plays when
+ scrolled into view (see hero-video.tsx); preload=metadata keeps the
+ 2.6 MB mp4 off the critical path on mobile. */}
- {/* HeroVideo: native