@cloudgrid-io/mcp 0.12.0 → 0.14.0

package/src/corpus/templates/revenue-dashboard/services/web/app/page.js

@@ -0,0 +1,87 @@
+// Home page: a server component reads the sales straight from Mongo, computes the
+// revenue total and the per-product breakdown, and renders a recent-sales table.
+// A small client form adds new sales via the API route. Data persists across
+// refresh and across users because it lives in the grid-shared Mongo, not memory.
+import { getDb } from "../lib/db.js";
+import SaleForm from "./sale-form.js";
+
+export const dynamic = "force-dynamic";
+
+async function listSales() {
+  const db = await getDb();
+  const items = await db.collection("sales").find({}).sort({ at: -1 }).toArray();
+  return items.map((s) => ({
+    id: s._id.toString(),
+    product: s.product,
+    amount: typeof s.amount === "number" ? s.amount : 0,
+    at: (s.at instanceof Date ? s.at : new Date(s.at)).toISOString(),
+  }));
+}
+
+function money(n) {
+  return n.toLocaleString(undefined, { style: "currency", currency: "USD" });
+}
+
+export default async function Page() {
+  const sales = await listSales();
+  const total = sales.reduce((sum, s) => sum + s.amount, 0);
+
+  const byProduct = new Map();
+  for (const s of sales) {
+    byProduct.set(s.product, (byProduct.get(s.product) || 0) + s.amount);
+  }
+  const breakdown = [...byProduct.entries()]
+    .map(([product, amount]) => ({ product, amount }))
+    .sort((a, b) => b.amount - a.amount);
+
+  return (
+    <main>
+      <h1>Revenue Dashboard</h1>
+      <p className="hint">Persisted in the grid-shared Mongo — survives refresh.</p>
+
+      <p className="total-label">Total revenue</p>
+      <p className="total">{money(total)}</p>
+
+      <h2>Add a sale</h2>
+      <SaleForm />
+
+      <h2>By product</h2>
+      {breakdown.length === 0 ? (
+        <p className="empty">No sales yet.</p>
+      ) : (
+        <div className="cards">
+          {breakdown.map((b) => (
+            <div className="card" key={b.product}>
+              <div className="name">{b.product}</div>
+              <div className="amt">{money(b.amount)}</div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      <h2>Recent sales</h2>
+      {sales.length === 0 ? (
+        <p className="empty">No sales yet.</p>
+      ) : (
+        <table>
+          <thead>
+            <tr>
+              <th>Product</th>
+              <th className="amt">Amount</th>
+              <th>When</th>
+            </tr>
+          </thead>
+          <tbody>
+            {sales.slice(0, 20).map((s) => (
+              <tr key={s.id}>
+                <td>{s.product}</td>
+                <td className="amt">{money(s.amount)}</td>
+                <td>{new Date(s.at).toLocaleString()}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+    </main>
+  );
+}

package/src/corpus/templates/revenue-dashboard/services/web/app/sale-form.js

@@ -0,0 +1,63 @@
+"use client";
+
+// Small client component: posts a new sale to /api/sales, then refreshes the
+// server component so the total, breakdown, and table all recompute from Mongo.
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+
+export default function SaleForm() {
+  const router = useRouter();
+  const [product, setProduct] = useState("");
+  const [amount, setAmount] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState("");
+
+  async function add(e) {
+    e.preventDefault();
+    const name = product.trim();
+    const value = Number(amount);
+    if (!name || !Number.isFinite(value)) {
+      setError("Enter a product and a numeric amount.");
+      return;
+    }
+    setError("");
+    setBusy(true);
+    const res = await fetch("/api/sales", {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ product: name, amount: value }),
+    });
+    if (res.ok) {
+      setProduct("");
+      setAmount("");
+      router.refresh();
+    } else {
+      const body = await res.json().catch(() => ({}));
+      setError(body.error || "Failed to add sale.");
+    }
+    setBusy(false);
+  }
+
+  return (
+    <form onSubmit={add}>
+      <div className="row">
+        <input
+          value={product}
+          onChange={(e) => setProduct(e.target.value)}
+          placeholder="Product"
+          aria-label="Product"
+        />
+        <input
+          value={amount}
+          onChange={(e) => setAmount(e.target.value)}
+          placeholder="Amount"
+          aria-label="Amount"
+          type="number"
+          step="0.01"
+        />
+        <button type="submit" disabled={busy}>Add sale</button>
+      </div>
+      {error && <p className="hint" role="alert">{error}</p>}
+    </form>
+  );
+}

package/src/corpus/templates/revenue-dashboard/services/web/lib/db.js

@@ -0,0 +1,32 @@
+// Cached MongoDB client for the App Router.
+//
+// The grid injects the connection string as the DATABASE_MONGODB_URL environment
+// variable (plus the legacy MONGODB_URL alias) at dev-time (`grid dev`) and
+// runtime (after `grid plug`). Read the canonical var first, fall back to the
+// legacy alias. Never hardcode a connection string here and never commit a secret.
+//
+// The env var and client are resolved LAZILY (inside getDb), never at module top
+// level — otherwise `next build` throws when it imports this module for route
+// analysis, before the grid injects the var.
+import { MongoClient } from "mongodb";
+
+function clientPromise() {
+  const uri = process.env.DATABASE_MONGODB_URL || process.env.MONGODB_URL;
+  if (!uri) {
+    throw new Error(
+      "DATABASE_MONGODB_URL is not set. The grid injects it automatically — run " +
+        "this app with `grid dev` locally, or deploy it with `grid plug` (the grid " +
+        "injects the DB connection string at runtime). Do not set it by hand.",
+    );
+  }
+  if (!globalThis.__mongoClientPromise) {
+    globalThis.__mongoClientPromise = new MongoClient(uri).connect();
+  }
+  return globalThis.__mongoClientPromise;
+}
+
+export async function getDb() {
+  const client = await clientPromise();
+  // The default DB comes from the connection-string path segment the grid injects.
+  return client.db();
+}

package/src/corpus/templates/revenue-dashboard/services/web/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "revenue-dashboard",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "^15.1.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "mongodb": "^6.12.0"
+  }
+}

package/src/corpus/templates/saas-marketing/README.md

@@ -0,0 +1,30 @@
+# saas-marketing
+
+A single self-contained HTML SaaS marketing site (hero, features, pricing tiers, testimonials, FAQ, and a closing call to action). Richer than the landing-page template.
+
+Static inspiration — a single self-contained `index.html` (inline CSS and JS,
+no external CDNs). It deploys instantly via `gridctl_drop` and works on every
+CloudGrid edition, including hosted.
+
+## Fill it in
+
+Fetch the template with `gridctl_fetch("template", "saas-marketing")`, then replace the
+placeholders:
+
+   - The product name, tagline, and hero eyebrow/headline/subheadline.
+   - The call-to-action label and (optional) target for the primary button.
+   - One block per feature (title + short description). Add or remove `.feature` blocks.
+   - The three pricing plans: name, price, period, and feature list. The middle plan is marked "Most popular".
+   - The testimonial quotes and who said them.
+   - The FAQ question/answer pairs (`<details>` blocks, client-side accordion).
+
+Keep it a single self-contained HTML file. Do not add external scripts,
+stylesheets, fonts, or large embedded media.
+
+## Deploy
+
+- Hosted MCP edition: call the drop tool with the HTML.
+- Local MCP / CLI edition: write the HTML to a file and run `gridctl plug`.
+
+It deploys as an inspiration and returns a live share URL right away. Re-deploy
+with the same entity id to update the same URL.

package/src/corpus/templates/saas-marketing/cloudgrid.yaml

@@ -0,0 +1,228 @@
+# ============================================================================
+# cloudgrid.yaml — Complete Example
+# ============================================================================
+#
+# This file shows EVERY field the platform supports, with comments explaining
+# each one. It is a reference — no real project would use all of these at once.
+#
+# STANDARD: every CloudGrid template ships its cloudgrid.yaml in THIS full form.
+# Uncomment ONLY the fields the archetype needs (always: name + services; plus
+# needs: for runtime apps). Leave everything else commented. Comments are
+# ignored by the parser, so the file deploys to exactly the active fields.
+#
+# Only two fields are required: name and services. Everything else is optional.
+# Full docs: docs/cloudgrid-yaml-reference.md
+# ============================================================================
+
+
+# ─── IDENTITY ───────────────────────────────────────────────────────────────
+
+# Entity slug (REQUIRED). 2-42 chars, lowercase alphanumeric + hyphens.
+# Must start and end with a letter or digit.
+# Becomes part of your public URL: <name>-<4hex>.<org>.cloudgrid.io
+name: saas-marketing
+
+# One-line summary. Max 280 chars. If omitted, Grid Brain auto-generates one.
+# description: Order processing API for the e-commerce platform
+
+# Single emoji or short text shown as the entity icon. Max 64 chars.
+# icon: "📦"
+
+# Entity type: 'app' (default) or 'agent'. An agent is an app with an agent: block.
+# kind: app
+
+
+# ─── NETWORKING ─────────────────────────────────────────────────────────────
+
+# Whether this entity serves public HTTP traffic.
+# true = public URL + Ingress (default). false = internal only.
+# expose: true
+
+# Additional domain names this entity serves on (the platform URL is always active).
+# custom_domains:
+#   - orders.example.com
+#   - shop.example.com
+
+
+# ─── HEALTH PROBE (entity-level override) ──────────────────────────────────
+
+# Override the default health check for the entire entity.
+# probe:
+#   path: /healthz               # HTTP path to probe (default: /).
+#   expected: "<500"             # '<500' (default), '200', '2xx'.
+
+
+# ─── DEPLOY NOTIFICATIONS ──────────────────────────────────────────────────
+
+# Slack notification to the org's default channel on deploy failure.
+# true = notify (default), false = silent.
+# notify: true
+
+
+# ─── SCALING ────────────────────────────────────────────────────────────────
+
+# Replica scaling intent.
+#   'auto'  — platform decides from the grid tier (default).
+#   'alert' — single-replica, emit a SPOF warning at plug time.
+#   1-10    — explicit replica count, clamped to the grid max.
+# scale: auto
+
+
+# ─── INFRASTRUCTURE NEEDS ──────────────────────────────────────────────────
+#
+# Declare infrastructure; the platform provisions it and injects connection
+# details as env vars. Nine needs: database, cache, kv, queue, pubsub, vector,
+# object_storage, disk, ai. Simplest form is `true`.
+#
+# needs:
+#   # database — MongoDB. Injects DATABASE_MONGODB_URL (+ legacy MONGODB_URL).
+#   #   true | pool | dedicated | { tier: external, secret: MY_DB }
+#   database: true
+#   # cache — Redis, LRU eviction (derived data). Injects CACHE_REDIS_URL (+ REDIS_URL).
+#   #   true | redis | { engine: external, secret: MY_REDIS_URL }
+#   cache: true
+#   # kv — Redis, no eviction (durable: flags, idempotency). Injects KV_REDIS_URL.
+#   kv: true
+#   # queue — Redis job-queue substrate (BullMQ). Injects QUEUE_REDIS_URL.
+#   queue: true
+#   # pubsub — Redis broadcast pub/sub. Injects PUBSUB_REDIS_URL.
+#   pubsub: true
+#   # vector — pgvector on Postgres. Injects VECTOR_PGVECTOR_URL (+ PGVECTOR_URL).
+#   #   true | pgvector | { engine: pgvector, dim: 1536 }
+#   vector: pgvector
+#   # object_storage — GCS bucket. Injects OBJECT_STORAGE_GCS_BUCKET, _GCS_REGION.
+#   #   true | { size: 10Gi }
+#   object_storage: true
+#   # disk — persistent FS mount (PVC). Injects DISK_PATH. Pins to 1 replica.
+#   #   true | { size: 1Gi, mount: /var/data }  (forbidden: /proc /sys /dev)
+#   disk: true
+#   # ai — AI Gateway via @cloudgrid-io/ai. Injects AI_GATEWAY_URL. true | false.
+#   ai: true
+
+
+# ─── INTER-ENTITY COMMUNICATION ────────────────────────────────────────────
+
+# Entities this app calls (outbound). Service-account token injected per pair.
+# calls:
+#   - org:atomic/billing-api
+
+# Inbound caller policy — who can call YOUR entity.
+# callers:
+#   policy: auto                 # 'auto' | 'manual' (default).
+#   scope: org                   # 'org' (default) | 'space' | 'explicit'.
+#   fallback: deny               # 'deny' (default) | 'warn'.
+#   # allowed_apps:              # required only when scope: explicit
+#   #   - org:atomic/frontend
+
+
+# ─── VAULT ──────────────────────────────────────────────────────────────────
+
+# Map org vault items to env vars. Keys UPPER_SNAKE_CASE; values = vault item keys.
+# vault:
+#   STRIPE_KEY: stripe-live-key
+#   SENDGRID_API_KEY: sendgrid-key
+
+
+# ─── CONNECTORS AND HOOKS ──────────────────────────────────────────────────
+
+# connectors:
+#   - id: team-slack
+#     target: org                # 'system' | 'org'.
+#     channel: "#deploys"
+# hooks:
+#   - on: deploy.failed          # release.published | deploy.failed | feedback.received | entity.created
+#     via: team-slack
+#     template: "Deploy failed for {entity_name}: {error}"
+#     channel: "#alerts"
+# triggers:
+#   - from: team-slack
+#     event: message
+#     channel: "#support"
+#     route: /webhooks/slack
+
+
+# ─── LOCAL DEVELOPMENT ──────────────────────────────────────────────────────
+
+# Config for `grid dev`. Redact fields in dev data snapshots.
+# dev:
+#   snapshot:
+#     mask:
+#       - users.email
+#       - users.phone
+
+
+# ─── AGENT METADATA ────────────────────────────────────────────────────────
+
+# An agent is an app with kind: agent (above) and an agent: block.
+# agent:
+#   purpose: Sync customer data from external CRM every night
+#   schedule: "0 2 * * *"
+#   trigger: webhook
+
+
+# ─── PRIVATE RESOURCE AUTO-DEPENDENCIES ────────────────────────────────────
+
+# When true (default), private resources are auto-injected as depends_on.
+# auto_depends_on_private_requires: true
+
+
+# ─── SERVICES (REQUIRED) ───────────────────────────────────────────────────
+#
+# At least one service is required. Key = service name (slug rules).
+# Types: node, nextjs, python, static, cron.
+#
+services:
+  web:
+    # type (REQUIRED): node | nextjs | python | static | cron
+    type: static
+    # HTTP route: '/' | '/api' | false (internal) | omitted (=false + warning).
+    # Only one service per entity can claim '/'.
+    path: /
+    # Container port (default 8080; read process.env.PORT). Not for cron.
+    # port: 3000
+    # nextjs only: base_image: distroless (default) | alpine
+    # base_image: distroless
+    # node only: lang: javascript (default) | typescript
+    # lang: typescript
+    # Custom source location (default services/<name>/). '.' = project root.
+    # source:
+    #   path: src/worker
+    # Health probe: false/omitted (TCP) | true (/health) | "/path" | {path,expected}
+    # health:
+    #   path: /api/health
+    #   expected: "200"
+    # Static runtime env vars (strings). Reserved: PORT, APP_NAME, SERVICE_NAME,
+    # NODE_ENV, MONGODB_URL, REDIS_URL, AI_GATEWAY_URL, N8N_WEBHOOK_URL, CLOUDGRID_*.
+    # env:
+    #   LOG_LEVEL: info
+    # Sibling services/private resources that must be Ready first (no cron, no cycles).
+    # depends_on:
+    #   - worker
+    # Per-service needs override (merges with app-level needs).
+    # needs:
+    #   queue: true
+    # Static-only build step:
+    # build:
+    #   command: npm run build
+    #   output: dist
+    #   env:
+    #     VITE_API_URL: https://api.example.com
+    # node_version: "22"          # static build step: '18'|'20'|'22'|'24' (quoted)
+    # Cron-only: schedule (REQUIRED), timezone (UTC|EST|PST), run (job | https URL)
+    # schedule: "0 9 * * 1"
+    # timezone: UTC
+    # run: job
+    # Verbose per-service persistence (prefer needs.disk):
+    # persist:
+    #   - name: scratch
+    #     path: /tmp/scratch
+    #     size: 500Mi
+
+
+# ============================================================================
+# NOTES
+# - NOT here: org:/entity_id: (→ .cloudgrid/link.json), secrets (→ grid secrets set),
+#   Dockerfile (platform generates from services.*.type).
+# - Deploy: grid plug   |   Local with grid resources: grid dev
+# - Full reference: docs/cloudgrid-yaml-reference.md  |  CLI: docs/cli-reference.md
+# ============================================================================

package/src/corpus/templates/saas-marketing/index.html

@@ -0,0 +1,212 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>{{PRODUCT_NAME}} — {{TAGLINE}}</title>
+<style>
+  :root {
+    --bg: #0b0f17;
+    --panel: #121826;
+    --panel-2: #0f1523;
+    --fg: #e8edf5;
+    --muted: #9aa7bd;
+    --accent: #5b8cff;
+    --accent-2: #7c6bff;
+    --border: #223049;
+    --ok: #34d399;
+  }
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  html { scroll-behavior: smooth; }
+  body {
+    background: var(--bg);
+    color: var(--fg);
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    line-height: 1.55;
+  }
+  a { color: inherit; }
+  section { padding: clamp(3rem, 8vw, 6rem) clamp(1.25rem, 6vw, 6rem); border-top: 1px solid var(--border); }
+  .container { max-width: 1080px; margin: 0 auto; }
+  nav {
+    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
+    padding: 1.1rem clamp(1.25rem, 6vw, 6rem);
+    border-bottom: 1px solid var(--border);
+    position: sticky; top: 0; background: rgba(11,15,23,0.85); backdrop-filter: blur(8px); z-index: 10;
+  }
+  nav .brand { font-weight: 600; letter-spacing: -0.01em; }
+  nav .links { display: flex; gap: 1.5rem; }
+  nav .links a { color: var(--muted); text-decoration: none; font-size: 0.95rem; }
+  nav .links a:hover { color: var(--fg); }
+  .btn {
+    display: inline-block; background: var(--accent); color: #fff; text-decoration: none;
+    padding: 0.75rem 1.4rem; border-radius: 10px; font-weight: 600; font-size: 0.95rem;
+    border: 1px solid transparent;
+  }
+  .btn:hover { filter: brightness(1.08); }
+  .btn.ghost { background: transparent; border-color: var(--border); color: var(--fg); }
+  @media (max-width: 640px) { nav .links { display: none; } }
+
+  .hero { text-align: center; display: grid; gap: 1.25rem; place-items: center; border-top: none; }
+  .hero .eyebrow { color: var(--accent); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.02em; }
+  .hero h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); line-height: 1.05; letter-spacing: -0.02em; max-width: 18ch; }
+  .hero p { font-size: clamp(1.05rem, 2.4vw, 1.4rem); color: var(--muted); max-width: 52ch; }
+  .hero .actions { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; margin-top: 0.5rem; }
+
+  .section-head { text-align: center; display: grid; gap: 0.75rem; place-items: center; margin-bottom: 2.5rem; }
+  .section-head h2 { font-size: clamp(1.8rem, 4.5vw, 2.6rem); letter-spacing: -0.01em; }
+  .section-head p { color: var(--muted); max-width: 48ch; }
+
+  .features { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
+  .feature { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 1.75rem; }
+  .feature .icon { width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); margin-bottom: 1rem; }
+  .feature h3 { font-size: 1.15rem; margin-bottom: 0.5rem; letter-spacing: -0.01em; }
+  .feature p { color: var(--muted); }
+
+  .pricing { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; }
+  .plan { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 2rem; display: grid; gap: 1rem; }
+  .plan.featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
+  .plan .badge { align-self: start; font-size: 0.75rem; color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 0.15rem 0.6rem; }
+  .plan h3 { font-size: 1.3rem; letter-spacing: -0.01em; }
+  .plan .price { font-size: 2.4rem; font-weight: 700; letter-spacing: -0.02em; }
+  .plan .price span { font-size: 1rem; color: var(--muted); font-weight: 400; }
+  .plan ul { list-style: none; display: grid; gap: 0.6rem; color: var(--muted); }
+  .plan li::before { content: "✓"; color: var(--ok); margin-right: 0.5rem; }
+
+  .testimonials { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
+  .quote { background: var(--panel-2); border: 1px solid var(--border); border-radius: 14px; padding: 1.75rem; }
+  .quote blockquote { font-size: 1.05rem; margin-bottom: 1rem; }
+  .quote .who { color: var(--muted); font-size: 0.9rem; }
+
+  .faq { display: grid; gap: 0.75rem; max-width: 760px; margin: 0 auto; }
+  details { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.25rem; }
+  details summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; }
+  details summary::-webkit-details-marker { display: none; }
+  details summary::after { content: "+"; color: var(--muted); }
+  details[open] summary::after { content: "–"; }
+  details p { color: var(--muted); margin-top: 0.75rem; }
+
+  .cta-band { text-align: center; display: grid; gap: 1.25rem; place-items: center; background: linear-gradient(135deg, rgba(91,140,255,0.12), rgba(124,107,255,0.12)); }
+  .cta-band h2 { font-size: clamp(1.8rem, 4.5vw, 3rem); letter-spacing: -0.01em; max-width: 22ch; }
+
+  footer { padding: 2.5rem clamp(1.25rem, 6vw, 6rem); border-top: 1px solid var(--border); color: var(--muted); font-size: 0.9rem; text-align: center; }
+</style>
+</head>
+<body>
+  <nav>
+    <span class="brand">{{PRODUCT_NAME}}</span>
+    <div class="links">
+      <a href="#features">Features</a>
+      <a href="#pricing">Pricing</a>
+      <a href="#faq">FAQ</a>
+    </div>
+    <a class="btn" href="{{CTA_HREF}}">{{CTA_LABEL}}</a>
+  </nav>
+
+  <section class="hero">
+    <span class="eyebrow">{{HERO_EYEBROW}}</span>
+    <h1>{{HERO_HEADLINE}}</h1>
+    <p>{{HERO_SUBHEAD}}</p>
+    <div class="actions">
+      <a class="btn" href="{{CTA_HREF}}">{{CTA_LABEL}}</a>
+      <a class="btn ghost" href="#features">See how it works</a>
+    </div>
+  </section>
+
+  <section id="features">
+    <div class="container">
+      <div class="section-head">
+        <h2>{{FEATURES_HEADLINE}}</h2>
+        <p>{{FEATURES_SUBHEAD}}</p>
+      </div>
+      <div class="features">
+        <!-- FEATURES_START -->
+        <div class="feature"><div class="icon"></div><h3>{{FEATURE_1_TITLE}}</h3><p>{{FEATURE_1_BODY}}</p></div>
+        <div class="feature"><div class="icon"></div><h3>{{FEATURE_2_TITLE}}</h3><p>{{FEATURE_2_BODY}}</p></div>
+        <div class="feature"><div class="icon"></div><h3>{{FEATURE_3_TITLE}}</h3><p>{{FEATURE_3_BODY}}</p></div>
+        <div class="feature"><div class="icon"></div><h3>{{FEATURE_4_TITLE}}</h3><p>{{FEATURE_4_BODY}}</p></div>
+        <!-- Add more <div class="feature">...</div> blocks as needed. -->
+        <!-- FEATURES_END -->
+      </div>
+    </div>
+  </section>
+
+  <section id="pricing">
+    <div class="container">
+      <div class="section-head">
+        <h2>{{PRICING_HEADLINE}}</h2>
+        <p>{{PRICING_SUBHEAD}}</p>
+      </div>
+      <div class="pricing">
+        <!-- PRICING_START -->
+        <div class="plan">
+          <h3>{{PLAN_1_NAME}}</h3>
+          <div class="price">{{PLAN_1_PRICE}}<span>/{{PLAN_1_PERIOD}}</span></div>
+          <ul>
+            <li>{{PLAN_1_FEATURE_1}}</li>
+            <li>{{PLAN_1_FEATURE_2}}</li>
+            <li>{{PLAN_1_FEATURE_3}}</li>
+          </ul>
+          <a class="btn ghost" href="{{CTA_HREF}}">{{PLAN_1_CTA}}</a>
+        </div>
+        <div class="plan featured">
+          <span class="badge">Most popular</span>
+          <h3>{{PLAN_2_NAME}}</h3>
+          <div class="price">{{PLAN_2_PRICE}}<span>/{{PLAN_2_PERIOD}}</span></div>
+          <ul>
+            <li>{{PLAN_2_FEATURE_1}}</li>
+            <li>{{PLAN_2_FEATURE_2}}</li>
+            <li>{{PLAN_2_FEATURE_3}}</li>
+          </ul>
+          <a class="btn" href="{{CTA_HREF}}">{{PLAN_2_CTA}}</a>
+        </div>
+        <div class="plan">
+          <h3>{{PLAN_3_NAME}}</h3>
+          <div class="price">{{PLAN_3_PRICE}}<span>/{{PLAN_3_PERIOD}}</span></div>
+          <ul>
+            <li>{{PLAN_3_FEATURE_1}}</li>
+            <li>{{PLAN_3_FEATURE_2}}</li>
+            <li>{{PLAN_3_FEATURE_3}}</li>
+          </ul>
+          <a class="btn ghost" href="{{CTA_HREF}}">{{PLAN_3_CTA}}</a>
+        </div>
+        <!-- PRICING_END -->
+      </div>
+    </div>
+  </section>
+
+  <section id="testimonials">
+    <div class="container">
+      <div class="section-head"><h2>{{TESTIMONIALS_HEADLINE}}</h2></div>
+      <div class="testimonials">
+        <!-- TESTIMONIALS_START -->
+        <div class="quote"><blockquote>{{QUOTE_1}}</blockquote><div class="who">{{QUOTE_1_WHO}}</div></div>
+        <div class="quote"><blockquote>{{QUOTE_2}}</blockquote><div class="who">{{QUOTE_2_WHO}}</div></div>
+        <div class="quote"><blockquote>{{QUOTE_3}}</blockquote><div class="who">{{QUOTE_3_WHO}}</div></div>
+        <!-- TESTIMONIALS_END -->
+      </div>
+    </div>
+  </section>
+
+  <section id="faq">
+    <div class="container">
+      <div class="section-head"><h2>{{FAQ_HEADLINE}}</h2></div>
+      <div class="faq">
+        <!-- FAQ_START -->
+        <details><summary>{{FAQ_1_Q}}</summary><p>{{FAQ_1_A}}</p></details>
+        <details><summary>{{FAQ_2_Q}}</summary><p>{{FAQ_2_A}}</p></details>
+        <details><summary>{{FAQ_3_Q}}</summary><p>{{FAQ_3_A}}</p></details>
+        <details><summary>{{FAQ_4_Q}}</summary><p>{{FAQ_4_A}}</p></details>
+        <!-- FAQ_END -->
+      </div>
+    </div>
+  </section>
+
+  <section class="cta-band">
+    <h2>{{CLOSING_HEADLINE}}</h2>
+    <a class="btn" href="{{CTA_HREF}}">{{CTA_LABEL}}</a>
+  </section>
+
+  <footer>{{FOOTER_TEXT}}</footer>
+</body>
+</html>