[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-607-Bento-Box-Grid":3},"# System Prompt: Build a \"Bento Box Grid\" Landing Page\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete Landing Page in a single attempt. Do not ask clarifying questions — deliver the full, production-ready code immediately.\n\n**Theme:** Bento Box Grid — Modular, Grid, Organized, Apple-Inspired (2020s Apple aesthetic)\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* Keep all styling strictly inside a dedicated `style.css` file. **No `style=\"...\"` attributes anywhere in the HTML.**\n* All design properties, layout rules, and states must be targeted via class or ID selectors.\n* HTML must remain clean, semantic, and agnostic of visual styling — changing the site's look requires modifying only the CSS file.\n\n### 1.2 CSS Variables & Theme Tokens\nStore all visual tokens in `:root` (and theme classes) using CSS variables:\n* **Colors:** `--primary`, `--secondary`, `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`.\n* **Bento palette:** Light mode uses `#F5F5F7` as the page background (`--bg-primary`) and `#fefefe` (never `#ffffff`) for card surfaces (`--bg-secondary`). Pair every light background token with a dark text token and vice versa in **all** themes.\n* **Radius & Shadows:** `--radius-sm` (12px), `--radius-md` (16px), `--radius-lg` (24px), `--shadow-sm` (`0 4px 6px rgba(0,0,0,0.05)`), `--shadow-md`.\n* **Spacing & Transitions:** `--spacing-gap` (16px), `--transition-fast`, `--transition-normal`, `--ease-standard`.\n* **Elevation:** `--z-dropdown`, `--z-modal`, `--z-toast`.\n\n### 1.3 Mandatory Dark Mode\n* Define dark mode tokens under `@media (prefers-color-scheme: dark)` **and** a `.dark` class selector. Dark mode must keep the Apple-clean feel: near-black background (`#0d0d0f` or similar), elevated card surfaces, and full contrast pairing.\n* Theme switching must work without any HTML restructuring. Persist user choice via `localStorage`, falling back to `prefers-color-scheme` on first visit. Include a visible toggle control with correct `aria-pressed` \u002F `aria-label` state.\n\n### 1.4 Layout — Grid + Flexbox, Mobile-First\n* **Bento grid core:** `display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 16px;` for the main bento compositions (Hero, Features). Use varied spans (`grid-column: span 2`, `grid-row: span 2`, asymmetric 1x1 \u002F 2x1 \u002F 2x2 tiles) to create the Apple-style asymmetric mosaic.\n* **Responsive collapse:** On viewports \u003C 900px reduce to 2 columns; \u003C 600px to a single column. Prevent horizontal scrolling at all sizes.\n* **Flexbox inside cards:** Every flex container must default to `align-items: center` unless explicitly justified otherwise. All flex layouts must be mobile-responsive out of the box (rows → columns on small viewports).\n* Use Tailwind CSS (or clean custom CSS via `@layer` \u002F `@apply`); all utilities must map back to CSS variables or reusable class names (`.btn`, `.card`, `.bento-tile`, `.input-group`).\n\n### 1.5 Typography & Icons (Google Fonts Mandatory)\n* Text: load a Google Font (Inter or Poppins recommended for the Apple aesthetic) via `\u003Clink>`\u002F`@import`, bound to `--font-base`.\n* Icons: **Google Material Symbols only.** No raw inline SVGs, no local icon files.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n### 2.1 Buttons\nAll states styled via CSS classes:\n* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` Minimum touch target 44×44px.\n* **Hover:** brightness\u002Fshadow shift with `cursor: pointer`.\n* **Focus:** distinct focus ring using CSS variables for keyboard navigation.\n* **Active:** `transform: scale(0.97)` click feedback.\n* **Loading:** disables interaction, prevents double-clicks, renders a CSS spinner or animated Google Icon 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* **Danger:** `.btn-danger` must be visually distinct in both light and dark themes.\n\n### 2.2 Bento Cards \u002F Tiles\n* **Default:** rounded corners (`--radius-lg`, 24px), `--bg-secondary` surface, subtle border, `--shadow-sm` elevation, generous negative space, clean typographic hierarchy.\n* **Hover:** `transform: scale(1.02)` with `transition: var(--transition-normal)` and shadow elevation shift.\n* **Focus-within:** card border 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\n### 2.3 Forms & Inputs (FAQ search, newsletter signup in Final CTA\u002FFooter)\n* **States:** Empty, Focused (outline ring), Filled, Valid (success border\u002Ficon), Invalid (error border, red text, error icon), Disabled, Read-only.\n* **Structure:** flex container wrapping label, input, and a dedicated error feedback container.\n\n### 2.4 Modals \u002F Popups (FAQ answers may expand inline; any modal must follow)\n* **States:** Opening, Open, Loading, Success\u002FError, Closing — all animated via CSS transitions.\n* **UX:** centered flex container (`align-items: center`), backdrop overlay, Google Icon close button, keyboard focus trapping, closable via `Esc` or overlay clicks.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by default:** fluid sizing, no horizontal overflow at any breakpoint.\n* **Smooth animations:** CSS transitions on all state changes, respecting `prefers-reduced-motion`.\n* **Accessibility:** sufficient contrast in both Light and Dark modes; never rely on color alone to communicate state; semantic HTML5 elements; correct ARIA roles\u002Flabels on custom widgets (accordion, toggle, modal); logical DOM\u002Ffocus order; full keyboard operability; `aria-live` regions for dynamic feedback (form errors, toasts, loading states).\n* **Mandatory visual feedback:** every click, hover, or submission triggers a visible state change.\n* **Section specifics:** Hero as a large 2×2 bento tile with headline + CTA; Features as 3 varied-span tiles; How It Works as 3 numbered step tiles; Testimonials as quote tiles; Pricing as 3 tier cards with the middle tier visually elevated; FAQ as an accessible accordion; Final CTA as a full-width accent tile; Footer with secondary links in a responsive flex\u002Fgrid layout.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n* **Files:** separate `index.html`, `style.css`, `script.js`. 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 user-facing copy in English. No lorem-ipsum where real copy is expected; placeholders only where content was genuinely unspecified.\n",1791954989902]