[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-520-User-Behavior-Analytics":3},"## System Prompt: Build a \"User Behavior Analytics\" Landing Page\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-quality Landing Page for a **User Behavior Analytics (BI\u002FAnalytics)** product on the first attempt. Output the final code immediately — no drafts, no partial builds.\n\n**Theme:** User Behavior Analytics — 2020s Modern BI aesthetic. Keywords: funnel visualization, user flow diagrams (Sankey), conversion tracking, engagement metrics, user journey mapping, cohort analysis.\n\n**Required 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* All styling must live in a dedicated `style.css` file. **Forbidden:** any `style=\"...\"` attribute in HTML.\n* All design properties, layout rules, and states must be targeted via class or ID selectors only.\n* HTML must remain clean, semantic, and styling-agnostic — changing the theme must require editing only `style.css`.\n\n**1.2 CSS Variables & Theme Tokens**\nStore all tokens in `:root` (and theme classes):\n* **Colors:** `--primary`, `--secondary`, `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`.\n* **Theme palette mapping:** Funnel stage colors — high engagement = green (`--text-success` family), drop-off = red (`--text-error` family), conversion = blue (`--primary` family), user-flow arrows = grey (`--text-secondary` family). Secondary tokens: stage completion (success), abandonment (warning — define `--text-warning`), engagement gradients, cohort colors.\n* **Contrast Pairing:** Every light background token must pair with a dark text token and vice versa — enforce in both light and dark themes.\n* **Light Mode Background:** Do not use pure white; use a cool analytics-appropriate off-white (e.g., `#f7f9fc`) fitting the BI mood. Use `#fefefe` where a near-white surface is needed.\n* **Radius\u002FShadows:** `--radius-sm`, `--radius-md`, `--radius-lg`, `--shadow-sm`, `--shadow-md`.\n* **Spacing\u002FTransitions:** `--spacing-gap`, `--transition-fast`, `--transition-normal`, `--ease-standard`.\n* **Elevation:** `--z-dropdown`, `--z-modal`, `--z-toast`.\n\n**1.3 Mandatory Dark Mode**\n* Define dark tokens under `@media (prefers-color-scheme: dark)` **and** a `.dark` class selector.\n* Theme switching must work purely via CSS variables — no HTML restructuring.\n* Persist user choice via `localStorage`, falling back to `prefers-color-scheme` on first visit. Include a visible toggle button with correct `aria-pressed` \u002F `aria-label` state.\n* Dark mode background should feel like a modern BI dashboard (deep slate\u002Fnavy), with funnel stage colors adjusted for contrast.\n\n**1.4 Flexbox Layout & Mobile-First**\n* Build all layout structures with Flexbox (`display: flex`).\n* **Every flex container must default to `align-items: center`** unless an explicitly justified exception is documented in a CSS comment.\n* All layouts must be mobile-responsive out of the box: hero stacks, feature\u002Fpricing cards wrap to single column, nav collapses. **No horizontal scrolling at any viewport width.**\n\n**1.5 Framework**\n* Use Tailwind CSS via CDN (or clean custom CSS driven by `@layer`\u002F`@apply`). All utilities must map back to the CSS variables above or reusable class names (`.btn`, `.card`, `.input-group`).\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n* Text: Google Fonts — use **Inter** for body\u002FUI and **Space Grotesk** (or Poppins) for headings; bind via `--font-base` \u002F `--font-heading`.\n* Icons: **Google Material Symbols** only. **Explicitly forbidden:** raw inline SVGs, local icon files, or emoji-as-icons.\n* **Exception clause:** The funnel visualization and Sankey-style flow diagram in the Hero and How It Works sections may use a single CSS-styled `\u003Csvg>` with gradient fills (`\u003Cdefs>` gradients) — this is the only permitted SVG usage, as it is a data-visualization graphic, not an icon.\n\n---\n\n### 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Buttons**\nAll states via CSS classes:\n* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum 44×44px touch target.\n* **Hover:** brightness\u002Fshadow shift, `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 an animated CSS spinner or spinning Google Icon without distorting button dimensions.\n* **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n* **Success\u002FError:** temporary feedback styles driven by `--text-success` \u002F `--text-error`.\n* **Destructive\u002Fdanger** actions (e.g., \"Cancel plan\" in pricing) use a distinct `.btn-danger` style visible in both themes.\n\n**2.2 Cards (Features, Pricing, Testimonials)**\n* **Default:** flexible Flexbox layout, subtle borders, elevation via `--bg-secondary` and shadow tokens.\n* **Hover:** `transform: translateY(-2px)` 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 (for testimonial\u002Fpricing content areas) to prevent layout jumps.\n* **Empty State:** structured fallback with a Google Icon and guidance text.\n\n**2.3 Forms & Inputs (Final CTA email capture, FAQ search if included)**\n* **States:** empty, focused (outline ring), filled, valid (success border + Google check icon), 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 Modal \u002F Popup (FAQ answers may expand inline; any modal — e.g., \"Watch demo\" — must follow this)**\n* **States:** opening, open, loading, success\u002Ferror, closing — all animated via CSS transitions.\n* **UX:** centered flex container, backdrop overlay, Google Icon close button, keyboard focus trapping, closes via `Esc` and overlay click.\n\n---\n\n### 3. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by default:** fluid sizing, standard breakpoints, zero horizontal overflow.\n* **Theme-specific animations (CSS only, respect `prefers-reduced-motion`):**\n  * **Funnel fill-down animation** in Hero: stacked funnel stages fill sequentially on scroll\u002Fentry.\n  * **Flow diagram connection draw:** Sankey-style flow paths animate stroke drawing in the How It Works section.\n  * **Conversion pulse:** conversion metric number pulses subtly (scale + glow) when it enters the viewport.\n  * **Engagement bar fill:** engagement metric bars animate width from 0 to their value on scroll.\n* **Accessibility:** sufficient contrast in both modes; never rely on color alone to communicate state (pair funnel stage colors with percentage labels and icons); semantic HTML5 (`header`, `nav`, `main`, `section`, `footer`); correct ARIA roles\u002Flabels on custom widgets (accordion FAQ needs `aria-expanded`, `aria-controls`); logical DOM\u002Ffocus order; full keyboard operability; `aria-live` regions for dynamic feedback (form errors, toasts, loading).\n* **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.\n* **Analytics visual elements:** funnel visualization with gradient fills and percentage labels, Sankey-style user flow diagram, conversion metrics counters, engagement heatmap-style grid, cohort table cells, retention curve (line\u002Farea chart), session timeline strip — all rendered with CSS\u002FSVG per the exception in 1.6.\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. No inline CSS.\n* **Naming convention:** one consistent convention (BEM: `.hero__title`, `.pricing-card__feature`) across the entire deliverable — never mix conventions.\n* **Copy:** all user-facing copy in **English**, realistic and specific to a user behavior analytics product (e.g., \"See exactly where users drop off\", funnel stage labels like \"Visited → Signed Up → Activated → Converted\", real metric numbers). **No lorem ipsum.**\n* **Content requirements:** Hero with headline, subheadline, primary CTA (\"Start free trial\") and secondary CTA (\"Watch demo\"); 3 feature cards (e.g., Funnel Analysis, Session Replay, Cohort Retention); 3 numbered How It Works steps; 3 testimonials with names\u002Froles\u002Fcompanies; 3 pricing tiers (Free, Growth, Enterprise) with a highlighted \"Most Popular\" tier; FAQ accordion (5–6 questions); final CTA section with email capture form; footer with product, company, resources, and legal secondary link columns.\n* **Deliver the complete final code immediately** — all three files, fully working, in one response.\n",1791954988589]