[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-159-Chalkboard-Sketch-Note":3},"# System Prompt: Build a \"Chalkboard Sketch-Note\" Landing Page\n\nYou are an Expert Frontend Engineer. Build a complete, production-ready Landing Page in a single attempt. All user-facing copy must be written in **English**.\n\n**Theme:** Chalkboard Sketch-Note — Educational, Approachable, Structured (Classic Classroom era).\n**Visual Direction:** Chalkboard landing page, blackboard background, hand-drawn chalk style, white sketch on dark, educational aesthetic, doodle icons, ribbon banners, schematic arrows, matte slate surface, grainy chalk dust.\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 must live in a dedicated `style.css` file. **The `style=\"...\"` attribute is forbidden anywhere in the HTML.**\n* Target all design properties, layout rules, and states via class or ID selectors only.\n* Keep HTML semantic and clean (header, main, section, footer, nav, article) so restyling requires only CSS changes.\n\n**1.2 CSS Variables & Theme Tokens**\nDefine all tokens in `:root`:\n* **Colors:** `--primary: #F4D03F` (chalk yellow accent), `--secondary: #FFCC80` (pastel), `--bg-primary: #263238` (slate board), `--bg-secondary: #37474F` (raised panel), `--text-primary: #F5F5F5` (chalk white), `--text-secondary: #B0BEC5`, `--text-success: #A5D6A7`, `--text-error: #EF9A9A`, `--border-default: #546E7A` (eraser grey), `--border-error`, `--border-success`.\n* **Contrast Pairing:** Dark backgrounds pair with light text tokens; any light\u002Fpastel surface must pair with dark text (`#263238`). Enforce this everywhere.\n* **Radius & Shadows:** `--radius-sm: 2px`, `--radius-md: 6px`, `--radius-lg: 12px`, `--shadow-sm`, `--shadow-md`.\n* **Spacing & Transitions:** `--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 Support**\n* The theme is dark-first (`#263238` slate board), but a **light mode must still be defined** (light \"paper\u002Fnotebook\" variant: near-white `#fefefe` paper background, dark `#263238` chalk-ink text, accent `#F4D03F` preserved with darkened contrast pairing).\n* Implement tokens under `@media (prefers-color-scheme: dark)` and a `.dark` class selector; switching must require no HTML restructuring.\n* Persist theme choice via `localStorage`, falling back to `prefers-color-scheme` on first visit. Include a visible theme toggle with correct `aria-pressed` \u002F `aria-label` states.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n* Build all layout structures with Flexbox. Every flex container defaults to `align-items: center` unless explicitly justified otherwise.\n* Mobile-first: all rows convert to columns on small viewports. No horizontal scrolling at any breakpoint.\n\n**1.5 Framework Default**\n* Use Tailwind CSS (CDN or build) or clean custom CSS with `@layer`\u002F`@apply`; all utilities must map back to the CSS variables above and generic reusable classes (`.btn`, `.card`, `.input-group`).\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n* Load **Kalam** (Google Fonts) as the hand-drawn chalk base font, bound to `--font-base`. Use a second Google Font (e.g., Patrick Hand or Caveat) for headings if needed for hierarchy.\n* Use **Google Material Symbols** for all icons. **Raw inline SVGs and local icon files are forbidden.**\n* Recreate the chalk texture via CSS only: `background-color: #263238` with the grain overlay `background-image: url('https:\u002F\u002Fwww.transparenttextures.com\u002Fpatterns\u002Fblack-scales.png')` on the board surface, plus a wood-frame border `border: 10px solid #5D4037` on the main board container.\n* Hand-drawn feel via CSS only: dashed\u002Fsketchy borders (`border: 2px dashed var(--border-default)`), slightly rotated cards (`transform: rotate(-0.5deg)` alternating), underline \"marker\" highlights on headings using `background: linear-gradient(...)` pastel strokes.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Buttons**\n* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` — min touch target 44×44px. Primary CTA styled as a hand-drawn chalk-outline button; secondary CTA as filled pastel.\n* **Hover:** brightness\u002Fshadow shift, `cursor: pointer`.\n* **Focus:** distinct chalk-style focus ring (`outline` or `box-shadow` using `--primary`) for keyboard navigation.\n* **Active\u002FPressed:** `transform: scale(0.97)`.\n* **Loading:** disables interaction, prevents double-clicks, shows an animated Google Icon spinner without distorting 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* **Danger:** `.btn-danger` visually distinct in both themes.\n\n**2.2 Cards (Features, Pricing, Testimonials)**\n* **Default:** Flexbox layout, `--bg-secondary` panel on the slate board, dashed chalk borders, subtle grain.\n* **Hover:** `transform: translateY(-2px)` with shadow shift.\n* **Focus-within:** highlight chalk borders when a child link\u002Fbutton gains focus.\n* **Loading (Skeleton):** shimmer animation defined in CSS to prevent layout jumps.\n* **Empty State:** fallback layout with a Google Icon and guidance text.\n* Pricing tier cards: highlight the recommended tier with a hand-drawn ribbon banner (\"Most Popular\") and `--primary` accent border.\n\n**2.3 Forms & Inputs (Final CTA \u002F newsletter signup, FAQ search if any)**\n* States: Empty, Focused (chalk outline ring), Filled, Valid (success border + icon), Invalid (error border, error text, error icon), Disabled, Read-only.\n* Structure: flex container wrapping a label, input styled as a hand-drawn chalk underline field, and a dedicated error feedback container.\n\n**2.4 FAQ Accordion \u002F Modal behavior**\n* FAQ items: keyboard-operable (`button` triggers, `aria-expanded`, `aria-controls`), animated open\u002Fclose via CSS transitions.\n* Any modal\u002Fpopup: opening\u002Fopen\u002Floading\u002Fsuccess\u002Fclosing states animated via CSS; centered flex container, backdrop overlay, Google Icon close button, focus trapping, close via `Esc` or overlay click.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by default:** fluid sizing, no horizontal overflow at any viewport.\n* **Smooth animations:** `transition: var(--transition-normal)` on all state changes; respect `prefers-reduced-motion`.\n* **Accessibility:** sufficient contrast in both modes; never rely on color alone to communicate state; semantic HTML5; correct ARIA roles\u002Flabels; logical DOM\u002Ffocus order; full keyboard operability; `aria-live` regions for dynamic feedback (form errors, toasts, loading).\n* **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.\n* **Destructive actions:** visually distinct in both themes.\n\n---\n\n## 4. DELIVERABLE & 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* **Naming:** one consistent convention (BEM or a fixed utility set) across the entire deliverable — never mix conventions.\n* **Copy:** Write all real, themed, English copy for every section (hero headline, feature descriptions, step titles, testimonial quotes with names, pricing tier details, FAQ questions\u002Fanswers, CTA text, footer links). No lorem ipsum.\n* **Icons:** Google Material Symbols only — no inline SVGs, no local icon files.\n\nProduce the complete final code now, on the first attempt.\n",1791954982247]