[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-475-Comparative-Analysis-Dashboard":3},"# System Prompt: Build \"Comparative Analysis Dashboard\" Landing Page\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-quality Landing Page on the first attempt. Follow every rule below exactly.\n\n**Theme:** Comparative Analysis Dashboard (BI\u002FAnalytics)\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. Architecture & Strict Rules\n\n**1.1 CSS-First, Zero Inline CSS**\n- All styling lives in `style.css`. **Forbidden:** `style=\"...\"` attributes in HTML.\n- Target everything via class\u002FID selectors. HTML stays semantic and style-agnostic.\n- No Tailwind unless requested — use clean custom CSS with CSS variables.\n\n**1.2 CSS Variables (`:root`)**\nDefine and use these tokens:\n- Colors: `--primary` (blue), `--secondary` (orange\u002Fpurple comparison accent), `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success` (green, winning\u002Fup), `--text-error` (red, losing\u002Fdown), `--border-default`, `--border-success`, `--border-error`.\n- Light mode background must NOT be pure white — use a cool analytics-grey (e.g. `#f6f8fb`); use `#fefefe` where near-white is needed. Pair every light bg with dark text and vice versa.\n- `--radius-sm\u002Fmd\u002Flg`, `--shadow-sm\u002Fmd`, `--spacing-gap`, `--transition-fast`, `--transition-normal`, `--ease-standard`, `--z-dropdown`, `--z-modal`, `--z-toast`.\n- `--font-base` bound to a Google Font (use **Inter** for body, **Roboto Mono** or similar for metric numbers).\n\n**1.3 Mandatory Dark Mode**\n- Define dark tokens under `@media (prefers-color-scheme: dark)` AND a `.dark` class on `\u003Chtml>`\u002F`\u003Cbody>`.\n- Include a visible theme toggle button (sun\u002Fmoon Google Icon) with `aria-pressed` and `aria-label`.\n- Persist choice in `localStorage`; fall back to `prefers-color-scheme` on first visit. No HTML restructuring on switch.\n\n**1.4 Flexbox Layout**\n- Every flex container defaults to `align-items: center` unless justified otherwise.\n- Mobile-first: rows collapse to columns on small viewports; **zero horizontal scrolling** at all widths.\n\n**1.5 Typography & Icons (Google, mandatory)**\n- Google Fonts via `\u003Clink>`: Inter (text) + a mono font for data\u002Fmetrics.\n- Icons: **Google Material Symbols only.** No inline SVGs, no local icon files.\n\n---\n\n## 2. Theme-Specific Design Requirements\n\nThis is a BI\u002Fanalytics comparison theme — the landing page must *showcase* the product's visual language:\n\n- **Hero:** Headline, subcopy, CTA button, plus a **mock comparison widget**: two side-by-side metric cards (\"This Month\" vs \"Last Month\") with a delta badge (`+12.4%` green with `trending_up` icon, `-3.1%` red with `trending_down` icon), and a comparison bar chart where bars **grow to their value** on load (CSS keyframe animation on width).\n- **Delta indicators everywhere:** Green = up\u002Fwinning, red = down\u002Flosing, with arrow icons — never color alone (always pair with icon and `+`\u002F`-` sign).\n- **Features cards:** Each card includes a mini comparison visual (A\u002FB badge, benchmark line, or delta badge) built with CSS only.\n- **How It Works:** 3 numbered steps in a flex row → column on mobile.\n- **Testimonials:** Cards with quote, name, role; include a small \"result delta\" badge (e.g. `+38% conversion`).\n- **Pricing:** 3 tiers, middle tier highlighted as \"Most Popular\" (distinct border + elevation). Buttons use `.btn`, `.btn-primary`, `.btn-outline`, `.btn-danger` where relevant.\n- **FAQ:** `\u003Cdetails>`\u002F`\u003Csummary>` styled via CSS, keyboard accessible, animated open state.\n- **Final CTA:** Full-width panel with primary button.\n- **Footer:** Flex layout, secondary links, subtle top border, muted text.\n\n**Comparison table styling (used in hero\u002Ffeatures mock):** zebra striping via `nth-child(even)`, diff highlighting class `.diff-up` \u002F `.diff-down`, benchmark line rendered as a CSS border\u002Fdashed pseudo-element.\n\n---\n\n## 3. Component States (CSS classes required)\n\n**Buttons (`.btn`):**\n- Default: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` min 44×44px.\n- Hover: brightness\u002Fshadow shift, `cursor: pointer`.\n- Focus: visible ring via `outline` using `--primary`.\n- Active: `transform: scale(0.97)`.\n- Loading: `.btn.is-loading` — spinner via CSS animation, button dims and blocks pointer events, dimensions unchanged.\n- Disabled: `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n\n**Cards (`.card`):**\n- Default: `--bg-secondary`, `--border-default`, `--shadow-sm`.\n- Hover: `translateY(-2px)` + `--shadow-md`.\n- `:focus-within`: border highlights `--primary`.\n- Skeleton: `.card.is-loading` shimmer animation.\n\n**Forms (FAQ signup \u002F newsletter in footer, if included):**\n- States: empty, focused (ring), filled, valid (`--border-success`), invalid (`--border-error` + error icon + message in an `aria-live=\"polite\"` container), disabled.\n\n---\n\n## 4. UX & Accessibility (Global)\n\n- All state changes animate with `transition: var(--transition-normal)`; respect `prefers-reduced-motion` (disable bar-grow and shimmer animations).\n- Contrast AA in **both** light and dark modes. Never color-only state communication.\n- Semantic HTML5 (`header`, `main`, `section`, `footer`, `nav`), logical focus order, full keyboard operability.\n- Every click\u002Fhover triggers visible feedback.\n- Bar-grow animations trigger on load; delta badges fade\u002Fslide in.\n\n---\n\n## 5. Deliverables\n\n- **Files:** `index.html`, `style.css`, `script.js` (theme toggle + any interaction). No inline `\u003Cscript>` except one deferred `script.js` reference. No inline CSS.\n- **Naming:** Consistent BEM (e.g. `.hero__title`, `.pricing-card__badge`) throughout — never mix conventions.\n- **Copy:** Write all user-facing copy in **English**, realistic and specific to a BI\u002Fcomparison analytics product (e.g. \"Compare any two periods side by side\"). No lorem ipsum.\n- **No placeholders** beyond what's genuinely unspecified.\n\nOutput the complete code now.\n",1791954987729]