# Top 5 reused landing patterns

Extracted from the canonical landing pages (`mcp-setup.html`, `mcp-docs.html`, `partners.html`, `funnel.html`, `index.html`). All defined in `landing.css`.

## 1. `.client-card`
Card with hover-blue border. Used to showcase MCP clients (Claude Desktop, Cursor IDE, Windsurf, Cline) and partner integrations. Default padding 32px, border-radius 16px, hover changes border to `rgba(59,130,246,.30)`.

## 2. `.code-block` + `.copy-btn`
Dark code container `#161b22` with absolutely-positioned copy button in the top-right. Copy button uses JetBrains Mono, uppercase, switches to green when in `.copied` state (handled by frontend JS).

## 3. `.stats-bar`
4-column grid of metrics. JetBrains Mono numbers (weight 900) on top, uppercase 9px label below. Collapses to 2 columns under 900px. Used in MCP setup ("52M records / 34 countries / 6 tools / 60 sec setup") and in MC dashboard summaries.

## 4. `.try-section`
Subtle blue→violet gradient panel for "try it now" calls-to-action. Background gradient: `linear-gradient(135deg, rgba(59,130,246,.08), rgba(139,92,246,.06))` with thin blue border. Used as the live-demo widget container on `mcp-docs`.

## 5. `.badge-*`
Small uppercase tags. 4 variants: `badge-free` (green), `badge-time` (blue), `badge-warn` (amber), `badge-error` (red). Always 9 px, weight 800, letter-spacing .15em.

## Composition rule

Landings follow this vertical rhythm:

```
nav (52 px fixed)
  ↓
hero (section-label → h1 → p subtitle → CTA)
  ↓
stats-bar (4 metrics)
  ↓
section: section-label → h2 → cards (.client-card or .glass-card)
  ↓
try-section (live demo)
  ↓
section: pricing → .plan-tier ×3
  ↓
faq (collapsible JSON-LD-backed)
  ↓
footer (entia-footer.js injected)
```

Use `landing.css` as the base; override with page-specific styles **after** loading it.

## Spacing scale

- Inline elements: 4 / 8 / 12 / 16 px
- Component padding: 20 / 24 / 28 / 32 px
- Section vertical rhythm: `margin-top: 3rem` between h2 sections
- Card→card: `margin: 24px 0`

## Border radius scale

| Use | Radius |
|---|---|
| Buttons, copy-btn | 5-6 px |
| Code blocks | 10 px |
| Cards (`.client-card`, `.try-section`) | 16 px |
| Plan tiers | 18 px |
| Step number badges | 50% (circle) |
| Status badges | 4 px |
