# Pricing 06 Kelo

> **Category:** Section
> **Effect:** An AI pricing section with tier cards, usage-based pricing display, and automation-focused feature comparison. Built for AI agents, automation SaaS, and intelligent platforms.
> **Platform:** cmd-code (`openrouter`)
> **Model:** `stealth/space-bunny-alpha` — Space Bunny Alpha (stealth/space-bunny-alpha)
> **License:** Free / MIT — copy, paste, ship.
> **Self-contained:** yes — one `index.html`, no build step, no external media.

---

## 🎬 Live demo

Open [`public/demos/jiro-pricing-06-kelo/index.html`](../public/demos/jiro-pricing-06-kelo/index.html) — generated by the model
above from the prompt below, with no human edits to the markup.

## ✅ Verification

<!-- VERIFICATION:START -->
_Pending — this block is written by `tools/verify.mjs` after the build run._
<!-- VERIFICATION:END -->

## 📋 Prompt

```text
ADAPT THIS JIRO SECTION PROMPT INTO A STANDALONE VANILLA PAGE.

The text below is a real prompt from another prompt gallery. It describes a website
SECTION — a "Pricing" block called "Pricing 06 Kelo". It is written for React + Tailwind +
framer-motion. You are NOT building that. You are rebuilding the SAME section, with the
same intent, structure and content, under our contract:

  · ONE self-contained index.html. No React, no Tailwind, no framer-motion, no lucide-react,
    no build step, no dependencies at all.
  · The section is the whole page. Put it on a page with minimal chrome: a slim header with
    a wordmark and two nav links, then the section as the dominant content, then a one-line
    footer. Nothing else. No hero, no pricing, no extra sections.
  · Honour the section's OWN structure and content faithfully. If it asks for a heading, a
    grid of cards, a mockup panel and badges, build exactly those things. Do not add or
    remove parts.

  · NO INVENTED FACTS. This is the rule reviewers fail these pages on most often:
      - Never invent statistics. If the brief implies a stats row but supplies no numbers,
        render the figures as em-dashes or "XX" — NEVER as plausible-looking values like
        100 / 200 / 24 / 4.2M. A number that looks real is a fabricated claim.
      - Never invent a brand name. If the brief's title contains a codename ("About Us 02
        Orbit", "Pricing 01 Kelo"), that is a FILE name, not a company. Use a neutral
        wordmark such as "Studio" or "Company" — do not promote the codename into a brand,
        and do not put it in the <title> or a © line.
      - Never invent testimonials, prices, customer names, awards, dates or copyright years.
        A © line should read "© Company" with no year, or be omitted.
      - Do not assert a stat category the brief never supplied (no "Industry Awards").
      - Nav and footer links must point at real anchors inside this page, or be plain text.
        Never ship a link to a section that does not exist.

  · NO SCAFFOLDING IN THE OUTPUT. Every visible string must read as finished site copy.
    Never render text like "Neutral placeholder text for the descriptive paragraph.",
    "One-line footer text placeholder.", "Wordmark", or any sentence that addresses the
    reviewer instead of a visitor. If the brief gives no copy, write short neutral marketing
    copy that a real site could ship — never a description of what the copy would be.
    Do not rephrase the brief's own "Purpose" paragraph as page copy.

  · Write copy for the audience the brief names. If it is a personal brand or freelancer,
    do not use agency voice ("our clients", "the brands we serve").

  · Do not add perpetual motion the brief did not ask for. If the brief says motion happens
    on scroll entry, do not also run an infinite rAF loop.
  · Rebuild every animation it asks for with CSS or a small rAF loop. Nothing may be
    imported.
  · No external media: no images, no video, no icon fonts. Any icon or illustration must be
    inline SVG you draw yourself. Any "product mockup" or "screenshot" must be built from
    CSS/SVG shapes, not an image.
  · Responsive at 390 / 768 / 1440 / 1920 with no horizontal overflow.
  · Accessibility: exactly one <h1>, real header/main/footer landmarks, every visible
    control has an accessible name, visible :focus-visible ring.
  · A full prefers-reduced-motion: reduce block that leaves the page static and readable.
  · window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] } —
    set ready after first paint, increment frames inside the rAF loop, push effect names,
    and push any window 'error' into errors.
  · Under 90 KB. Zero console output. No uncaught exceptions.

--- THE JIRO SECTION PROMPT (the brief you are adapting) ---

Build a Pricing section for a modern website: "Pricing 06 Kelo".

Purpose
This section prices an AI agent or automation platform for buyers who expect consumption to vary. It should present tiers while making usage-based pricing legible rather than confusing.

Layout & content
- Tier cards for the available plans.
- A usage-based pricing display showing how consumption is metered.
- An automation-focused feature comparison.
- A clear action on each card.

Visual direction
Light, minimal and modern, with calm spacing and disciplined alignment. The usage display should be visually distinct from the fixed tier pricing so the two models never blur together.

Interaction & motion
Animate card entrances and any pricing state changes with framer-motion, and use lucide-react for feature icons.

Stack
- React functional component + Tailwind CSS.
- framer-motion for animation; lucide-react for icons.

Constraints
- Match the described layout and content faithfully.
- Do not invent statistics, testimonials, prices, brand names or section counts.
- Use neutral placeholder copy where the description supplies no real text.

--- END JIRO PROMPT ---

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".
```

---

*LandingPagePrompts Prompt Library — free, verified, model-attributed.*