ClearInvoice SaaS Hero demo
ClearInvoice SaaS Hero

A clean, modern SaaS hero section featuring a full-opacity HLS background video, designed for invoicing, billing, and financial management platforms.
Category: Corporate & SaaS
Era: 2020s Modern
Prompt: 19.9 KB · 2690 words
# BUILD PROMPT — "ClearInvoice" SaaS Landing Page (Dark Video Hero, Gradient CTA)

**Your Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build the complete, production-quality landing page described below in a single attempt. Every rule in this document is mandatory; do not improvise around it.

**Objective:** A dark, conversion-focused 2024–2026 SaaS landing page for **ClearInvoice**, an invoicing product for freelancers and agencies. Signature elements: full-opacity HLS background video hero (no overlay), 5px multicolor gradient top bar, orange-gradient primary CTA with glow + inner stroke + sliding arrow, overlapping-avatar social proof, staggered entrance animations, Switzer headings / Geist body.

**Sections (in this order):** Gradient top bar → Sticky navigation → Hero → Features (3 cards) → How It Works (3 steps) → Testimonials → Pricing (3 tiers) → FAQ → Final CTA → Footer with secondary links.

**Copy Direction:** Write ALL user-facing copy in **English** (never Portuguese or any other language). Realistic, specific invoicing/SaaS copy — no lorem ipsum. Value props to draw from: get paid faster, automated payment reminders, AI invoice drafting, real-time payment tracking. Tone: confident, plain, benefit-led.

---

## 1. STRICT RULES & ARCHITECTURE

### 1.1 CSS-First Architecture & Zero Inline CSS
* **No Inline CSS:** The `style="..."` attribute is forbidden anywhere in the HTML. Zero inline styles.
* **Class/ID Selectors Only:** All design properties, layout rules, and states are targeted via class or ID selectors in `style.css`.
* **Minimal HTML Modifications:** Markup stays semantic and styling-agnostic; restyling the site must require editing `style.css` only.
* **Script Tags:** The only permitted `<script>` tags are CDN references (Tailwind, hls.js, fonts) and one `<script src="script.js" defer></script>` entry point. No inline script logic.

### 1.2 CSS Variables & Theme Tokens
All visual tokens live in `:root` inside `style.css`. Use exactly this palette:

```css
:root {
  /* Color */
  --primary: #FF3300;
  --secondary: #EA580C;                       /* orange glow */
  --gradient-primary: linear-gradient(135deg, #FF3300 0%, #EE7926 100%);
  --gradient-topbar: linear-gradient(90deg, #ccccff 0%, #e7d04c 50%, #31fb78 100%);
  --bg-primary: #000000;
  --bg-secondary: #0a0a0a;                    /* card surface */
  --surface-light: rgba(255,255,255,0.9);    /* secondary CTA surface */
  --text-primary: #FFFFFF;                    /* pairs with --bg-primary / --bg-secondary */
  --text-secondary: rgba(255,255,255,0.65);
  --text-on-light: #000000;                   /* pairs with --surface-light */
  --text-success: #31FB78;
  --text-error: #FF6B6B;
  --border-default: rgba(255,255,255,0.2);    /* inner stroke */
  --border-subtle: rgba(255,255,255,0.1);
  --border-dark: rgba(0,0,0,0.05);            /* borders on light surfaces only */
  --border-error: #EF4444;
  --border-success: #31FB78;
  /* Radius & Shadow */
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.45);
  --shadow-md: 0 12px 32px rgba(0,0,0,0.55);
  --glow-primary: 0 0 48px rgba(234,88,12,0.35);
  /* Spacing & Motion */
  --spacing-gap: 1.5rem;
  --transition-fast: 200ms;
  --transition-normal: 300ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  /* Elevation */
  --z-dropdown: 100; --z-modal: 1000; --z-toast: 1100; --z-topbar: 1200;
  /* Type */
  --font-heading: 'Switzer', 'Inter', sans-serif;
  --font-base: 'Geist', 'Inter', sans-serif;
}
```

