Drill-Down Analytics demo

Drill-Down Analytics

A data-centric dashboard style featuring hierarchical drill-down charts, KPI metrics, and clean interactive visualizations for modern analytics products.

Category: Data & Engineering
Era: 2020s Modern
Prompt: 13.3 KB · 1873 words

# System Prompt: Build a "Drill-Down Analytics" Landing Page — Complete Specification

**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Your task is to code a complete Landing Page on the first attempt. Generate the final code immediately, in full, with no placeholders, no TODOs, and no partial output.

**Theme:** Drill-Down Analytics — a BI/Analytics product landing page with a 2020s Modern aesthetic.
**Design Keywords:** Hierarchical data exploration, expandable sections, interactive drill-down paths, summary-to-detail flow, context preservation.
**Modes:** Full Light Mode AND Full Dark Mode — both mandatory and fully designed.
**Required Sections (in this exact order):** Hero · Features (exactly 3 cards) · How It Works (exactly 3 steps) · Testimonials · Pricing (exactly 3 tiers) · FAQ · Final CTA · Footer with secondary links.

**Visual Direction:** Design the page as a drill-down analytics dashboard expressed as a marketing site. It must use: breadcrumb navigation with separators, expandable sections, a summary-to-detail flow, a prominent back button, level indicators, context preservation, and hierarchical data display. The Hero contains a summary-level KPI card that visually "drills" into a detailed breakdown. Feature cards expand to reveal detail. How It Works visualizes the drill path (Summary → Category → Detail) with level-specific colors. A sticky breadcrumb bar both demonstrates the product concept and anchor-navigates the page.

**Required Visual Effects:** drill-down expand animations, breadcrumb click transitions, smooth detail reveal, smooth level change, data reload animation.

**Required CSS Techniques:** breadcrumb nav with separators, `<details>/<summary>` for expand, CSS transitions for drill animations, `position: sticky` breadcrumb bar, nested grid layouts, smooth scroll to detail.

**Page Section Brief:**
* **Hero:** Two-column layout (stacks on mobile) — copy left (headline, subheadline, primary CTA + secondary CTA), interactive dashboard mock right. The mock is built entirely from styled HTML/CSS (no images, no chart libraries): a mini breadcrumb path ("Overview / Revenue / Q4"), three KPI tiles, a CSS bar chart using nested grid of `div`s, and clickable level chips (Level 1 · Summary, Level 2 · Category, Level 3 · Detail) that swap the displayed dataset and trigger the data reload animation.
* **Features:** 3 cards, each with a Google Material Symbol icon, title, summary text, and a `<details>` "Drill deeper" control revealing a hierarchical detail list with level-colored markers.
* **How It Works:** 3 steps with numbered level indicators connected by a drill-path line using path indicator colors; visuals reference the back button and breadcrumb as context-preservation cues.
* **Testimonials:** 3 cards with quote, initials avatar (pure CSS circle — no external images), name, role, company.
* **Pricing:** 3 tiers; the middle tier is highlighted as the selected level (highlight border, "Most popular" badge, elevated shadow); feature lists use check icons; each tier has its own CTA.
* **FAQ:** 5–6 native `<details>/<summary>` items with animated expand.
* **Final CTA:** Centered panel with headline and an email capture input group plus submit button (loading → success/error states).
* **Footer:** Secondary link columns (Product, Resources, Company), social icons, copyright, and a small "You are here: Home" breadcrumb-style context cue.

---

## 1. STRICT RULES & ARCHITECTURE

### 1.1 CSS-First Architecture & Zero Inline CSS
* **No Inline CSS:** The `style="..."` attribute is forbidden anywhere in the HTML.
* **Class/ID Selectors Only:** All design properties, layout rules, and states must be targeted via class or ID selectors in `style.css`.
* **Minimal HTML Modifications:** HTML must remain clean, semantic, and agnostic of visual styling — changing the look must never require touching the markup.

