HR SaaS Hero demo
HR SaaS Hero

A clean minimalist white SaaS hero section featuring a vertically flipped background video softened by a white gradient overlay, ideal for HR and remote team collaboration platforms.
Category: Corporate & SaaS
Era: 2020s Modern
Prompt: 15.9 KB · 2231 words
# SYSTEM PROMPT — SENIOR FRONTEND ENGINEER TASK: "HR SAAS HERO" LANDING PAGE

## 0. PROJECT BRIEF

**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Deliver a complete, production-quality landing page on the first attempt — no stubs, no TODOs.

**Product:** A modern HR SaaS platform. Invent a tasteful, short brand wordmark (neutral, Geist-set). **All user-facing copy must be written in English** — realistic, on-brand HR SaaS copy for every headline, feature, testimonial, price, FAQ, and footer label. Lorem ipsum is forbidden.

**Theme:** "HR SaaS Hero" — 2024–2026 SaaS Minimalist White. Minimalist white canvas, vertically flipped background video, heavy editorial spacing, Geist typography with one Instrument Serif italic accent word, dark multi-layer CTA button, pill-shaped email input, social proof badge, staggered fade+slide-up entrance animations.

**Sections to build (in this order):**
1. Minimal fixed header (supporting chrome: wordmark, anchor links, theme toggle, compact CTA)
2. Hero (flipped video background, headline, email capture, CTA, social proof)
3. Features (3 cards)
4. How It Works (3 steps)
5. Testimonials
6. Pricing (3 tiers)
7. FAQ (accordion)
8. Final CTA
9. Footer with secondary links

---

## 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 style-agnostic — changing the look must only require editing `style.css`.

### 1.2 CSS Variables (`var(--...)`) & Theme Tokens
Store all visual tokens in `:root` (and in the dark-mode scopes defined in 1.3):

```css
:root {
  /* Color */
  --primary: #1A1A1A;            /* text black / CTA surface */
  --secondary: #373a46;          /* slate gray */
  --bg-primary: #FFFFFF;         /* page background */
  --bg-secondary: #fcfcfc;       /* inputs, cards, soft surfaces */
  --text-primary: #1A1A1A;
  --text-secondary: #373a46;
  --text-success: #1a7f37;
  --text-error: #d1242f;
  --border-default: rgba(0, 0, 0, 0.08);
  --border-error: #d1242f;
  --border-success: #1a7f37;

  /* Radius & Shadows */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 40px;           /* email input + primary CTA */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.06);
  --shadow-input: 0px 10px 40px 5px rgba(194, 194, 194, 0.25);
  --shadow-btn: inset 0 1px 0 rgba(201, 201, 201, 0.08),
                inset 0 -2px 4px rgba(29, 29, 29, 0.24),
                0px 10px 30px rgba(29, 29, 29, 0.24);

  /* Spacing & Motion */
  --spacing-gap: 1.5rem;
  --spacing-section: clamp(5rem, 10vw, 9rem);
  --spacing-hero-top: clamp(7rem, 22vw, 290px);  /* 290px editorial top padding on desktop */
  --transition-fast: 150ms;
  --transition-normal: 300ms;
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);

  /* Elevation */
  --z-header: 90;
  --z-dropdown: 100;
  --z-modal: 200;
  --z-toast: 300;

  /* Type */
  --font-base: 'Geist', sans-serif;
  --font-accent: 'Instrument Serif', serif;
}
```

* **Contrast Pairing:** Every light background token must pair with a dark text token and every dark background token with a light text token — enforce this in every theme scope, not just the default.
* **Light Mode Background:** The default rule requires `#fefefe` instead of pure white; **exception clause:** this theme's source specification explicitly demands a `#FFFFFF` page background, so `--bg-primary: #FFFFFF` is granted for the page canvas only — all other near-white surfaces (inputs, cards, bands) must use `#fcfcfc` or `#fefefe`.