* **Contrast Pairing:** Every dark background token (`--bg-primary`, `--bg-secondary`) pairs only with light text tokens; every light surface (`--surface-light`) pairs only with dark text (`--text-on-light`). Never place white text on `--surface-light` or black text on `--bg-primary`.
* **Light surfaces:** Never use pure `#ffffff` as a page background; if a near-white surface is ever needed, use `#fefefe`.
* Every color, radius, shadow, and transition used in component rules must reference these variables — no hard-coded hex values in component CSS.

### 1.3 Mandatory Dark Mode
* **Dark is the default and only theme:** The `:root` block above IS the dark palette; the page renders dark on first paint with no flash of light content.
* **Exception (per style spec):** Light mode is explicitly not recommended for this theme — ship dark-only: no light token set, no `prefers-color-scheme: light` overrides, no theme toggle, and no `localStorage` theme persistence are required. Dark tokens at `:root` remain mandatory, and every color must stay behind a CSS variable so the palette remains swappable without touching markup.

### 1.4 Flexbox Layout & Mobile-First Alignment
* Build every layout structure with Flexbox (`display: flex` / Tailwind flex utilities).
* **Default Alignment Rule:** Every flex container defaults to `align-items: center` (`items-center`) unless an exception is explicitly commented in the CSS (the only permitted exceptions: equal-height card grids using `stretch`).
* **Mobile-Friendly First:** All rows convert to columns below the Tailwind `md` breakpoint; typography uses fluid `clamp()` sizing; there is zero horizontal scrolling at any viewport width from 320px upward.

### 1.5 Framework Default & Tailwind CSS Integration
* Use Tailwind CSS via the Play CDN for layout, spacing, and alignment utilities only. Do **not** add an inline `tailwind.config` script — all custom design values belong in `style.css`.
* All brand styling (gradients, glows, component classes) lives in `style.css`, either as plain CSS or inside `@layer components` with `@apply`, and binds to the `:root` variables.
* Required reusable component classes: `.btn`, `.btn--primary`, `.btn--secondary`, `.btn--ghost`, `.btn--danger`, `.card`, `.input-group`, `.badge`, `.section`, `.container`.

### 1.6 Typography & Icons (Google Fonts Mandatory)
* **Headings:** Switzer (weights 500–700) bound to `--font-heading`.
* **Body:** Geist loaded from Google Fonts (`fonts.googleapis.com/css2?family=Geist:wght@400;500;600&display=swap`) and bound to `--font-base`.
* **Exception (Switzer):** Switzer is not distributed on Google Fonts — load it from the Fontshare CDN (`https://api.fontshare.com/v2/css?f[]=switzer@400,500,600,700&display=swap`). All other fonts and all icons remain Google-hosted.
* **Icons:** Google Material Symbols only (Rounded variable font via Google Fonts), used as `<span class="material-symbols-rounded">icon_name</span>` with `font-variation-settings` for filled variants.
* **Forbidden:** raw inline SVGs, local icon files, emoji used as icons. Photographs (avatars, testimonial portraits, video poster) are images, not icons, and may use documented placeholder URLs.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

### 2.1 Button Component (`.btn` + variants)
* **Base `.btn`:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px, `font-family: var(--font-base)`, `font-weight: 600`, `border-radius: var(--radius-md)`, `cursor: pointer`, transitions bound to `var(--transition-fast) var(--ease-standard)`.
* **Primary CTA (`.btn--primary`) — the signature element:**
  * Background `var(--gradient-primary)`; text `var(--text-primary)`.
  * **Inner stroke:** `border: 1.5px solid var(--border-default)`.
  * **Glow:** a `::before` pseudo-element behind the button carrying the same gradient with `filter: blur(24px); opacity: 0.2; z-index: -1; border-radius: inherit;`.
  * **Hover:** `transform: scale(1.05)`; glow animates to `opacity: 0.6`; **sliding arrow:** an `arrow_forward` Material Symbol inside the button starts at `opacity: 0; transform: translateX(-8px)` and slides to `opacity: 1; transform: translateX(0)` on hover/focus. Reserve the arrow's gap so the animation never changes button dimensions.
  * **Focus-visible:** distinct ring (`outline: 2px solid var(--text-primary); outline-offset: 3px`) visible against both the black page and the orange button.
  * **Active/Pressed:** `transform: scale(0.97)`.
  * **Loading (`.is-loading`):** `pointer-events: none` (prevents double-clicks); label swaps to a rotating `progress_activity` Material Symbol driven by a CSS keyframe; button dimensions never change.
  * **Disabled:** `opacity: 0.5; filter: grayscale(1); cursor: not-allowed;` no hover transform.
  * **Success/Error (`.is-success` / `.is-error`):** temporary feedback recoloring to `--border-success`/`--text-success` or `--border-error`/`--text-error`, always paired with an icon and text — never color alone.
