[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-363-Data-Dense-Dashboard":3},"# BUILD PROMPT — LANDING PAGE: \"DATA-DENSE DASHBOARD\" (BI\u002FANALYTICS · DATA & ENGINEERING)\n\n## 1. MISSION & CREATIVE BRIEF\n\n**1.1 Role.** Act as a Senior Frontend Engineer and Expert UI Designer. Deliver a complete, production-quality landing page in a single first attempt — no stubs, no TODOs, no lorem ipsum.\n\n**1.2 Product & Audience.** The page markets a fictional BI\u002Fanalytics platform built for data and engineering teams (Data & Engineering category). Invent a concise, plausible product name. All user-facing copy must be written in **English**, technically credible, and specific to data pipelines, query performance, and dashboards.\n\n**1.3 Style Definition.** \"Data-Dense Dashboard\" — BI\u002FAnalytics, 2020s Modern, full Light + Dark support. Keywords: multiple chart widgets, KPI cards, data tables, minimal padding (8–12px), space-efficient 12-column grid, dense but readable typography (12–14px), maximum information density. The landing page must feel like the product itself: the Hero embeds a working dashboard preview, and every marketing section uses compact, widget-style cards.\n\n**1.4 Page Sections (exact order).** 1) Hero with live dashboard preview · 2) Features (3 cards) · 3) How It Works (3 steps) · 4) Testimonials (3 quotes) · 5) Pricing (3 tiers, middle featured) · 6) FAQ (5–6 items) · 7) Final CTA with email capture · 8) Footer with secondary links.\n\n## 2. STRICT RULES & ARCHITECTURE\n\n**2.1 CSS-First Architecture & Zero Inline CSS**\n- All styling lives in `style.css`. **Forbidden:** `style=\"...\"` attributes, `\u003Cstyle>` blocks in HTML, and presentational HTML attributes.\n- Target everything via class\u002FID selectors. HTML stays semantic and style-agnostic — re-theming the site must require edits to `style.css` only.\n\n**2.2 CSS Variables & Theme Tokens** — define in `:root`, override under `.dark`:\n\n| Token | Light | Dark |\n|---|---|---|\n| `--primary` \u002F `--primary-hover` | `#2563EB` \u002F `#1D4ED8` | `#60A5FA` \u002F `#3B82F6` |\n| `--secondary` | `#6B7280` | `#9CA3AF` |\n| `--bg-primary` | `#F5F5F5` | `#0F1117` |\n| `--bg-secondary` | `#FEFEFE` | `#181C24` |\n| `--bg-subtle` (hover rows, chips) | `#EBEDF1` | `#21262F` |\n| `--text-primary` | `#333333` | `#E6E8EB` |\n| `--text-secondary` | `#6B7280` | `#9CA3AF` |\n| `--text-success` | `#15803D` | `#4ADE80` |\n| `--text-error` | `#DC2626` | `#F87171` |\n| `--border-default` | `#E2E4E8` | `#2A2F3A` |\n| `--border-error` \u002F `--border-success` | `#DC2626` \u002F `#15803D` | `#F87171` \u002F `#4ADE80` |\n\n- **Chart tokens:** `--chart-blue: #2563EB`, `--chart-green: #22C55E`, `--chart-amber: #F59E0B`, `--chart-red: #EF4444`, `--chart-grey: #9CA3AF` (lighten amber\u002Fred variants in dark mode for contrast).\n- **Never use `#ffffff`** — near-white surfaces are `#FEFEFE`.\n- **Contrast pairing is mandatory in both themes:** every light background token pairs with dark text tokens and every dark background token pairs with light text tokens; body text ≥ 4.5:1, large text\u002FUI ≥ 3:1 (WCAG AA). Use `#22C55E`\u002F`#EF4444` for chart fills only, never for small text.\n- **Shape & depth:** `--radius-sm: 4px`, `--radius-md: 6px`, `--radius-lg: 8px`, `--shadow-sm`, `--shadow-md` (subtle — fits the dense BI aesthetic).\n- **Rhythm & motion:** `--spacing-gap: 8px`, `--transition-fast: 120ms`, `--transition-normal: 200ms`, `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`.\n- **Stacking:** `--z-sticky: 40`, `--z-dropdown: 100`, `--z-modal: 1000`, `--z-toast: 1100` — layered components must never conflict.\n\n**2.3 Mandatory Dark Mode**\n- Provide tokens under both a `.dark` class (on `\u003Chtml>`) and `@media (prefers-color-scheme: dark)` (the media query applies only when no stored preference exists).\n- Visible toggle in the sticky header: Material Symbols `light_mode`\u002F`dark_mode`, `aria-pressed` reflecting current state, and an `aria-label` that updates (\"Switch to dark theme\" \u002F \"Switch to light theme\").\n- Persist the choice in `localStorage`; first visit falls back to `prefers-color-scheme`; apply before first paint (no flash of wrong theme). Switching swaps variables only — no HTML restructuring.\n\n**2.4 Layout System — Flexbox First, Grid for the Data Canvas**\n- Every flex container defaults to `align-items: center` unless a deviation is explicitly justified in a CSS comment.\n- Mobile-first: multi-column layouts collapse to a single column on small viewports; **zero horizontal overflow at any width**.\n- **Explicit exception (theme mandate):** macro layouts use CSS Grid — `display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px;` with 12px canvas padding; widgets span columns (KPI cards span 3, charts span 4–8, table spans 12) and reflow 12 → 6 → 1 columns across breakpoints. Flexbox remains mandatory for all component-internal alignment (buttons, nav, cards, KPI rows, table toolbar).\n\n**2.5 Framework — Tailwind CSS (CSS-first usage)**\n- Load Tailwind via an external CDN `\u003Cscript src>` reference. Use its utilities solely for structural primitives (flex, grid, gap, responsive prefixes).\n- All visual\u002Ftheme styling lives in `style.css` as clean custom CSS, organized with native `@layer` (tokens → base → layout → components) and exposed as generic reusable classes: `.btn`, `.card`, `.input-group`, `.widget`, `.kpi-card`, `.data-table`. Never scatter hex values across utilities; theming flows exclusively through the CSS variables.\n\n**2.6 Typography & Icons — Google Only**\n- Google Fonts: **Inter** (400\u002F500\u002F600\u002F700) bound to `--font-base`; **JetBrains Mono** (500\u002F700) bound to `--font-mono` for KPI values, prices, table figures, and IDs (`font-variant-numeric: tabular-nums`).\n- Dense type scale: base 14px; secondary\u002Fdata text 12–13px; KPI values 20–24px; H1 32–40px; compact line-height (1.3–1.45).\n- Icons: **Google Material Symbols (Outlined)** via the official stylesheet. **Forbidden:** raw inline `\u003Csvg>`, local icon files, emoji as icons. (Charts are not icons — see §3.5.)\n\n## 3. COMPONENT DESIGN SPECIFICATIONS\n\n**3.1 Buttons — every state as a CSS class**\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px. Variants: `.btn--primary` (filled `--primary`), `.btn--secondary` (bordered), `.btn--danger` (visually distinct red in both themes, for any destructive action).\n- **Hover:** brightness\u002Fshadow shift, `cursor: pointer`.\n- **Focus:** distinct ring via `box-shadow`\u002F`outline` built from `--primary` — keyboard focus must never be invisible.\n- **Active\u002FPressed:** `transform: scale(0.97)`.\n- **Loading (`.is-loading`):** pointer events disabled, double-clicks prevented, CSS border spinner (or animated Material Symbol) replaces the label; button dimensions must not change.\n- **Disabled:** `opacity: 0.5`, grayscale filter, `cursor: not-allowed`.\n- **Success\u002FError (`.is-success` \u002F `.is-error`):** temporary feedback driven by `--text-success` \u002F `--text-error` (e.g., CTA flips to a `check` icon + \"Request sent\" for ~2s, announced via `aria-live`).\n\n**3.2 Cards & Widgets**\n- **Default:** compact flexbox card — `--bg-secondary`, 1px `--border-default`, `--radius-md`, `--shadow-sm`, 12px internal padding.\n- **Hover:** `transform: translateY(-2px)` + shadow shift (feature, pricing, testimonial cards).\n- **Focus-within:** border highlights in `--primary` when a child link\u002Fbutton receives focus.\n- **Skeleton (`.is-skeleton`):** shimmer animation for dashboard-preview widgets during simulated initial load — no layout shift.\n- **Empty state:** Google Icon + one line of guidance text (used when table filters match nothing).\n\n**3.3 Forms & Inputs** (Hero\u002FFinal-CTA email capture, filter controls)\n- **States:** empty · focused (outline ring) · filled · valid (`--border-success` + check icon) · invalid (`--border-error`, `--text-error` message, error icon) · disabled · read-only.\n- **Structure:** flex container → `\u003Clabel>` (bound via `for`), control, dedicated error element wired with `aria-describedby` + `aria-invalid`; errors announced in an `aria-live=\"polite\"` region.\n\n**3.4 Modal — Chart Zoom**\n- Clicking any chart widget opens a zoom modal: enlarged chart, title, caption, and a data summary.\n- **States:** opening (fade + scale) · open · loading (spinner while \"rendering\") · success\u002Ferror · closing — all animated via CSS transitions.\n- Centered flex overlay (`align-items: center; justify-content: center`), dimmed backdrop at `--z-modal`, close button with Material Symbol `close`, keyboard focus trapped inside, close via `Esc` and backdrop click, focus returned to the trigger. `role=\"dialog\"`, `aria-modal=\"true\"`, `aria-labelledby`.\n\n**3.5 Dashboard Components (Hero preview)**\n- **KPI cards (4):** label, mono value, delta chip pairing a `trending_up`\u002F`trending_down` Material Symbol with colored text (never color alone), plus a mini CSS sparkline.\n- **Charts — CSS only:** bar chart as grid\u002Fflex columns filled with `--chart-*` tokens; donut via `conic-gradient` with a legend (color chip + label + %). No hand-written inline SVG; a CDN charting library rendering to `\u003Ccanvas>` is the only permitted alternative.\n- **Interactivity:** hover tooltips (value + label) that also appear on keyboard focus, with content exposed via `aria-describedby`; **clicking any chart opens the zoom modal (§3.4)**.\n- **Data table:** semantic `\u003Ctable>` \"Recent jobs\" — mono job ID, source, status chip (icon + label: Success\u002FRunning\u002FFailed), duration, rows. Sticky `\u003Cthead>` inside an `overflow: auto` scroll container (max-height ≈ 320px); sortable headers as buttons updating `aria-sort`; **row highlighting on hover**; `tabular-nums` figures.\n- **Filter sidebar:** slim rail beside the table (status filter chips + source `\u003Cselect>`); **smooth filter animations** (fade\u002Fheight transitions on rows); live result count in an `aria-live` region; zero matches → §3.2 empty state.\n- **Toolbar:** widget title, time-range `\u003Cselect>`, refresh icon button that shows a spinner and re-triggers the skeleton → data sequence.\n- **Tooltips:** CSS-only, `--bg-secondary` + border + `--shadow-md`, `--z-dropdown`, visible on hover and focus, never blocking the pointer.\n\n## 4. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid sizing and breakpoints (~640\u002F768\u002F1024\u002F1280px); no horizontal overflow anywhere.\n- **Smooth animations:** `transition: var(--transition-normal)` on all state changes; **respect `prefers-reduced-motion`** (disable transforms, shimmer, and spinners; keep simple opacity fades).\n- **Accessibility:** WCAG AA contrast in both themes; never rely on color alone for status; semantic HTML5 landmarks (`header`\u002F`nav`\u002F`main`\u002F`section`\u002F`footer`) with a logical heading order; skip-to-content link; full keyboard operability (nav, theme toggle, filters, sorting, chart zoom, modal, FAQ); `aria-live` regions for loading, filtering, form, and toast feedback.\n- **Mandatory visual feedback:** every click, hover, and submission produces a visible state change (CTA loading → success, chips toggle, sort arrows flip, rows highlight, refresh spins).\n- **Sticky headers (both senses):** compact (≤56px) sticky page header at `--z-sticky` (logo, anchor nav — Features, How It Works, Pricing, FAQ — theme toggle, primary CTA) with `scroll-margin-top` on anchored sections; sticky table header per §3.5.\n\n## 5. SECTION-BY-SECTION SPECIFICATION\n\n**5.1 Hero.** Compact two-zone layout: left — headline (positioning every metric on one screen), subhead, `.btn--primary` \"Start free trial\" + `.btn--secondary` \"Book a demo\", and a trust strip (mono stats or text logos). Right\u002Fbelow — the full dashboard preview per §3.5, which loads with skeleton shimmer (~600 ms) then populates, announced via `aria-live`.\n\n**5.2 Features — 3 cards.** 12-column grid, each card spans 4 (→ 12 on mobile): Material Symbol icon, title, 2–3 lines of copy, \"Learn more\" link. Suggested angles: real-time pipelines, query engine performance, governed self-service.\n\n**5.3 How It Works — 3 steps.** Numbered step cards (01 Connect sources → 02 Model metrics → 03 Share dashboards) with icons and a connecting rule on desktop; each spans 4 columns, stacking on mobile.\n\n**5.4 Testimonials — 3 quotes.** Quote cards with CSS initials-avatar circles, name, role (data-engineer personas), and a mono metric highlight (e.g., \"−38% query latency\").\n\n**5.5 Pricing — 3 tiers.** Free \u002F Pro (featured: `--primary` border, \"Most popular\" badge, slight elevation) \u002F Enterprise. Each tier: mono price, 4–6 short feature rows with `check` icons, CTA button. The featured CTA demonstrates the loading → success button states.\n\n**5.6 FAQ — 5–6 items.** Native `\u003Cdetails>\u002F\u003Csummary>` (keyboard-accessible by default) styled as compact rows; chevron Material Symbol rotates on open; smooth open\u002Fclose animation.\n\n**5.7 Final CTA.** Full-width band: headline + email capture built per §3.3, with a submit button demonstrating loading → success\u002Ferror states, confirmed in an `aria-live` region.\n\n**5.8 Footer.** Secondary links in a 4-column grid (Product, Resources, Company, Legal), social icons as Material Symbols, copyright line; collapses to a stacked layout on mobile.\n\n## 6. DELIVERABLE & OUTPUT FORMAT\n\n- **Files:** exactly `index.html`, `style.css`, `script.js`. External references only (Google Fonts, Material Symbols, Tailwind CDN, deferred `script.js`); **no inline `\u003Cscript>` logic and no inline CSS**.\n- **Naming:** one convention — **BEM** (`.hero__title`, `.kpi-card__value`, `.pricing-card--featured`, `.widget--chart`); Tailwind utilities only for structural primitives; never mix conventions; never define classes for elements that don't exist in the markup.\n- **Copy:** all user-facing text in English, product-specific and realistic; placeholders only where content was genuinely unspecified.\n- **JavaScript contract:** theme toggle + persistence + FOUC guard; skeleton → data simulation; table sorting (`aria-sort`); filtering with animated rows + live count + empty state; chart zoom modal (focus trap, `Esc`, backdrop click, focus return); form validation + loading\u002Fsuccess states; refresh spinner. All behavior must degrade gracefully and respect `prefers-reduced-motion`.\n- **Output the complete, runnable code for all three files on the first attempt** — no truncation, no omitted sections.\n",1791954985675]