Predictive Analytics demo
Predictive Analytics

A data-centric dashboard aesthetic featuring charts, metrics, and AI-driven insights designed for modern analytics interfaces.
Category: Data & Engineering
Era: 2020s Modern
Prompt: 14.6 KB · 2010 words
# SYSTEM PROMPT — BUILD A "PREDICTIVE ANALYTICS" LANDING PAGE

**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Code a complete, production-quality Landing Page on the first attempt — no clarifying questions, no partial deliverables.

**Theme:** *Predictive Analytics* — BI/Analytics, 2020s Modern. The page must feel like a premium AI forecasting product: forecast lines, confidence intervals, trend projections, scenario modeling, AI-driven insight cards, and anomaly detection visuals. Full Light Mode **and** Full Dark Mode are mandatory.

**Required sections, in this exact order:** Header/Nav, Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links. All user-facing copy must be written in **English**.

---

## 0. PAGE BLUEPRINT — SECTION-BY-SECTION REQUIREMENTS

**Header (sticky):** Brand mark (Google Material Symbol `query_stats` + wordmark), anchor links to each section, theme toggle, and a "Start Free Trial" button. On mobile, collapse nav behind an accessible menu button (Material `menu` icon, `aria-expanded`/`aria-controls`). Solid or blurred background using `--bg-primary` with a `--border-default` bottom border.

**Hero:** Two-column flex layout (stacks to column on mobile). Left: eyebrow badge ("AI-Driven Forecasting"), H1, subheadline, two CTAs (primary "Start Forecasting Free"; secondary "Book a Demo" → opens the modal per §2.4), and a trust row of stat chips (e.g., "94% forecast accuracy", "12M+ predictions daily"). Right: the forecast visualization panel (§2.7) with an overlaid AI insight card (e.g., "Q3 Revenue projected +18.4% — confidence 87%" plus a probability gradient bar per §2.8) and the scenario control (§2.6).

**Features (3 cards):** (1) AI-Driven Insights (icon `insights`), (2) Anomaly Detection (icon `warning`, with a small pulsing anomaly dot motif), (3) Scenario Modeling (icon `tune`). Each card: icon, title, 2–3 sentence description, and a "Learn more" link so `:focus-within` highlighting is demonstrable.

**How It Works (3 steps):** Numbered steps connected by a trend-line motif: 1) Connect Your Data (`storage`), 2) Train & Forecast (`model_training`), 3) Act on AI Insights (`bolt`). Horizontal on desktop, vertical on mobile.

**Testimonials (3 cards):** Quote, 5-star rating (Material `star` icons + visually hidden text "Rated 5 out of 5"), CSS initials-avatar circle, realistic name/role/company (e.g., VP of Data, Head of Ops, CFO).

**Pricing (3 tiers):** Starter / Growth / Enterprise. Middle tier marked "Most Popular" with a distinct border and badge. Each tier: price, billing period, feature list with Material `check` icons, and a CTA (middle tier = primary button; others = secondary; Enterprise = "Contact Sales").

**FAQ (5–6 items):** Accordion per §2.5 with substantive, realistic Q&As (model accuracy, data security, integrations, what confidence intervals mean, pricing).

**Final CTA:** Full-width panel using theme tokens (subtle gradient/band background), headline, and the email capture form per §2.3 with loading → success feedback.

**Footer:** Brand + one-line description, 3–4 secondary link groups (Product, Company, Resources, Legal), copyright with dynamic year, top border. `href="#"` is acceptable for links to pages outside this single-page deliverable.

---

## 1. STRICT RULES & ARCHITECTURE

### 1.1 CSS-First Architecture & Zero Inline CSS
- All styling lives in `style.css`. **The `style="..."` attribute is forbidden anywhere in the HTML.**
- Target every design property, layout rule, and state via class or ID selectors only.
- Keep HTML semantic and styling-agnostic: changing the theme must require editing only `style.css`, never the markup.

### 1.2 CSS Variables & Theme Tokens
Define all tokens in `:root` and override them per theme:

- **Core colors:** `--primary`, `--secondary`, `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`.
- **Predictive analytics tokens:** `--actual-line` (solid historical line), `--forecast-line` (visually distinct from `--actual-line`), `--confidence-band`, `--confidence-high` (darker/more saturated), `--confidence-low` (lighter), `--anomaly` (alert red), `--trend-positive` (green), `--trend-negative` (red/orange), `--probability-gradient` (a `linear-gradient` value).
- **Shape & depth:** `--radius-sm`, `--radius-md`, `--radius-lg`, `--shadow-sm`, `--shadow-md`.
- **Motion & space:** `--spacing-gap`, `--transition-fast`, `--transition-normal`, `--ease-standard`.
- **Elevation:** `--z-dropdown`, `--z-modal`, `--z-toast`.
- **Fonts:** `--font-base`, `--font-heading`, `--font-mono`.