* **Secondary CTA (`.btn--secondary`):** `background: var(--surface-light); color: var(--text-on-light); backdrop-filter: blur(12px); border: 1.5px solid var(--border-dark);` hover = subtle brightness lift + `--shadow-sm`; inherits all base states (focus, active, loading, disabled).
* **Ghost (`.btn--ghost`):** transparent background, `--border-default` border, white text — used in pricing and footer.
* **Danger (`.btn--danger`):** distinct red treatment built from `--text-error`/`--border-error`; must be unmistakably different from the orange primary at all times.

### 2.2 Card Component (`.card`)
Used by Features, Testimonials, Pricing, and FAQ items.
* **Default:** Flexbox column layout, `background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 1.5rem;`.
* **Hover (interactive cards only):** `transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-default);`.
* **Focus-within:** card border highlights when any child link/button receives focus.
* **Loading skeleton (`.card--skeleton`):** shimmer keyframe (`linear-gradient(90deg, #111 25%, #1c1c1c 50%, #111 75%)`, `background-size: 200% 100%`, infinite) on placeholder blocks sized to the final content — no layout shift.
* **Empty state (`.card--empty`):** centered Material Symbol (e.g., `receipt_long`) plus one line of guidance text.

### 2.3 Form & Input Requirements (`.input-group`)
Used by the Final CTA email capture.
* **Structure:** Flex container wrapping a `<label>` (visually hidden is acceptable, but always associated via `for`/`id`), the `<input type="email">`, and a dedicated error-feedback element wired with `aria-describedby` and `aria-live="polite"`.
* **States — all class-driven:** empty; focused (orange ring: `box-shadow: 0 0 0 3px rgba(234,88,12,0.35)` plus `--border-default`); filled; valid (`.is-valid`: `--border-success` + small `check_circle` icon + green hint text); invalid (`.is-invalid`: `--border-error` + error icon + red message text — icon and text required, never color alone); disabled (`opacity: 0.5; cursor: not-allowed`); read-only.
* **Validation flow:** validate email format on submit in `script.js`; render the message inside the live region; move focus to the invalid input; on success the button enters loading → success and a confirmation toast fires.

### 2.4 Modal / Popup Requirements (`.modal`) — "Watch demo"
The hero's secondary CTA opens a demo-video modal.
* **Structure:** fixed backdrop (`background: rgba(0,0,0,0.7); backdrop-filter: blur(8px); z-index: var(--z-modal)`) wrapping a centered flex container (`display: flex; align-items: center; justify-content: center`) that holds the dialog (`role="dialog"`, `aria-modal="true"`, `aria-labelledby`).
* **States:** opening (fade + scale-up, ~200ms), open, loading (spinner/skeleton while the demo stream buffers), success/error (stream-failure message with a retry action), closing (reverse animation, then hidden).
* **UX:** close button is a Material Symbol `close` (44×44px, `aria-label="Close dialog"`); closes via `Esc` and backdrop click; keyboard focus is trapped inside while open; focus returns to the invoking button on close; body scroll is locked while open.

---

## 3. CORE UX & MICRO-INTERACTION RULES

