Seamless Shopping Experience demo
Seamless Shopping Experience

A functional and trustworthy landing page style for premium subscription services, emphasizing clean layouts and conversion-ready design.
Category: Corporate & SaaS
Era: 2020s Modern
Prompt: 17.6 KB · 2372 words
# CODING-AI SYSTEM PROMPT — LANDING PAGE BUILD: "CONTINUUM" (Continuous Shopping Experience)

**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Build the complete, production-quality landing page described below on the first attempt. Deliver the full final code — no clarifying questions, no scoped-down substitutes.

---

## 0. PROJECT DEFINITION & DESIGN DIRECTION

**0.1 Product & Theme**
- Fictional brand: **Continuum** — a premium e-commerce subscription service (2026-era): cloud-synced shopping, member pricing across a vast catalog, and autonomous delivery (drones/rover fleets) with live route tracking.
- Style name: **Continuous Shopping Experience** — Functional, Trustworthy, Scalable. Era: 2026+ E-commerce Evolution. Output category: Corporate & SaaS.
- Keywords to express visually: e-commerce, cloud, logistics, autonomous delivery, customer-centric, reliable, efficient, vast, seamless, modern.
- Feel: clean, product-focused, airy, conversion-oriented. Premium through efficiency and trust — never through ornamentation.

**0.2 Language Rule (Mandatory)**
- Write ALL user-facing copy (headlines, body text, button labels, form messages, footer links, aria-labels) in **English**. No Portuguese or any other language may appear anywhere in the UI.

**0.3 Required Page Sections (single page, anchor-navigable, in this order)**
1. Sticky Header — brand, nav links, theme toggle, CTA button
2. Hero — copy, dual CTAs, trust row, autonomous delivery route visualization
3. Features — 3 cards
4. How It Works — 3 steps
5. Testimonials — 3 quotes
6. Pricing — 3 tiers + billing toggle
7. FAQ — accordion
8. Final CTA — conversion band with email capture
9. Footer — secondary link columns

**0.4 Source Style Specification (translated & adapted)**
- Palette — Primary: Retail Orange `#FF9900`, Black `#000000`, White `#FFFFFF`, Dark Slate `#232F3E`. Secondary: Light Gray `#DDDDDD`, Teal `#00A8E1`, Green `#008000`, Gold `#FFD700`.
- Base visual values from the source spec: `box-shadow: 0 1px 3px rgba(0,0,0,0.12)`, `border-radius: 3px`, `transition: all 0.2s ease-in-out`, page gradient `linear-gradient(to bottom, #F7FAFA, #FFFFFF)`, and the class hooks `.product-card-hover` and `.delivery-animation` (both must exist and be used).
- Enforced adaptations: `#FFFFFF` is replaced by `#FEFEFE` everywhere (pure white is forbidden); the malformed quoted font stack `"Verdana, Arial, sans-serif"` is normalized into a Google-Font-first stack (see 1.6).

---

## 1. STRICT RULES & ARCHITECTURE

**1.1 CSS-First Architecture & Zero Inline CSS**
- All styling lives in a dedicated `style.css`. **Forbidden:** the `style="..."` attribute anywhere in the HTML, inline `<script>` blocks, and inline event-handler attributes (`onclick=`, `onsubmit=`, etc.).
- All design properties, layout rules, and states are targeted exclusively via class or ID selectors.
- HTML must remain clean, semantic, and style-agnostic: changing the entire look must require editing only `style.css`, never the markup.

**1.2 CSS Variables & Theme Tokens**
Store every visual token in `:root` and the `.dark` theme class. Use exactly these names:

