[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-149-EdTech-Plataforma-de-Cursos":3},"# CODING AGENT PROMPT — \"EdTech Course Platform\" Landing Page (Corporate & SaaS)\n\n**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready, single-page EdTech landing page on the first attempt. The design language is **vibrant, gamified, and motivational** — a polished 2020s EdTech\u002FSaaS aesthetic featuring progress badges, gradient accents, a connected learning path, and energetic microcopy. **All user-facing copy must be written in English.**\n\n---\n\n## PROJECT BRIEF & DESIGN TOKENS\n\n**Theme:** EdTech Course Platform — online courses, gamification, progress badges, vibrant colors, students, learning paths, challenges, modern UI.\n\n**Palette → CSS Variables (light theme, defined in `:root`):**\n\n| Token | Value | Usage |\n|---|---|---|\n| `--primary` | `#FF6B00` | Orange — primary brand, CTA gradient start |\n| `--secondary` | `#7C3AED` | Purple — gradient end, accents |\n| `--accent` | `#2563EB` | Blue — links, informational highlights |\n| `--accent-gold` | `#FFC107` | Yellow — XP badges, star ratings, \"Most Popular\" tags (never as text color on light backgrounds) |\n| `--bg-primary` | `#fefefe` | Page background — **explicit exception: the source palette's `#FFFFFF` is adapted to near-white `#fefefe`; pure `#ffffff` must not appear anywhere** |\n| `--bg-secondary` | `#F8FAFC` | Light grey — alternating sections, card surfaces |\n| `--text-primary` | `#1A1A1A` | Headings and body copy |\n| `--text-secondary` | `#4B5563` | Muted copy |\n| `--text-success` \u002F `--text-error` | `#16A34A` \u002F `#DC2626` | Feedback states |\n| `--border-default` | `#E2E8F0` | Card and section borders |\n| `--border-success` \u002F `--border-error` | Derived from the success\u002Ferror tokens | Form feedback borders |\n| `--gradient-brand` | `linear-gradient(135deg, #FF6B00, #7C3AED)` | Hero and Final CTA washes, primary buttons |\n| `--gradient-cool` | `linear-gradient(135deg, #7C3AED, #2563EB)` | Optional secondary accents |\n\n**Dark theme tokens** (defined under a `.dark` class on `\u003Chtml>` **and** under `@media (prefers-color-scheme: dark)` guarded by `:root:not(.light)` so no-JS users still receive their OS preference): `--bg-primary: #0F172A`, `--bg-secondary: #1E293B`, `--text-primary: #F1F5F9`, `--text-secondary: #94A3B8`, `--border-default: #334155`, deepened shadows (`rgba(0,0,0,0.45)`), and brand hues lightened for text usage where contrast requires it (e.g., blue rendered as `#60A5FA`).\n\n**Contrast pairing (mandatory in every theme):** light backgrounds pair with dark text tokens; dark backgrounds pair with light text tokens. Meet WCAG AA (≥ 4.5:1 body text, ≥ 3:1 large text and UI components). If `#fefefe` text fails 4.5:1 over the lightest stop of `--gradient-brand`, darken that gradient stop (e.g., `#F05D00`) — never lighten the text.\n\n**Typography & Icons:** Google Fonts **Poppins** (weights 400\u002F500\u002F600\u002F700\u002F800) loaded via `\u003Clink>` and bound to `--font-base`; headings 700–800, body 400–500, fluid sizes via `clamp()`. Icons: **Google Material Symbols (Rounded)** loaded via Google Fonts (e.g., `rocket_launch`, `school`, `emoji_events`, `military_tech`, `workspace_premium`, `star`, `check_circle`, `expand_more`, `menu`, `close`, `dark_mode`, `light_mode`, `progress_activity`). Inline SVGs and local icon files are forbidden; decorative icon spans get `aria-hidden=\"true\"`.\n\n**Shape, depth & motion tokens:** `--radius-sm: 8px`, `--radius-md: 12px` (default card\u002Fbutton radius per spec), `--radius-lg: 20px`, `--radius-full: 999px`; `--shadow-sm: 0 2px 6px rgba(0,0,0,0.08)`, `--shadow-md: 0 4px 12px rgba(0,0,0,0.1)` (spec value), `--shadow-lg: 0 12px 28px rgba(0,0,0,0.14)`; `--spacing-gap: 1.5rem`; `--transition-fast: 150ms`, `--transition-normal: 300ms`, `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`; `--z-dropdown: 100`, `--z-modal: 200`, `--z-toast: 300`.\n\n**Signature visual effects (all mandatory, translated from the source spec):**\n1. **Progress badges on cards** — XP\u002Flevel\u002Fachievement chips on feature and pricing cards.\n2. **Gradients on headers and CTAs** — gradient washes on the Hero and Final CTA sections; gradient fills on primary buttons; a gradient accent (clipped text or underline bar) on section headings.\n3. **Hover elevating cards** — `translateY(-2px)` plus a shadow shift on every interactive card.\n4. **Learning path with connected steps** — the How It Works section renders its 3 steps as a connected trail; the connector line is drawn with CSS pseudo-elements, horizontal on desktop and vertical on mobile.\n5. **Entrance animations** — staggered fade\u002Fslide-up reveals on scroll.\n\n---\n\n## PAGE BLUEPRINT — build every section, in this order\n\n0. **Sticky header (page chrome):** skip-to-content link; logo (Material Symbol + wordmark); nav links (Features, How It Works, Testimonials, Pricing, FAQ) with smooth in-page scrolling; **theme toggle button** (sun\u002Fmoon Material Symbol, `aria-pressed`, dynamic `aria-label`, `localStorage` persistence); gradient \"Start learning\" CTA. On mobile: hamburger button (`aria-expanded`, `aria-controls`) opening a panel stacked at `--z-dropdown`, closable via `Esc` and link selection.\n1. **Hero:** full-width `--gradient-brand` wash layered so headline text passes AA in both themes; a single `\u003Ch1>` with one gradient-clipped accent word; motivational subcopy; dual CTAs (gradient primary + outlined secondary); trust row (e.g., \"50,000+ students\", 5-star rating icons, achievement badges). Entrance animation on load.\n2. **Features — 3 cards:** each card contains a gradient-tinted icon chip (Material Symbol), `\u003Ch3>` title, description, and a progress badge chip (e.g., \"+250 XP\", \"Beginner → Pro\"). Hover elevation; `:focus-within` border highlight.\n3. **How It Works — 3 connected steps:** the learning path. Each step: numbered gradient badge (01\u002F02\u002F03), `\u003Ch3>`, short text. Connector line via `::before`\u002F`::after` pseudo-elements with a gradient stroke; horizontal row on desktop, vertical stack with rotated connector on mobile.\n4. **Testimonials — 3 cards:** student quote, 5-star rating (Material Symbol `star` icons with `aria-label=\"Rated 5 out of 5\"` — never color-only), avatar circle built from CSS-styled initials (no external images), name + role. Hover elevation.\n5. **Pricing — 3 tiers:** Free \u002F Pro \u002F Team. Pro is highlighted with a \"Most Popular\" gold\u002Fgradient chip and gradient border or elevated styling. Each tier: name, price, feature list with `check_circle` icons, CTA button (gradient on Pro, outlined elsewhere). All button states from §2.1 apply.\n6. **FAQ — accessible accordion (5–6 items):** `\u003Cbutton>` with `aria-expanded` + `aria-controls`, panel with `role=\"region\"` + `aria-labelledby`; rotating `expand_more` chevron; animated open\u002Fclose via CSS; fully keyboard operable.\n7. **Final CTA:** full-width gradient section; headline + subcopy; email capture form (`.input-group` + gradient submit button) implementing the full form state suite (§2.3) with `aria-live` feedback; on valid submit: button loading state → success state + toast stacked at `--z-toast`.\n8. **Footer:** secondary link columns (Platform \u002F Company \u002F Resources \u002F Legal), social icons with descriptive `aria-label`s, copyright line. Link to real page sections wherever a target exists; `href=\"#\"` is acceptable only for genuinely unspecified destinations.\n\n---\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. Also forbidden: inline event-handler attributes (`onclick=`, etc.) and `\u003Cstyle>` blocks in HTML.\n* **Class\u002FID Selectors Only:** All design properties, layout rules, and states are targeted via class or ID selectors in `style.css`.\n* **Minimal HTML Modifications:** HTML stays semantic and styling-agnostic — a full re-theme must be achievable by editing `style.css` alone, with zero markup changes.\n\n**1.2 CSS Variables (`var(--...)`) & Theme Tokens**\n* **Colors:** Every color, radius, shadow, spacing, transition, and z-index value must be consumed via the tokens defined in the Project Brief. No hard-coded hex values outside the `:root`\u002F`.dark` token blocks; gradient definitions live inside tokens.\n* **Contrast Pairing:** Light background tokens pair with dark text tokens, dark background tokens pair with light text tokens — enforced for the default theme and dark theme alike.\n* **Light Mode Background:** The page background is `#fefefe`, never `#ffffff` (explicit adaptation of the source palette).\n* **Required tokens:** `--primary`, `--secondary`, `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`, `--radius-sm\u002Fmd\u002Flg`, `--shadow-sm\u002Fmd`, `--spacing-gap`, `--transition-fast`, `--transition-normal`, `--ease-standard`, `--z-dropdown`, `--z-modal`, `--z-toast`.\n\n**1.3 Mandatory Dark Mode Support**\n* **Implementation:** Dark tokens are defined under both `@media (prefers-color-scheme: dark)` and a `.dark` class selector; the explicit class wins when JS is active.\n* **Theme Switching:** Background and text variables must switch seamlessly with no HTML restructuring. Apply the stored theme at the top of `script.js` (immediately on execution) to minimize flash — no inline scripts are permitted.\n* **Persistence:** Store the choice in `localStorage` (key `theme`), fall back to `prefers-color-scheme` on first visit, and expose a visible header toggle with correct `aria-pressed`\u002F`aria-label` state and swapped sun\u002Fmoon icon.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n* **Default Alignment Rule:** Every flex container defaults to `align-items: center` unless an exception is explicitly justified in a CSS comment (e.g., card body text columns use `flex-start` for reading alignment).\n* **Mobile-Friendly First:** All layouts are single-column by default and expand at breakpoints (~640\u002F768\u002F1024px) via `flex-wrap` and `flex-basis`. No horizontal scrolling from 320px upward. Fluid `clamp()` sizing for type and spacing.\n\n**1.5 Framework Default & Styling Approach**\n* Author clean, hand-written custom CSS in `style.css` — the source specification supplies raw CSS values, so no framework runtime is required.\n* If you use Tailwind CSS, it may only be consumed through `@layer`\u002F`@apply` directives inside `style.css`, mapped to the design tokens and the BEM class names below. Utility-class styling directly in HTML markup is forbidden.\n* All reusable styles must map back to CSS variables or generic class names (`.btn`, `.card`, `.input-group` plus BEM variants).\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n* **Text:** Poppins via Google Fonts `\u003Clink>` (with preconnect), bound to `--font-base` with a sans-serif fallback stack.\n* **Icons:** Google Material Symbols only. Raw inline SVGs, local icon files, and emoji-as-functional-icons are explicitly forbidden.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Button Component Requirements** — `.btn` base: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px, `border-radius: var(--radius-md)`, font-weight 600. Variants: `.btn--primary` (gradient fill, `#fefefe` text), `.btn--secondary` (2px border `--primary`, adjusts for dark theme), `.btn--ghost`, and `.btn--danger` (built from `--text-error`\u002F`--border-error`, visually distinct in both themes even if unused on the page).\n* **Default:** as above.\n* **Hover:** brightness\u002Fshadow shift with `cursor: pointer`.\n* **Focus:** distinct `:focus-visible` ring via `box-shadow` using tokens, visible in both themes.\n* **Active\u002FPressed:** `transform: scale(0.97)`.\n* **Loading:** `.is-loading` + `aria-busy=\"true\"` — pointer events disabled, double-clicks prevented, CSS spinner (border animation) or animated `progress_activity` icon rendered **without changing button dimensions**.\n* **Disabled:** `opacity: 0.5`, greyscale filter, `cursor: not-allowed`, hover\u002Factive effects suppressed.\n* **Success\u002FError:** temporary `.is-success`\u002F`.is-error` feedback states using `--text-success`\u002F`--text-error`, always paired with an icon and text — never color alone.\n\n**2.2 Card Component Requirements**\n* **Default:** flexible flexbox column, `--bg-secondary` surface, 1px `--border-default`, `--radius-md`, `--shadow-sm`, padding via `--spacing-gap`.\n* **Hover:** `transform: translateY(-2px)` + `--shadow-lg` (the mandated hover-elevation effect).\n* **Focus-within:** border shifts to `--primary` when a child link\u002Fbutton receives focus.\n* **Loading (Skeleton):** `.card--skeleton` shimmer keyframe animation on placeholder blocks, defined in CSS to prevent layout jumps.\n* **Empty State:** `.card--empty` fallback layout with a Material Symbol and clear guidance text, defined in CSS.\n* **Progress badges:** rendered as real DOM chips styled with gradient\u002Fgold tokens; pseudo-elements may add decorative shapes\u002Frings. Badges conveying meaning (XP values, \"Most Popular\") must be real text elements readable by screen readers — meaningful text inside `content: \"\"` pseudo-elements is forbidden.\n\n**2.3 Form & Input Requirements** (implemented by the Final CTA email capture)\n* **States:** empty, focused (ring via token-based `box-shadow`), filled, valid (`.is-valid` — success border + `check_circle` icon), invalid (`.is-invalid` + `aria-invalid=\"true\"` — error border, `--text-error` message, error icon), disabled, read-only — all styled in CSS.\n* **Structure:** `.input-group` flex container wrapping a `\u003Clabel for>`, the input (min-height 44px), and a dedicated error feedback container. Validation runs in `script.js` (email regex on blur\u002Fsubmit); errors are linked via `aria-describedby` and announced in an `aria-live=\"polite\"` region; valid submission triggers the §2.1 loading → success sequence plus a toast.\n\n**2.4 Modal \u002F Popup Requirements** — No modal is required by this landing page. However, if you implement any dialog (e.g., a demo or enrollment confirmation), it must: be a centered flex overlay (`align-items: center`) with a backdrop; animate open\u002Fclose via CSS transitions; close via `Esc`, overlay click, and a Material Symbol close button; trap keyboard focus while open and restore focus to the trigger on close; use `role=\"dialog\"` + `aria-modal=\"true\"` with an accessible name; stack at `--z-modal`. Do not add modals beyond what the page needs.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by Default:** Mobile-first flexbox layouts, fluid sizing, breakpoints without horizontal overflow.\n* **Smooth Animations:** All state changes transition with `var(--transition-normal) var(--ease-standard)` (hover\u002Ffeedback may use `--transition-fast`). Entrance animations use `IntersectionObserver` in `script.js` adding `.is-visible`; the hidden initial state is applied only when JS is present (a class added to `\u003Chtml>` from `script.js`) so content is never permanently hidden without JS; staggered delays via CSS.\n* **Accessibility (a11y):** Semantic HTML5 landmarks (`header`\u002F`nav`\u002F`main`\u002F`section`\u002F`footer`), skip link, one `\u003Ch1>`, logical heading hierarchy, correct ARIA roles\u002Flabels on custom widgets (accordion, mobile menu, theme toggle), logical DOM\u002Ffocus order, full keyboard operability, visible focus everywhere, WCAG AA contrast in both themes, never color-only state communication, and `aria-live` regions for form errors, toasts, and loading states. Respect `prefers-reduced-motion`: disable entrance animations, transforms, and shimmer; keep instant or opacity-only state changes.\n* **Mandatory Visual Feedback:** Every click, hover, focus, and submission triggers a visible state change.\n* **Destructive Actions:** `.btn--danger` must be visually distinct in both light and dark themes.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n* **File Structure:** Three separate files — `index.html`, `style.css`, `script.js`. `index.html` references `style.css` and exactly one deferred entry point (`\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>`); no other inline scripts, styles, or event-handler attributes. `script.js` scope: theme toggle + persistence, mobile menu, accordion, smooth scrolling, entrance animations, form validation with simulated async submit, toast.\n* **Naming Convention:** BEM strictly and exclusively (`hero__title`, `card--skeleton`, `btn--primary`, `pricing-card__badge`). Never mix conventions; state classes (`.is-visible`, `.is-loading`, `.is-valid`, `.is-invalid`, `.dark`) are the only non-BEM classes permitted.\n* **No Unrequested Placeholders:** Write realistic, motivational English copy for an EdTech course platform (gamified tone: XP, badges, streaks, learning paths). No lorem ipsum. Real labels everywhere; `href=\"#\"` only for genuinely unspecified destinations.\n* **Acceptance checklist (verify before delivering):** all 9 blueprint sections present; zero inline styles\u002Fhandlers; every value token-driven; dark mode toggles, persists, and passes AA; all button states (hover\u002Ffocus\u002Factive\u002Floading\u002Fdisabled\u002Fsuccess\u002Ferror) defined; card hover elevation, skeleton, and empty styles defined; connected learning path renders correctly on desktop and mobile; FAQ accordion fully keyboard operable; email form shows valid\u002Finvalid\u002Flive feedback; no horizontal scroll at 320px; entrance animations respect `prefers-reduced-motion`; complete on the first attempt — no TODOs or stubs.\n",1791954982197]