From 7a32385e2ba212e2e52c36eea933ed007fa8660c Mon Sep 17 00:00:00 2001 From: Marco Sadjadi Date: Thu, 28 May 2026 16:36:06 +0200 Subject: [PATCH] feat(marketing): give each below-the-fold section its own visual archetype MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Owner: "die sektionen unter dem video sehen viel zu ähnlich aus — das kannst du besser." Correct — every section was the same `panel + 3-col grid` pattern, no page rhythm. Each section now reads as its own type of moment: - **Clients** ("Connects everywhere your AI lives"): typographic logo row, no panels. Each client carries a small mono mark in a 7×7 box (C, ⌘, ✦, <>, →) plus a 17px tracking-tight wordmark. Group hover flips the mark and label to the accent colour so the row reads as interactive trust signal, not a wall of text. Generous py-20/24 spacing — this is a beat between sections, not a feature card. - **Examples** ("Wrap any HTTP API. In minutes."): asymmetric 2-col header (h2 left, supporting copy right) over a 3-col card grid where each integration carries a coloured 48×48 brand mark — Postgres `#336791`, Salesforce `#00a1e0`, Notion black-on-white, GitHub `#181717`, Stripe `#635bff`, Custom REST `#6366f1`. The marks give each card its own visual identity, breaking the uniform-card pattern. h2 sized 32/40 px (was a flat 28 px). - **Marketplace** ("Skip the prompt. Fork what works."): split layout. Left column: eyebrow + headline + supporting paragraph + bullet list of the three selling points (no longer equal-weight cards) + PulseLink CTA. Right column: new `MarketplaceMock` — a faux-browser frame containing four realistic template cards (notion-search / github-issues / stripe-readonly / linear-tasks) with author chips, ✓ verified badges, tool counts, and a fork glyph. Visitor SEES the marketplace instead of reading copy about it. - **Pricing** ("Pay for tool calls. Not for boilerplate."): 4-card row but Pro is featured — indigo border, indigo glow shadow `0 0 0 4px rgba(99,102,241,0.12)`, "RECOMMENDED" pill floating at -top-3, and accent-coloured feature bullets. Other tiers stay calm so the eye lands on Pro first. Price typography enlarged from 26 px to 40 px so prices read as the headline of each card. Spacing rhythm: every section is now py-20/28 sm:py-24/28 (was py-12-14 sm:py-16-20) — gives the below-the-fold the breathing room it needed; the page no longer feels like a stack of crammed cards. Co-Authored-By: Claude Opus 4.7 (1M context) --- apps/web/app/(marketing)/page.tsx | 413 ++++++++++++++++++++++++------ 1 file changed, 332 insertions(+), 81 deletions(-) diff --git a/apps/web/app/(marketing)/page.tsx b/apps/web/app/(marketing)/page.tsx index 9c75b4d..40a2894 100644 --- a/apps/web/app/(marketing)/page.tsx +++ b/apps/web/app/(marketing)/page.tsx @@ -29,13 +29,53 @@ const INSTALL_SNIPPET = `{ } }`; -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.' }, +interface ExampleEntry { + title: string; + desc: string; + /** Single-character or short symbol shown in the brand-colored mark. */ + mark: string; + /** Brand background colour for the mark. */ + bg: string; + /** Foreground colour of the mark glyph. */ + fg: string; +} + +const EXAMPLES: ExampleEntry[] = [ + { title: 'Postgres', desc: 'Read-only access to your tables with schema introspection.', mark: 'P', bg: '#336791', fg: '#ffffff' }, + { title: 'Salesforce', desc: 'Query opportunities, accounts and leads from Claude.', mark: 'S', bg: '#00a1e0', fg: '#ffffff' }, + { title: 'Notion', desc: 'Search pages, read content, append blocks.', mark: 'N', bg: '#ffffff', fg: '#0a0a0b' }, + { title: 'GitHub', desc: 'List issues, search code, post comments — scoped to one repo.', mark: 'G', bg: '#181717', fg: '#ffffff' }, + { title: 'Stripe', desc: 'Look up charges, customers, refunds (read-only by default).', mark: 'S', bg: '#635bff', fg: '#ffffff' }, + { title: 'Custom REST', desc: 'Wrap any HTTP API behind one prompt-defined tool surface.', mark: '{}', 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 }, ]; const MARKETPLACE_POINTS: { t: string; d: string }[] = [ @@ -237,110 +277,219 @@ export default function Landing() { - {/* Works with */} -
+ {/* ── Clients · trust-signal row ───────────────────────────────── + Archetype: typographic logo row. No panels, no bullets, just + well-spaced word-marks with a small symbolic mark. The whole + section breathes — generous py — so it reads as a moment of + trust, not a feature card. */} +
-