**Color direction:** Light mode `--bg-primary` must be a cool, analytics-mood near-white (e.g., `#f4f7fb`) — never `#ffffff`; use `#fefefe` where a white surface is genuinely needed. Dark mode uses a deep blue-charcoal (e.g., `#0b1220` family) with an elevated `--bg-secondary` panel. `--forecast-line` and `--actual-line` must remain distinguishable in **both** themes and for color-blind users — reinforce the difference with dash pattern + legend, never color alone.

**Contrast pairing (enforced for every theme):** every light background token pairs with a dark text token; every dark background token pairs with a light text token. Confidence band fills use `fill-opacity` between 0.10–0.18 (light) and 0.15–0.25 (dark) so underlying grid lines stay legible.

### 1.3 Mandatory Dark Mode Support
- Define dark tokens under **both** `@media (prefers-color-scheme: dark)` **and** a `.dark` class selector, so switching never requires HTML restructuring.
- Provide a visible theme toggle in the header (Material `dark_mode` / `light_mode` icons) with correct `aria-pressed` and a dynamic `aria-label` ("Switch to dark mode" / "Switch to light mode").
- Persist the choice via `localStorage`; on first visit fall back to `prefers-color-scheme`. Apply the stored theme as the first action of `script.js`.
- All chart tokens (`--forecast-line`, `--confidence-band`, `--anomaly`, etc.) must be redefined for dark mode so the visualization stays legible.

### 1.4 Flexbox Layout & Mobile-First Alignment
- Build all layout structures with Flexbox. **Every flex container defaults to `align-items: center`** unless an exception is explicitly justified (long-form text blocks and feature lists may use `flex-start` for readability — apply consistently, never arbitrarily).
- All rows convert to columns on small viewports (≤768px). No horizontal scrolling at any width; the SVG chart scales fluidly via `viewBox` + `width: 100%`.

### 1.5 Framework Default & Tailwind CSS Integration
- Use Tailwind CSS (CDN is acceptable) for layout utilities; all brand theming, states, and component visuals must live in custom classes in `style.css` bound to the CSS variables above. Maintain generic reusable classes: `.btn`, `.card`, `.input-group`, `.toggle-switch`, `.accordion__item`, etc.

### 1.6 Typography & Icons (Google Fonts Mandatory)
- **Text:** Google Fonts only — "Inter" (`--font-base`), "Space Grotesk" for headings (`--font-heading`), "JetBrains Mono" for numeric/data readouts like prices, stats, and chart labels (`--font-mono`). Include via `<link>` tags.
- **Icons:** Google Material Symbols only. **Raw inline SVGs and local icon files are forbidden as icons.**
- **Exception clause:** inline `<svg>` is permitted *exclusively* for data-visualization graphics (forecast lines, confidence bands, anomaly markers, sparklines) because they are chart content, not icons. Every UI icon must remain a Google Material Symbol.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

### 2.1 Button Component Requirements
Style all states via CSS classes (`.btn`, `.btn--primary`, `.btn--secondary`, `.btn--danger`):
- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px.
- **Hover:** brightness/shadow shift with `cursor: pointer`.
- **Focus:** distinct ring via `outline`/`box-shadow` using `--primary` for keyboard navigation.
- **Active/Pressed:** `transform: scale(0.97)`.
- **Loading:** disables interaction, prevents double-clicks, renders a CSS spinner or animated Material `progress_activity` icon **without changing button dimensions**.
- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.
- **Success/Error:** temporary feedback styles driven by `--text-success` / `--text-error` (used by the Final CTA form submit).

