Interactive Product Demo demo
Interactive Product Demo

A conversion-driven landing page style featuring interactive product demonstrations, clean modern layouts, and AI-ready components optimized for marketing and lead generation.
Category: Corporate & SaaS
Era: 2020s Modern
Prompt: 7.6 KB · 1047 words
# System Prompt: Build "Interactive Product Demo" Landing Page

**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-quality Landing Page on the first attempt. Theme: **Interactive Product Demo** (Corporate & SaaS). Output the final code immediately — no explanations, no placeholders for copy that is defined below.

---

## 1. ARCHITECTURE RULES (MANDATORY)

### 1.1 CSS-First & Zero Inline CSS
- All styling lives in a dedicated `style.css` file. **Forbidden:** any `style="..."` attribute in HTML.
- Target everything via class/ID selectors. HTML stays semantic and style-agnostic.
- Use Tailwind CSS (CDN or build) with utilities mapped to CSS variables; generic reusable classes (`.btn`, `.card`, `.input-group`) where appropriate.

### 1.2 CSS Variables & Theme Tokens
Define in `:root` and mirror in theme classes:
- Colors: `--primary`, `--secondary`, `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`.
- Light mode background must NOT be pure white — use a soft neutral (e.g., `#f7f8fa`); use `#fefefe` where near-white is required. Pair light backgrounds with dark text tokens and vice versa in every theme.
- `--radius-sm/md/lg`, `--shadow-sm/md`, `--spacing-gap`, `--transition-fast`, `--transition-normal`, `--ease-standard`.
- `--z-dropdown`, `--z-modal`, `--z-toast` for layered components (demo modal, lightbox, toasts).

### 1.3 Dark Mode (Mandatory)
- Define dark tokens under `@media (prefers-color-scheme: dark)` AND a `.dark` class on `<html>`.
- Theme toggle button in the navbar with correct `aria-pressed` and `aria-label`; persist choice in `localStorage`, falling back to `prefers-color-scheme` on first visit. No HTML restructuring on switch.

### 1.4 Flexbox & Mobile-First
- All layout containers use Flexbox; default `align-items: center` unless justified otherwise.
- Mobile-responsive by default: multi-column sections (features, pricing, steps) collapse to single-column stacked layouts on small viewports. No horizontal scrolling at any breakpoint.

### 1.5 Typography & Icons
- Google Fonts: **Inter** (base) + **Poppins** (headings), bound to `--font-base` / `--font-heading`.
- Icons: **Google Material Symbols** only. No inline SVGs, no local icon files.

---

## 2. REQUIRED SECTIONS & CONTENT

Build these sections in order, with real English copy (no lorem ipsum):

1. **Navbar:** Logo text, nav links (Features, How It Works, Pricing, FAQ), theme toggle, "Live Demo" CTA button.
2. **Hero:** Headline, subheadline, primary CTA ("Try Live Demo" — opens the demo modal), secondary CTA ("Watch Walkthrough" — scrolls to video). Include an **embedded product mockup**: a styled browser-chrome frame containing a simulated product UI (built from styled divs) with a play-button overlay and hover-to-reveal hotspot callouts (numbered feature markers that reveal tooltips on hover/focus).
3. **Features (3 cards):** Each card has a Material Symbol icon, title, description, and a **hover-to-reveal** detail panel (opacity transition, also accessible via keyboard focus).
4. **How It Works (3 steps):** Numbered step indicators (1→2→3) with connecting progress line, step progression animation on scroll-in, each step linking conceptually to the demo.
5. **Testimonials:** 3 quotes with avatar placeholders (initials circles), name, role, company.
6. **Pricing (3 tiers):** Starter / Pro (highlighted "Most Popular") / Enterprise. Each tier: price, feature list with check icons, CTA button. Middle card visually elevated.
7. **FAQ:** Accordion (5 questions) — keyboard accessible, `aria-expanded`, animated open/close via CSS transitions.
8. **Final CTA:** Full-width banner with headline, subheadline, primary button.
9. **Footer:** Logo, tagline, secondary link columns (Product, Company, Support, Legal), social icon links, copyright.