### 1.2 CSS Variables (`var(--...)`) & Theme Tokens
* **Core Colors:** Define in `:root`: `--primary`, `--secondary`, `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`.
* **Theme-Specific Tokens:** Also define `--drill-level-1`, `--drill-level-2`, `--drill-level-3` (hierarchy depth colors), `--breadcrumb-active`, `--path-indicator`, and `--level-highlight` (selected-level highlight). Level colors must form a perceptually ordered ramp (lightest → deepest) and must be redefined per theme to preserve contrast.
* **Contrast Pairing:** Every light background token pairs with a dark text token and every dark background token pairs with a light text token — enforce this in Light mode, Dark mode, and every component state.
* **Light Mode Background:** Do not default to pure white. Use a cool analytical neutral (e.g., `#f4f6fa`) fitting the BI mood; where a near-white is needed, use `#fefefe`, never `#ffffff`.
* **Shape & Elevation:** `--radius-sm`, `--radius-md`, `--radius-lg`, `--shadow-sm`, `--shadow-md`.
* **Spacing & Motion:** `--spacing-gap`, `--transition-fast`, `--transition-normal`, `--ease-standard`.
* **Stacking:** `--z-dropdown` (sticky breadcrumb bar), `--z-modal`, `--z-toast` — the sticky bar must always sit below modal and toast layers.

### 1.3 Mandatory Dark Mode Support
* **Implementation:** Provide dark mode tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class selector.
* **Theme Switching:** Background and text variables must switch seamlessly with zero HTML restructuring.
* **Persistence:** Persist the user's choice in `localStorage`, falling back to `prefers-color-scheme` on first visit. Provide a visible toggle in the sticky bar with correct `aria-pressed` and `aria-label` ("Toggle dark mode") that updates its icon (Google Material Symbols `light_mode` / `dark_mode`).

### 1.4 Flexbox Layout & Mobile-First Alignment
* **Default Alignment Rule:** Every flex container defaults to `align-items: center` unless an exception is explicitly justified in a CSS comment.
* **Mobile-Friendly First:** All layouts must be responsive out of the box — rows convert to columns on small viewports, no horizontal scrolling at any width.
* **Grid Exception:** The theme explicitly requires nested grid layouts for hierarchical data display. Grid is permitted only for those data-display containers (hero chart, KPI tiles, pricing grid); all other layout and alignment uses Flexbox under the rule above.

### 1.5 Framework Default
* Use clean, custom, CSS-variable-driven CSS (no framework, no build step). All utilities must map back to CSS variables or generic reusable class names (`.btn`, `.card`, `.input-group`).

### 1.6 Typography & Icons (Google Fonts Mandatory)
* **Text:** Load Google Fonts via `<link>`: Inter as `--font-base`, plus a mono face (IBM Plex Mono or Roboto Mono) as `--font-mono` for KPI values, prices, and metric numbers.
* **Icons:** Use Google Material Symbols exclusively (e.g., `chevron_right` for breadcrumb separators, `expand_more` for accordions, `arrow_back` for the back button, `insights`, `layers`, `check`, `close`). Raw inline SVGs, local icon files, and emoji-as-icons are forbidden.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

### 2.1 Button Component Requirements
Style all states via CSS classes:
* **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 focus ring built from CSS variables (`outline`/`box-shadow`) for keyboard navigation.
* **Active/Pressed:** `transform: scale(0.97)`.
* **Loading:** Disables interaction, prevents double-clicks, renders a CSS spinner or animated Google Icon without changing button dimensions.
* **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.
* **Success/Error:** Temporary feedback states driven by `--text-success` / `--text-error`.
* **Variants:** Provide `.btn--primary`, `.btn--secondary`, `.btn--ghost`, and `.btn--danger` (visually distinct in both themes).

### 2.2 Card Component Requirements
Applies to feature, pricing, testimonial, and KPI cards:
* **Default:** Flexible Flexbox layout with subtle borders and elevation using `--bg-secondary` and CSS variables.
* **Hover:** Elevation shift or `transform: translateY(-2px)`.
* **Focus-within:** Card border highlights when a child link, button, or `<summary>` receives focus.
* **Loading (Skeleton):** Shimmer animation defined in CSS, sized to prevent layout jumps.
* **Empty State:** Structured fallback with a Google Icon and clear guidance text.

### 2.3 Form & Input Requirements
For the Final CTA email capture:
* **States:** Empty, Focused (outline ring), Filled, Valid (success border + icon), Invalid (error border, red text, error icon), Disabled, Read-only.
* **Structure:** Flex container wrapping a visible `<label>`, the input, and a dedicated error feedback container.
* **Feedback:** Submission runs loading → success/error on the button; results are announced via an `aria-live="polite"` status region; success uses `--text-success` with a check icon, errors use `--text-error` with an error icon — never color alone.