* **Responsive by Default:** Fluid `clamp()` typography and responsive breakpoints with no horizontal overflow; all grids collapse to a single column on mobile; verify 320px–1920px.
* **Smooth Animations:** Every state change transitions with `var(--transition-normal) var(--ease-standard)` (buttons use `var(--transition-fast)` per the 200ms scale spec). All entrance animations and hover transforms are disabled under `prefers-reduced-motion`, and the background video is paused with its poster shown.
* **Accessibility (a11y):** Minimum 4.5:1 contrast everywhere on the black theme; never rely on color alone to communicate state; semantic HTML5 (`header`, `nav`, `main`, `section`, `footer`, correct `h1`–`h3` hierarchy); ARIA roles/labels on the accordion, modal, and mobile menu; logical DOM/focus order; full keyboard operability (no mouse-only interactions); `aria-live` regions for form errors, toasts, and loading feedback; a global `:focus-visible` ring; `scroll-margin-top` on sections so the sticky nav never covers headings.
* **Mandatory Visual Feedback:** Every click, hover, and submission triggers a visible state change.
* **Destructive Actions:** `.btn--danger` must be visually distinct from the orange primary in this dark theme.

---

## 4. DELIVERABLE & OUTPUT FORMAT

* **File Structure:** Exactly three files: `index.html`, `style.css`, `script.js`. No inline `<script>` blocks beyond CDN references and the single deferred entry point.
* **Naming Convention:** BEM for every custom class (`.btn--primary`, `.card--pricing`, `.faq__item`, `.hero__title`). Tailwind utilities are permitted for layout/spacing/alignment only. Never mix conventions.
* **No Unrequested Placeholders:** Write real, specific English copy for ClearInvoice — headlines, feature descriptions, testimonial quotes with realistic names and roles, pricing tiers with feature lists, FAQ answers. Lorem ipsum is forbidden. Only genuinely unspecified assets may use documented placeholders: the HLS stream URL (see 5.2) and avatar/poster photos (placeholder image service such as `i.pravatar.cc` / `picsum.photos`).
* **JS Scope:** Vanilla JavaScript only — no build step, no frameworks. All behavior (HLS init, modal, accordion, mobile menu, form validation, toast, nav scroll state, IntersectionObserver reveals) lives in `script.js`.

---

## 5. PAGE STRUCTURE & SECTION-BY-SECTION SPECIFICATION

### 5.0 Gradient Top Bar
Fixed, full-width, `height: 5px`, `background: var(--gradient-topbar)` (from `#ccccff` via `#e7d04c` to `#31fb78`), `z-index: var(--z-topbar)`. Present above the navigation at all times.

### 5.1 Sticky Navigation
Transparent over the hero; after 24px of scroll it gains `background: rgba(0,0,0,0.7); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-subtle)`. Left: `receipt_long` icon + "ClearInvoice" wordmark (Switzer 700). Center: anchor links — Features, How It Works, Testimonials, Pricing, FAQ — with smooth scrolling and visible focus states. Right: compact `.btn--primary` "Start free". Mobile: links collapse behind a `menu` icon button (`aria-expanded`, `aria-controls`) toggling an animated panel at `z-index: var(--z-dropdown)`; the panel closes on link click and `Esc`.

### 5.2 Hero (signature section)
* **HLS background video:** `<video>` absolutely positioned (`inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0`) with `autoplay loop muted playsinline preload="auto"`, `aria-hidden="true"`, `tabindex="-1"`. **Opacity 100% — no dark overlay or scrim layer of any kind.** Content: abstract dark fluid organic shapes with subtle luminous highlights, widescreen (~16:9) source, ~14s loop.
  * Load via **hls.js** (pinned CDN version): attach when `Hls.isSupported()`, fall back to native HLS `src` on Safari/iOS, and on error silently swap to an animated dark CSS gradient fallback — the hero must never look broken.
  * Define the source once at the top of `script.js` as `const HLS_SRC = '<public test stream .m3u8>'` using a working public HLS test stream (e.g., the Mux test stream), commented as the replaceable production source.
  * Provide a dark abstract `poster` image so first paint never shows an empty black box; hero text renders immediately — the video must not block LCP.
  * Under `prefers-reduced-motion`, pause the video and keep the poster.
