Features 01 Kelo

The exact prompt

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 "Features" block called "Features 01 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 Features section for a modern website: "Features 01 Kelo".

Purpose
Carry the flagship feature story for an AI platform, pairing a large product preview with the capabilities that matter and a route to conversion. Designed for AI platforms, automation tools and intelligent software launches.

Layout & content
- A section header with an eyebrow, a headline naming the core capability, and one supporting line.
- A large product preview occupying the dominant layout position, shown as an interface rather than stock imagery.
- Capability badges highlighting individual strengths, each with a short label and one-line detail.
- A short paragraph explaining what the preview demonstrates.
- Conversion call to action buttons to start or request a demo.

Visual direction
Light, modern and minimal: a strict grid, confident type, and the product preview as focal point. Capability badges stay secondary to the preview and headline.

Interaction & motion
The preview and badges reveal on scroll with a light stagger, and badges respond on hover via Framer Motion. Icons come from lucide-react.

Stack
- React functional component + Tailwind CSS.
- framer-motion
- lucide-react

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

Acceptance criteria (15)

1. the section's own structure is present (headings, cards, panels as the brief describes)
2. exactly one <h1> and real header/main/footer landmarks
3. no external media: no img src, no video, no remote URL
4. no horizontal overflow at 390 / 768 / 1440
5. prefers-reduced-motion leaves the page static and readable
6. window.__DEMO__.ready becomes true within 5s
7. window.__DEMO__.frames advances (>= 20 frames in 1.2s)
8. window.__DEMO__.errors is empty
9. zero console errors and zero page errors
10. zero failed network requests
11. exactly one <h1> with non-empty text
12. header, main, footer landmarks present
13. no horizontal overflow at 390 / 768 / 1440 widths
14. no horizontal overflow after 2s of animation
15. prefers-reduced-motion: reduce leaves the page usable and errors empty