[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-538-Web3-EOS-Hero":3},"# System Prompt: Web3 EOS Hero Landing Page — Build Specification\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready Landing Page on the first attempt. Follow every rule below exactly. All user-facing copy must be written in **English**.\n\n**Theme:** Web3 EOS Hero — Web3, Gradient Text, Video Overlay, Layered Pill Buttons, Minimal Dark (2024–2026 Web3 Premium). Dark-first design; full light\u002Fdark support required.\n\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\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n* All styling lives in a dedicated `style.css`. **No `style=\"...\"` attributes anywhere in HTML.**\n* Target everything via class\u002FID selectors (BEM naming, e.g. `.hero__badge`, `.pricing__card`, `.btn--primary` — one convention only, never mix).\n* HTML stays semantic and clean; changing the theme must require editing only CSS.\n\n**1.2 CSS Variables & Theme Tokens**\nDefine in `:root`:\n* Colors: `--primary`, `--secondary`, `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`.\n* For this theme: `--bg-primary: #000000`, `--text-primary: #FFFFFF`, `--text-secondary: rgba(255,255,255,0.6)`, `--border-default: rgba(255,255,255,0.2)`, plus tokens for `rgba(255,255,255,0.7)` and `rgba(255,255,255,0.1)`.\n* Contrast pairing: every background token pairs with a readable text token in **both** themes.\n* Light mode: do not use pure white backgrounds; use `#fefefe` where near-white is needed, with dark text (`#0a0a0a`) and adjusted border tokens (`rgba(0,0,0,0.2)`).\n* Also define: `--radius-sm`, `--radius-md`, `--radius-lg`, `--shadow-sm`, `--shadow-md`, `--spacing-gap`, `--transition-fast`, `--transition-normal`, `--ease-standard`, `--z-dropdown`, `--z-modal`, `--z-toast`.\n\n**1.3 Mandatory Dark Mode**\n* Dark is the default presentation. Define light tokens under a `.light` class \u002F `@media (prefers-color-scheme: light)` fallback.\n* Provide a visible theme toggle button (Google Material Icon `dark_mode`\u002F`light_mode`) with correct `aria-pressed` and `aria-label`.\n* Persist choice via `localStorage`; fall back to `prefers-color-scheme` on first visit. No HTML restructuring to switch themes.\n\n**1.4 Flexbox Layout & Mobile-First**\n* All layout via Flexbox. Every flex container defaults to `align-items: center` unless explicitly justified otherwise.\n* Mobile-responsive by default: rows collapse to columns on small viewports; no horizontal scrolling at any width.\n\n**1.5 Framework**\n* Use Tailwind CSS (CDN or build) with custom tokens mapped to CSS variables, plus reusable component classes (`.btn`, `.card`, `.input-group`) defined via `@layer`\u002F`@apply` or plain CSS.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n* **Exception clause:** The theme specifies General Sans. Since General Sans is not on Google Fonts, use it via its official CDN (`@font-face` from Fontshare: `https:\u002F\u002Fapi.fontshare.com\u002Fv2\u002Fcss?f[]=general-sans@400,500,600,700&display=swap`), bound to `--font-base`, with **Inter** from Google Fonts as the fallback.\n* Icons: Google Material Symbols only (`\u003Clink>` to Material Symbols Outlined). **No inline SVGs, no local icon files.**\n\n---\n\n## 2. THEME-SPECIFIC VISUAL SPECIFICATIONS\n\n**2.1 Hero — Video Overlay**\n* Full-screen background video (`\u003Cvideo autoplay muted loop playsinline>` with a `poster` fallback) showing an abstract futuristic dark-tech visual (digital particles, neural networks, or geometric motion evoking blockchain). Use a royalty-free sample video URL (e.g., from Coverr\u002FPexels CDN).\n* Overlay: `background: rgba(0,0,0,0.5)` over the video for text legibility.\n* Generous top padding: `padding-top: 280px` on desktop, scaled down on mobile.\n\n**2.2 Gradient Headline**\n* Hero headline uses gradient text fill:\n```css\nbackground: linear-gradient(144.5deg, #FFFFFF 28%, transparent 115%);\n-webkit-background-clip: text;\nbackground-clip: text;\n-webkit-text-fill-color: transparent;\n```\n* Font sizes: `56px` desktop, `36px` mobile. In light mode, adjust the gradient (dark text fading to transparent) to preserve legibility.\n\n**2.3 Pill Badge**\n* Pill-shaped badge above the headline: `border-radius: 9999px`, `border: 0.6px solid rgba(255,255,255,0.2)`, containing a 4px white dot (`width: 4px; height: 4px; border-radius: 50%`) and text at mixed opacities (e.g., label at 60%, highlight at 70%).\n\n**2.4 Layered Pill Buttons**\n* Primary CTA buttons built in layers: outer container with `border: 0.6px solid #FFFFFF; border-radius: 9999px`, inner pill fill, and a white glow\u002Fstreak highlight across the top edge (via `::before` with a subtle white gradient blur).\n* Secondary button: ghost pill with `border: 0.6px solid rgba(255,255,255,0.2)`.\n* All buttons: minimum 44×44px touch targets, flex centered, `gap: 0.5rem`.\n\n**2.5 Navigation**\n* Sticky top nav, minimal dark. Logo left, nav links center\u002Fright, each link followed by a `chevron_down` Material Icon at 14px. Theme toggle in nav.\n\n---\n\n## 3. COMPONENT STATE REQUIREMENTS (ALL SECTIONS)\n\n**3.1 Buttons** — style via classes only: Default (flex, centered, 44×44px min), Hover (brightness\u002Fshadow shift, `cursor: pointer`), Focus (visible focus ring from CSS variables), Active (`transform: scale(0.97)`), Loading (disabled + CSS spinner, no dimension change), Disabled (`opacity: 0.5`, greyscale, `cursor: not-allowed`), Success\u002FError feedback states using `--text-success`\u002F`--text-error`. The Final CTA and Pricing buttons must implement the waitlist\u002Fsubmit flow with a loading state and success feedback.\n\n**3.2 Cards** (Features, Pricing, Testimonials) — Default: flexbox layout, `--bg-secondary` surface, subtle border, elevation tokens. Hover: `transform: translateY(-2px)` + shadow shift. Focus-within: border highlight when a child control is focused. Include a skeleton\u002Fshimmer loading style and an empty-state style (Google Icon + guidance text) defined in CSS.\n\n**3.3 Forms** (waitlist email capture in Hero or Final CTA) — label + input + dedicated error container in a flex group. States: empty, focused (outline ring), filled, valid (success border + check icon), invalid (error border, error text, error icon), disabled, read-only. Validate email format; announce errors via `aria-live=\"polite\"`.\n\n**3.4 FAQ** — accessible accordion using semantic `\u003Cdetails>`\u002F`\u003Csummary>` or ARIA-correct custom disclosure; keyboard operable; animated open\u002Fclose via CSS transitions; chevron icon rotates on open.\n\n**3.5 Modals** — Pricing tier details or video preview may open a modal: centered flex, backdrop overlay, Google Icon close button, focus trapping, `Esc` and overlay-click close, animated open\u002Fclose states.\n\n---\n\n## 4. GLOBAL UX & ACCESSIBILITY\n\n* Fluid responsive sizing; no horizontal overflow at any breakpoint.\n* All state changes animated with `transition: var(--transition-normal)`; respect `prefers-reduced-motion` (disable transforms\u002Fshimmer\u002Fvideo autoplay motion).\n* Sufficient contrast in both dark and light modes; never rely on color alone to communicate state.\n* Semantic HTML5 (`header`, `nav`, `main`, `section`, `footer`), logical focus order, full keyboard operability, ARIA labels on custom widgets, `aria-live` regions for dynamic feedback (form errors, waitlist success, toasts).\n* Every click\u002Fhover\u002Fsubmit triggers visible feedback.\n* Destructive\u002Fdanger actions (if any) use a distinct `.btn-danger` style visible in both themes.\n\n---\n\n## 5. DELIVERABLES\n\n* Files: `index.html`, `style.css`, `script.js` (single deferred `\u003Cscript src>` reference only; no inline script blocks).\n* BEM naming consistently across all files.\n* Write real, polished English marketing copy for a Web3\u002Fblockchain product (invent a coherent product name and narrative across all sections). No lorem ipsum.\n* All user-facing copy, labels, and comments in English; all class names, variable names, and file names in ASCII English.\n",1791954988782]