[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-057-Flat-Design-Educacional-Vibrante":3},"# CODING-AI PROMPT — \"SkillSpark\" E-Learning Landing Page (Vibrant Educational Flat Design)\n\n**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Produce a complete, production-ready landing page in a single attempt. Do not ask clarifying questions — every requirement is specified below.\n\n**Project Brief:** Build a landing page for **\"SkillSpark\"**, an e-learning platform. Theme: **Vibrant Educational Flat Design** — engaging, interactive, modern, clear, structured, accessible. Era: **2026+ Dynamic Learning**. Output category: **Playful & Youth** (friendly, energetic, rounded shapes, bold typography, sticker-like badges, lively micro-interactions).\n\n**Visual Direction:** Flat UI elements with illustrative icons; vibrant primary and secondary colors used for categorization; legible sans-serif typography; animated vector-style illustrations; progress micro-interactions with visual feedback; smooth, functional element transitions; electric blue and sun yellow accents; clear and accessible feel.\n\n**Color Palette:**\n- Primary: Electric Blue `#007BFF`, Sun Yellow `#FFD700`, Emerald Green `#2ECC40`, White `#FFFFFF`\n- Secondary: Vibrant Orange `#FF8C00`, Soft Purple `#9370DB`, Shock Pink `#FF00CC`, Light Gray `#F5F5F5`\n\n**Sections to Build:** Header\u002FNav, Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.\n\n**Copy Locale:** All user-facing copy must be written in **English**, in a playful, youth-oriented, encouraging tone. Write real, specific copy — lorem ipsum is prohibited.\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 anywhere in the HTML.\n* **Class\u002FID Selectors Only:** All design properties, layout rules, and states must be targeted via class or ID selectors in `style.css`.\n* **Minimal HTML Modifications:** HTML must remain clean, semantic, and styling-agnostic — changing the look must only require editing CSS.\n\n### 1.2 CSS Variables (`var(--...)`) & Theme Tokens\nAll visual tokens must live in `:root` (and theme overrides). Required token set:\n\n```css\n:root {\n  \u002F* Colors — Light (default) *\u002F\n  --primary: #007BFF;        \u002F* Electric Blue — CTAs, links, active states *\u002F\n  --primary-strong: #0066CC; \u002F* Darkened blue for white-text button fills (contrast ≥ 4.5:1) *\u002F\n  --secondary: #FFD700;       \u002F* Sun Yellow — badges, highlights, accents (never white text on yellow) *\u002F\n  --accent-green: #2ECC40;   \u002F* Emerald — success, progress fills, borders *\u002F\n  --accent-orange: #FF8C00;  \u002F* Vibrant Orange — category color A *\u002F\n  --accent-purple: #9370DB;  \u002F* Soft Purple — category color B *\u002F\n  --accent-pink: #FF00CC;    \u002F* Shock Pink — category color C \u002F playful accents *\u002F\n  --bg-primary: #fefefe;     \u002F* Page background *\u002F\n  --bg-secondary: #F5F5F5;   \u002F* Light Gray — alternating section bands, card surfaces *\u002F\n  --text-primary: #333333;\n  --text-secondary: #555555;\n  --text-success: #1F8A3B;   \u002F* Accessible darkened emerald for text; #2ECC40 reserved for borders\u002Fprogress *\u002F\n  --text-error: #D93025;\n  --border-default: #E3E6EA;\n  --border-success: #2ECC40;\n  --border-error: #D93025;\n\n  \u002F* Shape, depth, motion *\u002F\n  --radius-sm: 6px;\n  --radius-md: 12px;\n  --radius-lg: 20px;\n  --shadow-sm: 0 2px 0 0 rgba(51, 51, 51, 0.12); \u002F* flat, hard-edged *\u002F\n  --shadow-md: 4px 4px 0 0 var(--primary);        \u002F* flat offset shadow for hover elevation *\u002F\n  --spacing-gap: 1.5rem;\n  --transition-fast: 150ms;\n  --transition-normal: 300ms;\n  --ease-standard: ease-in-out;\n  --z-dropdown: 100;\n  --z-modal: 1000;\n  --z-toast: 2000;\n  --font-base: \"Roboto\", sans-serif;\n}\n```\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 — in **every** theme, not only the default.\n* **Near-White Rule:** Never use `#ffffff` as a background; use `#fefefe`. *Exception note: the source palette lists `#FFFFFF` as the background — substitute `#fefefe` per this rule.*\n* **Flat Shadows:** *Exception note: the source spec declares `box-shadow: none`; shadows are therefore defined as hard-edged flat offset shadows (no blur) and used sparingly for hover\u002Felevation feedback only.*\n* **Flat Borders:** *Exception note: the source spec declares `border: none`; crisp 2px solid borders in palette colors are still required for card edges, inputs, and focus rings — do not omit borders.*\n* **Transitions:** Use `transition: \u003Cspecific-properties> var(--transition-normal) var(--ease-standard)` — never `transition: all`.\n\n### 1.3 Mandatory Dark Mode Support\n* **Implementation:** Define dark tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class on `\u003Chtml>`. Suggested dark values (verify ≥ 4.5:1 text contrast, adjust as needed): `--primary: #4D9FFF; --secondary: #FFDE33; --accent-green: #3DDC5A; --accent-orange: #FFA340; --accent-purple: #B39DFF; --accent-pink: #FF5CD9; --bg-primary: #141821; --bg-secondary: #1E2430; --text-primary: #F5F5F5; --text-secondary: #B8C0CC; --text-success: #4CD96B; --text-error: #FF6B5E; --border-default: #2C3442;` with flat shadows re-derived for dark surfaces.\n* **Theme Switching:** Background and text variables must flip seamlessly with zero HTML restructuring.\n* **Persistence:** Store the choice in `localStorage` (e.g., key `skillspark-theme`), fall back to `prefers-color-scheme` on first visit, and provide a visible header toggle with correct `aria-pressed` and `aria-label` (\"Switch to dark mode\" \u002F \"Switch to light mode\"), using Material Symbols `light_mode` \u002F `dark_mode`.\n* *Exception note: the source style spec requested light-mode-only output; per mandatory architecture, dark mode MUST still be fully implemented — do not skip it.*\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n* Build all layout structures with Flexbox (`display: flex` \u002F Tailwind flex utilities).\n* **Default Alignment Rule:** Every flex container must default to `align-items: center` (`items-center`) unless there is an explicitly justified exception.\n* **Mobile-Friendly First:** All flex layouts must be responsive out of the box — multi-column rows collapse to columns below ~768px. No horizontal scrolling at any viewport width down to 320px.\n\n### 1.5 Framework Default & Tailwind CSS Integration\n* Use Tailwind CSS (CDN acceptable) for layout\u002Fspacing utilities, backed by a custom `style.css` that defines all design tokens and component classes (`.btn`, `.card`, `.input-group`, etc.) via `@layer`\u002F`@apply` or plain CSS referencing the variables. Every utility must map back to a CSS variable or a generic reusable class — no hard-coded hex values outside `:root`\u002Ftheme blocks.\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n* **Text:** Load **Roboto** (weights 400, 500, 700, 900) via Google Fonts `\u003Clink>` and bind it to `--font-base`. Base size 16px, line-height 1.6. Headings use 700–900 weights for the playful, youthful voice.\n* **Icons:** Use **Google Material Symbols** exclusively. Raw inline SVGs and local icon files are forbidden. *Exception note: the source spec calls for \"animated vector illustrations\"; build all illustrations from Material Symbols composed and animated with CSS — no inline SVGs.*\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n### 2.1 Button Component Requirements\nStyle all states via CSS classes (`.btn`, `.btn-primary`, `.btn-secondary`, `.btn-outline`, `.btn-danger`):\n* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` Minimum touch target 44×44px. Primary fill uses `--primary-strong` with white bold text; secondary uses `--secondary` with `--text-primary`.\n* **Hover:** Brightness shift plus flat shadow (`--shadow-sm`), `cursor: pointer`.\n* **Focus:** Distinct focus ring via `outline`\u002F`box-shadow` using CSS variables, visible on keyboard navigation.\n* **Active\u002FPressed:** `transform: scale(0.97)`.\n* **Loading:** Disables interaction, prevents double-clicks, renders a CSS spinner or animated Google Icon without changing button dimensions.\n* **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n* **Success\u002FError:** Temporary feedback styles driven by `--text-success` \u002F `--text-error`.\n\n### 2.2 Card Component Requirements\nApplies to feature cards (`.course-card-flat`), testimonial cards, and pricing cards:\n* **Default:** Flexible flexbox layout, `--bg-secondary` or `--bg-primary` surface, crisp 2px solid border, `--radius-md`, flat aesthetic (no blur shadows).\n* **Hover:** `transform: translateY(-2px)` plus flat offset shadow; category icon performs a playful wiggle\u002Fscale animation.\n* **Focus-within:** Card border highlights when a child link\u002Fbutton receives focus.\n* **Loading (Skeleton):** Define shimmer animation CSS to prevent layout jumps.\n* **Empty State:** Structured fallback with a Google Icon and clear guidance text.\n\n### 2.3 Form & Input Requirements\nUsed for the Final CTA email capture and Footer newsletter:\n* **States:** Empty, Focused (outline ring), Filled, Valid (success border + check icon), Invalid (error border, `--text-error` message, error icon), Disabled, Read-only.\n* **Structure:** Flex container wrapping a `\u003Clabel>`, input field, and a dedicated error-feedback container wired to an `aria-live=\"polite\"` region. Inline success confirmation on valid submit — never a silent action.\n\n### 2.4 Modal \u002F Popup Requirements\nThe Hero \"Watch Demo\" button opens a demo modal:\n* **States:** Opening, Open, Loading, Success\u002FError, Closing — all animated via CSS transitions.\n* **UX Features:** Centered flex container (`align-items: center`), backdrop overlay at `--z-modal`, Google Icon (`close`) close button, keyboard focus trapping, close via `Esc` and overlay click, `role=\"dialog\"`, `aria-modal=\"true\"`, labeled title. Content: a 16:9 flat placeholder frame with a `play_circle` icon and caption (video content is genuinely unspecified, so a styled placeholder is permitted here).\n\n### 2.5 Accordion (FAQ) Requirements\n* Accessible accordion using `\u003Cdetails>\u002F\u003Csummary>` or button-based pattern with `aria-expanded`; chevron (`expand_more`) rotates on open; smooth CSS height\u002Fopacity transition; fully keyboard operable; only semantic HTML — no new widgets beyond this spec.\n\n### 2.6 Progress Micro-Interaction Requirements (`.progress-bar-flat`)\n* **Scroll progress:** A fixed top-of-page `.progress-bar-flat` in `--primary` whose width tracks scroll position.\n* **Hero demo:** An animated `.progress-bar-flat` inside the hero illustration (\"Course progress — 75%\") that fills on load.\n* **Steps:** How It Works step badges show a filled progress connection as the section scrolls into view. All progress fills must animate via CSS and pause under `prefers-reduced-motion`.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by Default:** Fluid sizing, breakpoints without horizontal overflow; sticky header collapses nav into a hamburger (`menu` icon) dropdown at `--z-dropdown` on mobile.\n* **Smooth Animations:** CSS transitions on all state changes using the motion tokens; wrap decorative keyframes in `@media (prefers-reduced-motion: no-preference)` and provide a reduced fallback.\n* **Accessibility (a11y):** Contrast ≥ 4.5:1 for text and ≥ 3:1 for UI components in **both** light and dark modes. Never rely on color alone to communicate state. Semantic HTML5 landmarks (`header`, `nav`, `main`, `section`, `footer`), logical heading hierarchy (one `h1`), ARIA roles\u002Flabels on custom widgets, visible skip link, logical focus order, full keyboard operability, and `aria-live` regions for dynamic feedback (form errors, price changes, toasts).\n* **Mandatory Visual Feedback:** Every click, hover, and submission triggers a visible state change.\n* **Destructive Actions:** Any `.btn-danger` variant must be visually distinct in both themes.\n* **Reveal-on-scroll:** Subtle staggered entrance animations (fade\u002Fslide) via `IntersectionObserver`, disabled under reduced motion.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n* **File Structure:** Separate `index.html`, `style.css`, and `script.js`. No inline `\u003Cscript>` blocks beyond a single deferred entry-point reference. No inline event handlers — all behavior via `addEventListener` in `script.js`.\n* **Naming Convention:** BEM (`block__element--modifier`) consistently across the entire deliverable — never mix conventions. The spec-mandated classes **`.course-card-flat`** (Features cards), **`.animated-illustration`** (Hero illustration), and **`.progress-bar-flat`** (progress bars) must exist and be used as BEM block names.\n* **No Unrequested Placeholders:** All copy must be real, specific, English e-learning copy. Placeholders are permitted only for genuinely unspecified content (e.g., the demo video frame).\n* **JS responsibilities (all in `script.js`):** theme toggle + persistence, mobile nav, FAQ accordion, modal open\u002Fclose + focus trap, pricing billing toggle, form validation + live feedback, scroll progress bar, IntersectionObserver reveals.\n\n---\n\n## 5. SECTION-BY-SECTION BUILD SPECIFICATION\n\n### 5.1 Header \u002F Navigation\nSticky flex header: logo (`school` Material Symbol + \"SkillSpark\" wordmark), anchor links to all sections with smooth scrolling, theme toggle (1.3), primary CTA \"Get Started\", hamburger dropdown on mobile.\n\n### 5.2 Hero\nTwo-column flex (stacks on mobile): left — eyebrow badge (`rocket_launch` icon + \"New: 2026 Interactive Courses\"), `h1` with a sun-yellow marker-highlight on a key word (e.g., \"Learn Fast. Have Fun. **Level Up** Every Day.\"), benefit-driven subheadline, dual CTAs (`.btn-primary` \"Start Learning Free\" + outline \"Watch Demo\" opening the modal), trust row (5 `star` icons, \"4.9\u002F5 from 12,000+ learners\", flat avatar stack of colored initial circles). Right — `.animated-illustration`: a flat CSS-composed scene of rounded shapes with Material Symbols (`menu_book`, `psychology`, `lightbulb`, `play_circle`) in palette colors, floating\u002Fpulsing keyframe animations, containing the animated `.progress-bar-flat` demo.\n\n### 5.3 Features (3 cards)\nThree `.course-card-flat` cards, each with a flat colored icon tile, title, 2–3 line description, and \"Explore\" link — colored by category: **Electric Blue** (`bolt`, \"Learn by Doing\" — interactive lessons and hands-on projects), **Vibrant Orange** (`emoji_events`, \"Stay Motivated\" — streaks, badges, XP), **Soft Purple** (`groups`, \"Learn Together\" — live sessions and community).\n\n### 5.4 How It Works (3 steps)\nThree steps with numbered flat badges (1 = Sun Yellow, 2 = Emerald, 3 = Shock Pink), icons (`person_add` → `play_circle` → `workspace_premium`), a connecting dashed progress line on desktop, staggered reveal animation. Copy: sign up free → learn with bite-sized interactive lessons → earn certificates and level up.\n\n### 5.5 Testimonials\nThree flat cards: colored initial-circle avatar, 5-star rating (filled `star` symbols), authentic-sounding quote, learner name + role (e.g., student, career switcher, teacher). Hover lift per 2.2.\n\n### 5.6 Pricing (3 tiers)\nMonthly\u002FAnnual toggle (annual shows a yellow \"Save 20%\" badge) with animated price swap announced via `aria-live`. Tiers: **Starter** (Free), **Pro** (highlighted: 2px `--secondary` border, \"Most Popular\" badge, `.btn-primary`), **Team**. Feature lists use `check_circle` (green) for included and `close` (gray) for excluded items; each tier has its own CTA with full button states per 2.1.\n\n### 5.7 FAQ\nAccordion per 2.5 with 5–6 real questions (certificates, refunds, offline access, canceling subscriptions, team plans) and genuine answers.\n\n### 5.8 Final CTA\nFull-width flat Electric Blue band (bold white text, yellow accents — verify contrast): `h2` headline, subcopy, and an inline email-capture form exercising all states from 2.3, with a success confirmation.\n\n### 5.9 Footer\nFlex\u002Fgrid layout: brand column (logo, tagline, accessible social text links), \"Platform\", \"Company\", and \"Support\" secondary link columns, newsletter form (states per 2.3), bottom bar with copyright and legal links. All icon-only controls carry `aria-label`.\n\n---\n\n## 6. FINAL ACCEPTANCE CHECKLIST\n\nBefore delivering, verify: zero `style=\"...\"` attributes; zero inline SVGs; zero inline scripts except the single deferred `script.js`; all colors via CSS variables; complete light **and** dark themes with persisted toggle; every interactive element has hover, focus, active, and (where applicable) loading\u002Fdisabled\u002Fsuccess\u002Ferror states; full keyboard-only navigation pass; no horizontal scroll at 320px; all copy is real English; the classes `.course-card-flat`, `.animated-illustration`, and `.progress-bar-flat` are present and functional. Generate the final code now.\n",1791954980709]