Integration 02 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 "Integration" block called "Integration 02 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 an Integration section for a modern website: "Integration 02 Kelo".

Purpose
Reassure technical buyers that the AI platform connects to the tools they already run, and show how those connections feed an automated workflow. Built for AI platforms, automation tools and intelligent integrations.

Layout & content
- A section heading and developer-focused supporting copy.
- A logo grid of integration partners, rendered as neutral placeholder marks rather than real brand names.
- Automation workflow visuals showing data moving between connected tools.
- A short line inviting developers to connect or build further.

Visual direction
Light and minimal: an even logo grid with consistent mark sizing, quiet borders, and enough whitespace that the grid reads as a system rather than a list.

Interaction & motion
Framer Motion drives a marquee that scrolls the logo row continuously, slowing or pausing on hover, plus a reveal for the workflow visuals.

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

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