[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-617-NVIDIA-Power-Green":3},"# Landing Page Build Prompt — \"NVIDIA Power Green\" Theme\n\n## 1. ROLE & OBJECTIVE\n\nYou are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready Landing Page on the first attempt. Do not ask clarifying questions — make expert decisions and deliver the full code.\n\n**Theme:** NVIDIA Power Green — High-Contrast, Neon Green Accent, Industrial Typography, Sharp Corners, GPU Power (2024–2026 GPU Computing era).\n**Sections (in order):** Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.\n**Language:** All user-facing copy must be written in **English**.\n\n---\n\n## 2. STRICT ARCHITECTURE RULES\n\n### 2.1 CSS-First & Zero Inline CSS\n- All styling lives in a dedicated `style.css`. **Forbidden:** any `style=\"...\"` attribute in HTML.\n- All styling targets class or ID selectors only.\n- HTML stays semantic and clean; changing the theme must require editing only the CSS file.\n\n### 2.2 CSS Variables & Theme Tokens\nDefine in `:root` (light) and override under `@media (prefers-color-scheme: dark)` and a `.dark` class:\n\n- Colors: `--primary: #76b900` (NVIDIA Green), `--secondary: #df6500` (Orange, destructive\u002Fdanger accents), `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default: #5e5e5e`, `--border-error`, `--border-success`.\n- **Contrast pairing:** every light background token pairs with dark text and vice versa — enforce in both themes.\n- **Light mode background:** do NOT use pure white; use `#fefefe` as the near-white base. Dark mode uses `#000000` dominant with `#1a1a1a` as secondary surface.\n- Radius\u002Fshadow: `--radius-sm: 1px`, `--radius-md: 2px`, `--radius-lg: 2px` (sharp engineered corners — never exceed 2px), `--shadow-sm: rgba(0,0,0,0.3) 0px 0px 5px`, `--shadow-md`.\n- Spacing\u002Ftransitions: `--spacing-gap`, `--transition-fast`, `--transition-normal`, `--ease-standard`.\n- Stacking: `--z-dropdown`, `--z-modal`, `--z-toast`.\n- Accent colors: `--accent-green: #76b900`, `--accent-green-light: #bff230`, `--gray: #a7a7a7`.\n\n### 2.3 Mandatory Dark Mode\n- Dark mode tokens via both `@media (prefers-color-scheme: dark)` and `.dark` class.\n- Theme toggle button in the nav with correct `aria-pressed` and `aria-label`; choice persists via `localStorage`, falling back to `prefers-color-scheme` on first visit.\n- **Theme note:** This theme's default identity is dark (black dominant). The dark theme is the primary expression; the light theme must invert to `#fefefe` backgrounds with `#000000` text while keeping `#76b900` as pure accent. Sections that alternate black\u002Fwhite in dark mode must alternate `#fefefe`\u002F`#1a1a1a`-adjacent tones in light mode, always maintaining contrast pairing.\n\n### 2.4 Flexbox & Mobile-First\n- All layout containers use Flexbox with `align-items: center` by default (explicit exceptions allowed with justification).\n- Mobile-responsive out of the box: nav, feature grid, pricing tiers, and footer link columns collapse to single-column stacks on small viewports. **No horizontal scrolling at any breakpoint.**\n\n### 2.5 Framework\n- Use Tailwind CSS (CDN or build) with custom CSS driven by `@layer`\u002F`@apply`, OR clean custom CSS with reusable classes (`.btn`, `.card`, `.section-dark`, `.section-light`). Pick one and be consistent.\n\n### 2.6 Typography & Icons\n- **Fonts:** Google Fonts — use a heavy industrial sans (e.g., Archivo, Inter, or Roboto Condensed) via `\u003Clink>`\u002F`@import`, bound to `--font-base`. Headlines default to `font-weight: 700`; hero headline ~36px+.\n- **Icons:** Google Material Symbols\u002FIcons only. **Forbidden:** inline SVGs and local icon files. (Exception: the source spec mentions Font Awesome — if you prefer Font Awesome via CDN `\u003Clink>`, that is an allowed alternative; choose one library and use it consistently. Never mix libraries, never inline SVGs.)\n- Navigation links: `text-transform: uppercase; font-weight: 700`.\n\n---\n\n## 3. THEME-SPECIFIC VISUAL DIRECTION (MANDATORY)\n\n- **NVIDIA Green (#76b900) is a pure accent only** — borders, underlines, hover highlights, focus rings, icon tints. **Never** use it as a large surface\u002Ffill color (small badge\u002Funderline fills are acceptable).\n- Dark sections: `#000000` background, `#ffffff` text. Alternating section backgrounds (dark\u002Flight) must be clearly contrasted.\n- Buttons: `border: 2px solid #76b900`, transparent background, uppercase 700-weight labels; hover fills\u002Finverts with green border emphasis and white\u002Fgreen text shift; sharp 2px radius.\n- Minimal shadows only: `rgba(0,0,0,0.3) 0px 0px 5px`.\n- Industrial, engineered aesthetic: grid lines, thin `#5e5e5e` borders, monospace-adjacent labels (e.g., small uppercase section kickers like \"01 \u002F FEATURES\") are encouraged.\n- Orange `#df6500` reserved for danger\u002Fdestructive or high-alert accents only.\n\n---\n\n## 4. COMPONENT SPECIFICATIONS\n\n### 4.1 Buttons (`.btn`, `.btn-primary`, `.btn-danger`)\n- Default: flex, `align-items: center; justify-content: center; gap: 0.5rem;` min touch target 44×44px, 2px green border, uppercase 700 text.\n- Hover: brightness\u002Fshadow shift, `cursor: pointer`, green underline\u002Fedge highlight.\n- Focus: distinct green focus ring (`outline`\u002F`box-shadow` using `--primary`) for keyboard nav.\n- Active: `transform: scale(0.97)`.\n- Loading: disables interaction, prevents double-clicks, renders animated Google Icon spinner without changing button dimensions.\n- Disabled: `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n- Success\u002FError: temporary feedback styles via `--text-success` \u002F `--text-error`.\n- `.btn-danger`: visually distinct in both themes (orange\u002Fred border treatment).\n\n### 4.2 Cards (Features, Pricing, Testimonials)\n- Default: flexbox layout, `--bg-secondary` surface, thin `--border-default` border, 2px radius, minimal shadow.\n- Hover: shadow shift or `transform: translateY(-2px)` with green border highlight.\n- Focus-within: green border highlight when a child link\u002Fbutton is focused.\n- Skeleton shimmer styles defined in CSS (for any async content).\n- Empty state: Google Icon + guidance text fallback layout.\n- Pricing cards: one tier marked \"featured\" with green 2px border and an uppercase badge; CTA buttons per tier.\n\n### 4.3 Forms \u002F Inputs (FAQ search, newsletter in footer, contact if used)\n- States: empty, focused (green outline ring), filled, valid (success border\u002Ficon), invalid (error border, error text, error icon), disabled, read-only.\n- Structure: flex container wrapping label, input, dedicated error container.\n- FAQ: accessible accordion (`\u003Cdetails>`\u002F`\u003Csummary>` or ARIA `button` + region), keyboard operable, green underline on open question.\n\n### 4.4 Modal \u002F Popup (if any CTA opens one)\n- States: opening, open, loading, success\u002Ferror, closing — all CSS-transition animated.\n- Centered flex overlay, Google Icon close button, focus trapping, closes via `Esc` and overlay click.\n\n---\n\n## 5. GLOBAL UX & MICRO-INTERACTION RULES\n\n- Responsive by default; fluid sizing; no horizontal overflow.\n- CSS transitions on all state changes (`var(--transition-normal)`); respect `prefers-reduced-motion`.\n- **Accessibility:** sufficient contrast in both themes; never rely on color alone for state; semantic HTML5 (`header`, `nav`, `main`, `section`, `footer`); ARIA roles\u002Flabels on custom widgets; logical focus order; full keyboard operability; `aria-live` regions for dynamic feedback (form errors, toasts, loading).\n- Every click\u002Fhover\u002Fsubmission triggers visible feedback.\n- Smooth-scroll nav links to sections; sticky header with theme toggle.\n\n---\n\n## 6. DELIVERABLES\n\n- **Files:** separate `index.html`, `style.css`, `script.js`. No inline `\u003Cscript>` beyond a single deferred entry-point reference.\n- **Naming:** one consistent convention (BEM or fixed utility set) throughout — never mix.\n- **Copy:** write real, theme-appropriate English copy (GPU computing, performance, power). No lorem ipsum. Placeholders only where content is genuinely unspecified.\n- All class names, variable names, and file names in ASCII\u002FEnglish.\n",1791954989989]