[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-445-Bento-Grid":3},"# SYSTEM PROMPT — SENIOR FRONTEND ENGINEER TASK: BUILD A COMPLETE \"BENTO GRID\" LANDING PAGE\n\n**Role & Mission:** Act as a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready landing page in the **Bento Grid** style (2020s Apple Design Language) **on the first attempt**. Generate the final `index.html`, `style.css`, and `script.js` in a single response — no scaffolding, no partial output. Every rule below is mandatory. Where a detail is unspecified, make the most professional Apple-style decision and proceed.\n\n## 1. PROJECT BRIEF\n\n- **1.1 Theme:** Bento Grid — modular, organized, compartmentalized, Apple-inspired (\"bento box\" aesthetic: tidy compartments, dedicated spaces, clean dashboard feel). Era: 2020s Apple Design Language. Full Light mode + Full Dark mode support.\n- **1.2 Sections (in this order):** Hero · Features (3 cards) · How It Works (3 steps) · Testimonials · Pricing (3 tiers) · FAQ · Final CTA · Footer with secondary links.\n- **1.3 Copy:** Invent ONE coherent product identity (e.g., a modular productivity\u002Fworkspace SaaS that matches the bento positioning). Write ALL user-facing copy in English, in a confident, concise Apple tone — realistic headlines, feature names, prices, testimonials, and Q&As. Lorem ipsum is prohibited.\n\n## 2. BENTO GRID STYLE SPECIFICATION\n\n- **2.1 Lattice (the only permitted CSS Grid context):** Each major section renders as its own bento lattice: `display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(200px, auto); gap: var(--spacing-gap)` (16px). Compartments use varied spans — 1x1, 2x1 (`grid-column: span 2`), 1x2 (`grid-row: span 2`), 2x2. No section may collapse into a flat row of identical boxes. Responsive collapse: 4 columns ≥1024px → 2 columns 640–1023px (2-wide cells become full-width) → 1 column \u003C640px (all cells full width; relax `grid-auto-rows` to `auto`). Never allow horizontal overflow at any viewport.\n- **2.2 Compartments:** Surface `var(--bg-secondary)`; padding: 24px; `border-radius: var(--radius-lg)` (20px); clean border `1px solid var(--border-default)`; `box-shadow: var(--shadow-sm)` = `0 2px 8px rgba(0,0,0,0.04)`. Hover: `translateY(-2px)` lift + `var(--shadow-md)`, with `transition: transform var(--transition-fast) var(--ease-standard)` (200ms). Page background: `var(--bg-primary)` (#F5F5F7) — the page background is never pure white.\n- **2.3 Light Tokens (`:root`):** `--primary: #0071E3` (accent blue — all primary actions; derived hover tone `#0071E3` → `#0077ED`) · `--secondary: #1D1D1F` (dark grey — inverted contrast blocks) · `--bg-primary: #F5F5F7` · `--bg-secondary: #FFFFFF` — **Explicit exception to the near-white rule:** the Bento palette mandates Pure White for elevated compartment surfaces, so `#FFFFFF` is permitted ONLY on `--bg-secondary` surfaces; `--bg-primary` must remain `#F5F5F7`, never `#FFFFFF` · `--text-primary: #1D1D1F` · `--text-secondary: #6E6E73` (contrast-adjusted from `#86868B` to meet WCAG AA on light surfaces; `#86868B` is allowed only for large\u002Fdecorative text) · `--text-success: #34C759` · `--text-error: #FF3B30` · `--border-default: #E8E8ED` · `--border-success: #34C759` · `--border-error: #FF3B30` · `--radius-sm: 12px` (buttons\u002Finputs) · `--radius-md: 16px` · `--radius-lg: 20px` (compartments) · `--shadow-sm: 0 2px 8px rgba(0,0,0,0.04)` · `--shadow-md: 0 8px 24px rgba(0,0,0,0.08)` · `--spacing-gap: 16px` · `--transition-fast: 200ms` · `--transition-normal: 300ms` · `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)` · `--z-dropdown: 100` · `--z-modal: 200` · `--z-toast: 300` · `--font-base: 'Inter', -apple-system, 'Segoe UI', sans-serif`.\n- **2.4 Contrast Pairing (enforced in every theme):** Light surfaces (`#F5F5F7`\u002F`#FFFFFF`) always carry dark text; dark surfaces (`#1D1D1F`\u002F`#000000`) always carry light text.\n- **2.5 Dark Tokens (mandatory, defined under BOTH `@media (prefers-color-scheme: dark)` AND a `.dark` class):** `--primary: #0A84FF` · `--secondary: #F5F5F7` · `--bg-primary: #000000` · `--bg-secondary: #1D1D1F` · `--text-primary: #F5F5F7` · `--text-secondary: #86868B` · `--border-default: #2C2C2E` · success\u002Ferror unchanged · shadows black-based. Set the `color-scheme` property per theme so native controls match.\n\n## 3. STRICT ARCHITECTURE RULES\n\n- **3.1 CSS-First & Zero Inline CSS:** All styling lives in `style.css`. The `style=\"...\"` attribute is forbidden anywhere in the HTML. Style only via class\u002FID selectors. HTML stays semantic and presentation-agnostic — a full re-theme must be achievable by editing CSS alone.\n- **3.2 Token-Driven CSS:** Every color, radius, shadow, spacing, transition, easing, and z-index value must be consumed as `var(--...)` — no hardcoded hex\u002Fpx values inside component rules (exceptions: the token blocks in 2.3\u002F2.5 and the mandated grid metrics in 2.1).\n- **3.3 Mandatory Dark Mode:** Visible header toggle button using a Material Symbol (`light_mode`\u002F`dark_mode`) with correct `aria-pressed` and `aria-label` (e.g., \"Switch to dark mode\"); switching tokens must require zero HTML restructuring. Persist the user's choice in `localStorage` (e.g., key `\"theme\"`); first visit falls back to `prefers-color-scheme`; honor OS-level changes while no explicit choice exists; the page must still render correct dark styles with JavaScript disabled (via the media query).\n- **3.4 Flexbox & Mobile-First:** Every non-grid layout (header, buttons, compartment interiors, form rows, footer columns) uses Flexbox and **must default to `align-items: center`** unless an explicitly justified exception applies; rows must convert to columns at small viewports with no horizontal scrolling. **Explicit exception:** the bento lattices themselves use CSS Grid as mandated by the theme (2.1); Flexbox remains the rule for everything inside and between compartments.\n- **3.5 Framework:** Use Tailwind CSS (Play CDN permitted as framework infrastructure) OR clean hand-written CSS organized with Tailwind's `@layer` philosophy (tokens → base → components → utilities). Utility classes must map back to CSS variables or generic reusable classes (`.btn`, `.card`, `.input-group`). Declare your choice and stay consistent.\n- **3.6 Typography & Icons (Google-only):** Load **Inter** (weights 400\u002F500\u002F600\u002F700) via Google Fonts `\u003Clink>`, bound to `--font-base`; fluid headings via `clamp()`; body ~16px with line-height ≥1.5. Icons exclusively via **Google Material Symbols (Outlined)** (`\u003Cspan class=\"material-symbols-outlined\">check_circle\u003C\u002Fspan>`). Inline SVGs, local icon files, and emoji-as-icons are forbidden.\n\n## 4. COMPONENT SPECIFICATIONS (ALL STATES REQUIRED)\n\n- **4.1 Buttons (`.btn`, `.btn--primary`, `.btn--secondary`, `.btn--danger`):** Default: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px, `--radius-sm`. Hover: brightness\u002Fshadow shift with `cursor: pointer`. Focus: distinct ring (`outline: 2px solid var(--primary); outline-offset: 2px`) visible in both themes. Active: `transform: scale(0.97)`. Loading (`.btn--loading`): blocks interaction and double-clicks, renders a CSS spinner or rotating Material Symbol without changing button dimensions. Disabled: `opacity: 0.5`, greyscale, `cursor: not-allowed`. Success\u002FError (`.btn--success` \u002F `.btn--error`): temporary feedback styled via `--text-success`\u002F`--text-error` with matching borders. `.btn--danger` must be defined and read clearly in both light and dark themes.\n- **4.2 Cards \u002F Bento Compartments (`.card`):** Default: Flexbox interior, `--bg-secondary`, `--border-default` border, `--shadow-sm`. Hover: `translateY(-2px)` + `--shadow-md` (200ms). Focus-within: border highlights to `--primary` when a child link\u002Fbutton receives focus. Loading (`.card--skeleton`): CSS shimmer animation that reserves real dimensions (no layout jump). Empty (`.card--empty`): centered Material Symbol icon + short guidance text. Skeleton and empty-state classes must exist in the CSS even where the static page does not mount them.\n- **4.3 Forms & Inputs (`.input-group`):** Flex container wrapping a `\u003Clabel>`, an `\u003Cinput>`, and a dedicated error-feedback element linked via `aria-describedby` inside an `aria-live=\"polite\"` region. States: empty; focused (outline ring from `--primary`); filled; valid (`.is-valid`: `--border-success` + check icon); invalid (`.is-invalid`: `--border-error`, red helper text, error icon); disabled; read-only. Never communicate state by color alone — always pair with text or icon.\n- **4.4 Accordion (FAQ) & Modal Policy:** No modal is required on this page. FAQ = accessible accordion: each item is a `\u003Cbutton aria-expanded aria-controls>` + panel; Material Symbol chevron rotates on toggle; open\u002Fclose animated via CSS transitions; fully keyboard operable. IF any dialog is ever introduced, it must implement opening\u002Fopen\u002Floading\u002Fsuccess\u002Fclosing states (all CSS-animated), a centered flex overlay (`align-items: center`), a backdrop, a Material Symbol close button, keyboard focus trapping, Esc and overlay-click close, and `z-index: var(--z-modal)`.\n\n## 5. SECTION-BY-SECTION REQUIREMENTS\n\n- **5.1 Header (minimal, sticky):** Translucent surface + `backdrop-filter: blur()`, `--z-dropdown`, brand (wordmark or Material Symbol + name), the mandatory theme toggle (3.3), and one small `.btn--primary` \"Get started\" anchor. Include a skip-to-content link.\n- **5.2 Hero:** 4×2 lattice — one 2x2 flagship compartment (eyebrow, `h1` clamp-scaled, subcopy, `.btn--primary` + `.btn--secondary` pair) + one 1x2 visual compartment (CSS-only decoration: radial-gradient field or composed oversized Material Symbols — no image assets) + two 1x1 stat compartments (large metric + label).\n- **5.3 Features (3 cards):** Spans 2x1 + 1x1 + 1x1 (or mirrored). Each: tinted rounded icon chip (Material Symbol), title, one-to-two-line description.\n- **5.4 How It Works (3 steps):** Spans 1x1 + 2x1 + 1x1. Each: numbered badge (01\u002F02\u002F03), Material Symbol, title, description. Reading order must remain step 1→3 at every breakpoint.\n- **5.5 Testimonials:** Two-row lattice — one featured 2x2 quote + one 2x1 quote + two 1x1 quotes (4 total). Quote text, name, role, and a CSS initials-circle avatar (no external images); optional Material Symbol star rating.\n- **5.6 Pricing (3 tiers):** A dedicated 3-column bento row (same 16px gap): tier name, price, feature list with check icons, CTA button. Middle tier = \"Most Popular\": badge, `--primary` border, stronger shadow, `.btn--primary` (flanking tiers use `.btn--secondary`). The highlight must be distinct in both themes without color-only cues.\n- **5.7 FAQ:** One full-width compartment; internal two-column flex layout (heading + blurb | accordion of ≥5 realistic Q&As), collapsing to one column on mobile.\n- **5.8 Final CTA:** Full-width compartment styled `background: var(--secondary); color: var(--bg-primary);` so it auto-inverts with correct contrast pairing in both themes. Contains an `h2`, supporting copy, and an email-capture `.input-group` (label + email input + `.btn--primary` submit + aria-live error container). JS behavior: invalid email → `.is-invalid` + error message; valid → button loading state, double-submit blocked, then success state + polite `aria-live` confirmation.\n- **5.9 Footer:** Brand + tagline block plus 3–4 secondary link columns (Product, Company, Resources, Legal) in a wrapping flex layout; bottom bar with © line and legal links. Labels must be real; `href=\"#\"` is permitted only where targets are unspecified. Every link has visible hover and focus states.\n\n## 6. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** Fluid type and spacing, breakpoints per 2.1, zero horizontal overflow.\n- **Smooth motion:** Every state change transitions via `var(--transition-fast)` \u002F `var(--transition-normal)`; all non-essential motion (lifts, shimmer, chevron rotation, smooth scrolling) must be disabled under `prefers-reduced-motion`.\n- **Accessibility:** WCAG AA contrast in both themes; never color-only state; semantic HTML5 (`header`\u002F`main`\u002F`section`\u002F`nav`\u002F`footer`, one `h1`, logical heading order); correct ARIA on the toggle, accordion, and form; logical DOM\u002Ffocus order; full keyboard operability; `aria-live` regions for dynamic feedback.\n- **Mandatory visual feedback:** Every click, hover, focus, and submission produces a visible state change.\n- **Destructive actions:** `.btn--danger` (4.1) must remain visually distinct in both light and dark themes.\n\n## 7. DELIVERABLES & OUTPUT FORMAT\n\n- **Files:** Separate `index.html`, `style.css`, and `script.js`. `index.html` contains only: Google Fonts + Material Symbols `\u003Clink>` tags, (optionally) the Tailwind CDN reference, semantic markup, and exactly ONE `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>`. Zero inline styles; zero inline script blocks.\n- **Naming convention:** One convention only — BEM for all custom classes (`.bento__cell--2x2`, `.btn--primary`, `.input-group__error`, `.card--skeleton`). If Tailwind utilities are used, restrict them to layout concerns and never mix conventions.\n- **script.js scope:** Theme toggle + persistence, FAQ accordion behavior, email form validation + button states, reduced-motion-safe anchor scrolling. Nothing else.\n- **Completeness:** Ship the finished page in this single response — all sections populated with real English copy, all component states styled, no TODOs, no lorem ipsum, and no unrequested placeholder content.\n",1791954986963]