[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-244-Flat-Design-Educacional-Vibrante":3},"# BUILD PROMPT — \"Vibrant Educational Flat Design\" E-Learning Landing Page\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Your task is to code a complete, production-quality landing page on the first attempt. The page promotes a modern e-learning platform and must feel engaging, interactive, vibrant, clear, structured, and accessible — targeting a **Playful & Youth** audience in a \"2026+ Dynamic Learning\" era. All user-facing copy must be written in **English**.\n\n**Theme Definition (translated from source spec):**\n- **Name:** Vibrant Educational Flat Design\n- **Type:** Engaging, Interactive, Modern\n- **Keywords:** e-learning, online courses, interactive, flat design, engaging, modern, vibrant, clear, structured, accessible\n- **Visual Direction:** Flat UI elements with illustrative icons; vibrant primary and secondary colors used for categorization; legible sans-serif typography; animated vector illustrations; progress-feedback micro-interactions; smooth, functional element transitions; electric blue and sun yellow accents; a clear and accessible feel.\n- **Palette — Primary:** Electric Blue `#007BFF`, Sun Yellow `#FFD700`, Emerald Green `#2ECC40`, White `#FFFFFF`. **Secondary:** Vibrant Orange `#FF8C00`, Soft Purple `#9370DB`, Shock Pink `#FF00CC`, Light Gray `#F5F5F5`.\n- **Mandatory class names from source spec:** `.course-card-flat`, `.animated-illustration`, `.progress-bar-flat` — all three must exist and be used meaningfully in the final build.\n\n**Required Page Sections (in order):** Sticky Header (nav + theme toggle), 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 must live exclusively in `style.css`. The `style=\"...\"` attribute is **forbidden** anywhere in the HTML.\n- All design properties, layout rules, and states must be targeted via class or ID selectors.\n- HTML must remain clean, semantic (HTML5 landmarks: `header`, `nav`, `main`, `section`, `footer`), and agnostic of visual styling — changing the look must only require editing `style.css`.\n\n**1.2 CSS Variables & Theme Tokens**\nStore every visual token in `:root` and consume via `var(...)`:\n\n- **Colors:** `--primary: #007BFF`; `--primary-deep: #0066CC` (AA-compliant variant for small text and links on light backgrounds); `--accent-yellow: #FFD700`; `--accent-green: #2ECC40`; `--secondary: #FF8C00`; `--accent-purple: #9370DB`; `--accent-pink: #FF00CC`; `--bg-primary: #FEFEFE`; `--bg-secondary: #F5F5F5`; `--text-primary: #333333`; `--text-secondary: #5B5B66`; `--text-success: #1E8E3E`; `--text-error: #D93025`; `--border-default: #E3E3E8`; `--border-success: #2ECC40`; `--border-error: #D93025`.\n- **Contrast pairing (mandatory, every theme):** Light backgrounds pair with dark text and vice versa. Never render `#FFD700` or `#2ECC40` as text on light backgrounds — use them only as fills\u002Fborders paired with `#333333` text, or use their darkened text variants (`--text-success`). Blue\u002Forange\u002Fpurple button fills pair with white **bold\u002Flarge** text; smaller text on or against blue must use `--primary-deep`.\n- **Backgrounds:** Do not use pure `#FFFFFF` for page\u002Fsection backgrounds — use `#FEFEFE` (per architecture standard; the source palette's white is reserved for card fills and text-on-color).\n- **Flat design reconciliation:** Baseline components use `border: none` and `box-shadow: none` (flat aesthetic). Define `--shadow-sm: 4px 4px 0 rgba(51,51,51,0.10)` and `--shadow-md: 6px 6px 0 rgba(51,51,51,0.16)` as **solid offset shadows with zero blur** — used only for hover\u002Ffocus elevation, never as blurry drop shadows.\n- **Radius:** `--radius-sm: 6px`, `--radius-md: 12px`, `--radius-lg: 20px`, `--radius-pill: 999px` (pill-shaped buttons and badges reinforce the playful tone).\n- **Spacing & Transitions:** `--spacing-gap: 1.5rem`; `--transition-fast: 0.15s ease-in-out`; `--transition-normal: 0.3s ease-in-out`; `--ease-standard: ease-in-out` (the source spec's `transition: all 0.3s ease-in-out` maps to `--transition-normal`).\n- **Elevation\u002FStacking:** `--z-dropdown: 100`, `--z-modal: 200`, `--z-toast: 300` — no hardcoded z-index values.\n\n**1.3 Mandatory Dark Mode Support**\n- *Exception clause: the source spec requested light-mode-only; per mandatory architecture, dark mode must still be fully delivered — light mode is the default presentation.*\n- Define dark tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class on `\u003Chtml>`: `--bg-primary: #0F1522`; `--bg-secondary: #1A2233`; `--text-primary: #F5F7FA`; `--text-secondary: #AEB6C6`; `--primary: #4D9FFF`; `--primary-deep: #8ABAFF`; `--accent-green: #3DDC84`; `--secondary: #FFA940`; `--accent-purple: #B39DDB`; `--accent-pink: #FF6BD6`; `--border-default: #2B3550`; `--text-success: #5BD68A`; `--text-error: #FF8A80`; offset shadows switch to `rgba(0,0,0,0.45)`. Maintain contrast pairing — dark backgrounds with light text.\n- Category color chips (`#FFD700`, `#FF8C00`, etc.) keep `#333333` text in both themes since their fills are fixed vibrant colors.\n- Theme switching must require **zero HTML restructuring** — only variable swaps. Persist choice via `localStorage` (handled in `script.js`), fall back to `prefers-color-scheme` on first visit, and expose a visible toggle in the header with correct `aria-pressed` and `aria-label` (\"Toggle dark mode\"), swapping `dark_mode`\u002F`light_mode` Material Symbols.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n- Build every layout structure with Flexbox. Every flex container **defaults to `align-items: center`** unless an exception is explicitly justified in a CSS comment.\n- Mobile-first: multi-column rows (features, pricing, steps, testimonials, footer columns) collapse to single columns on small viewports. Use fluid `clamp()` typography and a centered max-width container (~1200px). Horizontal scrolling is prohibited at any viewport width.\n\n**1.5 CSS Approach**\n- Use clean, hand-written custom CSS in `style.css` (the source specification defines a custom class set and raw CSS values; no CSS framework is required for this build). Every rule must consume the `:root` tokens — no hardcoded hex values outside `:root` and the dark theme blocks.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n- Load **Roboto** (weights 400\u002F500\u002F700\u002F900) from Google Fonts as `--font-base`, plus exactly one playful display Google Font (e.g., **Fredoka** or **Baloo 2**) as `--font-display` for headings. Include via `\u003Clink>` tags with `preconnect`.\n- Icons: **Google Material Symbols (Rounded style, FILL 1)** loaded from Google Fonts, with the required `font-family`\u002F`font-variation-settings` CSS. Raw inline SVGs and local icon files are **forbidden**.\n- *Exception clause: the source spec's \"animated vector illustrations\" must be constructed as CSS-animated compositions of Material Symbols and pure CSS shapes (circles, blobs, bars) — never as inline SVG markup.*\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Button Component (`.btn`, `.btn-primary`, `.btn-secondary`, `.btn-ghost`, `.btn-danger`)**\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` pill radius, bold label, minimum touch target 44×44px.\n- **Hover:** brightness shift and\u002For solid offset shadow (`--shadow-sm`), `cursor: pointer`.\n- **Focus:** distinct `:focus-visible` ring (3px solid `--primary`; yellow in dark mode) with offset — never remove outlines.\n- **Active\u002FPressed:** `transform: scale(0.97)`.\n- **Loading:** disables pointer events to prevent double-clicks, renders a spinning Material Symbol (`progress_activity`) or CSS spinner **without changing button dimensions**.\n- **Disabled:** `opacity: 0.5`, grayscale, `cursor: not-allowed`.\n- **Success\u002FError:** temporary feedback styles driven by `--text-success` \u002F `--text-error` (used by the Final CTA form submit).\n- **`.btn-danger`:** must be visually distinct in both light and dark themes (define it even though this page contains no destructive action).\n\n**2.2 Card Component (`.feature-card-flat`, `.course-card-flat`, `.testimonial-card-flat`, `.pricing-card-flat`)**\n- **Default:** flexible Flexbox column layout, flat baseline (no border, no shadow), filled with `#FEFEFE` or `--bg-secondary`, with a category-coded accent (top bar or icon chip) drawn from the vibrant palette.\n- **Hover:** `transform: translateY(-2px)` plus solid offset shadow and accent-color shift.\n- **Focus-within:** highlighted border\u002Foutline when a child link or button receives focus.\n- **Loading (Skeleton):** define a shimmer `@keyframes` skeleton style for `.course-card-flat` to prevent layout jumps if content is ever loaded dynamically.\n- **Empty State:** define a structured fallback (Material Symbol + short guidance text) for card grids.\n\n**2.3 Form & Input Requirements (Final CTA email capture)**\n- **Structure:** `.input-group` flex container wrapping a `\u003Clabel>`, the input, and a dedicated error-feedback element with `aria-live=\"polite\"`.\n- **States (all CSS-class driven):** empty, focused (outline ring), filled, valid (success border + `check_circle` icon), invalid (error border, `--text-error` message + `error` icon), disabled, read-only.\n- **Behavior (in `script.js`):** email validation on submit, inline error messaging, submit button transitions to loading → success with an `aria-live` announcement. Never use `alert()`.\n\n**2.4 Accordion (FAQ) & Modal (Conditional)**\n- **FAQ accordion:** each item is a `\u003Cbutton aria-expanded>` controlling a panel (`role=\"region\"`, `aria-labelledby`); chevron Material Symbol rotates 180°; panel height animates via CSS transition; fully keyboard operable; one-open-at-a-time behavior.\n- **If any modal\u002Fpopup is implemented** (e.g., a \"Watch How It Works\" demo overlay): all states animated via CSS (opening, open, loading, success\u002Ferror, closing); centered flex container (`align-items: center`); backdrop overlay; Google Icon close button; keyboard focus trapping; closes via `Esc` and overlay clicks; stacked at `--z-modal`.\n\n---\n\n## 3. LANDING PAGE SECTION SPECIFICATIONS\n\n**3.1 Sticky Header**\n- Logo (Material Symbol + wordmark), anchor nav links with smooth scrolling (`scroll-behavior: smooth`, disabled under reduced motion; `scroll-margin-top` on sections for the sticky offset), theme toggle (per 1.3), and a compact CTA button. Mobile: hamburger button (`aria-expanded`, `aria-controls`) opening a dropdown panel at `--z-dropdown` that closes on link click and `Esc`.\n\n**3.2 Hero**\n- Left column: eyebrow badge, `H1` with accent-colored highlighted words, subheadline, primary CTA (\"Start Learning Free\") and secondary CTA, plus a small trust\u002Fstats row.\n- Right column: the `.animated-illustration` — a CSS-composed scene of floating `.course-card-flat` elements (each color-coded with a Material Symbol, course title, and a `.progress-bar-flat` whose fill animates), gently floating\u002Fpulsing via CSS keyframes. Background decorated with flat geometric shapes in palette colors.\n\n**3.3 Features — 3 Cards**\n- Three `.feature-card-flat` elements, each with a Material Symbol icon chip in a distinct category color (blue, yellow, green — or orange, purple, pink), a title, and a description. Hover lift per 2.2; staggered scroll-reveal entrance.\n\n**3.4 How It Works — 3 Steps**\n- Three numbered steps (01\u002F02\u002F03) linked by a `.progress-bar-flat` track that fills as the user scrolls (IntersectionObserver adding a fill class). Each step: icon, title, short text. Collapses to a vertical column on mobile.\n\n**3.5 Testimonials**\n- Three `.testimonial-card-flat` elements: CSS-circle avatar with initials on a category color, name, role, 5-star rating (filled `star` Material Symbols with an `aria-label` such as \"Rated 5 out of 5 stars\"), and a realistic quote.\n\n**3.6 Pricing — 3 Tiers**\n- Three `.pricing-card-flat` tiers; the middle tier highlighted as \"Most Popular\" (accent badge + emphasis). Include an accessible billing toggle (Monthly\u002FAnnual) using `role=\"switch\"` with `aria-checked`, updating displayed prices with a CSS transition. Feature lists use `check_circle` (included) and `cancel` (excluded) icons — never color alone. One CTA button per tier.\n\n**3.7 FAQ**\n- 5–6 accordion items per spec 2.4, with genuine questions and answers about the platform.\n\n**3.8 Final CTA**\n- Full-bleed vibrant band (primary blue background, white bold text, yellow accents), headline, and the email-capture form per spec 2.3 with full loading → success\u002Ferror feedback.\n\n**3.9 Footer with Secondary Links**\n- Grouped secondary link columns (e.g., Platform, Company, Support, Legal), social icons (Material Symbols with `aria-label`s), brand recap, and copyright with a dynamically generated year. Link to page sections where applicable; otherwise use clearly labeled `href=\"#\"` links.\n\n---\n\n## 4. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid sizing, no horizontal overflow at any breakpoint.\n- **Smooth animations:** CSS transitions (`var(--transition-normal)`) on all state changes; all decorative animation disabled under `prefers-reduced-motion`.\n- **Accessibility (a11y):** WCAG AA contrast in both light and dark modes; never rely on color alone to communicate state (pair color with icons\u002Ftext); semantic HTML5; correct ARIA roles\u002Flabels on all custom widgets (accordion, switch, mobile nav, theme toggle); logical DOM\u002Ffocus order; full keyboard operability; a \"Skip to main content\" link; `aria-live` regions for all dynamic feedback (form errors, loading, success).\n- **Mandatory visual feedback:** every hover, click, and submission triggers a visible state change.\n- **Progress micro-interactions:** `.progress-bar-flat` elements animate their fill when scrolled into view; the How It Works track fills sequentially.\n- **Destructive actions:** none exist on this page; if any are introduced, `.btn-danger` must be visually distinct in both themes.\n\n---\n\n## 5. DELIVERABLES & OUTPUT FORMAT\n\n- **Files:** 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>`. No inline styles anywhere.\n- **Naming convention (one convention only):** consistent kebab-case component classes, including the mandatory spec classes `.course-card-flat`, `.animated-illustration`, `.progress-bar-flat`, extended with the same pattern (`.feature-card-flat`, `.pricing-card-flat`, `.testimonial-card-flat`, `.input-group`, `.btn`). State classes: `.is-loading`, `.is-visible`, `.is-open`, `.is-error`, `.is-success`. Never mix conventions.\n- **Copy:** invent a coherent e-learning brand name and write complete, realistic English copy for every headline, description, testimonial, pricing tier, and FAQ answer. Lorem ipsum is prohibited.\n- **Acknowledged exception clauses:** (1) dark mode is delivered despite the light-only source request; (2) animated illustrations are CSS + Material Symbols compositions, not inline SVGs; (3) `#FEFEFE` replaces `#FFFFFF` for backgrounds.\n",1791954983711]