```css
:root {
  /* Color tokens — Light theme */
  --primary: #FF9900;        /* Retail Orange — CTAs, key accents */
  --secondary: #232F3E;      /* Dark Slate — header/footer surfaces, headings */
  --bg-primary: #F7FAFA;     /* Page background (gradient start) */
  --bg-secondary: #FEFEFE;   /* Card/surface background — never #FFFFFF */
  --text-primary: #000000;
  --text-secondary: #565959;/* Derived neutral for body copy (AA on light) */
  --text-success: #008000;
  --text-error: #CC0000;     /* Derived — palette lacks error red; mandatory */
  --border-default: #DDDDDD;
  --border-success: #008000;
  --border-error: #CC0000;
  --accent-teal: #00A8E1;    /* Icons, route lines, decorative accents */
  --accent-teal-text: #00708F; /* Darkened teal for teal TEXT on light bg (AA) */
  --accent-gold: #FFD700;    /* Star ratings, "Most Popular" badge */
  --on-primary: #000000;     /* Text/icons on orange surfaces */

  /* Shape & elevation */
  --radius-sm: 3px; --radius-md: 6px; --radius-lg: 12px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.12);
  --shadow-md: 0 6px 16px rgba(0,0,0,0.16);

  /* Spacing, motion, stacking */
  --spacing-gap: 1.5rem;
  --transition-fast: 0.2s; --transition-normal: 0.3s; --ease-standard: ease-in-out;
  --z-dropdown: 1000; --z-modal: 1100; --z-toast: 1200;

  /* Typography & surfaces */
  --font-base: "Inter", Verdana, Arial, sans-serif;
  --gradient-page: linear-gradient(to bottom, #F7FAFA, #FEFEFE);
}

.dark {
  --bg-primary: #131A22;     /* Derived deep slate from #232F3E */
  --bg-secondary: #232F3E;
  --text-primary: #FEFEFE;
  --text-secondary: #DDDDDD;
  --text-success: #3FB950;   /* Lightened for dark-surface contrast */
  --text-error: #FF8A8A;
  --border-default: #3B4655;
  --border-success: #3FB950;
  --border-error: #FF8A8A;
  --accent-teal: #33BBE7;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.5);
  --shadow-md: 0 6px 16px rgba(0,0,0,0.6);
  --gradient-page: linear-gradient(to bottom, #0E141B, #131A22);
}
```

