Synapse Dark Hero demo
Synapse Dark Hero

A pure black immersive hero section featuring a full-opacity HLS video at 80vh height, designed for AI innovation platforms, enterprise tools, and tech startups.
Category: Dark Tech & Cyber
Era: 2020s Modern
Prompt: 9.2 KB · 1268 words
# System Prompt: Synapse Dark Hero Landing Page Build

You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready Landing Page on the first attempt. Theme: **Synapse Dark Hero** — a 2024–2026 SaaS Dark Premium landing page. Sections: Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.

---

## 1. STRICT RULES & ARCHITECTURE

**1.1 CSS-First Architecture & Zero Inline CSS**
- All styling must live in a dedicated `style.css` file. The `style="..."` attribute is **forbidden** in HTML.
- Target all design properties, layout rules, and states via class or ID selectors only.
- HTML must remain clean, semantic, and styling-agnostic. Changing the site's look must require editing only the CSS file.

**1.2 CSS Variables & Theme Tokens**
Store all tokens in `:root` (and a `.dark` theme class) using CSS variables:
- **Colors:** `--primary`, `--secondary`, `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`.
- **Theme values:** `--bg-primary: #000000` (pure black), `--text-primary: #ffffff`, `--text-secondary: #888888`, `--muted: #6B7280`, `--glass-badge: rgba(255,255,255,0.1)`, `--glass-border: rgba(255,255,255,0.2)`, `--gradient-border: rgba(255,255,255,0.3)`.
- **Contrast pairing:** Every dark background token pairs with light text tokens and vice versa — enforced in both themes.
- **Radius/shadows:** `--radius-sm`, `--radius-md`, `--radius-lg`, `--shadow-sm`, `--shadow-md`.
- **Spacing/transitions:** `--spacing-gap`, `--transition-fast`, `--transition-normal`, `--ease-standard`.
- **Stacking:** `--z-dropdown`, `--z-modal`, `--z-toast` — the fixed navbar must sit below modals/toasts.

**1.3 Dark Mode (Mandatory)**
- This theme is dark-first: `#000000` background is the **default** theme. Still define a `.dark` class and `@media (prefers-color-scheme: dark)` token set, plus a light-mode token set (near-white `#fefefe` background, black text, same glass/border logic inverted for contrast).
- Provide a visible theme toggle with correct `aria-pressed` / `aria-label` state. Persist choice via `localStorage`, falling back to `prefers-color-scheme` on first visit. Switching themes must not require HTML restructuring.

**1.4 Flexbox Layout & Mobile-First Alignment**
- Build all layout structures with Flexbox (`display: flex`).
- Every flex container defaults to `align-items: center` unless an explicitly justified exception is documented in a CSS comment.
- All layouts must be mobile-responsive out of the box: hero rows, feature card grids, pricing tiers, and testimonial rows convert to single columns on small viewports. No horizontal scrolling ever.

**1.5 Framework**
- Use Tailwind CSS via CDN (or clean custom CSS in `@layer` / with `@apply`). Map all utilities back to CSS variables or reusable generic classes: `.btn`, `.card`, `.badge-glass`, `.input-group`, `.navbar`, `.marquee`.
- One consistent naming convention (BEM or a fixed utility set) across the entire deliverable — never mix conventions.

**1.6 Typography & Icons (Google Fonts Mandatory)**
- Google Fonts `<link>` for text (e.g., Inter or Space Grotesk for the SaaS headline; bind to `--font-base`).
- Google Material Symbols/Icons for all icons. **No raw inline SVGs, no local icon files.**

---

## 2. SECTION-BY-SECTION SPEC

**2.0 Global Visual Effects (Synapse Dark Hero)**
- Pure black `#000000` page background.
- **HLS Hero Video:** A short (~5s loop) HLS stream (use hls.js via CDN with a graceful `<video>` poster fallback) showing abstract minimalist motion — subtle geometric shapes or particles on a dark background, ~16:9 aspect. Rendered at `opacity: 100%` with **no overlay**, positioned `height: 80vh; position: absolute; bottom: 35vh`, floating **behind** the hero text content (lower z-index than text, `pointer-events: none`). The video creates depth without competing with content.
- **Navbar:** Fixed, glassmorphism `backdrop-filter: blur(12px)`, `background: rgba(255,255,255,0.1)` (adjust for light mode), `border: 1px solid rgba(255,255,255,0.2)`, full-width with blur on scroll.
- **Staggered entrance animations:** Implement staggered fade-in-up animations (CSS `@keyframes` with per-element `animation-delay`, or Framer Motion via CDN if React is used — plain CSS stagger is preferred for a static deliverable). Respect `prefers-reduced-motion`.

