[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-128-Estilo-de-Inteligencia-Generativa":3},"# CODING-AGENT SYSTEM PROMPT — \"GENERATIVE INTELLIGENCE\" LANDING PAGE\n\n**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Build the complete landing page on the first attempt and output the final, production-ready code immediately — no questions, no partial deliverables, no TODOs.\n\n**Project:** A futuristic, minimalist, intelligent landing page for a next-generation generative AI language model (2026+ AGI era), aimed at developers and API builders. Design language: **\"Generative Intelligence\"** — Dark Tech & Cyber aesthetic with **full light\u002Fdark theming**. The page must feel intelligent and powerful: AI-teal accents, subtle AI glows, a live text\u002Fcode generation animation, an abstract neural-network visualization, data-flow animations, and modular card-based composition. **All user-facing copy must be written in English** (translate any non-English source material; keep all class names, CSS variables, and file names in ASCII\u002FEnglish).\n\n## 0. PAGE MAP\n\nBuild a single page containing, in this exact order: **(1)** sticky header (logo, anchor nav, theme toggle, CTA), **(2)** Hero, **(3)** Features — 3 cards, **(4)** How It Works — 3 steps, **(5)** Testimonials, **(6)** Pricing — 3 tiers, **(7)** FAQ — accordion, **(8)** Final CTA — email capture, **(9)** Footer with secondary link columns. Do not add unrequested components (no modals, toasts, carousels, or chat widgets).\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. No `\u003Cstyle>` blocks, no inline event handlers (`onclick`, etc.).\n- **Class\u002FID selectors only:** every design property, layout rule, and state 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 site's look must require editing only `style.css`, never the markup.\n\n### 1.2 CSS Variables & Theme Tokens\nStore **all** visual tokens in `:root` and override them per theme. The following tokens are **mandatory** and must exist with these exact names:\n\n| Token | Light value | Dark value |\n|---|---|---|\n| `--primary` | `#00A67E` (AI teal) | `#00C796` |\n| `--secondary` | `#800080` (purple) | `#A855F7` (lightened for dark-mode legibility) |\n| `--bg-primary` | `#fefefe` | `#0D0F12` |\n| `--bg-secondary` | `#F0F0F0` | `#202124` |\n| `--text-primary` | `#202124` | `#F0F0F0` |\n| `--text-secondary` | `#5F6368` | `#9AA0A6` |\n| `--text-success` | `#188038` | `#5BBB7B` |\n| `--text-error` | `#D93025` | `#F28B82` |\n| `--border-default` | `#DADCE0` | `#3C4043` |\n| `--border-error` | `#D93025` | `#F28B82` |\n| `--border-success` | `#188038` | `#5BBB7B` |\n\nAlso define: `--radius-sm: 6px`, `--radius-md: 8px`, `--radius-lg: 16px`; `--shadow-sm: 0 2px 8px rgba(0,0,0,0.1)`, `--shadow-md: 0 8px 24px rgba(0,0,0,0.12)` (raise alpha in dark mode); `--spacing-gap: 1rem`; `--transition-fast: 150ms ease-in-out`, `--transition-normal: 300ms ease-in-out`, `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`; `--z-dropdown: 100`, `--z-modal: 1000`, `--z-toast: 1100`, plus `--z-header: 90`. Add supporting tokens: `--accent-cyan: #00FFFF`, `--accent-green: #00FF00`, `--glow-primary` (e.g., `0 0 24px rgba(0,166,126,0.35)` light \u002F stronger in dark), `--font-base`, `--font-mono`, and `--gradient-surface: linear-gradient(to bottom, #F8F8F8, #fefefe)` for light hero\u002Fsection backgrounds (dark equivalent: a deep near-black gradient with a faint teal radial glow).\n\n- **Contrast pairing:** every light background token must pair with a dark text token and every dark background token with a light text token — enforced in **both** themes, never just the default.\n- **Restrict neon accents:** `--accent-cyan` and `--accent-green` are decorative only (glows, gradient stops, data-flow lines, terminal\u002Fcode accents on dark surfaces) — never body text on light backgrounds, to preserve contrast.\n- **Exception clause:** the source palette's `#FFFFFF` is implemented as `#fefefe` for all background surfaces per token rules; pure `#FFFFFF` remains only for text\u002Ficons on dark surfaces.\n- Apply transitions to explicit properties (`color`, `background-color`, `border-color`, `box-shadow`, `transform`, `opacity`) — never `transition: all`.\n\n### 1.3 Mandatory Dark Mode Support\n- Define dark tokens under **both** `@media (prefers-color-scheme: dark)` and a `.dark` class on `\u003Chtml>`\u002F`\u003Cbody>`; the class must take precedence over the media query.\n- Theme switching must work purely by swapping CSS variables — no HTML restructuring.\n- **Persistence:** store the user's choice in `localStorage` (key `theme`), fall back to `prefers-color-scheme` on first visit, and apply the stored theme as the first statement in `script.js`. Provide a **visible toggle button** in the header using Google Material Symbols (`dark_mode` \u002F `light_mode`) with correct `aria-pressed` and a dynamic `aria-label` (\"Switch to dark theme\" \u002F \"Switch to light theme\").\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n- Build all layout structures with Flexbox. Every flex container must default to `align-items: center` unless an exception is explicitly justified in a CSS comment (e.g., text stacks inside cards may use `flex-start`).\n- **Mobile-first:** single column by default; rows convert to columns below 768px (header nav → hamburger + dropdown panel; features\u002Fsteps\u002Fpricing\u002Ftestimonials → stacked). Fluid `clamp()` typography. **Zero horizontal scrolling** at any viewport width — never use `overflow-x: hidden` as a crutch.\n\n### 1.5 Styling Approach\nUse clean custom CSS (no framework build step), organized into `@layer` blocks (tokens, base, layout, components, effects). All styling must map back to CSS variables and reusable component classes (`.btn`, `.card`, `.input-group`). The two effect classes from the spec must exist under these **exact names**: `.ai-generation-animation` and `.neural-network-visualization`.\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n- **Text:** load **Inter** from Google Fonts (with `preconnect`) and bind it to `--font-base`; also load a Google monospace font (JetBrains Mono or Roboto Mono) bound to `--font-mono` for the code-generation demo and inline code.\n- **Icons:** use Google Material Symbols (Outlined) via `\u003Clink>` and `\u003Cspan class=\"material-symbols-outlined\">icon_name\u003C\u002Fspan>`. **Raw inline SVGs, local icon files, and emoji-as-icons are forbidden.**\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n### 2.1 Buttons\nStyle all states via CSS classes on `.btn` (flex layout, `align-items: center; justify-content: center; gap: 0.5rem`, minimum touch target 44×44px):\n- **Default:** `.btn--primary` (teal fill + `--glow-primary` on hover), `.btn--secondary` (ghost\u002Foutline), `.btn--danger` (defined even if unused).\n- **Hover:** brightness\u002Fshadow shift, `cursor: pointer`.\n- **Focus:** distinct ring via `box-shadow`\u002F`outline` using `--primary` for keyboard navigation.\n- **Active:** `transform: scale(0.97)`.\n- **Loading (`.is-loading`):** disables interaction, prevents double-clicks, renders a CSS spinner (border-based) or animated Google Icon without changing button dimensions; set `aria-busy=\"true\"`.\n- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n- **Success\u002FError:** transient feedback styles driven by `--text-success` \u002F `--text-error` (used on the Final CTA submit: loading → success check icon, or error state on invalid email).\n\n### 2.2 Cards\n- **Default:** `.card` — flexible flexbox layout, `--bg-secondary` surface, 1px `--border-default`, `--radius-md`, `--shadow-sm`.\n- **Hover:** `--shadow-md` + `transform: translateY(-2px)`.\n- **Focus-within:** border shifts to `--primary` with a soft glow when a child link\u002Fbutton receives focus.\n- **Loading (`.card--loading`):** shimmer keyframe skeleton (applied to the hero demo panel during \"generation\").\n- **Empty (`.card--empty`):** structured fallback with a Google Icon and guidance text (define the CSS even if not rendered).\n- **Featured (`.card--featured`):** middle pricing tier — teal gradient\u002Fglow border, \"Most popular\" badge, slightly elevated scale on desktop.\n- Variants: feature cards (glowing icon tile + title + copy), testimonial cards (quote, 5-star Material Symbol rating, initials-avatar circle, name\u002Frole\u002Fcompany), pricing cards (tier name, price, check-icon feature list, CTA).\n\n### 2.3 Accordion (FAQ)\n- Each item: `\u003Cbutton aria-expanded>` trigger + panel with `role=\"region\"` and `aria-labelledby`; Google Symbol chevron rotates on open.\n- Animate open\u002Fclose via CSS (`grid-template-rows: 0fr → 1fr` transition) using `--transition-normal`.\n- Fully keyboard operable (native buttons), one-item-open behavior managed in `script.js`, visible hover\u002Ffocus states on triggers.\n\n### 2.4 Form & Input (Final CTA email capture)\n- **Structure:** `.input-group` flex container wrapping `\u003Clabel>`, `\u003Cinput type=\"email\">`, and a dedicated error feedback element with `aria-live=\"polite\"`.\n- **States (all styled in CSS):** empty, focused (outline ring via `--primary`), filled, valid (`--border-success` + check icon), invalid (`--border-error`, `--text-error` message + error icon — never color-only), disabled, read-only.\n- **Behavior:** JS validation on submit; loading state prevents double-submits; success replaces the form with a confirmation message announced via `aria-live`.\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid sizing, no horizontal overflow, `scroll-behavior: smooth` (disabled under reduced motion) and `scroll-margin-top` on sections for the sticky header.\n- **Smooth animations:** CSS transitions on all state changes via `--transition-normal`; **all keyframe animations must be wrapped in `@media (prefers-reduced-motion: no-preference)`** with static, fully readable equivalents for reduced-motion users.\n- **Accessibility:** WCAG AA contrast in both light and dark modes; never rely on color alone to communicate state; semantic HTML5 landmarks (`header`, `main`, `section` with `aria-labelledby`, `footer`); skip-to-content link; logical DOM\u002Ffocus order; full keyboard operability; `aria-live` regions for dynamic feedback; decorative visualizations marked `aria-hidden=\"true\"`.\n- **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change (nav link underline\u002Ffill, button press scale, toggle icon animation).\n- **Destructive actions:** none expected; if any appear, `.btn-danger` must be visually distinct in both themes.\n- **Signature AI effects (theme-mandated):**\n  - `.ai-generation-animation` — hero demo panel (terminal-style card; it may keep a fixed dark surface in both themes as a documented exception, with light text) showing a prompt\u002Fresponse or code snippet typing character-by-character with a blinking caret, ending in a subtle \"generation complete\" shimmer. Implement via CSS `steps()` typing or a minimal JS loop; keep it decorative with an accessible static equivalent for screen readers.\n  - `.neural-network-visualization` — abstract node-and-line network behind\u002Fbeside the hero, drawn with CSS (positioned pulsing dots + gradient connector lines) or `\u003Ccanvas>` driven by `script.js`; low-opacity, non-interactive, `aria-hidden`, static under reduced motion. No inline SVG.\n  - **Subtle AI glows** — `--glow-primary` on primary buttons, icon tiles, and the featured pricing card (stronger in dark mode).\n  - **Data-flow animations** — animated gradient border on the hero demo panel and a flowing dashed connector line between the three \"How It Works\" steps (CSS `background-position` keyframes on a repeating gradient), horizontal on desktop, vertical on mobile.\n  - **AI feedback micro-interactions** — \"thinking dots\" in the submit button during loading, soft pulse on primary CTA hover.\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n- **Files:** separate `index.html`, `style.css`, `script.js`. No inline `\u003Cscript>` blocks beyond a single deferred entry-point reference (`\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>`).\n- **Naming:** BEM consistently across the entire deliverable (`.btn`, `.btn--primary`, `.card`, `card__title`, `.card--featured`, `.input-group__error`, `.faq__item`, `.pricing__card`, `.footer__link-group`), plus the two mandated effect classes. Never mix conventions.\n- **Copy:** write realistic, on-theme English copy for a fictional generative-AI product — invent one product name and use it consistently across hero, features, pricing, and footer. **No lorem ipsum.** Real labels for every nav link, button, form field, and FAQ question.\n\n## 5. SECTION-BY-SECTION BUILD SPECIFICATION\n\n1. **Header (sticky):** blurred translucent backdrop (`backdrop-filter`), bottom border, logo with a `neuro` or `auto_awesome` Material Symbol, anchor links (Features, How It Works, Testimonials, Pricing, FAQ), theme toggle, \"Get API Access\" `.btn--primary`; hamburger + `--z-dropdown` panel below 768px.\n2. **Hero:** announcement badge, H1 + subheadline about AGI-era reasoning, two CTAs (\"Start Building\" primary, \"Read the Docs\" secondary), the `.ai-generation-animation` demo panel, and the `.neural-network-visualization` background over `--gradient-surface`.\n3. **Features (3 cards):** themed around the keywords — e.g., advanced reasoning, developer-first API, safe\u002Fethical AI — each with a glowing Material Symbol icon tile.\n4. **How It Works (3 steps):** numbered 01\u002F02\u002F03 steps (e.g., get an API key → send a prompt → stream tokens into your app) connected by the animated data-flow line.\n5. **Testimonials:** 3 quote cards with star ratings, initials avatars, fictional-but-realistic names, roles, and companies.\n6. **Pricing (3 tiers):** Developer (free) \u002F Scale (monthly price, `.card--featured` \"Most popular\") \u002F Enterprise (custom), each with a check-icon feature list and CTA.\n7. **FAQ:** 5–6 accordion items covering the model, API, pricing, data privacy, and AI safety.\n8. **Final CTA:** full-width gradient band with teal glow, headline, the email-capture `.input-group` with submit button (loading → success\u002Ferror states), and reassurance micro-copy.\n9. **Footer:** brand + tagline, 3–4 secondary link columns (Product, Company, Resources, Legal), Material Symbol social icons, and a copyright line.\n",1791954982101]