- **Contrast pairing (enforced in both themes):** every light surface pairs with dark text; every dark surface pairs with light text. Orange (`--primary`) surfaces ALWAYS pair with `--on-primary` (#000000) text — orange-on-white fails contrast and is forbidden for meaningful text. Teal `#00A8E1` is restricted to icons, lines, and large decorative elements on light backgrounds; use `--accent-teal-text` for teal text/links on light surfaces. Gold badges pair with `--secondary` text. Never rely on color alone to communicate state.
- All transitions use the pattern `transition: all var(--transition-fast) var(--ease-standard)` (matching the source spec's `0.2s ease-in-out`).

**1.3 Mandatory Dark Mode Support**
- Define dark tokens under BOTH `@media (prefers-color-scheme: dark)` (first-visit default) AND a `.dark` class on `<html>` (user override). Background/text variables must switch with zero HTML restructuring.
- **Persistence:** store the choice in `localStorage`; on load, apply the saved choice, falling back to `prefers-color-scheme` for first visits. Provide a visible toggle button in the header with correct `aria-pressed` and a dynamic `aria-label` ("Switch to dark mode" / "Switch to light mode"), swapping Material icons `light_mode`/`dark_mode`.
- **Exception clause:** the source specification marked Dark Mode "✗ No" — this is overridden: dark mode is mandatory per architecture rules and must be fully implemented with AA contrast.

**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 in code comments (the only sanctioned default exception: `align-items: stretch` for equal-height card rows).
- Mobile-first: all rows collapse to single columns below 768px; no horizontal scrolling at any viewport width; all interactive targets ≥ 44×44px.

**1.5 Framework Default & Tailwind CSS Integration**
- Default to Tailwind CSS (CDN or build). Utilities must map back to CSS variables or a fixed, generic component class set: `.btn`, `.card`, `.input-group`, `.badge`, `.accordion`, `.theme-toggle`, `.delivery-animation`, `.product-card-hover`, `.reveal`, `.container`. Define these in a single `@layer components` block via `@apply`, with all values driven by the tokens in 1.2.
- Alternative: clean custom CSS using strict BEM — but choose **ONE** convention for the entire deliverable and never mix conventions.

**1.6 Typography & Icons — Google Fonts Mandatory**
- Load **Inter** (weights 400/500/600/700/800) via Google Fonts `<link>` and bind it to `--font-base`.
- Load **Google Material Symbols (Rounded)** via `<link>`; use `font-variation-settings: 'FILL' 1` for filled icons (e.g., stars). **Forbidden:** raw inline SVGs, local icon files, emoji as icons.
- **Exception clause:** the source spec requested Verdana/Arial as the primary stack — superseded by the mandatory Google Fonts rule; `Verdana, Arial, sans-serif` are retained as fallbacks only inside `--font-base`.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 Button Component (` .btn` + variants `.btn--primary`, `.btn--secondary`, `.btn--ghost`, `.btn--danger`)**
- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum 44×44px; `--radius-sm`; `--transition-fast` on all properties.
- **Hover:** brightness/shadow shift with `cursor: pointer`.
- **Focus:** distinct `:focus-visible` ring via `box-shadow` using `--accent-teal` (visible on both themes).
- **Active:** `transform: scale(0.97)`.
- **Loading (`.btn--loading`):** `aria-busy="true"`, pointer-events disabled (prevents double-clicks), CSS border-spinner or rotating Material `progress` icon; button dimensions must not change.
- **Disabled:** `opacity: 0.5`, grayscale filter, `cursor: not-allowed`.
- **Success/Error (`.btn--success` / `.btn--error`):** transient feedback states driven by `--text-success` / `--text-error`, announced via an `aria-live="polite"` region.
- `.btn--danger` must be visually distinct in both light and dark themes.

**2.2 Card Component (`.card` + variants `.card--feature`, `.card--pricing`, `.card--testimonial`, `.card--step`)**
- **Default:** flex layout, `--bg-secondary` surface, 1px `--border-default`, `--radius-sm`, `--shadow-sm`.
- **Hover (`.product-card-hover`):** `transform: translateY(-2px)` + elevation shift to `--shadow-md` + border-color shift.
- **Focus-within:** card border highlights in `--primary` when a child link/button receives focus.
- **Loading (`.card--skeleton` / `.skeleton`):** shimmer gradient-sweep keyframes that preserve final layout dimensions (no layout jumps).
- **Empty state (`.card--empty`):** fallback layout with a Google Material icon and clear guidance text — define it in the component system.

**2.3 Form & Input Component (`.input-group`)**
- **Structure:** flex container wrapping a `<label>`, the `<input>`, and a dedicated error-feedback container (`<p>` with `aria-live="polite"`).
- **States (all styled via classes):** empty, focused (visible ring — never remove the outline without replacing it), filled, valid (`--border-success` + `check_circle` icon), invalid (`--border-error`, error text in `--text-error`, `error`/`cancel` icon, message announced), disabled, read-only.

**2.4 Modal / Popup (applies to any overlay used, e.g., a footer "Terms" link opening a dialog)**
- **States:** opening, open, loading, success/error, closing — all animated via CSS transitions.
- **UX:** centered flex container (`align-items: center; justify-content: center`), backdrop overlay, Material `close` icon button, keyboard focus trap, close via `Esc` and overlay click, `role="dialog"` + `aria-modal`, `z-index: var(--z-modal)`.

---

## 3. CORE UX & MICRO-INTERACTION RULES

- **Responsive by default:** fluid sizing, no horizontal overflow at any breakpoint.
- **Smooth animations:** every state change transitions with `var(--transition-fast/normal)`; fully respect `prefers-reduced-motion: reduce` (stop `.delivery-animation` movement, show `.reveal` content instantly, reduce transitions to none).
- **Accessibility (a11y):** AA contrast in both light and dark modes; never color-only state communication; semantic HTML5 landmarks (`header`, `nav`, `main`, `section` with `aria-labelledby`, `footer`); a single `h1`; a "Skip to main content" link; logical focus order; full keyboard operability; `aria-live` regions for form errors, CTA success, and pricing-toggle announcements.
- **Mandatory visual feedback:** every click, hover, and submission produces a visible state change.
- **Destructive actions:** `.btn--danger` visually distinct in both themes.
- **Trust elements everywhere:** gold star ratings (always paired with numeric text like "4.9/5"), verified badges, member counts, secure-checkout cues.

---

## 4. DELIVERABLE & OUTPUT FORMAT

- **Files:** separate `index.html`, `style.css`, `script.js`. Exactly one `<script src="script.js" defer></script>` in the HTML — no other script blocks.
- **Head requirements:** `lang="en"`, viewport meta, descriptive `<title>`, meta description, Google Fonts + Material Symbols links.
- **Naming:** one consistent convention across the entire deliverable (see 1.5) — never mix.
- **Copy:** realistic, specific English copy for the Continuum brand — lorem ipsum is forbidden. Footer/legal links without real destinations may use `href="#"` but must carry descriptive labels.
- **JS behaviors required in `script.js`:** theme toggle with `localStorage` persistence; mobile nav open/close (with `Esc`/overlay/link-click close and focus management); FAQ accordion; pricing billing toggle; smooth anchor scrolling (respecting reduced motion); IntersectionObserver scroll reveals; CTA demo loading→success flows; email form validation with `aria-live` feedback.

---

## 5. SECTION-BY-SECTION BUILD SPECIFICATION

**5.1 Sticky Header**
Flex row: wordmark "Continuum" (Material `all_inclusive` or `bolt` icon + text), nav links (Features, How It Works, Pricing, FAQ), theme toggle (per 1.3), `.btn--primary` "Get Started". Mobile: Material `menu` button toggles a dropdown panel (`--z-dropdown`) with `aria-expanded`, keyboard accessible. Subtle `--shadow-sm` when scrolled.

**5.2 Hero**
Two-column flex (stacks on mobile) over `--gradient-page`. Left: eyebrow badge ("Now with autonomous delivery"), `h1` "Shopping that never stops.", subheadline about cloud cart sync, member pricing, and 2-hour autonomous delivery; primary CTA "Start Free Trial" (smooth-scrolls to Pricing) + secondary "See How It Works"; trust row of 5 gold `star` icons (FILL 1) + "4.9/5 · 50,000+ verified member reviews" + "Secure checkout · Cancel anytime". Right: **`.delivery-animation`** — a CSS-only autonomous delivery route visualization built as a tracking card: dashed route line (CSS gradient/border), an orange marker circle with Material `local_shipping` traveling along waypoints via `@keyframes`, pulsing waypoint dots, an ETA chip ("Arriving today · 2:38 PM"), and a small mock product card. **No inline SVG** — pseudo-elements and keyframes only. Reduced motion → static route.

**5.3 Features — 3 Cards**
Section header (eyebrow + `h2` + support line), then a wrapping flex row of three `.card--feature` elements: (1) "Autonomous Delivery" — icon `local_shipping` — drones/rovers in as little as 2 hours with live route tracking; (2) "Cloud Cart Sync" — icon `cloud_done` — cart, lists, and preferences follow you across every device; (3) "Vast Catalog, Member Pricing" — icon `workspace_premium` — millions of items with exclusive member deals and one-tap reordering. All cards use `.product-card-hover`.

**5.4 How It Works — 3 Steps**
Horizontal 3-step flex flow (vertical on mobile) with numbered markers (01/02/03), a connecting line that animates on scroll-into-view, and per-step Material icons: (1) `bolt` "Join in 30 seconds" — pick a plan, add your address; (2) `devices` "Shop seamlessly" — your cloud cart syncs, member pricing applies automatically; (3) `route` "Track your delivery" — watch the live route and get notified on arrival.

**5.5 Testimonials**
Three `.card--testimonial` elements using `figure`/`blockquote`/`figcaption`: 5 gold stars with sr-only "Rated 5 out of 5 stars", a realistic quote about speed/reliability, reviewer name + role, CSS initial-circle avatar, and a `verified` "Verified member" badge.

**5.6 Pricing — 3 Tiers**
Billing toggle (Monthly / Annual — "save ~20%") as a segmented control with `aria-pressed` and an `aria-live="polite"` announcement; prices swap through a brief `.skeleton` shimmer (efficient loading animation). Three `.card--pricing` tiers: **Essential** $9/mo ($90/yr), **Plus** $19/mo ($190/yr) — highlighted with a gold "Most Popular" badge, `--primary` border, `--shadow-md`, and slight lift — and **Elite** $39/mo ($390/yr). Each card: tier name, price, tagline, feature list with `check_circle` icons, and a CTA implementing the full button state system (click → `.btn--loading` ~1s → `.btn--success` with check icon + live confirmation).

**5.7 FAQ**
Accordion of 5–6 items (coverage areas, delivery speed, cloud-cart security, cancellation, what happens after the trial, supported devices). Each item: `h3` > `button` with `aria-expanded` + `aria-controls`, rotating `expand_more` icon, and a `role="region"` panel animated via CSS (grid-rows or max-height technique). Single-open behavior; fully keyboard operable.

**5.8 Final CTA**
Full-width band on `--secondary` (light mode) / elevated dark surface (dark mode) with light text and orange accents. `h2` "Ready to shop without friction?", support line, and an `.input-group` email capture: label "Email address", input, primary button "Start Free Trial" with full validation states — invalid shows `--border-error` + announced error message; valid simulates `.btn--loading` then success (`check_circle` + "You're on the list — check your inbox to activate your trial.") in an `aria-live` region. Secondary text link "View pricing".

**5.9 Footer**
Dark-surface footer with light text (contrast-paired). Flex columns: brand blurb + trust badges; "Company" (About, Careers, Press, Sustainability); "Support" (Help Center, Delivery Info, Contact, System Status); "Legal" (Privacy Policy, Terms of Service, Cookie Settings, Accessibility). Social icon row (Material icons with `aria-label`). Bottom bar: "© 2026 Continuum. All rights reserved." In-page anchors where targets exist; otherwise `href="#"` with descriptive labels.

**5.10 Final QA Checklist (verify before delivering)**
Zero inline styles/handlers; dark mode persists across reloads; no horizontal scroll at 320px–1920px; all states (hover/focus/active/loading/disabled/success/error) present; keyboard-only pass through every section; reduced-motion pass; contrast AA in both themes; all copy in English; `.product-card-hover` and `.delivery-animation` present and functional.