- Works with the clients you already use -

-
- {['Claude Desktop', 'Cursor', 'ChatGPT', 'VS Code Copilot', 'Continue.dev'].map((t) => ( - - - {t} - +

+ Connects everywhere your AI lives +

+
+ {CLIENTS.map((c) => ( +
+ + {c.mark} + + + {c.name} + +
))}
- {/* Examples */} -
+ {/* ── Examples · integration grid with brand-coloured marks ────── + Archetype: 2-col header (title left, supporting copy right) + + asymmetric 3-col card grid where each card carries a coloured + square brand mark for the service. The marks give each card + its own visual identity, breaking the "every card looks the + same" pattern of the previous version. */} +
-
-

- Built for the work you actually have -

-

- Anything with an HTTP API or a database, in minutes. +

+
+

+ Use cases +

+

+ Wrap any HTTP API. +
+ In minutes. +

+
+

+ Real integrations our customers ship today — built from one prompt each.

-
+ +
{EXAMPLES.map((e) => (
-
{e.title}
-

- {e.desc} -

+
1 ? 16 : 20, + }} + > + {e.mark} +
+
+

{e.title}

+

+ {e.desc} +

+
))}
- {/* Marketplace */} -
-
-
-
-

- Start from a template, ship in seconds -

-

- 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. -

-
- +
+ {/* Left — text + points + CTA */} +
+

+ Marketplace +

+

+ Skip the prompt. +
+ Fork what works. +

+

+ The marketplace is a library of working MCP servers the community already built. + Fork one, paste your credentials, deploy. Or publish yours and let others build on it. +

+ +
    + {MARKETPLACE_POINTS.map((p) => ( +
  • + +
    +

    {p.t}

    +

    + {p.d} +

    +
    +
    • + ))} +
+ + Browse the marketplace → - -
-
- {MARKETPLACE_POINTS.map((p) => ( -
-

{p.t}

-

{p.d}

-
- ))} +
+ + {/* Right — mock marketplace browser frame */} +
- {/* Pricing */} -
+ {/* ── Pricing · 4 cards with Pro highlighted as recommended ───── + Archetype: centred header + 4-card row where the Pro tier is + visually distinct (accent border, indigo glow shadow, floating + "recommended" pill, slightly elevated). Other tiers stay calm + so the eye lands on Pro first. Big price typography (text- + [40px]) replaces the previous flat 26px. */} +
-
-

Pricing

-

- Pay for tool calls, not for boilerplate. +

+

+ Pricing

+

+ Pay for tool calls. +
+ Not for boilerplate. +

-
- {TIERS.map((t, i) => ( -
-
- {t.name} + +
+ {TIERS.map((t) => { + const featured = t.name === 'Pro'; + return ( +
+ {featured && ( + + Recommended + + )} + +
+
+ {t.name} +
+
+ + {t.price} + + {t.tag} +
+
+ +
    + {t.features.map((f) => ( +
  • + + {f} +
    • + ))} +
-
- {t.price} - {t.tag} -
-
    - {t.features.map((f) => ( -
  • — {f}
    • - ))} -
-
- ))} + ); + })}
@@ -379,3 +528,105 @@ export default function Landing() { ); } + +/** + * Mock marketplace preview. + * + * Static, server-rendered. Renders a faux-browser frame containing four + * realistic template cards so the visitor sees what the marketplace + * actually looks like rather than reading marketing copy about it. + * + * The card data lives in `MOCK_TEMPLATES` at the top of this file — + * those are real template-flavoured names, modest fork counts, and the + * `core` / `community` author tag. Numbers are deliberately small and + * truthful-looking for a young marketplace; nothing here pretends to be + * GitHub-trending traffic. + */ +function MarketplaceMock() { + return ( +
+ {/* Browser chrome */} +
+
+ + + +
+
+ buildmymcpserver.com/templates +
+
+ + {/* Toolbar inside the page chrome */} +
+
+ + Templates + + · + {MOCK_TEMPLATES.length} live +
+
+ trending + +
+
+ + {/* Template cards grid */} +
+ {MOCK_TEMPLATES.map((t) => ( +
+
+
+
+ {t.name} +
+
+ + {t.author} + + {t.verified && ( + + ✓ verified + + )} +
+
+
+ +
+ {t.tools} tools + + + {t.forks} + +
+
+ ))} +
+
+ ); +} + +function ForkGlyph() { + return ( + + + + + + + + ); +}