e4e437c44c
All checks were successful
Deploy to Production / deploy (push) Successful in 1m2s
Restructures the landing page above-the-fold into two distinct sections:
1. **Hero — left copy + cycling tile, no static stack of three blocks**
New `<HeroStepRotator>` (Framer Motion client component) shows ONE
tile centred in the column, cycling prompt.txt → build.log →
claude_desktop_config.json every 3.5s. Auto-advance pauses on hover
and exposes a 3-dot tablist so users can jump to any step. The active
dot grows wide with an accent glow.
Mouse interaction: spring-smoothed 3D tilt on rotateX/rotateY plus a
radial glow that translates toward the cursor — both driven by motion
values, so the transforms stay on the GPU compositor instead of
re-rendering on every mousemove. `useReducedMotion()` strips the
tilt + glow translation and collapses the page transition to an
instant cross-fade (the rotation itself still advances — it's content,
not decoration).
Hero padding tightened (py-12/14/16 vs py-14/20/28) so the video
section below is teased above the fold. New scroll cue ("see it run"
+ animated chevron) sits at the bottom of the hero, anchored to
#flow.
2. **Flow video — full-width edge-to-edge under the hero (new section)**
The hero.mp4 / hero.webm pair moves out of the "How it works"
section into its own #flow section. No max-w wrapper — it spans the
viewport with `w-full aspect-video`, so on a 1080p monitor the video
gets the full 1920px width. Adds a subtle radial vignette so the
black edges blend into the page chrome.
3. **"How it works" — now lean**
Video removed (it's the flow section now). Just the three textual
cards as supporting copy.
Adds `framer-motion@11.18.2` to apps/web/package.json. Build passes
typecheck + Next.js production build with no new warnings; LCP path is
untouched since the rotator is client-hydrated after first paint and
Framer Motion is tree-shaken to the components we import.
Note: visitors with `prefers-reduced-motion: reduce` will still see the
video's poster instead of autoplay — Chrome blocks the network fetch
entirely for autoplay media when reduced-motion is set. The flow video
remains visible for the rest, and the step rotator continues to cycle
its content (with instant cross-fade instead of slide+scale).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
369 lines
15 KiB
TypeScript
369 lines
15 KiB
TypeScript
import { HeroStepRotator } from '@/components/hero-step-rotator';
|
|
import { JsonLd } from '@/components/json-ld';
|
|
import { ParticleHero } from '@/components/particle-hero';
|
|
import { StaticCodeBlock } from '@/components/static-code-block';
|
|
import { FAQ, faqJsonLd } from '@/lib/seo';
|
|
import { ChevronDown } 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"
|
|
}
|
|
}
|
|
}`;
|
|
|
|
const EXAMPLES: { title: string; desc: string }[] = [
|
|
{ title: 'Postgres reader', desc: 'Read-only access to your tables with schema introspection.' },
|
|
{ title: 'Salesforce', desc: 'Query opportunities, accounts and leads from Claude.' },
|
|
{ title: 'Notion', desc: 'Search pages, read content, append blocks.' },
|
|
{ title: 'GitHub', desc: 'List issues, search code, post comments — scoped to one repo.' },
|
|
{ title: 'Stripe', desc: 'Look up charges, customers, refunds (read-only by default).' },
|
|
{ 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 TIERS = [
|
|
{
|
|
name: 'Hobby',
|
|
price: '€0',
|
|
tag: 'Forever free',
|
|
features: ['1 server', '100k calls/mo', 'BMM subdomain', 'Community support'],
|
|
},
|
|
{
|
|
name: 'Pro',
|
|
price: '€49',
|
|
tag: '/ month',
|
|
features: [
|
|
'5 servers',
|
|
'1M calls/mo',
|
|
'Custom domain',
|
|
'Priority build queue',
|
|
'Email support',
|
|
],
|
|
},
|
|
{
|
|
name: 'Team',
|
|
price: '€149',
|
|
tag: '/ month',
|
|
features: ['25 servers', '10M calls/mo', 'RBAC + audit log', 'SLA 99.9%', 'Slack support'],
|
|
},
|
|
{
|
|
name: 'Enterprise',
|
|
price: '€499+',
|
|
tag: '/ month',
|
|
features: ['Unlimited', 'BYOC', 'SSO / SAML', 'Dedicated cluster', 'Customer success'],
|
|
},
|
|
];
|
|
|
|
export default function Landing() {
|
|
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. */}
|
|
<section className="relative overflow-hidden border-b border-[--color-border]">
|
|
{/* 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. */}
|
|
<ParticleHero />
|
|
<div className="relative z-10 mx-auto grid max-w-6xl gap-10 px-6 py-12 sm:py-14 md:grid-cols-[1.05fr_1fr] md:items-center md:gap-12 md:py-16">
|
|
<div className="min-w-0">
|
|
<span className="mono inline-block rounded-full border border-[--color-border] bg-[--color-bg-elevated] px-2.5 py-0.5 text-[11px] tracking-wide text-[--color-fg-muted]">
|
|
v0.1 — updated 2026-05-20
|
|
</span>
|
|
<h1 className="mt-6 text-balance text-[30px] font-semibold leading-[1.06] tracking-tight sm:text-[40px] md:text-[52px]">
|
|
Describe your tool.
|
|
<br />
|
|
We host the server.
|
|
<br />
|
|
<span className="text-[--color-fg-muted]">AI uses it.</span>
|
|
</h1>
|
|
<p className="mt-5 max-w-md text-[15px] leading-relaxed text-[--color-fg-muted]">
|
|
From prompt to production MCP server in 60 seconds. OAuth 2.1, Streamable HTTP, ready
|
|
for Claude, Cursor and ChatGPT.
|
|
</p>
|
|
<div className="mt-7 flex flex-wrap items-center gap-3">
|
|
<Link
|
|
href="/login"
|
|
className="inline-flex h-9 items-center justify-center rounded-md bg-[--color-accent] px-4 text-[13px] font-medium text-white transition-colors duration-200 hover:bg-[#5557e8]"
|
|
>
|
|
Start building free
|
|
</Link>
|
|
<Link
|
|
href="/docs"
|
|
className="inline-flex h-9 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]"
|
|
>
|
|
Read the docs
|
|
</Link>
|
|
</div>
|
|
<div className="mt-8 flex flex-wrap gap-x-6 gap-y-2 text-[12px] text-[--color-fg-subtle]">
|
|
<span className="inline-flex items-center gap-1.5">
|
|
<span className="size-1.5 rounded-full bg-emerald-400" /> OAuth 2.1 + PKCE
|
|
</span>
|
|
<span className="inline-flex items-center gap-1.5">
|
|
<span className="size-1.5 rounded-full bg-emerald-400" /> Streamable HTTP
|
|
</span>
|
|
<span className="inline-flex items-center gap-1.5">
|
|
<span className="size-1.5 rounded-full bg-emerald-400" /> AES-256 secrets
|
|
</span>
|
|
<span className="inline-flex items-center gap-1.5">
|
|
<span className="size-1.5 rounded-full bg-emerald-400" /> Per-server isolation
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="relative min-w-0">
|
|
<HeroStepRotator />
|
|
</div>
|
|
</div>
|
|
{/* Scroll cue — hints the video section sits directly below. */}
|
|
<a
|
|
href="#flow"
|
|
aria-label="See the flow in action"
|
|
className="absolute inset-x-0 bottom-2 z-10 mx-auto flex w-fit items-center gap-1 text-[11px] uppercase tracking-[0.18em] text-[--color-fg-subtle] transition-colors hover:text-[--color-fg-muted]"
|
|
>
|
|
<span>see it run</span>
|
|
<ChevronDown size={12} className="animate-bounce" />
|
|
</a>
|
|
</section>
|
|
|
|
{/* 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. */}
|
|
<section
|
|
id="flow"
|
|
className="relative w-full overflow-hidden border-b border-[--color-border] bg-black"
|
|
>
|
|
<div className="relative aspect-video w-full">
|
|
<video
|
|
autoPlay
|
|
muted
|
|
loop
|
|
playsInline
|
|
preload="auto"
|
|
poster="/videos/hero-poster.jpg"
|
|
className="size-full object-cover"
|
|
aria-label="Animation: a prompt becomes a live MCP server and connects to Claude Desktop"
|
|
>
|
|
<source src="/videos/hero.webm" type="video/webm" />
|
|
<source src="/videos/hero.mp4" type="video/mp4" />
|
|
</video>
|
|
{/* Subtle vignette to integrate edges into the rest of the page */}
|
|
<div
|
|
aria-hidden
|
|
className="pointer-events-none absolute inset-0"
|
|
style={{
|
|
background:
|
|
'radial-gradient(ellipse at center, transparent 60%, rgba(10,10,11,0.55) 100%)',
|
|
}}
|
|
/>
|
|
</div>
|
|
</section>
|
|
|
|
{/* How it works */}
|
|
<section id="how" className="border-b border-[--color-border] py-14 sm:py-20">
|
|
<div className="mx-auto max-w-6xl px-6">
|
|
<div className="mb-10 max-w-2xl">
|
|
<h2 className="text-[28px] font-semibold tracking-tight">How it works</h2>
|
|
<p className="mt-2 text-[14px] text-[--color-fg-muted]">
|
|
Three steps. No JSON to write, no Docker to manage.
|
|
</p>
|
|
</div>
|
|
|
|
{/* The same video used to live here; it now has its own
|
|
full-width section directly under the hero so it's teased
|
|
above the fold and gets edge-to-edge real estate. This
|
|
section keeps the three explanatory cards as supporting
|
|
copy under the video. */}
|
|
<div className="grid gap-6 md:grid-cols-3">
|
|
{[
|
|
{
|
|
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.',
|
|
},
|
|
].map((s) => (
|
|
<div key={s.n} className="panel p-5">
|
|
<div className="mono text-[11px] tracking-widest text-[--color-fg-subtle]">
|
|
{s.n}
|
|
</div>
|
|
<h3 className="mt-4 text-[15px] font-semibold tracking-tight">{s.t}</h3>
|
|
<p className="mt-2 text-[13px] leading-relaxed text-[--color-fg-muted]">{s.d}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Works with */}
|
|
<section className="border-b border-[--color-border] py-12 sm:py-16">
|
|
<div className="mx-auto max-w-6xl px-6">
|
|
<h2 className="text-center text-[13px] uppercase tracking-[0.18em] text-[--color-fg-subtle]">
|
|
Works with the clients you already use
|
|
</h2>
|
|
<div className="mt-8 flex flex-wrap items-center justify-center gap-x-12 gap-y-4 text-[14px] text-[--color-fg-muted]">
|
|
{['Claude Desktop', 'Cursor', 'ChatGPT', 'VS Code Copilot', 'Continue.dev'].map((t) => (
|
|
<span key={t} className="inline-flex items-center gap-2">
|
|
<span className="size-1.5 rounded-full bg-[--color-fg-subtle]" />
|
|
{t}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Examples */}
|
|
<section className="border-b border-[--color-border] py-14 sm:py-20">
|
|
<div className="mx-auto max-w-6xl px-6">
|
|
<div className="mb-10 max-w-2xl">
|
|
<h2 className="text-[28px] font-semibold tracking-tight">
|
|
Built for the work you actually have
|
|
</h2>
|
|
<p className="mt-2 text-[14px] text-[--color-fg-muted]">
|
|
Anything with an HTTP API or a database, in minutes.
|
|
</p>
|
|
</div>
|
|
<div className="grid gap-3 md:grid-cols-3">
|
|
{EXAMPLES.map((e) => (
|
|
<div
|
|
key={e.title}
|
|
className="panel p-4 transition-colors hover:border-[--color-border-strong]"
|
|
>
|
|
<div className="text-[13px] font-semibold tracking-tight">{e.title}</div>
|
|
<p className="mt-1 text-[12.5px] leading-relaxed text-[--color-fg-muted]">
|
|
{e.desc}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Marketplace */}
|
|
<section className="border-b border-[--color-border] py-14 sm: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 */}
|
|
<section id="pricing" className="border-b border-[--color-border] py-14 sm:py-20">
|
|
<div className="mx-auto max-w-6xl px-6">
|
|
<div className="mb-10 max-w-2xl">
|
|
<h2 className="text-[28px] font-semibold tracking-tight">Pricing</h2>
|
|
<p className="mt-2 text-[14px] text-[--color-fg-muted]">
|
|
Pay for tool calls, not for boilerplate.
|
|
</p>
|
|
</div>
|
|
<div className="grid gap-3 md:grid-cols-4">
|
|
{TIERS.map((t, i) => (
|
|
<div
|
|
key={t.name}
|
|
className={`panel p-5 ${i === 1 ? '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-[26px] font-semibold tracking-tight">{t.price}</span>
|
|
<span className="text-[12px] text-[--color-fg-subtle]">{t.tag}</span>
|
|
</div>
|
|
<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>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* FAQ */}
|
|
<section className="py-14 sm:py-20">
|
|
<JsonLd data={faqJsonLd()} />
|
|
<div className="mx-auto max-w-6xl px-6">
|
|
<h2 className="text-[28px] font-semibold tracking-tight">FAQ</h2>
|
|
<div className="mt-8 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>
|
|
</div>
|
|
</section>
|
|
</>
|
|
);
|
|
}
|