[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-515-Analytics-Metric-Flow":3},"# CODING AGENT PROMPT — \"ANALYTIC METRIC FLOW\" LANDING PAGE\n\n**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Your task is to code a complete, production-ready Landing Page on the first attempt — full code, single response, no follow-up questions, no placeholders where real copy is specified below.\n\n**Project:** \"MetricFlow\" — an analytics SaaS landing page in the **Analytics Metric Flow** style (2020s Minimal Analytics Flow): continuous vertical scroll, generous whitespace, off-white canvas, large metrics, functional cards, an integrations grid, an alternating-row transactions table, and green as the single action color.\n\n---\n\n## 1. PROJECT BRIEF & SECTION MAP\n\n**1.1 Art Direction (binding)**\n- Continuous off-white background across the entire scroll; clean vertical flow; large-scale metrics; cards with subtle 1px borders and minimal shadow; solid green CTAs; alternating table rows.\n- Binding values from the style spec: page background `#F7F8F3`, body text `#111827`, global `letter-spacing: -0.02em`, card `border-radius: 14px`, card shadow `0 18px 45px rgba(15,23,42,0.04)`, card border `1px solid #E5E7EB`, section padding `clamp(2rem, 8vw, 6rem)`.\n- Full light\u002Fdark theme support is required (see §2.3).\n\n**1.2 Section Map — build exactly these, in this order:**\n\n1. **Navbar (sticky):** wordmark \"MetricFlow\" (text + Material Symbol `monitoring`), links: Features, How it works, Pricing, FAQ; theme toggle; primary button \"Get started\". On mobile, a hamburger (Material Symbol `menu`) toggles a dropdown panel.\n2. **Hero (fullscreen, ~90vh):** two-column flex (stacks on mobile). Left: eyebrow badge \"Analytics, simplified\" (tinted pill), `h1` **\"Every number that matters. All in one place.\"** (verbatim), subheadline: \"MetricFlow pulls every metric from your stack into one clean, real-time view — no dashboards to build, no data to wrangle.\", CTA pair: primary \"Start free trial\" + secondary \"See how it works\" (anchor to `#how-it-works`). Right: an abstract **dot-cloud illustration of green data points** built in pure CSS (see §3.7). Below the hero content: a **KPI strip** with three large metrics — **1,845** \"Teams onboarded\", **$125K** \"Revenue tracked monthly\", **92%** \"Reporting accuracy\" (numerals in `--primary-strong`, fluid `clamp()` sizing).\n3. **Features — 3 cards:** \"Live dashboards\" (icon `monitoring`), \"Automated reports\" (icon `event_repeat`), \"Privacy-first analytics\" (icon `verified_user`), each with 2–3 sentences of realistic copy. Followed by an integrations sub-block: heading **\"Connects with every tool.\"** (verbatim) + one supporting line + a responsive grid of 8 rounded integration cards, each with a Material Symbol icon + tool name (Stripe `payments`, Shopify `storefront`, Slack `forum`, Notion `description`, HubSpot `hub`, Salesforce `cloud_sync`, Zapier `bolt`, Google Ads `ads_click`). Do not attempt brand logos.\n4. **How It Works — 3 steps:** numbered steps 01 \"Connect your tools\", 02 \"Watch metrics flow\", 03 \"Share insights\", each with icon, title, description. The section culminates in a product-preview card containing the **\"Recent transactions\" table** (see §3.5) with columns Date \u002F Customer \u002F Amount \u002F Status and these rows: Mar 14 — Northwind Labs — $2,400.00 — Paid; Mar 13 — Bright & Co — $1,150.50 — Pending; Mar 12 — Vertex Studio — $890.00 — Paid; Mar 11 — Helio Health — $3,720.25 — Paid; Mar 10 — Kite Digital — $460.00 — Refunded.\n5. **Testimonials — 3 cards:** quote, 5-star rating (Material Symbol `star`), initials avatar (CSS circle, no images), name, role\u002Fcompany. Write three realistic quotes (e.g., \"MetricFlow replaced four dashboards with one. Our weekly report takes minutes, not days.\" — Ana Ribeiro, Head of Growth, Loopwise).\n6. **Pricing — 3 tiers:** Starter $0, Growth $29\u002Fmo (highlighted with a \"Most popular\" badge and tinted border), Scale $99\u002Fmo. Feature lists with `check` icons; per-tier CTA (primary on Growth, secondary on the others).\n7. **FAQ — accordion:** 5–6 realistic Q&As (free plan limits, setup time, integrations, GDPR\u002FCCPA compliance, cancellation). See §3.4.\n8. **Final CTA:** full-bleed deep-green panel (`--secondary` background) with heading **\"Your data is waiting.\"** (verbatim), supporting line \"Connect your first data source in under five minutes. Free to start, no credit card required.\", and an email-capture form (label + input + primary button \"Start free trial\") implementing all form states (see §3.3).\n9. **Footer:** brand block with one-line description, four secondary link columns (Product: Features, Integrations, Pricing, Changelog · Company: About, Blog, Careers, Contact · Resources: Docs, Help center, API reference, Status · Legal: Privacy, Terms, Security, Cookies), and a copyright line. Links may use `href=\"#\"` but must be keyboard-focusable with a visible focus ring.\n\n---\n\n## 2. STRICT RULES & ARCHITECTURE\n\n**2.1 CSS-First Architecture & Zero Inline CSS**\n- All styling lives in `style.css`. **The `style=\"...\"` attribute is forbidden anywhere in the HTML.**\n- Target all design properties, layout, and states exclusively via class\u002FID selectors.\n- Keep HTML semantic and style-agnostic: a full re-theme must be achievable by editing `style.css` only.\n\n**2.2 CSS Variables & Theme Tokens**\nStore every visual token in `:root` and the `.dark` class. **No hardcoded hex, rgb, or rgba color values may appear outside these token blocks** — use `color-mix()` for translucency (e.g., navbar backdrop). Define exactly:\n\n| Token | Light | Dark |\n|---|---|---|\n| `--primary` | `#16A34A` | `#22C55E` |\n| `--primary-strong` | `#15803D` | `#15803D` |\n| `--secondary` | `#14532D` | `#DCFCE7` |\n| `--bg-primary` | `#F7F8F3` | `#0B100D` |\n| `--bg-secondary` | `#FEFEFE` | `#121A15` |\n| `--bg-table` | `#FEFEFE` | `#121A15` |\n| `--bg-table-alt` | `#F3F4F6` | `#18221B` |\n| `--accent-tint` | `#DCFCE7` | `#14532D` |\n| `--text-primary` | `#111827` | `#F7F8F3` |\n| `--text-secondary` | `#6B7280` | `#9CA3AF` |\n| `--text-on-primary` | `#FEFEFE` | `#FEFEFE` |\n| `--text-success` | `#15803D` | `#4ADE80` |\n| `--text-error` | `#DC2626` | `#F87171` |\n| `--border-default` | `#E5E7EB` | `#233029` |\n| `--border-success` | `#16A34A` | `#22C55E` |\n| `--border-error` | `#DC2626` | `#F87171` |\n\n- **Contrast pairing (mandatory, both themes):** every light background token pairs with a dark text token and vice versa. `--accent-tint` backgrounds always pair with `--secondary` text (pre-validated in both themes). **Never use `#ffffff` — the nearest white is `#FEFEFE`.**\n- **CTA contrast rule:** `#16A34A` under white text is only 3.3:1 (fails WCAG AA for normal text). Therefore solid CTA button backgrounds use `--primary-strong` (`#15803D`, 5.0:1 with `#FEFEFE` labels); reserve `--primary` for icons, links, focus rings, badges, and hover accents.\n- Structural tokens: `--radius-sm: 8px; --radius-md: 14px; --radius-lg: 24px;` `--shadow-sm: 0 1px 2px rgba(15,23,42,0.05); --shadow-md: 0 18px 45px rgba(15,23,42,0.04);` (dark theme overrides shadows to `rgba(0,0,0,0.4)` \u002F `rgba(0,0,0,0.45)`); `--spacing-gap: 1.5rem; --spacing-section: clamp(2rem, 8vw, 6rem);` `--transition-fast: 150ms; --transition-normal: 250ms; --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);` `--z-dropdown: 100; --z-modal: 1000; --z-toast: 1100;` `--container-max: 1120px;` `--font-base`.\n- Apply `letter-spacing: -0.02em` globally per the style spec.\n\n**2.3 Mandatory Dark Mode Support (full, both mechanisms)**\n- Define dark tokens under **both** `@media (prefers-color-scheme: dark)` **and** a `.dark` class on `\u003Chtml>` (media query handles first paint; class handles manual override).\n- Theme switching must require zero HTML restructuring — only variable reassignment.\n- Persist the user's choice in `localStorage` (key: `metricflow-theme`), falling back to `prefers-color-scheme` on first visit. Set the `color-scheme` property accordingly.\n- Provide a visible toggle (Material Symbols `dark_mode` \u002F `light_mode`) with correct `aria-pressed` and dynamic `aria-label` (\"Switch to dark mode\" \u002F \"Switch to light mode\").\n\n**2.4 Flexbox Layout & Mobile-First Alignment**\n- Build every layout structure with Flexbox. **Every flex container defaults to `align-items: center`** unless an exception is explicitly justified in a CSS comment (e.g., multi-line card body text may use `flex-start`).\n- Mobile-first: rows convert to columns at defined breakpoints; fluid `clamp()` typography (hero `h1` ≈ `clamp(2.5rem, 6vw, 4.5rem)`); **zero horizontal page scroll at any viewport ≥ 320px**.\n\n**2.5 Framework Default & Tailwind CSS Integration**\n- Use Tailwind CSS (CDN acceptable) or hand-authored CSS organized with Tailwind-style `@layer` \u002F `@apply` discipline. Either way, generic reusable component classes (`.btn`, `.card`, `.input-group`) must exist and map back to the CSS variables — no theme values hardcoded in utilities.\n\n**2.6 Typography & Icons (Google Fonts Mandatory)**\n- Load **Google Font \"Inter\"** (weights 400–800) via `\u003Clink>`\u002F`@import` and bind it to `--font-base`.\n- Icons: **Google Material Symbols (Rounded)** via the official stylesheet. **Forbidden:** raw inline SVGs, local icon files, emoji as icons. The hero dot-cloud illustration must also be CSS-only (§3.7).\n- *Exception clause:* the source spec requested a system-UI stack (`system-ui, -apple-system, 'SF Pro Text', 'Segoe UI'`) — satisfy that aesthetic with Inter as the primary typeface and keep the system stack strictly as fallbacks after Inter; system fonts must not be the primary typeface.\n\n---\n\n## 3. COMPONENT DESIGN SPECIFICATIONS\n\n**3.1 Buttons**\n- `.btn` base: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px. Variants: `.btn--primary` (solid `--primary-strong` bg + `--text-on-primary` label), `.btn--secondary` (bordered\u002Fghost), `.btn--danger` (see §4).\n- **Hover:** brightness\u002Fshadow shift, `cursor: pointer`. **Focus-visible:** distinct ring via `outline: 2px solid var(--primary); outline-offset: 2px`. **Active:** `transform: scale(0.97)`. **Loading (`.is-loading`):** disables pointer events, prevents double-submits, renders a CSS spinner without changing button dimensions, sets `aria-busy=\"true\"`. **Disabled:** `opacity: 0.5`, grayscale, `cursor: not-allowed`. **Success\u002FError (`.is-success` \u002F `.is-error`):** temporary feedback states using `--text-success` \u002F `--text-error`, announced via `aria-live`.\n\n**3.2 Cards**\n- `.card` base: `--bg-secondary` background, `1px solid var(--border-default)`, `--radius-md`, `--shadow-sm`, flex layout.\n- **Interactive cards only** (pricing tiers, integration cards): hover lifts with `transform: translateY(-2px)` and `--shadow-md`; **focus-within** highlights the border when a child control receives focus.\n- Define `.skeleton` shimmer keyframes in `style.css` (for future dynamic content; not rendered on first paint) and an empty-state pattern (Material Symbol + guidance text) for dynamic slots.\n\n**3.3 Forms & Inputs (Final CTA email capture)**\n- `.input-group`: flex column wrapping a `\u003Clabel>`, the input, and a dedicated error-feedback element with `aria-live=\"polite\"`.\n- Implement all states via CSS classes: empty, focused (outline ring), filled, valid (`--border-success` + `check` icon), invalid (`--border-error`, red error text, `error` icon), disabled, read-only.\n- On submit: validate the email in JS → invalid shows inline error + `aria-live` announcement; valid shows button loading spinner → success state (\"You're on the list\") announced via `aria-live`. Never rely on color alone — pair every state with an icon and\u002For text.\n\n**3.4 FAQ Accordion**\n- Each item: `\u003Ch3>\u003Cbutton aria-expanded=\"true|false\" aria-controls=\"…\">` + panel `id` match. Animate open\u002Fclose with CSS only (prefer `grid-template-rows: 0fr → 1fr`). Chevron Material Symbol rotates 180° on open; open state is also indicated by border\u002Fweight change, not color alone. Fully keyboard operable with visible focus.\n\n**3.5 Transactions Data Table**\n- Semantic `\u003Ctable>` with `\u003Ccaption>` (\"Recent transactions\", visually styled but available to screen readers) and `\u003Cth scope=\"col\">`.\n- Alternating rows via `nth-child` using `--bg-table` \u002F `--bg-table-alt`.\n- Status badges: text label + Material Symbol — Paid (`check_circle`, success tone), Pending (`schedule`, neutral), Refunded (`undo`, error tone). **Never color-only.**\n- Responsive: the table must never cause page-level horizontal scroll — wrap it in an `overflow-x: auto` container scoped to the preview card, or reflow rows into stacked records below 640px using `data-label` attributes.\n\n**3.6 Modal \u002F Popup (conditional)**\n- If you implement any overlay (optional — e.g., a demo modal from the Hero's secondary CTA; if skipped, these rules still govern any future overlay): animated opening\u002Fopen\u002Floading\u002Fsuccess-error\u002Fclosing states via CSS transitions; centered flex container (`align-items: center`); backdrop overlay; Material Symbol `close` button; keyboard focus trapping; close via `Esc` and backdrop click; layered at `--z-modal`.\n\n**3.7 Hero Dot-Cloud Illustration (CSS-only)**\n- Build the abstract green data-point cloud with pure CSS: positioned dot elements styled via `nth-child` rules, or layered `radial-gradient` backgrounds on a single element. Dots vary in size (6–28px) and opacity using `--primary`, `--accent-tint`, and `--secondary`-family greens, arranged to suggest an ascending data trend.\n- Add a subtle staggered float animation (translateY ±6px), disabled under `prefers-reduced-motion`. Mark the container `aria-hidden=\"true\"` (decorative). Scale down or relocate below the hero text on small screens.\n\n---\n\n## 4. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid sizing, defined breakpoints, zero horizontal overflow; `scroll-margin-top` on sections to offset the sticky navbar; smooth anchor scrolling (`scroll-behavior: smooth`, disabled under reduced motion).\n- **Smooth animations:** `transition: var(--transition-normal) var(--ease-standard)` on all state changes; fully respect `prefers-reduced-motion: reduce` (disable float\u002Fscale\u002Ftransform animations, keep simple opacity).\n- **Accessibility (a11y):** WCAG AA contrast in both light and dark modes; never communicate state by color alone; semantic HTML5 landmarks (`header`, `nav`, `main`, `section[aria-labelledby]`, `footer`); correct ARIA roles\u002Flabels on custom widgets; logical DOM\u002Ffocus order; full keyboard operability (no mouse-only interactions); `aria-live` regions for form feedback and loading states; a skip-to-content link.\n- **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change (nav links, buttons, accordions, form submission, theme toggle).\n- **Destructive actions:** `.btn-danger` must be visually distinct in both themes (not used on this page by default, but the class must exist and be themed for both modes).\n\n---\n\n## 5. DELIVERABLE & OUTPUT FORMAT\n\n- **Files:** separate `index.html`, `style.css`, `script.js`. No inline `\u003Cstyle>` blocks and no inline `\u003Cscript>` blocks beyond a single deferred entry point (`\u003Cscript defer src=\"script.js\">`).\n- **Naming convention:** BEM throughout (`.nav`, `.nav__link`, `.btn--primary`, `.card__title`, `.pricing-card--featured`, `.faq__panel`). Never mix conventions.\n- **Copy:** all user-facing copy in **English**. Use the verbatim headlines and figures provided in §1.2 (\"Every number that matters. All in one place.\", \"Connects with every tool.\", \"Your data is waiting.\", 1,845 \u002F $125K \u002F 92%). Write realistic copy everywhere else — **lorem ipsum is prohibited**.\n- **JS scope (vanilla):** theme toggle + `localStorage` persistence, mobile nav, FAQ accordion, email form validation with loading\u002Fsuccess\u002Ferror feedback, smooth anchor scrolling. No frameworks required.\n- **First attempt must be complete:** all nine sections, all component states, both themes, in a single response containing the full contents of all three files.\n",1791954988533]