[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-613-Doodle-Sketch-Livre":3},"# BUILD PROMPT — Landing Page: \"Doodle \u002F Freehand Sketch\" Theme\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-quality Landing Page on the first attempt for the theme **\"Doodle \u002F Freehand Sketch\"** — a hand-drawn, sketchy-line-art infographic aesthetic: whimsical doodles, varied stroke weights, organic imperfect lines, playful casual arrangement, paper-white background with colorful doodles.\n\n**Product Concept:** Invent one coherent fictional product (e.g., a collaborative freehand sketching \u002F whiteboard app) and give it a name. Write **all user-facing copy in English**, in a playful, casual, creative tone that matches the doodle aesthetic. No lorem ipsum.\n\n**Required Sections:** Header\u002FNav, 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- **No Inline CSS:** The `style=\"...\"` attribute is forbidden in 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 semantic and style-agnostic; re-theming requires editing only `style.css`.\n- **SVG Clarification:** SVG *presentation attributes* (`stroke`, `fill`, `stroke-width`, `stroke-linecap`, `pathLength`) on doodle paths are permitted — they are not inline CSS. Shared stroke styles should still live in CSS classes (e.g., `.doodle-path`).\n\n### 1.2 CSS Variables & Theme Tokens\nStore all tokens in `:root` and override per theme:\n\n- **Colors:** `--primary: #9B59B6` (purple), `--secondary: #E74C3C` (red), `--primary-deep: #7D3C98` (purple darkened for small-text AA contrast), `--accent-amber: #F39C12`, `--accent-blue: #3498DB`, `--accent-teal: #1ABC9C`, `--accent-grey: #95A5A6`.\n- **Backgrounds:** `--bg-primary: #fefefe` (paper white — **never `#ffffff`**), `--bg-secondary: #f7f5f0` (warm sketch-paper tint for alternating sections).\n- **Text:** `--text-primary: #2A2A2A`, `--text-secondary: #5D6D66` (darkened cool grey — raw `#95A5A6` is reserved for decorative sketch lines only, never body text), `--text-success: #148F77`, `--text-error: #C0392B`.\n- **Ink token:** `--ink: #2A2A2A` — the master doodle stroke color that flips in dark mode.\n- **Borders:** `--border-default: #2A2A2A`, `--border-error: #E74C3C`, `--border-success: #1ABC9C`.\n- **Contrast Pairing:** Every light background token pairs with dark text; every dark background token pairs with light text — enforced in **both** themes. Purple `#9B59B6` and red `#E74C3C` may be used for large text (≥24px \u002F 18.66px bold) and UI components only; small accent text uses `--primary-deep` \u002F `--text-error`. Amber is decorative-only on light backgrounds.\n- **Wobbly Radii (replaces uniform radii for doodle borders):**\n  ```css\n  --wobble-1: 255px 15px 225px 15px \u002F 15px 225px 15px 255px;\n  --wobble-2: 15px 225px 15px 255px \u002F 225px 15px 255px 15px;\n  --wobble-3: 125px 10px 20px 185px \u002F 25px 205px 205px 25px;\n  --radius-sm \u002F --radius-md \u002F --radius-lg: for any non-doodle rounding.\n  ```\n- **Shadows (comic offset style):** `--shadow-sm: 2px 2px 0 var(--ink)`, `--shadow-md: 4px 4px 0 var(--ink)`.\n- **Spacing & Transitions:** `--spacing-gap`, `--transition-fast: 150ms`, `--transition-normal: 300ms`, `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`, `--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1)`.\n- **Elevation\u002FStacking:** `--z-dropdown`, `--z-modal`, `--z-toast`.\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>`.\n- **Dark Palette (dark sketchbook):** `--bg-primary: #232329`, `--bg-secondary: #2B2B32`, `--text-primary: #F5F3EC`, `--text-secondary: #B8B7BC`, `--ink: #F5F3EC`, brightened accents: `--primary: #B985D6`, `--secondary: #EC7063`, `--accent-amber: #F5B041`, `--accent-blue: #5DADE2`, `--accent-teal: #48C9B0`. Verify WCAG AA for all text in dark mode.\n- **Theme Switching:** Backgrounds, text, ink strokes, and doodle stroke colors must flip via variables only — no HTML restructuring.\n- **Persistence:** Store choice in `localStorage` (fallback to `prefers-color-scheme` on first visit); apply on script load. Provide a visible toggle (Material Symbols `light_mode` \u002F `dark_mode`) with correct `aria-pressed` and `aria-label` states.\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n- **Default Alignment Rule:** Every flex container defaults to `align-items: center` (`items-center`) unless an exception is explicitly justified in a CSS comment.\n- **Mobile-Friendly First:** All rows convert to columns on small viewports; **zero horizontal scrolling at 320px** — absolutely-positioned decorative doodles must live inside `overflow: hidden` containers and have `pointer-events: none`.\n\n### 1.5 Framework Default & Tailwind CSS Integration\n- Use Tailwind CSS (CDN) for **structural\u002Flayout utilities only** (flex, grid, spacing, sizing, responsive prefixes).\n- **All colors, typography, borders, shadows, and animations live in `style.css`** as reusable component classes (`.btn`, `.card`, `.input-group`, `.badge`) driven by CSS variables. **Tailwind color utilities are forbidden.**\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n- **Text:** Google Fonts via `\u003Clink>`: **Caveat** (600\u002F700) for display headings, prices, and badges; **Patrick Hand** or **Kalam** (400) for body copy. Bind to `--font-hand` and `--font-base`.\n- **Icons:** Google Material Symbols (Rounded variant) for all functional icons (menu, close, check, star, arrows, person, expand_more, theme toggle). Raw inline SVGs are forbidden for functional icons.\n- **Exception Clause:** Decorative hand-drawn doodle illustrations (hero art, squiggle underlines, connector paths, stars, arrows, scribble badges) are explicitly permitted as inline SVG `\u003Cpath>`\u002F`\u003Ccircle>` elements using `stroke-linecap=\"round\"`, `stroke-linejoin=\"round\"`, varied `stroke-width` (1–3px), and `pathLength=\"1\"` for draw animations. All decorative SVGs must be `aria-hidden=\"true\"` and `focusable=\"false\"`.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n### 2.1 Button Component Requirements\n- **Default:** `.btn` — `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px, 2px solid `var(--ink)` border, a `--wobble-*` radius, handwritten font, `cursor: pointer`. Variants: `.btn--primary` (purple fill, white text), `.btn--secondary` (paper fill, ink text), `.btn--danger` (red — visually distinct in both themes).\n- **Hover:** Playful wobble (rotate ±1deg via `--ease-bounce`) and offset shadow grows (`--shadow-sm` → `--shadow-md`).\n- **Focus:** Distinct sketchy focus ring: `outline: 2px dashed var(--primary); outline-offset: 3px;` — visible in both themes.\n- **Active\u002FPressed:** `transform: translate(2px, 2px) scale(0.97)` with offset shadow collapsing to 0 (pressed-into-paper effect).\n- **Loading:** `.is-loading` disables interaction, prevents double-clicks (`pointer-events: none; aria-busy=\"true\"`), and renders a CSS spinner (a rotating sketchy circle: `border` + `--wobble-*` radius + `animation: spin`) that does not change button dimensions.\n- **Disabled:** `opacity: 0.5`, greyscale filter, `cursor: not-allowed`.\n- **Success\u002FError:** Temporary state classes using `--text-success` \u002F `--text-error` with icon + `aria-live` announcement.\n\n### 2.2 Card Component Requirements\n- **Default:** `.card` — flexible flexbox layout, `--bg-secondary` or paper fill, 2px `var(--ink)` border, `--wobble-*` radius, `--shadow-sm`. Alternate wobble variants across sibling cards (`:nth-child`) so no two look identical.\n- **Hover (interactive):** `transform: translateY(-2px)` + shadow grows + subtle wobble rotation.\n- **Focus-within:** Border color shifts to `var(--primary)` when a child link\u002Fbutton receives focus.\n- **Loading (Skeleton):** Shimmer animation class defined in CSS; no layout jumps.\n- **Empty State:** Doodle icon + clear guidance text fallback layout.\n\n### 2.3 Form & Input Requirements\n- **Structure:** `.input-group` — flex container wrapping a `\u003Clabel>`, the input, and a dedicated error feedback container with `aria-live=\"polite\"`.\n- **States:** Empty, Focused (dashed outline ring), Filled, Valid (teal border + Material `check` icon), Invalid (red border, `--text-error` message, Material `error` icon), Disabled, Read-only.\n- **Styling:** Inputs look hand-drawn — 2px ink border, `--wobble-*` radius, paper background, handwritten font at ≥16px to prevent iOS zoom.\n- **Behavior:** On submit, validate email format; invalid → `.is-invalid` + message + focus first invalid field; valid → button loading state → success state with check icon and confirmation message in the `aria-live` region. Prevent double submission.\n\n### 2.4 Modal \u002F Popup Requirements\n- **States:** Opening, Open, Loading, Success\u002FError, Closing — all animated via CSS transitions.\n- **UX Features:** Centered flex container (`align-items: center`), backdrop overlay, Material `close` icon button, keyboard focus trapping, close via `Esc` and overlay click, `role=\"dialog\"`, `aria-modal=\"true\"`.\n- **Note:** The FAQ must be an accordion, not a modal. Apply this spec only if any popup is implemented.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by Default:** Fluid `clamp()` typography, responsive breakpoints, no horizontal overflow at any width.\n- **Sketch Reveal on Scroll:** Use `IntersectionObserver` in `script.js` to add `.in-view` (threshold ≈ 0.2, unobserve after firing). Apply reveal-hidden styles only when a `.js` class exists on `\u003Chtml>` so content remains visible if JS fails.\n- **Draw-In Animation (signature effect):** Every doodle SVG path gets `pathLength=\"1\"` and:\n  ```css\n  .doodle-path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s var(--ease-standard); }\n  .in-view .doodle-path { stroke-dashoffset: 0; }\n  ```\n  Stagger paths via `transition-delay`. Filled (non-stroked) doodle shapes fade in with opacity instead.\n- **Wobble & Float:** Define `@keyframes wobble` (rotate −1.5deg ↔ 1.5deg) for hover feedback and `@keyframes float-doodle` (translateY ±8px + slight rotate) for idle decorative doodles.\n- **Reduced Motion:** Under `prefers-reduced-motion: disable all draw, wobble, and float animations; force `stroke-dashoffset: 0` and reveal all content statically; disable smooth scrolling.\n- **Accessibility (a11y):** AA contrast in both themes; never rely on color alone — pair icons\u002Ftext with every state; semantic HTML5 (`header`, `nav`, `main`, `section`, `footer`, correct `h1`–`h3` hierarchy); ARIA roles\u002Flabels on custom widgets (accordion, mobile menu, toggle); logical DOM\u002Ffocus order; full keyboard operability; `aria-live` regions for form feedback and dynamic states; decorative SVGs `aria-hidden`.\n- **Mandatory Visual Feedback:** Every click, hover, focus, and submission triggers a visible state change.\n- **Destructive Actions:** `.btn--danger` visually distinct in both light and dark themes.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n- **File Structure:** Separate `index.html`, `style.css`, `script.js`. Only one `\u003Cscript>` tag: `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>`. Google Fonts and Material Symbols via `\u003Clink>` in `\u003Chead>`.\n- **Naming Convention:** BEM throughout (`.hero__title`, `.card--feature`, `.btn--primary`, `.faq__question`). Never mix conventions.\n- **No Unrequested Placeholders:** Write real, playful English copy for the invented product; placeholders only where content was genuinely unspecified.\n- **script.js scope (behavior only):** theme toggle + persistence, IntersectionObserver reveals, FAQ accordion, mobile menu, email form validation\u002Fsubmit states, footer year auto-update.\n\n---\n\n## 5. DOODLE THEME DESIGN SYSTEM\n\n- **Aesthetic:** Sketchbook paper (`#fefefe`), dark ink lines, colorful doodles in purple\u002Fred\u002Famber\u002Fblue\u002Fteal, imperfect organic curves — avoid perfect geometric shapes.\n- **Hand-Drawwn Borders:** All cards, buttons, inputs, and badges use 2px `var(--ink)` borders with `--wobble-*` radii (alternate variants so elements don't look cloned).\n- **Comic Offset Shadows:** `box-shadow: var(--shadow-sm\u002Fmd)` using `var(--ink)` — never blurry drop shadows.\n- **Doodle Underlines:** SVG squiggle under each section heading that draws in on scroll.\n- **Section Dividers:** Dashed hand-drawn horizontal lines between sections.\n- **Handwritten Annotations:** Small rotated (≤3deg) casual asides (e.g., \"psst… it's free!\") near CTAs — real text, kept readable; pointing arrows are decorative SVGs (`aria-hidden`).\n- **Floating Doodles:** Stars, squiggles, circles, arrows scattered in Hero and Final CTA — `aria-hidden`, `pointer-events: none`, `float-doodle` animation, contained to prevent overflow.\n- **Stroke Discipline:** `stroke-linecap: round`, `stroke-linejoin: round`, varied `stroke-width` 1–3px, `fill: none` for line art.\n\n---\n\n## 6. LANDING PAGE SECTION-BY-SECTION REQUIREMENTS\n\n- **Header (sticky):** Logo wordmark in Caveat + small doodle mark; nav anchors (Features, How It Works, Testimonials, Pricing, FAQ) with CSS smooth scroll (reduced-motion safe); theme toggle; `.btn--primary` CTA. Mobile: Material `menu` hamburger → animated dropdown, `aria-expanded`\u002F`aria-controls`, Esc closes, links keyboard-reachable. Header background adapts to dark mode.\n- **Hero:** Two-column desktop (stacked mobile), both `align-items: center`. H1 in Caveat (`clamp()` sizing) with squiggle underline doodle; subheadline; two CTAs (\"Start Doodling — it's free\" primary, \"See how it works\" secondary). Hero illustration: inline SVG doodle scene (e.g., sketchbook\u002Frocket\u002Flightbulb) that self-draws on load with staggered path delays. 4–6 floating decorative doodles. Small trust line with Material icons.\n- **Features (3 cards):** Section heading + doodle underline. Each `.card--feature`: Material Symbol inside a wobbly accent-colored circle (purple \u002F blue \u002F teal), h3, description. Staggered scroll reveal; hover wobble + shadow growth.\n- **How It Works (3 steps):** Numbered badges (1, 2, 3 in wobbly circles, Caveat numerals), h3 + text per step. Desktop: horizontal row connected by a curvy dashed SVG path that draws on scroll; Mobile: vertical stack with simplified\u002Frotated connector.\n- **Testimonials (3 cards):** Wobbly-circled avatar (Material `person` or doodle SVG face, accent colors), quote, name + role, 5-star rating via Material `star` icons. Cards alternate ±1–2deg rotation for playful arrangement; straighten on hover\u002Ffocus. Decorative doodle quotation marks.\n- **Pricing (3 tiers):** Free \u002F featured Pro \u002F Studio (invent fitting names). Featured tier: \"Most Popular\" badge wrapped in a scribble-circle doodle, accent header, slight desktop scale, stronger shadow, doodle border. Prices in Caveat; feature lists with Material `check` (teal) and `close` (grey) icons; each tier has a CTA (featured gets `.btn--primary`). Distinct tier separation in dark mode.\n- **FAQ:** 5–6 items. Accordion: full-row `\u003Cbutton class=\"faq__question\">` (min-height 44px) with `aria-expanded`\u002F`aria-controls`, panel animated via `grid-template-rows: 0fr → 1fr`, Material `expand_more` icon rotating 180deg.\n- **Final CTA:** Full-width wobbly-bordered panel with `--shadow-md`, corner doodles, big Caveat headline, supporting line, and the email capture form per §2.3 (validation → loading → success with `aria-live` confirmation).\n- **Footer:** Secondary links grouped (Product, Company, Support, Legal — About, Blog, Careers, Help Center, Privacy, Terms); social row using generic Material Symbols or text links (no brand SVGs); auto-updating copyright year; mini doodle logo; \"Back to top\" link. Links get dashed hand-drawn underlines on hover\u002Ffocus; fully readable in dark mode.\n",1791954989972]