### 1.3 Mandatory Dark Mode Support
* **Implementation:** Define a full dark token set under both `@media (prefers-color-scheme: dark)` and a `.dark` class on `<html>` — e.g., `--bg-primary: #0e0e10; --bg-secondary: #16161a; --text-primary: #f4f4f5; --text-secondary: #a1a1aa; --border-default: rgba(255,255,255,0.08)`, with shadows re-tuned for dark surfaces.
* **Theme Switching:** Background, text, borders, the hero gradient overlay (which must fade into the dark canvas instead of white), and the CTA (which inverts to a white surface with black text, mirroring its inner shadows) must all switch via variables only — no HTML restructuring.
* **Persistence:** Store the user's choice in `localStorage`, fall back to `prefers-color-scheme` on first visit, and expose a visible toggle control with correct `aria-pressed` and `aria-label` states (place it in the header).
* **Exception clause:** The source theme flags dark mode as "Not Recommended" — light mode is the default and primary experience, but full dark mode support remains mandatory per architecture.

### 1.4 Flexbox Layout & Mobile-First Alignment
* Build all layout structures with Flexbox (`display: flex` / Tailwind flex utilities).
* **Default Alignment Rule:** Every flex container must default to `align-items: center` (`items-center`) unless an explicitly justified exception is documented (e.g., card bodies stretching full height).
* **Mobile-Friendly First:** All rows must collapse to columns on small viewports; use fluid `clamp()` sizing; horizontal scrolling is forbidden at any width from 320px up.

### 1.5 Framework Default & Tailwind CSS Integration
* Use Tailwind CSS (CDN or build) for layout utilities (flex, grid, spacing, responsive breakpoints), with bespoke effects — the video flip, exact gradient stops, multi-layer button shadows, keyframe animations — written as custom CSS via `@layer` / mapped back to the CSS variables. Never hardcode a hex value in a utility when a token exists.

### 1.6 Typography & Icons (Google Fonts Mandatory)
* **Text:** Load **Geist** (weights 400, 500, 600) and **Instrument Serif** (400, italic) from Google Fonts via `<link>` with `display=swap`; bind them to `--font-base` and `--font-accent`.
* **Icons:** Use Google Material Symbols (Rounded). Raw inline SVGs and local icon files are explicitly forbidden.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

