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 Footer section for a modern website: "Footer 05 Kelo". Purpose Serve as the closing block for an AI agents or automation SaaS site, combining navigation with a newsletter capture so the last interaction on the page can still convert a visitor. Layout & content - A multi-column link layout organising the site's destinations. - A newsletter signup with an email field and a submit button. - A brand wordmark identifying the product. - Social icons and a small legal or copyright line. Visual direction Dark, minimal and modern, with a quiet type scale, clear column separation and an uncluttered signup row that reads as the primary action in the footer. Interaction & motion Animate the columns in on scroll, and give the signup field and button a clear focus and hover state so the capture form feels responsive. Stack - React functional component + Tailwind CSS. - framer-motion for the entrance 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". ``` --- *LandingPagePrompts Prompt Library

# Footer 05 Kelo > **Category:** Section > **Effect:** An AI footer with multi-column link layout, newsletter signup, social icons, and brand wordmark. Suited 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-footer-05-kelo/index.html`](../public/demos/jiro-footer-05-kelo/index.html) — generated by the model above from the prompt below, with no human edits to the markup. ## ✅ Verification _Pending — this block is written by `tools/verify.mjs` after the build run._ ## 📋 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 "Footer" block called "Footer 05 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 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 Footer section for a modern website: "Footer 05 Kelo". Purpose Serve as the closing block for an AI agents or automation SaaS site, combining navigation with a newsletter capture so the last interaction on the page can still convert a visitor. Layout & content - A multi-column link layout organising the site's destinations. - A newsletter signup with an email field and a submit button. - A brand wordmark identifying the product. - Social icons and a small legal or copyright line. Visual direction Dark, minimal and modern, with a quiet type scale, clear column separation and an uncluttered signup row that reads as the primary action in the footer. Interaction & motion Animate the columns in on scroll, and give the signup field and button a clear focus and hover state so the capture form feels responsive. Stack - React functional component + Tailwind CSS. - framer-motion for the entrance 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". ``` --- *LandingPagePrompts Prompt Library — free, verified, model-attributed.*