[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-557-Vertical-Whiteboard-Timeline":3},"# System Prompt: Build \"Vertical Whiteboard Timeline\" Landing Page\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready Landing Page on the first attempt. Follow every rule below without exception.\n\n**Deliverable:** A handmade whiteboard-style landing page — a vertical step-by-step tutorial\u002Fsketchnote aesthetic with a metallic aluminum frame, numbered step circles, curved connector arrows, doodle icons, sticky-note pastel fills, and hard zero-blur shadows.\n\n**Sections Required:** 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. All styling lives in `style.css`.\n* **Class\u002FID Selectors Only:** All design properties, layout rules, and states are targeted via class or ID selectors.\n* **Minimal HTML Modifications:** HTML stays semantic and agnostic of visual styling — changing the look requires editing only the CSS file.\n\n**1.2 CSS Variables & Theme Tokens**\nStore all visual tokens in `:root`:\n* **Colors:** `--primary`, `--secondary`, `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`.\n* **Theme-Specific Tokens:** `--ink-black: #1A1A1A` (marker ink), `--frame-gray: #B8BBBE`, `--page-bg: #E8E9EB`, `--ice-white: #F9FAFB`, `--pastel-blue: #A5D8FF`, `--pastel-yellow: #FFF9E6`, `--pastel-green: #C3E8BD`, `--pastel-pink: #FADADD`, `--pastel-orange: #FFE0C2`, `--pastel-lavender: #E8DCF5`, `--hard-shadow: 4px 4px 0px rgba(51,51,51,0.4)`.\n* **Contrast Pairing:** Light background tokens pair with dark text tokens; dark background tokens pair with light text tokens — enforced for every theme.\n* **Light Mode Background:** Never pure white. Use `#F9FAFB` (ice white) as the whiteboard surface and `#E8E9EB` as the page background behind the frame. Use `#fefefe` instead of `#ffffff` wherever a near-white is needed.\n* **Border Radius & Shadows:** `--radius-sm`, `--radius-md`, `--radius-lg`, `--shadow-sm`, `--shadow-md` (all shadows hard: zero blur, 4-6px offset, `#333` at 0.3-0.5 opacity).\n* **Spacing & Transitions:** `--spacing-gap`, `--transition-fast`, `--transition-normal`, `--ease-standard`.\n* **Elevation\u002FStacking:** `--z-dropdown`, `--z-modal`, `--z-toast` to prevent layered-component overlap conflicts.\n\n**1.3 Mandatory Dark Mode Support**\n* **Implementation:** Define dark mode tokens under `@media (prefers-color-scheme: dark)` AND a `.dark` class selector. In dark mode, the whiteboard becomes a \"blackboard\": `--bg-primary` shifts to a deep charcoal, `--text-primary` to chalk-white `#F2F2F2`, pastel fills darken slightly but keep sufficient contrast, and the metallic frame gradient darkens. Hard shadows remain zero-blur with adjusted opacity.\n* **Theme Switching:** Background and text variables must switch seamlessly with no HTML restructuring.\n* **Persistence:** Persist user choice via `localStorage`, falling back to `prefers-color-scheme` on first visit. Provide a visible toggle control (styled as a doodle sticky-note or marker icon button) with correct `aria-pressed` and `aria-label` state.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n* Build all layout structures with **Flexbox** (or CSS Grid where the spec explicitly demands it — see 3.2 for the timeline grid).\n* **Default Alignment Rule:** Every flex container defaults to `align-items: center` unless an explicitly justified exception exists.\n* **Mobile-Friendly First:** All layouts are mobile-responsive out of the box. No horizontal scrolling at any viewport width.\n\n**1.5 Framework Default**\nUse clean custom CSS (no framework required for this handmade aesthetic). All utility patterns must map to reusable class names (`.btn`, `.card`, `.step-circle`, `.content-box`, `.input-group`).\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n* **Text Fonts (all from Google Fonts):** `Permanent Marker` for titles and step numbers (uppercase, slight rotation `transform: rotate(-2deg)`), `Caveat` for handwritten annotations (italic), `Kalam` for body text, `Patrick Hand` for labels\u002Fbuttons. Bind them via `--font-title`, `--font-hand`, `--font-body`, `--font-label` variables. Include the Google Fonts `\u003Clink>` tags.\n* **Icons:** Use Google Material Symbols for UI icons (theme toggle, close buttons, chevrons).\n* **Doodle Illustration Exception:** The hand-drawn doodle illustrations (laptop with download arrow, cursor clicking, folder with checkmark, plus button, gear, play button, megaphone, connector plugs) and curved connector arrows are explicitly permitted as inline SVGs — this is a mandatory exception to the no-inline-SVG rule. All doodle SVGs must use `stroke: #1A1A1A`, `stroke-width: 3-4px` (variable for organic feel), `stroke-linecap: round`, `stroke-linejoin: round`, stroke-only with optional pastel fills, sized 40-80px. No local icon files.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Button Component**\nStyle all states via CSS classes (`.btn`, `.btn-primary`, `.btn-danger`, `.btn-ghost`):\n* **Default:** Flex layout (`display: flex; align-items: center; justify-content: center; gap: 0.5rem;`), Patrick Hand font, thick black border 2.5px, pastel fill, hard shadow `4px 4px 0px rgba(51,51,51,0.4)`. Minimum touch target 44x44px.\n* **Hover:** Shadow offset grows (e.g., `6px 6px 0px`) with `cursor: pointer` — a \"lifted sticky note\" effect.\n* **Focus:** Distinct focus ring using CSS variables (`outline` \u002F `box-shadow`) for keyboard navigation.\n* **Active\u002FPressed:** `transform: translate(2px, 2px)` with shadow shrinking to simulate pressing into the board.\n* **Loading:** Disables interactions, prevents double-clicks, renders an animated Google Material Symbol spinner without distorting button dimensions.\n* **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n* **Success\u002FError:** Temporary feedback states driven by `--text-success` \u002F `--text-error`.\n\n**2.2 Card Component** (Features cards, Testimonials, Pricing tiers, content boxes)\n* **Default:** Flexbox layout, white `#fefefe` or pale yellow `#FFF9E6` background, irregular black borders 2-3px (use `clip-path` or slightly varied `border-radius` values per corner to simulate hand-drawn edges), hard shadow 4-6px offset, zero blur.\n* **Hover:** `transform: translateY(-2px)` with shadow growth, or a slight rotation wobble.\n* **Focus-within:** Card border thickens or highlights when a child link\u002Fbutton receives focus.\n* **Loading (Skeleton):** Shimmer animation defined in CSS to prevent layout jumps.\n* **Empty State:** Structured fallback with a Google Icon and clear guidance text.\n* **Sticky Notes:** Testimonial cards styled as sticky notes — pastel fills, one slightly rotated corner via `clip-path` or pseudo-element \"tape\" strip, small rotations (`rotate(-1.5deg)` \u002F `rotate(1deg)` alternating).\n\n**2.3 Form & Input Requirements** (Final CTA email capture)\n* **States:** Empty, Focused (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 field, and dedicated error feedback container.\n* **Styling:** Hand-drawn border aesthetic, Patrick Hand labels, Kalam input text.\n\n**2.4 Modal \u002F FAQ Accordion**\n* **Modal States (if any popup is used):** Opening, Open, Loading, Success\u002FError, Closing — all animated via CSS transitions. Centered flex container (`align-items: center`), backdrop overlay, Google Icon close button, keyboard focus trapping, close via `Esc` or overlay clicks.\n* **FAQ:** Native `\u003Cdetails>`\u002F`\u003Csummary>` elements or ARIA-compliant accordion buttons with `aria-expanded`, animated open\u002Fclose via CSS, visible focus states, and an `aria-live` region for state announcements.\n\n---\n\n## 3. CORE UX, VISUAL EFFECTS & MICRO-INTERACTION RULES\n\n**3.1 Global UX Rules**\n* **Responsive by Default:** Fluid sizing, no horizontal overflow at any breakpoint.\n* **Smooth Animations:** CSS transitions on all state changes (`transition: var(--transition-normal)`), fully respecting `prefers-reduced-motion`.\n* **Accessibility (a11y):** Sufficient contrast in both Light and Dark modes. Never rely solely on color to communicate state. Semantic HTML5 elements, correct ARIA roles\u002Flabels on custom widgets, logical DOM\u002Ffocus order, full keyboard operability, and `aria-live` regions for dynamic feedback (form errors, loading states).\n* **Mandatory Visual Feedback:** Every click, hover, or submission triggers a visible state change.\n* **Destructive Actions:** `.btn-danger` must be visually distinct in both light and dark themes.\n\n**3.2 Whiteboard Visual Effects (Mandatory)**\n* **METALLIC FRAME:** The entire page content sits inside a whiteboard frame. Border uses a multi-stop gray gradient simulating an aluminum frame: `linear-gradient(135deg, #C8CACD, #D8DADD, #C0C2C5, #B0B2B5)` with a dual `box-shadow`. At the base of the frame, render decorative Expo markers and an eraser as styled divs (marker bodies with colored caps using pastel tokens, rounded ends, slight rotations).\n* **VERTICAL TIMELINE (How It Works):** A dashed or solid irregular black line descending along the left column (30-40% width), implemented with `stroke-dasharray` on an SVG or a `border-left: 3px dashed #1A1A1A`. It connects the numbered step circles.\n* **NUMBERED STEP CIRCLES:** Circles with thick black borders (2.5-3px), alternating pastel fills (blue `#A5D8FF`, green `#C3E8BD`, pink `#FADADD`, orange `#FFE0C2`, lavender `#E8DCF5`), large step numbers in Permanent Marker.\n* **CONNECTOR ARROWS:** SVG paths with `stroke-linecap: round`, variable `stroke-width: 3-4px`, organic curvature. Horizontal arrows run from each circle to its content box on the right; vertical arrows descend between steps.\n* **CONTENT BOXES:** Rectangles with irregular black borders 2-3px, white or pale yellow `#FFF9E6` background, hard shadow 4-6px offset with zero blur. Internal \"screenshot\" placeholders have thick borders and slightly crumpled corners (varied `border-radius`).\n* **HARD SHADOWS:** All `box-shadow` declarations use ZERO blur, 4-6px offset, `#333` at 0.3-0.5 opacity.\n* **WHITEBOARD TEXTURE:** A subtle noise texture overlay at 5-8% opacity over the ice-white background (CSS-only via a repeating gradient or inline SVG `feTurbulence` data-URI — no external image files).\n* **TIMELINE GRID:** `grid-template-columns: 35% 65%` for the timeline section, collapsing to `1fr` at 768px. On mobile, the timeline centers and each content box stacks below its step circle. Gap between steps: 4-6rem.\n* **SCROLL REVEAL:** Intersection Observer in `script.js` triggers fade-in\u002Fslide-up animations on sections and timeline steps. Respect `prefers-reduced-motion` by disabling animations.\n\n**3.3 Section-Specific Requirements**\n* **Hero:** Permanent Marker headline (uppercase, `rotate(-2deg)`), Caveat handwritten annotation with a curved SVG arrow pointing at the headline, primary CTA button, doodle illustration (laptop with download arrow).\n* **Features:** 3 cards, each with a doodle SVG icon (gear, megaphone, play button), Patrick Hand card titles, Kalam body text, alternating pastel accent strips.\n* **How It Works:** 3 steps on the vertical timeline with numbered circles, horizontal connector arrows, content boxes with screenshots and Caveat annotations.\n* **Testimonials:** Sticky-note styled cards with slight rotations, Caveat quotes, Patrick Hand attribution.\n* **Pricing:** 3 tiers; the middle tier highlighted with a stronger pastel background and a rotated \"Most Popular\" sticky badge. Each tier CTA is a `.btn`.\n* **FAQ:** Accordion per 2.4.\n* **Final CTA:** A box with stronger blue `#A5D8FF` or pink `#FADADD` background, email capture form per 2.3, and a primary `.btn`.\n* **Footer:** Secondary links, theme toggle, small doodle divider, copyright in Patrick Hand.\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 CSS.\n* **Naming Convention:** One consistent class-naming convention (BEM or a fixed utility set) across the entire deliverable — never mix conventions.\n* **No Unrequested Placeholders:** Write all user-facing copy in **English**. No lorem-ipsum-only submissions; write realistic, on-theme copy for every section.\n* **Complete on First Attempt:** All sections, states, dark mode, responsive behavior, and accessibility features must be present in the single deliverable.\n",1791954989093]