### 2.2 Card Component Requirements
- **Default:** flexible flexbox layout, subtle borders and elevation using `--bg-secondary` and CSS variables.
- **Hover:** `transform: translateY(-2px)` and/or shadow shift to `--shadow-md`.
- **Focus-within:** card border highlights when the child link/button receives focus (feature cards, pricing cards).
- **Loading (Skeleton):** define a `.card--skeleton` shimmer keyframe animation in CSS (demonstrate it on the hero chart panel's initial load) that preserves layout dimensions.
- **Empty State:** structured fallback with a Google Material icon and guidance text (e.g., chart panel: `cloud_off` icon + "No forecast data yet — connect a data source").

### 2.3 Form & Input Requirements (Final CTA email capture)
- **Structure:** `.input-group` flex container wrapping a `<label>`, the `<input>`, and a dedicated error feedback element with `aria-live="polite"`.
- **States:** Empty, Focused (outline ring), Filled, Valid (success border + `check` icon), Invalid (error border, `--text-error` message, `error` icon), Disabled, Read-only.
- Validate email format in JS; on submit show button loading state, then a success confirmation message in the `aria-live` region.

### 2.4 Modal / Popup Requirements ("Book a Demo")
- **States:** Opening, Open, Loading, Success/Error, Closing — all animated via CSS transitions (opacity + scale).
- **UX:** centered flex container (`align-items: center`), backdrop overlay above content but below the dialog (`--z-modal`), Google Material `close` icon button with `aria-label="Close dialog"`, keyboard focus trapping, return focus to the trigger on close, close via `Esc` and overlay click, `role="dialog"`, `aria-modal="true"`, `aria-labelledby`, body scroll locked while open.
- Contains a simple demo request form (name, work email, company) reusing the §2.3 input states.

### 2.5 FAQ Accordion
Each item: a `<button aria-expanded>` header (with a rotating `expand_more` chevron) and a panel with `role="region"` + `aria-labelledby`. Smooth height transition via CSS. Fully keyboard operable. Only one item open at a time.

### 2.6 Scenario Toggle Switches
- A segmented scenario control with three options — **Base / Optimistic / Pessimistic** — each a button with `aria-pressed`, styled as connected pills with a clear selected state (never color-only: bold weight + icon or underline).
- Plus at least one classic toggle switch (`role="switch"`, `aria-checked`, Space/Enter operable, animated thumb via CSS transition, visible focus ring) labeled "Show confidence interval" that fades the band in/out via `fill-opacity`.
- Switching scenarios updates the forecast line (swap path data or toggle pre-rendered variant groups via a `data-scenario` attribute + CSS classes), updates the AI insight card numbers, and announces the change in an `aria-live="polite"` region.

### 2.7 Hero Forecast Visualization (centerpiece)
Build an inline SVG chart (the only permitted inline SVG use, per §1.6):
- **Actual line:** solid stroke using `--actual-line`.
- **Forecast line:** dashed via `stroke-dasharray`, using `--forecast-line`, with a draw-in animation (animate `stroke-dashoffset` to 0) triggered on load or via `IntersectionObserver`.
- **Confidence band:** a path/polygon filled with `--confidence-band`, fading in via a `fill-opacity` transition after the line draws.
- **Anomaly markers:** circles using `--anomaly` with a continuous pulse animation (expanding ring), each labeled — anomalies must also show a `warning` Material icon and text ("Anomaly detected") in the tooltip/legend, never color alone.
- **Legend:** Actual / Forecast / Confidence interval / Anomaly, with solid-vs-dashed swatches and text labels.
- **Accessibility:** `role="img"` with a descriptive `aria-label` on the SVG; each data point is focusable (`tabindex="0"`) with an `aria-label` such as "March: $412K, forecast confidence 87%".

### 2.8 Prediction Tooltips & Probability Indicators
- **Tooltips:** CSS-only tooltips on chart data points, visible on `:hover` and `:focus-visible`, showing value + confidence, styled with `--bg-secondary`, `--shadow-md`, and `--z-dropdown`.
- **Probability indicators:** gradient bars using `--probability-gradient`, width equal to the probability percentage, always accompanied by a visible percentage text label; animate the bar width when scrolled into view.

---

## 3. CORE UX & MICRO-INTERACTION RULES

- **Responsive by default:** fluid sizing, standard breakpoints, zero horizontal overflow.
- **Smooth animations:** `transition: var(--transition-normal)` on all state changes; under `prefers-reduced-motion`, disable the line-draw, pulse, shimmer, and width animations (render final states instantly, keep simple opacity fades).
- **Accessibility (a11y):** WCAG-sufficient contrast in both Light and Dark modes; never rely on color alone (anomalies = red + icon + text; forecast vs actual = dash + legend). Semantic HTML5 landmarks (`header`, `main`, `section`, `footer`), a skip-to-content link, logical DOM/focus order, full keyboard operability, and `aria-live` regions for dynamic feedback (form results, scenario changes, loading states).
- **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.
- **Destructive actions:** any `.btn--danger` usage must be visually distinct in both themes.

---

## 4. DELIVERABLE & OUTPUT FORMAT

- **Files:** separate `index.html`, `style.css`, `script.js`. No inline `<script>` blocks beyond a single `<script src="script.js" defer></script>` reference. No inline CSS anywhere.
- **Naming:** one consistent convention — **BEM** (`block__element--modifier`) — across HTML, CSS, and JS hooks. Never mix conventions.
- **Copy:** realistic, professional English copy throughout — no lorem ipsum, no placeholder names. Realistic testimonials (names, roles, companies), real pricing numbers with feature lists, and substantive FAQ answers.
- **JS scope:** theme toggle + persistence, mobile menu, FAQ accordion, scenario switching, chart draw/pulse triggers, tooltip behavior, email/demo form validation with loading and success states, modal open/close with focus trap. No console errors; degrade gracefully if JS fails (content must remain readable).
- **Quality bar:** the final page must look like a shipped 2020s BI product landing page on the first render, in both themes, at every viewport width.