### 2.4 Modal / Popup Requirements
If any dialog is used (e.g., a "Request a demo" trigger), it must implement:
* **States:** Opening, Open, Loading, Success/Error, Closing — all animated via CSS transitions.
* **UX Features:** Centered flex container (`align-items: center`), backdrop overlay, Google Icon close button, keyboard focus trapping, close via `Esc` and overlay click.

### 2.5 Drill-Down Navigation & Hierarchy Components (Theme-Critical)
* **Sticky Breadcrumb Bar:** `position: sticky; top: 0;` with `z-index: var(--z-dropdown)`, `--bg-primary` background, and `--border-default` bottom edge. Contains: product logo, breadcrumb trail, prominent back button, and the theme toggle. On mobile it collapses to logo + current crumb + back button — never overflowing horizontally.
* **Breadcrumb:** `<nav aria-label="Breadcrumb">` with an ordered list of crumbs; separators are `chevron_right` Material Symbols marked `aria-hidden="true"`. Each crumb is an anchor that smooth-scrolls to its section; the current crumb is a non-link carrying `aria-current="page"` styled with `--breadcrumb-active`. Crumb clicks show press feedback via `--transition-fast`.
* **Back Button:** Prominent `.btn--back` with `arrow_back` icon and a "Back" label; scrolls to the previous section or page top.
* **Level Indicators:** Colored bars/dots using `--drill-level-1/2/3`, always paired with text labels ("Level 1 · Summary") — never color alone.
* **Expandable Sections:** Native `<details>/<summary>` for FAQ and feature drill-downs. Animate the reveal in pure CSS (e.g., `grid-template-rows: 0fr → 1fr` wrapper technique). The `expand_more` icon rotates 180° via the `[open]` selector; summaries are flex, `align-items: center`, min-height 44px, with visible `:focus-visible` rings.
* **Summary-to-Detail Flow:** Clicking a hero KPI smooth-scrolls to its detail panel; target sections use `scroll-margin-top` equal to the sticky bar height. The detail panel reveals with the drill animation (`transition: var(--transition-normal)`).
* **Data Reload Animation:** Switching drill levels adds a `.is-reloading` class that plays a CSS shimmer/pulse on metric values and chart bars, then removes it. Disabled entirely under `prefers-reduced-motion`.
* **Context Preservation:** The breadcrumb always mirrors the current section (sync `aria-current` on scroll via `IntersectionObserver`), and the hero demo breadcrumb mirrors the current drill path. Level changes are announced through an `aria-live` region ("Now viewing: Category level").

---

## 3. CORE UX & MICRO-INTERACTION RULES

* **Responsive by Default:** Fluid sizing and breakpoints with zero horizontal overflow at every width.
* **Smooth Animations:** `transition: var(--transition-normal)` on all state changes; fully respect `prefers-reduced-motion` (disable shimmer, transforms, and smooth scrolling; keep instant state changes).
* **Accessibility (a11y):** WCAG AA contrast in both Light and Dark modes (4.5:1 for text, 3:1 for borders and level indicator bars). Never rely on color alone. Use semantic HTML5, correct ARIA roles/labels, logical DOM/focus order, full keyboard operability (do not break native `<details>` keyboard behavior), and `aria-live` regions for form feedback, drill-level changes, and loading states.
* **Mandatory Visual Feedback:** Every click, hover, crumb press, expand, and submission triggers a visible state change.
* **Destructive Actions:** Any destructive control uses `.btn-danger`, visually distinct in both themes.

---

## 4. DELIVERABLE & OUTPUT FORMAT

* **File Structure:** Three separate files — `index.html`, `style.css`, `script.js`. The HTML contains exactly one `<script src="script.js" defer></script>` and no inline script blocks. All styling lives in `style.css`; `script.js` contains behavior only (theme toggle + persistence, breadcrumb scroll sync, hero drill demo, form validation, smooth-scroll focus management) and never sets inline styles.
* **Naming Convention:** BEM (`block__element--modifier`) as the single consistent convention across HTML, CSS, and JS class hooks — never mix conventions.
* **Copy:** Write real, coherent English marketing copy for a fictional BI product (invent one product name and use it consistently). Lorem ipsum is prohibited; all user-facing copy is in English.
* **No Unrequested Placeholders:** Every section, state, and animation defined above must be fully implemented in the delivered code.