[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-078-Terminal-Green":3},"# SYSTEM PROMPT — BUILD THE \"TERMINAL GREEN\" LANDING PAGE (Dark Tech & Cyber)\n\n**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-quality, single-page landing page on the first attempt. The design language is a developer-focused, hacker-aesthetic, monospace terminal interface — every element must feel like a CLI session.\n\n---\n\n## 0. PROJECT BRIEF & THEME DIRECTION\n\n**Theme:** Terminal Green — Developer-Focused, Hacker Aesthetic, Monospace.\n**Keywords:** terminal, green, hacker, developer, monospace, JetBrains Mono, scan lines, blinking cursor, code syntax, GitHub Dark, CLI.\n**Era:** 2024–2026 developer aesthetic. **Output category:** Dark Tech & Cyber.\n\n**Visual direction:** GitHub Dark background (`#0d1117`) with Terminal Green (`#39d353`) as the primary accent. JetBrains Mono is the ONLY typeface — monospace everywhere: headings, body, buttons, forms, pricing, footer. A CSS scan-lines overlay covers the full viewport. A blinking block cursor terminates the hero headline. Code blocks use GitHub-Dark syntax coloring. Panels and cards use terminal-style 1px borders. The entire page reads like a live terminal.\n\n**Product & copy:** Invent one coherent fictional product — a developer CLI tool (e.g., a CLI-first deploy\u002Fsetup tool) — and write all real, themed copy for it. Voice: confident, terse, CLI-flavored (prompts, flags, command metaphors) but always clear and readable. **All user-facing copy must be written in English.** No lorem ipsum.\n\n**Sections to build (in order):** sticky header\u002Fnav → Hero → Features (3 cards) → How It Works (3 steps) → Testimonials (3 quotes) → Pricing (3 tiers) → FAQ (accordion) → Final CTA (email capture) → Footer with secondary link columns.\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n### 1.1 CSS-First Architecture & Zero Inline CSS\n* **No Inline CSS:** The `style=\"...\"` attribute is forbidden anywhere in the HTML. Inline event handlers (`onclick=\"...\"`) are also forbidden.\n* **Class\u002FID Selectors Only:** All design properties, layout rules, and states must be targeted via class or ID selectors in `style.css`.\n* **Minimal HTML Modifications:** HTML must remain clean, semantic, and style-agnostic — changing the look requires editing only the CSS file.\n\n### 1.2 CSS Variables & Theme Tokens\nStore every visual token in `:root` (mirrored under `.dark`, applied to `\u003Chtml>`). Use exactly this token sheet:\n\n```css\n:root, .dark {\n  \u002F* Colors *\u002F\n  --primary: #39d353;         \u002F* Terminal Green — accents, cursor, links *\u002F\n  --secondary: #238636;       \u002F* Muted Green — solid action surfaces *\u002F\n  --bg-primary: #0d1117;      \u002F* GitHub Dark — page background *\u002F\n  --bg-secondary: #161b22;    \u002F* Code BG — cards, panels, code blocks *\u002F\n  --text-primary: #e6edf3;    \u002F* White Text *\u002F\n  --text-secondary: #8b949e;  \u002F* Dim Text *\u002F\n  --text-success: #39d353;\n  --text-error: #f85149;      \u002F* GitHub Dark error red — palette-coherent *\u002F\n  --border-default: #30363d;\n  --border-success: #39d353;\n  --border-error: #f85149;\n\n  \u002F* Code syntax tokens (GitHub Dark scheme) *\u002F\n  --syntax-keyword: #ff7b72;\n  --syntax-string: #a5d6ff;\n  --syntax-function: #d2a8ff;\n  --syntax-comment: #8b949e;\n  --syntax-constant: #79c0ff;\n\n  \u002F* Shape, depth, motion *\u002F\n  --radius-sm: 4px;  --radius-md: 6px;  --radius-lg: 8px;\n  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);\n  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);\n  --glow-primary: 0 0 24px rgba(57, 211, 83, 0.25);\n  --spacing-gap: 1.5rem;\n  --transition-fast: 150ms;   \u002F* Theme mandate: 150ms transitions *\u002F\n  --transition-normal: 150ms;\n  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);\n\n  \u002F* Layering *\u002F\n  --z-dropdown: 1000;\n  --z-modal: 1100;\n  --z-toast: 1200;\n  --z-scanlines: 1300;        \u002F* Decorative overlay only *\u002F\n\n  \u002F* Type *\u002F\n  --font-base: 'JetBrains Mono', 'Courier New', monospace;\n}\n```\n\n* **Contrast Pairing:** Every dark background token pairs with a light text token; the bright green button surface (`#39d353`) is a light background and must pair with dark text (`#0d1117`). Verify all text\u002Fbackground pairs meet WCAG AA (≥ 4.5:1).\n\n### 1.3 Dark Mode — Dark-Only Theme Exception\n* Dark tokens are defined in `:root` and mirrored under a `.dark` class on `\u003Chtml>`, keeping the token architecture consistent.\n* **Exception clause (explicit):** Per the theme specification, this is a dark-only design. No light-mode palette, no `prefers-color-scheme` overrides, no theme toggle, and no `localStorage` persistence are required — the dark palette is the single, permanent theme. All contrast and accessibility requirements apply to this dark palette.\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n* Build all layout structures with Flexbox.\n* **Default Alignment Rule:** Every flex container defaults to `align-items: center` unless an exception is explicitly justified in a CSS comment (e.g., card text columns use `flex-start` for reading flow).\n* **Mobile-Friendly First:** All flex rows convert to columns below 768px. Fluid sizing via `clamp()`. No horizontal scrolling at any viewport width down to 320px.\n\n### 1.5 Framework & Styling Approach\n* Use Tailwind CSS or clean custom CSS organized with `@layer`\u002F`@apply`. Given the bespoke terminal effects, a single custom `style.css` driven by the token system is acceptable and preferred.\n* All utility classes must map back to CSS variables or semantic, reusable component classes (`.btn`, `.card`, `.input-group`).\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n* **Text:** Load JetBrains Mono from Google Fonts (weights 400, 500, 700, 800) via `\u003Clink>` and bind it to `--font-base`. Apply it globally — `html`, `body`, headings, buttons, inputs, and footer. No secondary font exists in this theme.\n* **Icons:** Use Google Material Symbols (Rounded or Outlined) via Google Fonts. **Explicitly forbidden:** raw inline SVGs, local icon files, emoji as icons.\n* Suggested icon names: `terminal`, `bolt`, `lock`, `code`, `check`, `close`, `content_copy`, `expand_more`, `menu`, `arrow_forward`, `error`, `progress`.\n\n### 1.7 Mandatory Signature Effects\n* **Scan lines overlay:** fixed, full-viewport, `pointer-events: none`, `z-index: var(--z-scanlines)`:\n```css\n.scan-lines {\n  background: repeating-linear-gradient(0deg,\n    transparent, transparent 2px,\n    rgba(0, 0, 0, 0.1) 2px, rgba(0, 0, 0, 0.1) 4px);\n}\n```\nIt must never reduce legibility or block interaction.\n* **Blinking cursor:** `.cursor-blink { animation: blink 1s step-end infinite }` with `@keyframes blink { 50% { opacity: 0 } }`. Render as a green block cursor (inline-block box, `background: var(--primary)`); mark it `aria-hidden=\"true\"`.\n* **Terminal borders:** `.terminal-border { border: 1px solid var(--border-default) }`.\n* **Code blocks:** `pre code { background: var(--bg-secondary); padding: 16px; border-radius: var(--radius-md) }` with token classes `.tok-kw`, `.tok-str`, `.tok-fn`, `.tok-com`, `.tok-const` bound to the `--syntax-*` variables. `pre` uses `overflow-x: auto` so long lines never cause page-level horizontal scroll.\n* **Transitions:** all state changes use `transition: var(--transition-fast) var(--ease-standard)` (150ms per theme mandate).\n* **Polish:** `::selection { background: var(--primary); color: #0d1117 }`; global `:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px }`.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n### 2.1 Buttons\n* **Base `.btn`:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px, monospace, `border-radius: var(--radius-sm)`.\n* **Variants:** `.btn--primary` (background `var(--primary)`, color `#0d1117`, bold); `.btn--secondary` (transparent, 1px `var(--border-default)` border, `var(--text-primary)` text; hover: border and text turn `var(--primary)`); `.btn--danger` (border `var(--border-error)`, text `var(--text-error)` — visually distinct in the dark theme).\n* **Hover:** brightness shift and\u002For `var(--glow-primary)` shadow, `cursor: pointer`.\n* **Focus:** distinct green focus ring via `:focus-visible` — never remove outlines.\n* **Active:** `transform: scale(0.97)`.\n* **Loading `.btn--loading`:** `aria-busy=\"true\"`, pointer events disabled to prevent double-clicks, CSS spinner (green border-based) or rotating Material Symbol `progress` — button dimensions must not shift.\n* **Disabled:** `opacity: 0.5`, greyscale filter, `cursor: not-allowed`, no hover transforms.\n* **Success\u002FError feedback:** temporary `.btn--success` \u002F `.btn--error` states driven by `--text-success` \u002F `--text-error`, announced via `aria-live`.\n\n### 2.2 Cards\n* **Default `.card`:** Flexbox layout, `background: var(--bg-secondary)`, 1px `var(--border-default)` border, `border-radius: var(--radius-md)`, `box-shadow: var(--shadow-sm)`.\n* **Hover (interactive cards):** `transform: translateY(-2px)`, border shifts toward green, `box-shadow: var(--shadow-md), var(--glow-primary)`.\n* **Focus-within:** card border turns `var(--primary)` when a child link\u002Fbutton receives focus.\n* **Loading (Skeleton):** define `.skeleton` shimmer animation (linear-gradient sweep keyframes) to prevent layout jumps for any async content.\n* **Empty State:** structured fallback with a Material Symbol icon and clear guidance text.\n\n### 2.3 Forms & Inputs\n* **Structure `.input-group`:** flex container wrapping a `\u003Clabel for>`, the input, and a dedicated error feedback container with `aria-live=\"polite\"`.\n* **Input style:** `background: var(--bg-secondary)`, 1px `var(--border-default)` border, `var(--text-primary)` monospace text, min-height 44px, terminal prompt prefix (`$` or `>`) via `::before` on the wrapper.\n* **States:** Empty, Focused (green border + `box-shadow: 0 0 0 3px rgba(57,211,83,0.2)`), Filled, Valid (success border + `check` icon), Invalid (`--border-error` border, red error text, `error` icon, message text — never color alone), Disabled (`opacity: 0.5`, `cursor: not-allowed`), Read-only (dimmed background).\n\n### 2.4 Modal \u002F Popup (applies if any overlay is used, e.g., a demo modal)\n* **States:** Opening, Open, Loading, Success\u002FError, Closing — all animated via CSS transitions (opacity + `scale(0.97 → 1)`, 150ms).\n* **UX:** centered flex container (`align-items: center; justify-content: center`), backdrop overlay `rgba(0,0,0,0.7)`, Material Symbol `close` button (min 44px), `role=\"dialog\"` + `aria-modal=\"true\"`, keyboard focus trapping, focus returned to trigger on close, closes via `Esc` and overlay click.\n\n### 2.5 FAQ Accordion\n* Each item: a `\u003Cbutton class=\"faq-item__question\">` with `aria-expanded` and `aria-controls`, linked to an answer region with matching `id`.\n* Question styled with a green `>` prompt prefix via `::before`; Material Symbol `expand_more` rotates 180° when open.\n* Answer reveal animated via CSS (e.g., `grid-template-rows: 0fr → 1fr` technique), 150ms. Fully keyboard operable; no mouse-only interactions.\n\n### 2.6 Landing Page Section Blueprint\n* **Header (sticky):** `position: sticky; top: 0; z-index: var(--z-dropdown)`; `var(--bg-primary)` background with bottom border. Flex row, `align-items: center`, space-between. Logo styled as a terminal prompt (`~\u002F` prefix + product name, green accent). Anchor nav links to every section; on hover the link turns green and a `>` prefix appears via `::before`. Primary CTA button on the right. Below 768px the nav collapses behind a Material Symbol `menu`\u002F`close` hamburger toggling a `var(--bg-secondary)` panel (flex column). Include a visually hidden skip-to-content link.\n* **Hero:** full-width section, centered flex column. Eyebrow badge styled as a terminal tag (`[ v2.0 — public beta ]`, bordered, dim text). `\u003Ch1>` with key words in `.green-accent` and a decorative `.cursor-blink` block cursor at the end. Dim subheadline (max-width ~65ch). CTA row (flex, wrap, `align-items: center`): `.btn--primary` \"Get Started\" + an install-command chip (`$ npm install \u003Cproduct>` with a `content_copy` icon button that swaps to `check` and announces \"Copied to clipboard\" via `aria-live`). Below: a `.terminal-window` mockup — title bar with three CSS dots (red\u002Fyellow\u002Fgreen circles) and `~\u002Fproduct — zsh` label; body shows a syntax-highlighted fake CLI session (prompt lines, outputs, comments) ending with a blinking cursor. Optional CSS `steps()` typing animation on the first command.\n* **Features (3 cards):** section heading with `$ ls .\u002Ffeatures` eyebrow + `\u003Ch2>`. Three `.card` components in a flex row (wrap; column on mobile), each: large green Material Symbol icon in a bordered square chip, `\u003Ch3>` title, dim description, optional small code tag. Full hover\u002Ffocus-within behavior per 2.2.\n* **How It Works (3 steps):** `$ run --steps` eyebrow. Three steps in a flex row (column on mobile), each with a large dim\u002Fgreen step number (`01`\u002F`02`\u002F`03`), Material Symbol icon, title, description, and a command chip (e.g., `npm install`, `\u003Cproduct> login`, `\u003Cproduct> deploy`). Optional dashed connector line on desktop only.\n* **Testimonials (3 quotes):** `$ git log --quotes` eyebrow. Three `.card` components styled as terminal output: quote in `var(--text-primary)`, author row (flex, `align-items: center`, gap): `.avatar` — a 40px circle with 1px `var(--primary)` border containing monospace initials — plus name (`var(--text-primary)`) and role\u002Fhandle (`var(--text-secondary)`).\n* **Pricing (3 tiers):** `$ \u003Cproduct> plans --list` eyebrow. Three `.card` tiers (Free \u002F Pro \u002F Team) in a flex row (column on mobile): plan name, tagline, large monospace price with dim `\u002Fmo`, feature list (each `li` flex, `align-items: center`, gap: green `check` icon for included, dim `close` icon for excluded), and a CTA (`.btn--primary` on the featured tier, `.btn--secondary` elsewhere). Featured middle card `.card--featured`: `var(--primary)` border, `var(--glow-primary)` shadow, `[ MOST POPULAR ]` badge, subtle desktop elevation.\n* **FAQ:** `$ man \u003Cproduct>\u002Ffaq` eyebrow; 5–6 accordion items per 2.5.\n* **Final CTA:** full-width `.terminal-window`-styled panel, centered flex column. `\u003Ch2>` with green accent + blinking cursor, short dim copy, and an email capture form: `.input-group` in a flex row (column on mobile) with a `$`-prefixed email input and `.btn--primary` submit. On submit: button enters loading state, then a success state (`check` icon + confirmation text, announced via `aria-live`); invalid email shows inline error per 2.3. Simulated locally — no backend.\n* **Footer:** top border `var(--border-default)`. Flex row (wrap; column on mobile): brand block (logo, one-liner, `● all systems operational` status line with a CSS green dot) + 2–3 secondary link columns (Product, Resources, Company) with dim links that turn green on hover. Bottom bar: copyright line (e.g., `© 2025 \u003Cproduct> — MIT licensed.`), Privacy\u002FTerms links, and text-based social links (GitHub, X, Discord — no brand SVGs). Optional `$ exit 0` easter egg in dim text. Footer `href`s may be `#` anchors, but every link must have a meaningful accessible name.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by Default:** centered max-width container (~1200px), fluid `clamp()` padding, verified at 320px with zero horizontal overflow.\n* **Smooth Animations:** 150ms transitions on all state changes (color, border, box-shadow, transform, opacity). **`prefers-reduced-motion`:** disable the blink animation, typing effect, shimmer, and transforms — states must still change instantly and visibly.\n* **Accessibility (a11y):** WCAG AA contrast across the dark palette. Never rely on color alone — pair every state with an icon, text, or border change. Semantic HTML5 landmarks (`header`, `nav`, `main`, `section` with `aria-labelledby`, `footer`), a single `\u003Ch1>`, logical heading order, logical DOM\u002Ffocus order, full keyboard operability, visible focus rings, and `aria-live` regions for all dynamic feedback (copy confirmation, form errors\u002Fsuccess, loading).\n* **Mandatory Visual Feedback:** every click, hover, focus, and submission triggers a visible state change.\n* **Destructive Actions:** `.btn--danger` must be visually distinct from primary\u002Fsecondary actions in the dark theme.\n* **Touch Targets:** all interactive elements ≥ 44×44px.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n* **File Structure:** separate `index.html`, `style.css`, and `script.js`. No inline `\u003Cscript>` blocks beyond a single deferred entry point (`\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>`). Google Fonts `\u003Clink>` tags for JetBrains Mono and Material Symbols in `\u003Chead>`.\n* **Naming Convention:** BEM throughout (`.btn--primary`, `.terminal-window__title`, `.faq-item__answer`, `.card--featured`). Never mix conventions; Tailwind utilities, if used, are limited to layout scaffolding only.\n* **Copy:** real, themed English copy for the invented product — lorem ipsum is prohibited. Placeholders are allowed only where content was genuinely left unspecified.\n* **JavaScript (vanilla, no frameworks):** mobile nav toggle (with `aria-expanded`, closes on `Esc`\u002Flink click), FAQ accordion behavior, smooth anchor scrolling (respecting reduced motion), email form validation + simulated submit states, clipboard copy with fallback and `aria-live` feedback, and modal logic (focus trap, `Esc`, backdrop) if any overlay is used.\n* **Completeness:** deliver the full landing page — all sections, all component states, both files valid and linked — on the first attempt.\n",1791954981219]