[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-111-Replicate-Blaze-Gallery":3},"# SYSTEM PROMPT — BUILD THE \"REPLICATE BLAZE GALLERY\" LANDING PAGE\n\n**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Produce a complete, production-quality landing page on the first attempt — output the final code immediately, fully resolved, with no follow-up questions.\n\n**Project:** `blaze` — a fictional AI model playground and developer community (Replicate-inspired, 2024–2026 era). Output category: **Dark Tech & Cyber** — deliver the dark-tech tone through near-black surfaces (#202020 \u002F GitHub Dark #24292e), terminal-style monospace details, and inverse dark panels inside a light-first page.\n\n**Required sections (in this exact order):** Hero (with AI model gallery strip), Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.\n\n**Design DNA (non-negotiable):**\n\n- Explosive hero gradient: orange → red → magenta → pink, anchored on **#ea2804**.\n- Massive display typography up to **128px**, weight **700–900**.\n- **Exclusively pill geometry (`border-radius: 9999px`) on EVERYTHING** — buttons, cards, badges, inputs, avatars, code panels, images, and the final CTA panel.\n- High-contrast near-black **#202020** and white palette.\n- AI model gallery with generated imagery.\n- Dotted-underline links.\n- Green status badges (**#2b9a66**).\n- Closing manifesto — **\"imagine what you can build\"** — rendered up to 128px, lowercase.\n- Lowercase tags, badges, buttons, and nav links (`text-transform: lowercase`).\n- All user-facing copy in **English**.\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n### 1.1 CSS-First Architecture & Zero Inline CSS\n\n- **No Inline CSS:** The `style=\"...\"` attribute is forbidden anywhere in the HTML. Zero exceptions.\n- **Class\u002FID Selectors Only:** Every color, layout rule, state, and effect lives in `style.css`, targeted via class or ID selectors.\n- **Minimal HTML Modifications:** HTML stays clean, semantic (header\u002Fnav\u002Fmain\u002Fsection\u002Ffooter, h1–h3 hierarchy, button\u002Fa\u002Fimg with alt text), and visually agnostic — re-theming the entire site must only require editing `style.css`.\n- **No Inline JS:** No `onclick`\u002F`on*` attributes; all behavior is bound with `addEventListener` inside `script.js`.\n\n### 1.2 CSS Variables & Theme Tokens\n\nStore every visual token in `:root` (light default) and override under `.dark` (and `@media (prefers-color-scheme: dark)` for the no-JS fallback). Required token set:\n\n```css\n:root {\n  \u002F* color *\u002F\n  --primary: #ea2804;            \u002F* brand red — large text, borders, fills, UI *\u002F\n  --primary-strong: #c11a00;     \u002F* AA-safe red for small text on light bg *\u002F\n  --secondary: #dd4425;\n  --bg-primary: #fefefe;         \u002F* page background *\u002F\n  --bg-secondary: #ffffff;       \u002F* high-contrast surfaces: cards, pills *\u002F\n  --bg-inverse: #202020;         \u002F* dark panels: code, final CTA, footer *\u002F\n  --bg-inverse-2: #24292e;      \u002F* github dark — terminal\u002Fcode surfaces *\u002F\n  --text-primary: #202020;\n  --text-secondary: #646464;\n  --text-inverse: #ffffff;\n  --text-success: #1e7f52;       \u002F* AA-safe green for small text on light bg *\u002F\n  --status-green: #2b9a66;      \u002F* status dots, badges, icons, borders *\u002F\n  --text-error: #c11a00;\n  --border-default: rgba(32, 32, 32, 0.14);\n  --border-error: #ea2804;\n  --border-success: #2b9a66;\n  --silver: #bbbbbb;\n\n  \u002F* explosive gradient — large display text only (all stops ≥ 3:1 on both themes) *\u002F\n  --gradient-blaze: linear-gradient(92deg, #ea2804 0%, #dd4425 32%, #d6168a 66%, #ff4d9d 100%);\n\n  \u002F* radius — the all-pill mandate collapses every radius token to pill *\u002F\n  --radius-sm: 9999px; --radius-md: 9999px; --radius-lg: 9999px; --radius-pill: 9999px;\n\n  \u002F* elevation *\u002F\n  --shadow-sm: 0 2px 10px rgba(32, 32, 32, 0.08);\n  --shadow-md: 0 12px 32px rgba(32, 32, 32, 0.14);\n  --shadow-blaze: 0 16px 48px rgba(234, 40, 4, 0.28);   \u002F* gradient glow *\u002F\n\n  \u002F* motion & space *\u002F\n  --spacing-gap: 1.5rem;\n  --transition-fast: 140ms; --transition-normal: 300ms;\n  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);\n\n  \u002F* stacking *\u002F\n  --z-dropdown: 100; --z-modal: 1000; --z-toast: 1100;\n\n  \u002F* type *\u002F\n  --font-display: \"Archivo\", system-ui, sans-serif;   \u002F* weights 700–900 *\u002F\n  --font-base: \"Inter\", system-ui, sans-serif;\n  --font-code: \"JetBrains Mono\", monospace;\n  --size-display-max: 128px;   \u002F* no text may exceed this *\u002F\n}\n```\n\n- **Dark overrides (`.dark`):** `--bg-primary: #202020; --bg-secondary: #24292e; --bg-inverse: #fefefe; --bg-inverse-2: #17191d; --text-primary: #fefefe; --text-secondary: #bbbbbb; --text-inverse: #202020; --text-success: #2b9a66; --text-error: #ff5a3c; --primary-strong: #ff5a3c; --border-default: rgba(255,255,255,0.16); --border-error: #ff5a3c;` plus deeper shadows (`rgba(0,0,0,0.4\u002F0.5)`).\n- **Contrast Pairing:** Every light background token pairs with a dark text token and every dark background token pairs with a light text token — enforced in both themes, no exceptions.\n- **Contrast-safe reds\u002Fgreens:** `#ea2804` and `#2b9a66` are reserved for large text (≥ 24px \u002F 18.66px bold), icons, borders, and fills; small red\u002Fgreen text uses `--primary-strong` \u002F `--text-success` per theme as defined above.\n- **Exception (pure white):** The source palette explicitly brands `#ffffff` — keep it as the `--bg-secondary` surface token, while the page background stays `#fefefe` per the no-pure-white-default rule.\n- **Pill scope:** The 9999px mandate applies to every component, control, card, badge, image, and panel. Full-bleed page surfaces (the canvas, header bar, footer band) are the only elements exempt; any inset container within them is a pill.\n\n### 1.3 Mandatory Dark Mode Support\n\n- **Implementation:** Dark tokens must exist under both a `.dark` class on `\u003Chtml>` and `@media (prefers-color-scheme: dark)` (applied when no class is set). Background\u002Ftext variables must flip seamlessly with zero HTML restructuring.\n- **Persistence:** `script.js` reads `localStorage` (key `\"blaze-theme\"`); if absent, fall back to `prefers-color-scheme` on first visit. A visible pill icon-button toggle in the header (Material Symbols `light_mode` \u002F `dark_mode`) must reflect state via `aria-pressed` and a descriptive `aria-label` (\"toggle dark mode\").\n- **Exception (source spec):** The source spec marks dark mode \"Not Recommended\" — it remains mandatory here; ship light mode as the default presentation and dark mode as a fully supported, persisted, toggleable theme.\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n\n- **Flexbox only** for all layout structure (`display: flex` \u002F grid only where a card grid genuinely needs it — otherwise flex with `flex-wrap`).\n- **Default Alignment Rule:** Every flex container defaults to `align-items: center` unless an explicitly justified exception is documented in a CSS comment.\n- **Mobile-first:** Rows collapse to columns below ~768px; no horizontal page overflow at any viewport (the hero gallery strip may use intentional, contained `overflow-x: auto` + `scroll-snap`).\n- **Fluid display type:** All 128px display text uses `clamp()` (e.g., `clamp(2.75rem, 9vw, 128px)`) so it never overflows.\n\n### 1.5 Framework Default & Tailwind CSS Integration\n\n- Use clean, modern custom CSS in `style.css` (custom properties, flexbox, `clamp()`), optionally organized with `@layer` — no build step. If you include Tailwind, every utility must map back to the CSS variables above and to generic reusable classes (`.btn`, `.card`, `.input-group`, `.badge`, `.tag`).\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n\n- **Text:** Load via Google Fonts `\u003Clink>` in `\u003Chead>`: **Archivo** (weights 700, 800, 900) → `--font-display`; **Inter** (400, 500, 600, 700) → `--font-base`; **JetBrains Mono** (400, 500, 700) → `--font-code`. Fallback stacks include `system-ui, sans-serif` \u002F `monospace` per the source spec.\n- **Icons:** Google Material Symbols only (via `\u003Clink>` \u002F `@import`). Raw inline SVGs and local icon files are forbidden — including for the logo (the logo is a text wordmark: `blaze` in the display font, lowercase).\n- **Exception (source fonts):** The source spec names `rb-freigeist` and `basier-square`, which are not distributed on Google Fonts — substitute the closest Google Fonts equivalents, Archivo (display) and Inter (body); JetBrains Mono is retained for code.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n### 2.1 Button Component Requirements\n\nAll variants: pill shape, flex layout (`display: flex; align-items: center; justify-content: center; gap: 0.5rem;`), minimum touch target 44×44px, lowercase labels, transitions on all state changes.\n\n- **Variants:** `.btn-primary` (solid `--bg-inverse` fill with `--text-inverse` text — auto-inverts per theme), `.btn-gradient` (`--gradient-blaze` fill, white text, hero + featured-pricing CTA), `.btn-secondary` (transparent, 1.5px border, text `--text-primary`), `.btn-danger` (solid `--primary` fill, white text, warning icon — visually distinct in both themes), `.btn-ghost`, `.btn-icon` (44×44 circle for close\u002Fmenu\u002Fcopy\u002Ftheme toggle).\n- **Hover:** brightness lift and\u002For `--shadow-md`; `cursor: pointer`.\n- **Focus:** distinct `:focus-visible` ring (2px `--primary` outline, 2px offset) for keyboard navigation.\n- **Active\u002FPressed:** `transform: scale(0.97)`.\n- **Loading (`.is-loading`):** disables interaction, prevents double-clicks, renders a CSS spinner or rotating Material `progress` icon without changing button dimensions; JS sets `aria-busy=\"true\"`.\n- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n- **Success\u002FError:** `.is-success` swaps in a green check icon + short label (e.g., \"copied\") using `--text-success`; `.is-error` uses `--text-error` — always icon + text, never color alone.\n\n### 2.2 Card Component Requirements\n\n`.card` base: pill geometry, `--bg-secondary` fill, 1.5px `--border-default`, generous padding (extra vertical padding so pill ends never clip content), flex column, `gap: var(--spacing-gap)`.\n\n- **Default:** subtle border + `--shadow-sm`.\n- **Hover:** `transform: translateY(-2px)` + `--shadow-md` + border shift toward `--primary`.\n- **Focus-within:** card border highlights `--primary` when a child link\u002Fbutton receives focus.\n- **Loading (Skeleton):** `.skeleton` shimmer keyframes (gradient sweep) on pill-shaped blocks, sized to the final content so there is zero layout jump — used in the modal loading state.\n- **Empty State:** `.card--empty` pattern — centered Material icon inside a gradient-tinted circle plus clear guidance text.\n- **Subtypes:** `.card--feature`, `.card--step`, `.card--testimonial`, `.card--gallery`, `.card--pricing`, `.card--pricing--featured` (2px gradient border via the padding-box\u002Fborder-box double-background technique, \"most popular\" gradient pill badge, `--shadow-blaze`).\n\n### 2.3 Form & Input Requirements\n\n- **Structure:** `.input-group` — flex column, `gap: 0.5rem`, wrapping a visible label, a pill `.input` (min-height 48px, `padding-inline: 1.5rem` so text clears the curve), and a dedicated error container (`\u003Cp class=\"input__error\">` with `aria-live=\"polite\"`).\n- **States (all CSS-class\u002Fselector driven):** empty, focused (border `--primary` + 3px red-tinted ring, never removing the ring without replacement), filled, valid (`--border-success` + inline check icon), invalid (`--border-error` + error icon + text message in `--text-error` — icon and message required, never color alone), disabled (`opacity: 0.5`, `cursor: not-allowed`), read-only (tinted background, `--silver` text).\n- **Dark surfaces:** the Final CTA input group sits on the dark panel — white text, `--bg-inverse-2` fill, light borders, per the pairing rule.\n\n### 2.4 Modal \u002F Popup Requirements\n\nTriggered by gallery cards (\"open model details\").\n\n- **States:** opening (fade + `scale(0.96 → 1)`, ~200ms), open, loading (skeleton shimmer on image\u002Ftitle for ~600ms before content renders), success\u002Ferror (inline feedback), closing (reverse animation, then hidden).\n- **UX:** fixed backdrop (`rgba(32,32,32,0.6)` + `backdrop-filter: blur(4px)`, `z-index: var(--z-modal)`); dialog centered via flex (`align-items: center; justify-content: center`); pill panel, max-width ~640px, max-height 85vh, overflow auto; `.btn-icon` close with Material `close` icon and `aria-label=\"close dialog\"`; `role=\"dialog\"`, `aria-modal=\"true\"`, `aria-labelledby`; keyboard focus trap (Tab\u002FShift+Tab cycled by JS); close via `Esc` and overlay click; focus returns to the trigger; body scroll locked while open; all animation disabled under `prefers-reduced-motion`.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by Default:** fluid `clamp()` type scale (display max 128px; h2 ~`clamp(2rem, 5vw, 56px)`), wrapping flex layouts, zero horizontal overflow.\n- **Smooth Animations:** `transition: var(--transition-normal)` on every state change; hero gradient blobs may drift slowly (20s+ loop); everything motion-related is disabled under `prefers-reduced-motion`.\n- **Accessibility (a11y):** body text ≥ 4.5:1 and large display text ≥ 3:1 in both themes (the derived tokens in 1.2 guarantee this); never color-only state; semantic HTML5 with one `h1` and logical heading order; ARIA roles\u002Flabels on the toggle, accordion, modal, and menu; logical DOM\u002Ffocus order; full keyboard operability; a visually hidden \"skip to content\" link; `aria-live` regions for form errors, toasts, and loading states; `::selection` styled with `--primary` and white text.\n- **Dotted-Underline Links:** `text-decoration: underline dotted; text-decoration-thickness: 1.5px; text-underline-offset: 4px;` — hover\u002Ffocus shifts color to `--primary` and the underline to solid.\n- **Status Badges:** pill, `--status-green` dot + lowercase text label (\"live\", \"running\", \"all systems operational\") — the text label is mandatory.\n- **Mandatory Visual Feedback:** every click, hover, focus, and submission produces a visible state change.\n- **Destructive Actions:** `.btn-danger` must be defined and visually distinct in both themes (used or not).\n- **Optional scroll reveals:** elements are fully visible by default; JS may add a one-time subtle entrance animation only when `prefers-reduced-motion` is unset — content must never remain invisible if JS fails.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n- **File Structure:** three separate files — `index.html`, `style.css`, `script.js`. No inline `\u003Cscript>` blocks beyond the single deferred entry point (`\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>`). No inline styles. No inline SVGs.\n- **Naming Convention:** BEM only, everywhere — `.card__title`, `.card--pricing--featured`, `.hero__title`, `.nav__link`, `.faq__question`. Never mix conventions.\n- **Head requirements:** `lang=\"en\"`, viewport meta, title and meta description (\"blaze — run any ai model with a single line of code\"), Google Fonts links, Material Symbols link.\n- **Images:** gallery\u002Fimagery via seeded picsum URLs (`https:\u002F\u002Fpicsum.photos\u002Fseed\u002F\u003Cseed>\u002F\u003Cw>\u002F\u003Ch>`) with descriptive `alt` text — the only permitted placeholder, since imagery was genuinely unspecified.\n- **Copy:** all user-facing copy in English, real and specific (see Section 5) — lorem ipsum is prohibited. No emoji. Tags, badges, buttons, nav links, and the manifesto are lowercase; body copy and FAQ answers are sentence case.\n- **script.js scope:** theme toggle + persistence, mobile menu, accordion, modal (open\u002Fclose\u002Ftrap\u002FEsc), gallery modal population, copy-to-clipboard with success feedback, email form validation with `aria-live` errors, toast region — all via `addEventListener`.\n\n---\n\n## 5. PAGE BLUEPRINT — SECTION-BY-SECTION SPECIFICATIONS\n\n**5.0 Global chrome:** visually hidden skip link; sticky header (light surface, bottom border, backdrop blur) with the `blaze` wordmark, lowercase dotted-underline nav (\"models\", \"pricing\", \"docs\", \"faq\"), the theme toggle (`.btn-icon`), and a compact `.btn-primary` \"start building\". On mobile, nav links move into a pill dropdown panel (`--z-dropdown`) toggled by a `.btn-icon` menu button (Esc + click-outside close).\n\n**5.1 Hero:** explosive gradient treatment — large blurred radial blobs (orange\u002Fred\u002Fmagenta\u002Fpink, anchored #ea2804) radiating behind the content, decorative and `aria-hidden`. Content: green-dot status pill (\"20,000+ models live\"); `h1` \"run any model. ship anything.\" at `clamp(2.75rem, 9vw, 128px)`, weight 800, tight leading, with \"ship anything.\" gradient-clipped via `background-clip: text` (display-size text only); supporting sub-copy; CTA row — `.btn-gradient` \"start building\" (Material `arrow_forward`) + `.btn-secondary` \"browse the gallery\". Below: a pill terminal card (`--bg-inverse-2`, JetBrains Mono, palette-tinted syntax colors) showing `pip install blaze` \u002F `blaze run flux-schnell --input photo.png`, with a `.btn-icon` copy button that flips to `.is-success` (\"copied\") and fires a toast. Below that: the **AI model gallery strip** — labeled \"trending this week\", horizontally scrollable (`scroll-snap`), 5–6 `.card--gallery` items, each a focusable `\u003Cbutton>` with a pill-cropped picsum image, a lowercase mono model name (\"flux-schnell\", \"black-forest-xl\", \"sdxl-lightning\", \"kling-video\", \"whisper-v3\", \"llama-vision\"), and a green \"live\" badge; hover lifts the card and scales the image; click opens the modal (5.9 pattern).\n\n**5.2 Features (3 cards):** section tag \"features\" + `h2` \"everything you need to ship ai\". Three `.card--feature` items, each with a gradient-tinted pill icon chip (Material `bolt` \u002F `tune` \u002F `rocket_launch`), a lowercase tag, an `h3`, and copy: \"one-line api\" (call any model with a single request — no gpu setup, no docker, no yaml), \"fine-tune in minutes\" (upload a dataset, get a custom model before your coffee compiles), \"deploy anywhere\" (turn any run into an autoscaling production endpoint). Full card state set from 2.2.\n\n**5.3 How It Works (3 steps):** tag \"how it works\" + `h2` \"from prompt to production in three steps\". Flex row (column on mobile) joined by a decorative dotted connector. Each `.card--step`: oversized gradient-clipped numeral (\"01\", \"02\", \"03\"), `h3`, copy — \"pick a model\" (browse the gallery or search 20,000+ community models), \"run it\" (with a mono code line: `blaze run flux-schnell --input prompt.txt`), \"ship it\" (push to a scalable endpoint with one flag: `--deploy`).\n\n**5.4 Testimonials:** tag \"testimonials\" + `h2` \"the community says it best\". Three `.card--testimonial` items: pill-cropped picsum avatar, specific quote, name + role, and a dotted-underline handle link (\"@mayabuilds\", \"@jonasdev\", \"@samortiz\"). Quotes reference concrete outcomes (e.g., replaced a quarter of infra work with one api key; fine-tuning went from ssh and prayer to a form and a coffee; render pipeline 40s → 2s, costs down 80%).\n\n**5.5 Pricing (3 tiers):** tag \"pricing\" + `h2` \"pricing that scales with your curiosity\". Three `.card--pricing` items: **hobby** — $0\u002Fmo, \"for weekend experiments\" (10,000 free runs, community models, browser playground, api access; `.btn-secondary` \"start free\"); **pro** — $19\u002Fmo, `.card--pricing--featured` with gradient border + \"most popular\" gradient badge (unlimited runs, fine-tuning, private models, priority gpu queue, production endpoints; `.btn-gradient` \"go pro\"); **team** — $99\u002Fmo, \"for serious deployments\" (everything in pro, sso + audit logs, usage analytics, dedicated support; `.btn-primary` \"contact us\"). Feature lists use Material `check` icons in `--status-green`.\n\n**5.6 FAQ:** tag \"faq\" + `h2` \"questions, answered\". Five accessible accordion items (`\u003Cbutton class=\"faq__question\" aria-expanded=\"false\" aria-controls>` + region, rotating Material `expand_more` chevron, CSS height animation): what is blaze?; do i need my own gpu?; can i use models in commercial products?; how does pricing work after the free tier?; can i publish my own model to the gallery?\n\n**5.7 Final CTA:** a giant pill panel (`--bg-inverse` fill, internal gradient glow blobs, mega vertical padding) containing the closing manifesto — **\"imagine what you can build\"** — lowercase, `clamp(2.75rem, 9vw, 128px)`, weight 800, white with \"you can build\" gradient-clipped. Below it, the email capture `.input-group` (label \"get early access to new models\", pill input, `.btn-gradient` \"join the waitlist\"): on submit the button enters `.is-loading` (~800ms simulated), then `.is-success` (\"you're in\") with a toast; an invalid email triggers the full invalid state with icon + `aria-live` message.\n\n**5.8 Footer:** `--bg-inverse` band. Top row: `blaze` wordmark, one-liner \"the community playground for open-source ai.\", green \"all systems operational\" badge. Four lowercase dotted-underline link columns — product (models, pricing, docs, changelog), resources (blog, community, github, status), company (about, careers, contact, press), legal (privacy, terms, security, licenses) — `href=\"#\"` permitted for these secondary links. Bottom row: \"© 2025 blaze labs\" + text social links (github, x, discord).\n\n**5.9 Toast:** fixed bottom-center pill, `--z-toast`, `aria-live=\"polite\"`, auto-dismiss ~2.5s, slide-up entrance, reduced-motion aware — used for copy confirmation and form success.\n\nGenerate the complete `index.html`, `style.css`, and `script.js` now, in a single pass, conforming to every rule above.\n",1791954981701]