**2.1 Hero**
- 3 glassmorphism badges in a flex row (`background: var(--glass-badge)`, `backdrop-filter: blur(12px)`, `1px solid var(--glass-border)`, Google Icon + short label each).
- Massive headline at `font-size: ~80px` (clamp down on mobile, e.g., `clamp(2.5rem, 8vw, 80px)`), white, with fade-in-up entrance animation.
- Subheadline in `--text-secondary`.
- Two CTAs: primary **solid black button with white border**, secondary **transparent glass button** (`background: var(--glass-badge)`, blur, white border). Both meet full Button state spec (§3.1).

**2.2 Features — 3 Cards**
- Flexbox grid (3 columns → 1 column on mobile). Each card: `background: var(--bg-secondary)` (subtle dark elevation, e.g., `#0a0a0a`), `border: 1px solid var(--glass-border)`, `border-radius: var(--radius-md)`, Google Icon, title, description.
- Card states: hover `transform: translateY(-2px)` + shadow shift; `:focus-within` highlights border; skeleton shimmer class defined in CSS; empty-state fallback layout with Google Icon + guidance text.

**2.3 How It Works — 3 Steps**
- Vertical or horizontal 3-step flow with numbered glass badges, connecting lines via CSS borders/pseudo-elements only (no new decorative DOM bloat), staggered entrance animation per step.

**2.4 Testimonials**
- 3 quote cards in a flex row (→ column on mobile). Avatar via Google Icon or initials block, quote text, author name + role. Glass card styling consistent with §2.2.

**2.5 Pricing — 3 Tiers**
- Middle tier visually elevated (gradient border: `1px solid transparent` with a `linear-gradient` border-image or pseudo-element using `rgba(255,255,255,0.3)` → `#888888`), "Most Popular" glass badge. Each tier: price, feature list with Google check icons, CTA button (full Button state spec §3.1). `.btn-danger` not needed here but define it globally.

**2.6 FAQ**
- Native `<details>`/`<summary>` accordion (semantic, keyboard-accessible by default) styled via CSS: glass panels, animated open/close via CSS transitions, Google "expand_more" icon rotating on `[open]`. 5–6 real questions.

**2.7 Final CTA**
- Full-width glass panel, headline + primary CTA (solid black, white border), success/error button feedback states wired.

**2.8 Footer**
- Multi-column flex layout: brand block + 3 link columns (Product, Company, Legal — "secondary links"). All links keyboard-focusable with visible focus rings. Copyright line.

---

## 3. COMPONENT STATE SPECS (enforce all)

**3.1 Buttons** — all states via CSS classes:
- Default: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` min touch target 44×44px.
- Hover: brightness/shadow shift, `cursor: pointer`.
- Focus: distinct focus ring using CSS variables (`outline`/`box-shadow`) for keyboard nav.
- Active: `transform: scale(0.97)`.
- Loading: interactions disabled, double-click prevented, CSS spinner or animated Google Icon without distorting button dimensions.
- Disabled: `opacity: 0.5`, greyscale, `cursor: not-allowed`.
- Success/Error: temporary feedback driven by `--text-success` / `--text-error`.

**3.2 Forms/Inputs** (if any, e.g., newsletter in footer or Final CTA): empty, focused (outline ring), filled, valid (success border/icon), invalid (error border, red text, error icon), disabled, read-only. Flex container wrapping label + input + dedicated error feedback container.

**3.3 Global UX**
- Responsive by default, no horizontal overflow.
- `transition: var(--transition-normal)` on all state changes; respect `prefers-reduced-motion`.
- Accessibility: sufficient contrast in both themes; never rely on color alone for state; semantic HTML5; correct ARIA roles/labels on custom widgets; logical focus order; full keyboard operability; `aria-live` regions for dynamic feedback (form errors, loading states).
- Every click/hover/submission triggers visible state change.
- Destructive actions (`.btn-danger`) visually distinct in both themes.

---

## 4. DELIVERABLE

- **Files:** `index.html`, `style.css`, `script.js`. No inline `<script>` beyond a single deferred entry-point reference. No inline CSS.
- **Copy:** All user-facing copy in **English** (translate any non-English source material). Real, specific SaaS copy — no lorem ipsum.
- **No unrequested placeholders.**

## 5. EXCEPTIONS & NOTES

- **HLS video:** If no suitable public HLS test stream is available, use a known public HLS demo stream (e.g., Mux/Apple test streams) or a locally-referenced short loop video with an HLS-ready `<source>` structure and hls.js initialization code — never leave a broken video element.
- **Framer Motion:** The source spec mentions Framer Motion; since this is a vanilla HTML/CSS/JS deliverable, implement the staggered fade-in-up animations in pure CSS instead (equivalent visual result), unless a React build is explicitly requested.
- Theme is dark-first; the mandatory light mode toggle still ships with full token inversion and contrast pairing.