### 2.1 Button Component Requirements
Style all states via CSS classes on a `.btn` base (`display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px):
* **Default:** `.btn--primary` is the dark multi-layer CTA — `--primary` background, white text, `border-radius: var(--radius-pill)`, and the complex layered `--shadow-btn` (inner top light edge `rgba(201,201,201,0.08)`, inner bottom dark depth `rgba(29,29,29,0.24)`, outer dark drop shadow). `.btn--secondary` is white with `--border-default` and `--shadow-sm`.
* **Hover:** Brightness/shadow lift with `cursor: pointer`.
* **Focus:** Distinct `:focus-visible` 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 (`progress`) 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 email capture flow).
* **Dark mode:** `.btn--primary` inverts to a white surface with black text and mirrored inner shadows to preserve contrast pairing.

### 2.2 Card Component Requirements
* **Default:** Flexible flexbox layout, `--bg-secondary` (or white with `--border-default`), `--radius-lg`, `--shadow-sm`.
* **Hover:** Elevation shift or subtle `transform: translateY(-2px)` (apply to interactive cards; static feature cards may stay calm).
* **Focus-within:** Card border highlights when a child link/button receives focus.
* **Loading (Skeleton):** Define a shimmer animation class in CSS to prevent layout jumps (apply if any content is simulated as async).
* **Empty State:** If any card can render empty, provide a structured fallback with a Google Icon and guidance text.

### 2.3 Form & Input Requirements
The hero email capture must be a flex `.input-group` wrapping: a label (visible or `sr-only`), the input, a dedicated error-feedback container, and the submit button.
* **States:** Empty, Focused (outline ring), Filled, Valid (success border + check icon), Invalid (error border, `--text-error` message, error icon), Disabled, Read-only.
* **Input styling:** `type="email"`, `border-radius: 40px`, background `#fcfcfc`, border `rgba(0,0,0,0.08)`, `box-shadow: var(--shadow-input)` (i.e., `0px 10px 40px 5px rgba(194,194,194,0.25)`), height ≥ 52px, Geist 400.
* **Feedback:** Submit triggers the button loading state, then a success/error message announced via an `aria-live="polite"` region.

### 2.4 Modal / Popup & Accordion (FAQ) Requirements
* **No modals are required** by this page; if any are added, they must have: Opening/Open/Loading/Success/Error/Closing states animated via CSS transitions, a centered flex container (`align-items: center`), backdrop overlay, Google Icon close button, keyboard focus trapping, and closing via `Esc` or overlay click.
* **FAQ accordion:** Each question is a `<button>` with `aria-expanded` and `aria-controls`; panels are smooth CSS height transitions (e.g., `grid-template-rows` technique); chevron (`expand_more`) rotates on open; one-item-open-at-a-time via JS class toggling; fully keyboard operable.

---

## 3. CORE UX & MICRO-INTERACTION RULES

* **Responsive by Default:** Fluid sizing and breakpoints with zero horizontal overflow from 320px up.
* **Smooth Animations:** `transition: var(--transition-normal)` on all state changes; respect `prefers-reduced-motion` — under it, disable slide transforms (keep simple opacity fades) and pause the hero video (show its poster).
* **Staggered Entrance:** Hero children (badge → headline → subcopy → input group → social proof) animate fade + slide-up (`opacity: 0 → 1`, `translateY(24px) → 0`) with ~80ms incremental `animation-delay`, ~600ms duration, `--ease-standard`. Below-fold sections reveal on scroll via an `IntersectionObserver` in `script.js` that adds an `.is-visible` class; the animation itself stays CSS-driven. **Exception clause:** the source spec requests animations "via Motion" — you may substitute the Motion library (motion.dev) for scroll-triggered reveals only, CDN-loaded, with `prefers-reduced-motion` respected; all interactive state transitions must remain pure CSS.
* **Accessibility (a11y):** Sufficient contrast in both light and dark modes; never rely on color alone to communicate state; semantic HTML5 (`header`, `main`, `section` with `aria-labelledby`, `nav`, `footer`); correct ARIA roles/labels on the accordion, toggle, and form feedback; logical DOM/focus order; full keyboard operability; `aria-live` regions for dynamic feedback.
* **Mandatory Visual Feedback:** Every click, hover, and submission must trigger a visible state change.
* **Destructive Actions:** None expected; if any appear, style `.btn-danger` as visually distinct in both themes.

---

## 4. DELIVERABLE & OUTPUT FORMAT

* **File Structure:** Separate `index.html`, `style.css`, and `script.js`. No inline `<script>` blocks beyond a single deferred entry point (`<script src="script.js" defer></script>`).
* **Naming Convention:** BEM everywhere (`.hero__title`, `.hero__accent`, `.card`, `.card__title`, `.faq__item`, `.faq__panel`, `.footer__link-group`…). Never mix conventions.
* **No Unrequested Placeholders:** Write realistic English HR SaaS copy for all content. Footer/nav link destinations were not specified, so `href="#section"` anchors and `href="#"` placeholders are acceptable for links only — never for body copy.

---

## 5. THEME-SPECIFIC DESIGN SPECIFICATION

### 5.1 Hero Video Treatment (Flipped Video)
* Full-bleed, absolutely positioned `<video>` behind the hero content: `autoplay`, `muted`, `loop`, `playsinline`, `preload="metadata"`, `poster`, `aria-hidden="true"`, `tabindex="-1"`, `pointer-events: none`.
* **Content:** Abstract footage with light, soft tones — clouds, nature, or slow-moving organic shapes. Use a hotlinkable royalty-free MP4 (e.g., a Pexels/Coverr direct file URL). If the video fails to load, degrade gracefully to a soft off-white animated CSS gradient layer beneath.
* **CSS:** `object-fit: cover; width: 100%; height: 100%; transform: scaleY(-1);` — the vertical flip is the signature effect and must be preserved.
* **Gradient overlay:** A div above the video, below the content: `background: linear-gradient(to bottom, rgba(255,255,255,0) 26.4%, #FFFFFF 66.9%);` — exact stops, blending the video ethereally into the white page. In dark mode, the overlay fades into the dark `--bg-primary` instead.

### 5.2 Editorial Spacing & Layout
* Hero `padding-top: 290px` on desktop via `--spacing-hero-top` (scale down fluidly on mobile). Generous `--spacing-section` rhythm between all sections. Max content width ~1200px; hero text column centered at ~720–800px.

### 5.3 Headline Typography
* H1: `80px` desktop (`clamp(2.75rem, 6.5vw, 5rem)`), Geist weight 500, `letter-spacing: -0.04em`, `line-height: ~1.05`, color `--text-primary`.
* **One accent word** wrapped in a semantic `<em class="hero__accent">`: Instrument Serif, italic, `100px` desktop (`clamp(3.25rem, 8vw, 6.25rem)`), same color, optically baseline-aligned.
* Subcopy: 18–20px Geist 400, `--text-secondary`, max-width ~56ch.

### 5.4 Email Input & Multi-Layer CTA
* Pill input per 2.3; dark multi-layer CTA per 2.1. Desktop: input and button share one flex row (`align-items: center`, small gap); mobile: stacked column, full width.

### 5.5 Social Proof
* A pill badge below the CTA: five filled Material Symbol `star` icons, aggregate text (e.g., "4.9/5 from 2,000+ HR teams"), subtle `--border-default` border and soft background.

---

## 6. SECTION-BY-SECTION REQUIREMENTS

### 6.1 Header
Fixed, minimal: text wordmark (Geist 600), anchor links (Features, How It Works, Testimonials, Pricing, FAQ), theme toggle (sun/moon Material Symbols with `aria-pressed`/`aria-label`), compact `.btn--primary` "Get started". White/80 backdrop blur, `--z-header`, bottom border appears on scroll. On mobile, keep wordmark + toggle + CTA (anchor links may hide).

### 6.2 Hero
Per Section 5: announcement badge pill, H1 with the Instrument Serif italic accent word, subcopy, email capture form, social proof badge — all above the video/overlay stack and revealed with the staggered animation.

### 6.3 Features — 3 Cards
Eyebrow + H2 + subcopy, then a 3-column grid (1 column on mobile). Each `.card`: Material Symbol icon in a soft tile, Geist 500 title (~20px), `--text-secondary` description. Topics: realistic HR SaaS features (e.g., hiring pipelines, onboarding automation, people analytics).

### 6.4 How It Works — 3 Steps
Three numbered steps (editorial "01 / 02 / 03" or icon tiles), title + description each; horizontal row on desktop, vertical stack on mobile; optional hairline connector using `--border-default`.

### 6.5 Testimonials
Three quote cards: quote text, star row, an initials circle for the avatar (no external images), invented name, role, and company — all realistic English copy.

### 6.6 Pricing — 3 Tiers
Three `.card--pricing` tiers: name, monthly price, feature list with Material Symbol `check` icons, one CTA per tier. The middle tier is featured: "Most popular" badge, `--primary` border, `--shadow-md`, slight elevation; its CTA is `.btn--primary`, the others `.btn--secondary`.

### 6.7 FAQ
5–6 accordion items per 2.4 with realistic HR SaaS questions and answers.

### 6.8 Final CTA
Centered band with generous editorial padding: short headline (optional serif italic accent word), subcopy, and either a repeated email capture or a single `.btn--primary` CTA; subtle `--bg-secondary` or top hairline to close the page.

### 6.9 Footer
Brand column (wordmark, one-line tagline, social icons as Material Symbols or text links) plus secondary link groups (Product, Company, Resources, Legal — 4–6 links each). Bottom bar: `© 2025 [Brand]. All rights reserved.` and minimal legal links. All flex-based, mobile-stacking, `align-items: center` by default.