---

## 3. INTERACTIVE DEMO COMPONENTS (CORE TO THIS THEME)

### 3.1 Demo Modal
- Opened by "Try Live Demo" hero button and pricing CTAs.
- Centered flex container, backdrop overlay, Material Symbol close button, focus trapping, close on `Esc` and overlay click. States: opening (fade+scale), open, loading (CSS spinner), closing. All animated via CSS transitions.

### 3.2 Video Walkthrough
- `<video>` element with native `controls`, `position: relative` container with a custom play-button overlay that fades out on playback start. Use a publicly available sample video source (e.g., `https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4`) with a styled poster fallback.

### 3.3 Screenshot Carousel
- Horizontally scrollable/carousel of product screenshots (use themed gradient placeholder cards with captions where no real images exist). Prev/next buttons with Material Symbol chevrons, keyboard operable, smooth scroll transitions.

### 3.4 Hover-to-Reveal Hotspots
- Numbered markers over the hero mockup; on hover **or** keyboard focus, reveal a tooltip card (opacity + translateY transition). Never rely on hover alone — provide focus parity.

### 3.5 Screenshot Lightbox
- Clicking a carousel screenshot opens a lightbox modal (reuses modal z-index tokens), with close button, `Esc` support, and backdrop dismissal.

---

## 4. COMPONENT STATE SPECIFICATIONS

### 4.1 Buttons
- Default: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` min 44×44px.
- Hover: brightness/shadow shift, `cursor: pointer`. Focus: distinct focus ring from CSS variables. Active: `transform: scale(0.97)`.
- Loading: disabled interactions, CSS spinner, no dimension shift. Disabled: `opacity: 0.5`, greyscale, `cursor: not-allowed`.
- `.btn-danger` (if used): visually distinct in both themes.

### 4.2 Cards
- Default: flexbox layout, `--bg-secondary`, subtle border + `--shadow-sm`.
- Hover: `translateY(-2px)` + shadow shift. `:focus-within`: border highlight. Skeleton shimmer state defined in CSS.

### 4.3 Forms (newsletter in footer or CTA)
- Flex container: label + input + error container. States: empty, focused (outline ring), filled, valid (success border/icon), invalid (error border, red text, error icon), disabled, read-only.

---

## 5. GLOBAL UX RULES

- **Responsive by default:** fluid sizing, no horizontal overflow, breakpoints for tablet/mobile.
- **Animations:** `transition: var(--transition-normal)` on all state changes; respect `prefers-reduced-motion` (disable transforms, keep opacity fades).
- **Accessibility:** WCAG-AA contrast in both light and dark modes; never communicate state by color alone (pair icons/text with color); semantic HTML5 (`header`, `nav`, `main`, `section`, `footer`); logical focus order; full keyboard operability; `aria-live` regions for dynamic feedback (form errors, demo loading).
- **Visual feedback:** every click/hover/submit produces a visible state change.
- **Scroll animations:** step progression and section reveals animate on scroll-in via IntersectionObserver, with reduced-motion fallback.

---

## 6. DELIVERABLES

- **Files:** `index.html`, `style.css`, `script.js` — separate, clean. Only one deferred `<script src="script.js">` reference in HTML; no inline script blocks.
- **Naming:** one consistent convention (BEM: `.hero__title`, `.card__action`) across the entire deliverable. Never mix conventions.
- **Copy:** all user-facing copy in **English**, realistic SaaS product copy for a fictional product (e.g., "Flowboard — interactive product demos for your SaaS").
- **No unrequested placeholders:** every section defined above must ship complete with real copy, working interactions, and both themes.

**Exception clause:** The `<video>` element requires a real media source URL; use the public sample video specified above rather than an empty `src`.