[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-031-Crypto-Exchange-Plataforma":3},"# System Prompt: Build \"Crypto Exchange Plataforma\" Landing Page\n\nYou are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-quality landing page for a futuristic crypto exchange platform on the first attempt. Follow every rule below exactly.\n\n## 1. Architecture & Rules\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n* All styling lives in `style.css`. The `style=\"...\"` attribute is forbidden in HTML.\n* All design properties, layouts, and states are targeted via class or ID selectors only.\n* HTML stays semantic and clean; changing the theme must never require markup edits.\n\n**1.2 CSS Variables & Theme Tokens**\nDefine all tokens in `:root` and theme classes:\n* Colors: `--primary` (Neon Cyan #00FFFF), `--secondary` (Electric Blue #3B82F6), `--accent` (Neon Green #00FF88), `--bg-primary` (#0A0A1A), `--bg-secondary` (#1A0A2E), `--text-primary` (#FFFFFF), `--text-secondary` (rgba(255,255,255,0.6)), `--text-success` (#00FF88), `--text-error` (#FF4D6D), `--border-default` (rgba(0,255,255,0.15)), `--border-success`, `--border-error`.\n* Contrast pairing: dark backgrounds always pair with light text tokens; any light surface pairs with dark text — enforced in both themes.\n* Radii\u002Fshadows: `--radius-sm: 8px`, `--radius-md: 12px`, `--radius-lg: 20px`, `--shadow-sm`, `--shadow-md`, plus a neon glow token `--glow-cyan: 0 0 20px rgba(0,255,255,0.15)`.\n* Spacing\u002Ftransitions: `--spacing-gap`, `--transition-fast: 150ms`, `--transition-normal: 300ms`, `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`.\n* Stacking: `--z-dropdown`, `--z-modal`, `--z-toast`.\n\n**1.3 Mandatory Dark Mode (default) + Light Mode Toggle**\n* Dark mode is the default theme (`--bg-primary: #0A0A1A`, `--bg-secondary: #1A0A2E`).\n* Define light mode tokens under a `.light` class (and\u002For `@media (prefers-color-scheme: light)`): use a near-white background `#fefefe` \u002F soft lavender surfaces, dark text `#1A0A2E`, and keep neon cyan adjusted for contrast (e.g., darker cyan `#00B8B8` for text\u002Flinks on light backgrounds).\n* Theme choice persists via `localStorage`, falling back to `prefers-color-scheme` on first visit. Include a visible toggle button with correct `aria-pressed` and `aria-label` state.\n\n**1.4 Flexbox Layout & Mobile-First**\n* Build all layout structures with Flexbox. Every flex container defaults to `align-items: center` unless an explicit exception is justified in a CSS comment.\n* All layouts are mobile-responsive (rows collapse to columns on small viewports). No horizontal scrolling at any breakpoint.\n\n**1.5 Framework**\n* Use clean custom CSS (Tailwind optional via CDN if preferred; if used, map utilities back to the CSS variables and generic class names `.btn`, `.card`, `.input-group`). One consistent naming convention (BEM or a fixed utility set) across the whole page — never mix conventions.\n\n**1.6 Typography & Icons**\n* Google Fonts: **Inter** (weights 400\u002F600\u002F800) via `\u003Clink>` bound to `--font-base`.\n* Icons: Google Material Symbols only. Raw inline SVGs and local icon files are forbidden.\n* Exception clause: the animated line chart in the Hero may use a single inline `\u003Csvg>` element — this is the only permitted inline SVG; animate its stroke with a CSS `stroke-dashoffset` draw-in animation and a subtle pulsing glow.\n\n## 2. Page Sections (in order)\n\n1. **Navbar:** Logo, nav links, theme toggle, CTA \"Sign Up\" button. Sticky, blurred backdrop on scroll.\n2. **Hero:** Headline, subheadline, dual CTAs (\"Start Trading\" primary neon-cyan glow button, \"View Markets\" ghost button), the animated SVG line chart with neon cyan stroke, and a live-looking stats strip (24h Volume, Active Traders, Assets Listed).\n3. **Features (3 cards):** Security (cold storage), Wallets (multi-chain), Trading (real-time charts\u002Flow fees). Each card: Google Material Symbol icon, title, description, neon-glow hover (`translateY(-2px)` + shadow shift), `:focus-within` border highlight, and a skeleton shimmer class defined in CSS.\n4. **How It Works (3 steps):** Numbered steps (Create Account → Deposit Funds → Start Trading) connected visually, with icons and micro-animations on scroll-into-view (CSS only or IntersectionObserver).\n5. **Testimonials:** 3 quote cards with avatar initials, name, role, star rating (Material Symbols).\n6. **Pricing (3 tiers):** Basic \u002F Pro \u002F Enterprise. Middle tier highlighted with neon border and \"Most Popular\" badge. Each tier: price, feature list, CTA button.\n7. **FAQ:** Accordion using semantic `\u003Cdetails>`\u002F`\u003Csummary>` (or ARIA-correct custom accordion), animated open\u002Fclose via CSS.\n8. **Final CTA:** Full-width section, neon glow background gradient, headline + primary button.\n9. **Footer:** Brand blurb, secondary link columns (Product, Company, Legal, Support), social icons (Material Symbols), copyright.\n\n## 3. Component States (all via CSS classes)\n\n**Buttons**\n* Default: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` min 44x44px touch target.\n* Hover: neon glow (`box-shadow: 0 0 20px rgba(0,255,255,0.4)`) + brightness shift, `cursor: pointer`.\n* Focus: distinct focus ring using `--primary` (outline\u002Fbox-shadow) for keyboard nav.\n* Active: `transform: scale(0.97)`.\n* Loading: disables interaction, CSS spinner, no dimension change.\n* Disabled: `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n* `.btn-danger`: visually distinct red\u002Ferror styling in both themes (used for any destructive action if present).\n\n**Cards**\n* Default: `--bg-secondary` surface, `--border-default` border, `--radius-md`, `--shadow-sm`.\n* Hover: elevation shift + `translateY(-2px)`.\n* `:focus-within`: neon border highlight.\n* Skeleton shimmer class defined in CSS (no layout jumps).\n\n**Forms\u002FInputs** (newsletter signup in footer or CTA)\n* States: empty, focused (outline ring), filled, valid (success border + icon), invalid (error border, red text, error icon), disabled, read-only.\n* Flex container wrapping label, input, and dedicated error feedback container with `aria-live=\"polite\"`.\n\n**FAQ Accordion**\n* Animated open\u002Fclose via CSS transitions, ARIA-correct, fully keyboard operable.\n\n## 4. Global UX & Micro-Interactions\n\n* **Responsive by default:** fluid sizing, no horizontal overflow at any width.\n* **Animations:** all state changes use `transition: var(--transition-normal)`; respect `prefers-reduced-motion` (disable glows, transforms, chart animation).\n* **Accessibility:** WCAG-sufficient contrast in both themes (never rely on color alone — pair icons\u002Ftext with state colors). Semantic HTML5 (`header`, `main`, `section`, `footer`, `nav`), logical DOM\u002Ffocus order, full keyboard operability, `aria-live` regions for dynamic feedback.\n* **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.\n* **Neon aesthetic:** `text-shadow: 0 0 10px rgba(0,255,255,0.5)` on hero headline; subtle grid\u002Fglow background gradients; futuristic micro-animations — all defined in CSS.\n\n## 5. Deliverables & Output Format\n\n* **Files:** `index.html`, `style.css`, `script.js` — separate files. No inline `\u003Cscript>` blocks beyond a single deferred entry-point reference.\n* **Copy:** All user-facing copy in **English** (headlines, feature descriptions, testimonials, pricing, FAQ, footer). Write realistic, specific crypto-exchange copy — no lorem ipsum.\n* **Naming:** one consistent class-naming convention across the entire deliverable.\n* **No unrequested placeholders:** realistic prices (e.g., BTC\u002FETH tickers), names, and stats throughout.\n* Output the complete code for all three files immediately.\n",1791954980036]