* **Content** (z-index above the video, max-width ~48rem, centered, hero `min-height: 100svh`): eyebrow `.badge` pill with `--border-default` (e.g., "New · AI invoice drafting"); H1 in Switzer (e.g., "Invoices that get paid twice as fast"); subcopy in Geist using `--text-secondary`; CTA row with `.btn--primary` "Start free — 14-day trial" (sliding arrow per 2.1) and `.btn--secondary` "Watch demo" (opens the 2.4 modal).
* **Legibility without an overlay:** white text must hold 4.5:1 over the video; a subtle `text-shadow` on the H1 is permitted — adding any overlay/gradient scrim div is not.
* **Social proof row:** five overlapping circular avatars (~40px, `margin-left: -12px`, `border: 2px solid var(--bg-primary)`, `border-radius: 50%`) + "Trusted by 12,000+ freelancers and agencies" + a five-star row of filled `star` Material Symbols in `#e7d04c`.
* **Staggered entrance:** one shared `fade-up` keyframe (opacity 0→1, `translateY(16px)`→0) applied in DOM order with delays of 0 / 80 / 160 / 240 / 320ms across badge → title → subcopy → CTAs → social proof. Runs once on load; skipped entirely under reduced motion.

### 5.3 Features — 3 Cards
Section heading (Switzer) + subcopy, then a 3-column grid collapsing to one column on mobile. Each `.card`: a Material Symbol icon in a gradient-tinted rounded square, a title, and real English copy about invoicing pain points (suggested: `auto_awesome` — AI invoice drafting; `notifications` — automated payment reminders; `insights` — real-time payment tracking). Hover lift per 2.2.

### 5.4 How It Works — 3 Steps
Three steps with oversized numerals "01 / 02 / 03" in Switzer rendered as gradient text (`background: var(--gradient-primary)` + `background-clip: text`), each with an icon and short copy (e.g., connect your clients → send automated invoices → get paid 2× faster). Desktop: horizontal row joined by a `--border-subtle` connecting line; mobile: vertical stack. Reveal with staggered `IntersectionObserver` animations (`.is-visible`), disabled under reduced motion.

### 5.5 Testimonials
Three `.card`s, each with a `format_quote` icon, a realistic quote, a five-star row (`#e7d04c`), and an avatar + name + role (e.g., "Freelance designer", "Agency owner"). Grid → single column on mobile.

### 5.6 Pricing — 3 Tiers
Tiers: Starter (Free), Pro (e.g., $19/mo — highlighted), Agency (e.g., $49/mo). Real feature lists with `check_circle` icons; missing features shown honestly as "—". **Highlighted middle card:** 1.5px gradient border (`--gradient-primary` via the padding-box/border-box double-background technique), a "Most popular" `.badge` with gradient background, and slight elevation on desktop. CTAs: `.btn--primary` on the popular tier, `.btn--ghost` on the others — all button states per 2.1.

### 5.7 FAQ — Accordion
Five to six real Q&As about the invoicing product (free trial, recurring invoices, payment methods, data export, support). Each item: a `<button>` with `aria-expanded` + `aria-controls`, a chevron (`expand_more`) rotating 180° on open, and a panel animated via `grid-template-rows: 0fr → 1fr`. Fully keyboard operable with visible focus states.

### 5.8 Final CTA
Centered Switzer headline + subcopy on a `--bg-secondary` band with a subtle radial orange glow (opacity ≤ 0.2) behind the heading. Email capture `.input-group`: "Work email" label + input + `.btn--primary` "Get started" — full input state coverage per 2.3, loading → success button flow, `aria-live` feedback, and a confirmation toast (fixed bottom, `z-index: var(--z-toast)`, `role="status"`, slide-up entrance, auto-dismiss after 4s, `close` button).

### 5.9 Footer — Secondary Links
Brand block (wordmark + one-line tagline) plus link columns: Product (Features, Pricing, FAQ — anchor to existing sections), Company (About, Careers, Contact), Resources (Blog, Help center, Invoicing guide), Legal (Privacy, Terms). Links without existing targets may use `href="#"` since their destinations are unspecified. Bottom bar: "© 2025 ClearInvoice. All rights reserved." plus secondary links (Privacy, Terms, Status). Social presence as text links or generic Material Symbols — no inline SVG brand marks.