You are a senior frontend engineer + conversion copywriter. Build ONE production-quality,
single-file marketing landing page inside a Laravel app. The finished page must look and
feel like a premium developer-infrastructure product — think planetscale.com: near-black,
oversized confident type, lots of whitespace, hairline borders, monospace technical
diagrams, and an understated "the tech speaks for itself" tone. Modern and bold, never
busy.
────────────────────────────────────────────────────────
0) HARD CONSTRAINTS (do not deviate)
────────────────────────────────────────────────────────
- Framework: Laravel (existing app — do NOT scaffold a new one unless none exists).
- Deliverable: a SINGLE self-contained Blade view at resources/views/welcome.blade.php.
- Route: in routes/web.php, set the homepage to this view: Route::view('/', 'welcome');
- CSS: Tailwind CSS v4 + INLINE CSS ONLY. No external .css files, no Vite/PostCSS build,
no app.css. Load Tailwind v4 via the official browser build:
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
Put ALL custom design tokens and keyframes inside ONE inline block in <head>:
<style type="text/tailwindcss">
@theme { /* custom colors, fonts, etc. as Tailwind v4 tokens */ }
/* plus any @keyframes and base styles here */
</style>
(If a token cannot live in @theme, use a normal inline <style> block — still inline, no
external file.)
- JS: Alpine.js v3 via CDN only, deferred:
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js"></script>
All interactivity is Alpine (x-data / x-show / x-on / x-transition). No other JS libs.
- Everything (markup, styles, scripts) lives in welcome.blade.php. One file.
- No images required — build the hero visual and the architecture diagram in CSS/SVG/
monospace. If you use an icon, inline it as SVG. Do not hotlink logos or stock images.
- Mobile-first, fully responsive, accessible, fast.
────────────────────────────────────────────────────────
1) PRODUCT POSITIONING
────────────────────────────────────────────────────────
Product name: "MCP Gateway" (use this consistently; it's easy to rebrand later).
Category: a secure gateway that connects document systems to AI assistants over the open
Model Context Protocol (MCP).
First supported provider: DocuWare (live today). Architecture is provider-agnostic — more
document systems are coming. Say this plainly; lead with DocuWare, tease the rest.
Core promise: people ask their AI assistant questions about company documents, and the AI
searches and reads them. STRICTLY READ-ONLY — the AI can never change, upload, or delete.
The two differentiators must be repeated across the page:
(1) READ-ONLY, GUARANTEED.
(2) NO API KEYS / NO SECRETS TO COPY.
Audience (write for both, lead with #1):
1. DocuWare users and ops teams who want "ask AI about our documents" with zero custom
integration and no data export.
2. Business / operations decision-makers who want AI productivity on company documents
with safety, control, and audit trails.
Tone: punchy, confident, short sentences. Keep the hero jargon-free. Reserve OAuth / RFC /
MCP detail for the "Built for trust" section.
────────────────────────────────────────────────────────
2) DESIGN SYSTEM (PlanetScale-inspired)
────────────────────────────────────────────────────────
Theme: dark, near-black, premium. One restrained electric accent. Mostly monochrome.
Color tokens (define in @theme, then use as Tailwind classes):
--color-bg: #08080A (page background, near-black)
--color-surface: #101014 (cards / elevated panels)
--color-surface-2: #15151B (nested panels, code blocks)
--color-border: #232330 (1px hairline borders everywhere)
--color-text: #F5F5F7 (primary text)
--color-muted: #9A9AA7 (secondary text)
--color-faint: #6B6B78 (captions, footnotes)
--color-accent: #7C5CFF (electric indigo/violet — primary accent + CTAs)
--color-accent-2: #34D399 (emerald — used ONLY for read-only/safety cues, sparingly)
--color-accent-glow: rgba(124,92,255,0.35)
Typography:
- Sans: Inter (load via <link> from fonts.bunny.net or Google Fonts) with system fallback.
- Mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace — for the diagram,
code/URL chips, eyebrows, and the example-prompt chips. Monospace is a signature
texture here; use it deliberately.
- Headlines: large, tight, confident. Use clamp(). Hero h1 ≈ clamp(2.75rem, 6vw, 5rem),
line-height ~1.02, letter-spacing -0.03em, font-weight 600–700.
- Body: 1rem–1.125rem, line-height 1.6, color muted.
Surface & motion language:
- Hairline 1px borders (--color-border) on cards, sections, nav. Subtle, premium.
- Border radius: 12–16px on cards, 10px on buttons, pill (9999px) on chips/badges.
- Soft shadows only on hover; mostly rely on borders + background contrast.
- Hero background: near-black with ONE subtle radial violet glow (accent-glow) top-center,
plus an optional faint 1px grid or dot pattern at very low opacity. Keep it quiet.
- Section rhythm: generous vertical padding (py-24 / py-32 desktop). Max content width
~1200px, centered, with comfortable horizontal padding.
- Buttons: primary = solid accent, white text, subtle glow on hover; secondary = hairline
border, transparent bg, text on hover. Consistent everywhere.
- Respect prefers-reduced-motion: disable non-essential animations.
Signature element — a MONOSPACE ARCHITECTURE DIAGRAM (PlanetScale's calling card).
Render this in a <pre> with mono font inside a bordered surface-2 panel. Reproduce the
flow below faithfully (you may refine the box-drawing, keep the labels):
┌──────────────────────────────────┐
│ Claude · ChatGPT · Cursor │ any MCP client
└─────────────────┬────────────────┘
│ OAuth 2.1 + PKCE
│ (you click “Allow” once)
▼
╔══════════════════════════════════╗
║ M C P G A T E W A Y ║ read-only · audited · encrypted
╚═════════════════┬════════════════╝
│ brokered OAuth, auto-refreshed
▼
┌──────────────────────────────────┐
│ Your DocuWare │ one instance · locked
└──────────────────────────────────┘
────────────────────────────────────────────────────────
3) PAGE STRUCTURE + FINAL COPY (use this copy verbatim)
────────────────────────────────────────────────────────
A) ANNOUNCEMENT BAR (top, full-width, thin, dismissible via Alpine)
Text: "New — DocuWare is live. More document systems coming soon." + a "→" link "See roadmap".
B) STICKY HEADER / NAV
- Left: wordmark "MCP Gateway" (mono or tight sans; small accent dot before it).
- Center (desktop): How it works · Capabilities · Security · Pricing · Docs (anchor links).
- Right: "Log in" (text) + "Get started" (primary button).
- Mobile: hamburger toggled with Alpine (x-data="{open:false}"), slide-down panel.
- Header gets a subtle bg blur + bottom hairline once scrolled (Alpine + scroll listener,
or just a persistent translucent bg — keep simple).
C) HERO
- Eyebrow (mono, accent): "AI FOR YOUR DOCUMENT STACK"
- H1: "Talk to your documents."
- Subhead: "Connect Claude, ChatGPT, and any AI assistant to your DocuWare — read-only,
no API keys, set up in minutes."
- CTAs: primary "Get started" · secondary "See how it works" (anchor to How it works).
- Trust strip (small, mono, muted, separated by dots):
"Read-only · OAuth 2.1 · Fully audited · Encrypted at rest"
- Hero visual (right/below on mobile): an animated "chat" card built with Alpine.
A user bubble types/reveals: "Find the latest invoice from Acme Corp."
Then an assistant bubble reveals a result "document card": filename
"Acme_Invoice_2026-04.pdf", a few metadata chips (Cabinet: Invoices · Date: 2026-04-18
· €12,480.00), and a tiny "read-only" emerald badge. Use a simple Alpine timeline
(setTimeout/x-init) to reveal user → typing dots → assistant. Loop gently or reveal once.
Honor reduced-motion (show final state instantly).
D) COMPATIBILITY STRIP
- Kicker: "Works with the tools you already use"
- Render as a row of bordered pill/cards (text labels, optional inline SVG glyph):
Claude Desktop · Claude.ai · ChatGPT (incl. Deep Research) · Cursor · Any MCP client
- Muted, understated, single row that wraps on mobile.
E) ARCHITECTURE / "HOW THE BRIDGE WORKS" (the monospace diagram section)
- Section heading: "One secure bridge. Zero data sprawl."
- Lead paragraph: "Your documents never leave DocuWare. The gateway brokers a standards-
based connection in both directions — it authorizes your AI client coming in, and
authorizes itself to DocuWare going out. You never touch a token."
- Render the monospace diagram from section 2 inside a bordered surface-2 panel.
- Three small labels beneath: "Inbound: OAuth 2.1 + PKCE" · "Outbound: brokered, auto-
refreshed" · "Always: read-only & audited".
F) BENEFITS (4 bold cards, 2x2 on desktop, stacked on mobile)
1. "Read-only, guaranteed."
"Your AI can search and read. It can never change, upload, or delete. This isn't a
checkbox — it's enforced in the architecture and verified by a test that fails the
build if a single write operation is ever added."
2. "No API keys. No secrets to copy."
"Modern OAuth handles everything — the same standard behind 'Sign in with…'. Your AI
client registers itself automatically. You click 'Allow' once."
3. "Set up in minutes. No developers."
"A guided wizard validates your DocuWare connection live and walks you through
authorizing it. Paste a URL, click Allow, done."
4. "You stay in control."
"Pick exactly which capabilities each connection exposes. Every document access is
written to a complete, tamper-evident audit trail — with secrets redacted."
G) HOW IT WORKS (3 numbered steps, horizontal on desktop)
- Heading: "Live in three steps."
- Step 1 — "Connect your DocuWare." "A one-time guided setup. Paste your DocuWare URL,
authorize once. We validate the connection live."
- Step 2 — "Copy your connector URL." "One secure URL per instance." Include a faux
mono "URL chip" with a working Alpine copy-to-clipboard button (shows "Copied!" state).
Example value: "https://gateway.example.com/mcp/your-instance"
- Step 3 — "Paste it into your AI assistant." "In Claude, ChatGPT, or Cursor, add the
connector, pick HTTP (OAuth), and click Allow. There are no API keys to copy. Now ask
away."
H) CAPABILITIES — "What your AI can do" (5 cluster cards, each with an inline SVG icon)
- Discover: "Instantly map a DocuWare instance — every file cabinet, its fields, and its
search dialogs in one call."
- Search: "Full-text and field-filtered search across cabinets, with date ranges,
sorting, and pagination. Count results before you drill in."
- Read: "Pull a document's metadata and fields, list its pages and sections, and read
the extracted text."
- Share: "Generate a direct DocuWare viewer link — or a short-lived, signed download
link that streams the file to anyone, even people without a DocuWare account. No
credentials in the URL."
- Deep-Research-ready: "Dedicated search + fetch tools match OpenAI's connector contract,
so it plugs straight into ChatGPT Deep Research."
I) EXAMPLE PROMPTS (mono chips / small cards, 4 items)
- Kicker: "Just ask, in plain language."
- "Find the latest invoice from Acme Corp."
- "Summarize the contract in the Legal cabinet for project Falcon."
- "How many HR documents were filed last quarter?"
- "Give me a download link for document 12345."
J) BUILT FOR TRUST (security/credibility — slightly more technical, denser type, mono accents)
- Heading: "Built for trust."
- Render as a list/grid of compact rows, each a bold lead + one muted line:
• "Read-only by design." "Verified by an automated test that fails the build on any write."
• "Locked to one instance." "Each connector reaches exactly one DocuWare instance — a
token issued for one can never be replayed against another."
• "Standards-only auth." "OAuth 2.1 + PKCE, Dynamic Client Registration (RFC 7591),
audience-bound tokens (RFC 8707), Protected Resource Metadata (RFC 9728)."
• "Encrypted, redacted." "DocuWare URL, client secret, and tokens are encrypted at rest
and stripped from every log and error."
• "Always audited." "A complete, tamper-evident trail of who accessed which document,
and when."
• "Self-healing." "Hourly health checks, rate limiting on every endpoint, and zero-
downtime signing-key rotation — no client re-auth, no restart."
K) TESTIMONIAL (one pull-quote, PlanetScale-style — PLACEHOLDER, mark it clearly)
- Large quote, muted attribution. Use an obviously generic placeholder so the user
swaps in a real one:
"Our team asks the AI for a contract or an invoice and it just finds it — without ever
being able to touch the originals. That combination is why we trust it."
— [Name], Operations Lead, [Customer] /* PLACEHOLDER — replace with a real quote */
L) PRICING
- Heading: "Simple pricing. One plan."
- Subhead: "Start free. Upgrade when you're ready."
- Alpine billing toggle: monthly | yearly (x-data="{ yearly: false }").
• Monthly: "$10" /month
• Yearly: "$100" /year + badge "Save $20 — ~2 months free"
The price number swaps reactively with the toggle.
- Primary "Pro" card (accent border, elevated):
Plan name: "Pro"
Price: reactive ($10/mo or $100/yr per toggle)
CTA: "Start 14-day free trial"
Includes (checklist with emerald check SVGs):
- Connect your DocuWare instance
- All MCP clients: Claude, ChatGPT (incl. Deep Research), Cursor
- Read-only access to search, read & share
- Full audit log
- OAuth 2.1, encrypted secrets, key rotation
- Email support
- Secondary "Enterprise" card (hairline, muted):
"Enterprise" — "Custom"
CTA: "Contact us"
Includes: multiple instances & tenants, SSO, custom SLA, priority support, additional
providers as they launch.
- Footnote (mono, faint): "Cancel anytime. No card required for the trial."
M) FAQ (Alpine accordion — one open at a time, x-transition, chevron rotates)
- "Is it really read-only?" — "Yes. The AI can search and read documents but cannot
change, upload, or delete anything. It's enforced in the architecture and guarded by an
automated test that fails the build if any write operation is added."
- "Do I need API keys?" — "No. Authentication uses modern OAuth — your AI client registers
itself automatically and you click 'Allow' once. No secrets to copy or store."
- "Which AI assistants work?" — "Claude Desktop, Claude.ai, ChatGPT (including Deep
Research), Cursor, and any MCP-compatible client."
- "Do I need a developer to set it up?" — "No. A guided wizard validates your connection
and walks you through authorizing it in minutes."
- "Which document systems are supported?" — "DocuWare is live today. The gateway is
provider-agnostic and more document systems are on the roadmap."
- "Where are my credentials stored?" — "DocuWare URLs, client secrets, and tokens are
encrypted at rest, never shown again, and redacted from every log."
- "Can I cancel anytime?" — "Yes. You can disconnect from your AI client's connector
settings instantly, and cancel your plan at any time."
N) FINAL CTA BANNER (full-width, accent glow)
- Headline: "Give your AI assistant access to DocuWare — safely."
- Subline: "Read-only. No API keys. Live in minutes."
- Primary CTA: "Get started" · secondary "Read the docs".
O) FOOTER (minimal, multi-column, hairline top border)
- Wordmark + tagline: "The secure bridge between your documents and AI."
- Columns: Product (How it works, Capabilities, Pricing, Roadmap) · Developers (Docs,
Security, Status, MCP spec) · Company (About, Contact, Privacy, Terms).
- Bottom row (mono, faint): "© 2026 MCP Gateway. Read-only by design."
────────────────────────────────────────────────────────
4) INTERACTIONS (all Alpine.js)
────────────────────────────────────────────────────────
- Mobile nav toggle (hamburger → slide-down panel; close on link click / Esc).
- Dismissible announcement bar.
- Hero chat reveal timeline (user bubble → typing dots → assistant document card).
- Copy-to-clipboard on the connector URL chip with a transient "Copied!" state.
- Pricing monthly/yearly toggle that reactively swaps the price and the savings badge.
- FAQ accordion (single-open, animated height/opacity, rotating chevron).
- Smooth-scroll for in-page anchor links (CSS scroll-behavior: smooth on <html>).
- prefers-reduced-motion: skip the chat animation and any looping motion; show end states.
────────────────────────────────────────────────────────
5) ACCESSIBILITY & QUALITY
────────────────────────────────────────────────────────
- Semantic landmarks: <header> <main> <section> <footer>; one <h1>; logical heading order.
- All interactive elements keyboard-operable; visible focus rings (use the accent color).
- aria-expanded / aria-controls on nav toggle and FAQ items; aria-pressed on the toggle.
- Color contrast AA on text over near-black; don't rely on color alone for meaning.
- Buttons are <button>, links are <a>; no div-as-button.
- Lighthouse-clean: no console errors, no layout shift, fast first paint.
────────────────────────────────────────────────────────
6) SEO / HEAD
────────────────────────────────────────────────────────
- <title>: "MCP Gateway — Talk to your DocuWare with any AI assistant"
- meta description: "Connect Claude, ChatGPT, and any AI assistant to your DocuWare —
read-only, no API keys, set up in minutes."
- Open Graph + Twitter card tags (title, description, type=website).
- theme-color: #08080A. lang="en". Responsive viewport meta.
- Inter font preconnect/link in <head>.
────────────────────────────────────────────────────────
7) ACCEPTANCE CHECKLIST (verify before finishing)
────────────────────────────────────────────────────────
[ ] One file only: resources/views/welcome.blade.php; route set to it.
[ ] Tailwind v4 via browser CDN; ALL custom CSS inline; no external .css, no Vite build.
[ ] Alpine v3 via CDN; all interactivity works (nav, toggle, accordion, copy, chat reveal).
[ ] "Read-only" and "no API keys" appear in the hero AND repeat across the page.
[ ] DocuWare leads; "more providers coming" appears (bar, FAQ, footer, enterprise card).
[ ] Pricing: $10/month and $100/year with a working monthly/yearly toggle + savings badge.
[ ] Monospace architecture diagram present and on-brand (PlanetScale energy).
[ ] Dark, premium, near-black look with one restrained accent; hairline borders; whitespace.
[ ] Fully responsive (test ~375px, ~768px, ~1280px); no horizontal scroll on mobile.
[ ] Accessible: semantics, focus states, aria on toggles/accordion, reduced-motion honored.
[ ] No console errors; testimonials clearly marked as placeholders to replace.
Build the complete welcome.blade.php now and update routes/web.php. Output the full file.
Claude Code Prompt — MCP Gateway Landing Page
Notes for you (not part of the prompt)
brandable name later (e.g. Conduit, Relay, Aperture).
were real — swap in a genuine customer line (PlanetScale's whole social-proof section
rests on real, named quotes, which is what makes it land).
the section feels complete and converts. Both are easy to remove if you'd rather show only
the single $10 / $100 plan.
whole thing stays one file with zero build step. If you'd rather ship a compiled production
build, tell Claude Code to use the Tailwind v4 Vite plugin instead — but that breaks the
"single inline file" constraint, so the CDN route is the right call for a landing page.
(or a bilingual toggle), add one line to the prompt: "Write all copy in German" — the
structure and design system stay identical.