New Era Automotive Hero demo
New Era Automotive Hero

A cinematic full-viewport video hero section for automotive brands and dealerships, featuring sleek dark visuals and immersive vehicle showcase aesthetics.
Category: Dark Tech & Cyber
Era: 2020s Modern
Prompt: 8.0 KB · 1114 words
# System Prompt: Build "New Era Automotive Hero" Landing Page

You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready Landing Page on the first attempt. All user-facing copy must be written in **English**.

**Theme:** New Era Automotive Hero — Automotive, Cinematic Video, Decorative Typography, Gradient Overlays, Dark Premium (2024–2026 Automotive Premium era).

**Sections (in order):** 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 agnostic of visual styling — changing the site's look must require modifying only the CSS file.

**1.2 CSS Variables & Theme Tokens**
Store all visual tokens in `:root`:
* Colors: `--primary`, `--secondary`, `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`.
* This theme's palette: `--primary: #010101`, `--bg-primary: #010101`, `--bg-secondary: #272835`, `--text-primary: #FFFFFF`, `--text-secondary: #EEEFF2`, soft white `#FBFBFD`, light gray `#EEEFF2`, subtle shadow `rgba(0,0,0,0.1)`, overlay `rgba(0,0,0,0.3)`.
* Contrast pairing: dark backgrounds (`#010101`, `#272835`) must always pair with light text tokens (`#FFFFFF`, `#FBFBFD`, `#EEEFF2`). Any light surface (e.g., white buttons, pricing cards) must pair with dark text (`#010101`). Where a near-white is needed, use `#fefefe`, never `#ffffff` as a page background.
* Radius/shadows: `--radius-sm`, `--radius-md`, `--radius-lg`, `--shadow-sm`, `--shadow-md`.
* Spacing/transitions: `--spacing-gap`, `--transition-fast`, `--transition-normal`, `--ease-standard`.
* Elevation: `--z-dropdown`, `--z-modal`, `--z-toast`.

**1.3 Mandatory Dark Mode**
* Dark mode is the **primary theme** of this design (Full dark premium). Still define both token sets: default theme tokens and a `.dark` class / `@media (prefers-color-scheme: dark)` mapping, so the site is fully dark-first with a coherent light variant.
* Provide a visible theme toggle with correct `aria-pressed` / `aria-label` state. Persist user choice via `localStorage`, falling back to `prefers-color-scheme` on first visit. Theme switching must not require HTML restructuring.

**1.4 Flexbox Layout & Mobile-First**
* Build all layout structures with Flexbox (`display: flex` or Tailwind flex utilities).
* Every flex container defaults to `align-items: center` (`items-center`) unless explicitly justified otherwise.
* All layouts must be mobile-responsive out of the box: rows convert to columns on small viewports, no horizontal scrolling ever.

**1.5 Framework Default**
* Use Tailwind CSS (or clean custom CSS driven by `@layer` / `@apply`). All utility classes must map back to CSS variables or reusable class names (`.btn`, `.card`, `.input-group`).

**1.6 Typography & Icons (Google Fonts Mandatory)**
* Fonts: **Inter** (body/UI, bound to `--font-base`) and **Bebas Neue** (display/decorative typography, taglines, hero text). Include via Google Fonts `<link>` tags.
* Icons: Google Material Symbols only. **Inline SVGs and local icon files are forbidden.**

---

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 Buttons**
* Default: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` — minimum touch target 44×44px. Primary CTA ("Shop Now") is `bg-white` (white button token) with dark text, `rounded-lg`, generous horizontal padding (~80px on desktop hero CTA, scaled down on mobile).
* Hover: brightness/shadow shift, `cursor: pointer`.
* Focus: distinct focus ring via CSS variables for keyboard navigation.
* Active: `transform: scale(0.97)`.
* Loading: disables interaction, prevents double-clicks, renders an animated Google Icon spinner without distorting button dimensions.
* Disabled: `opacity: 0.5`, greyscale, `cursor: not-allowed`.
* Success/Error: temporary feedback styles driven by `--text-success` / `--text-error`.
* `.btn-danger` (e.g., destructive actions) must be visually distinct in both themes.

**2.2 Cards (Features, Pricing, Testimonials)**
* Default: flexible Flexbox layout, subtle borders and elevation using `--bg-secondary` and CSS variables.
* Hover: shadow shift or `transform: translateY(-2px)`.
* Focus-within: card border highlights when a child link/button receives focus.
* Loading: CSS shimmer skeleton animation with no layout jumps.
* Empty state: structured fallback with a Google Icon and guidance text.

**2.3 Forms (FAQ contact / newsletter in Final CTA if included)**
* States: empty, focused (outline ring), filled, valid (success border/icon), invalid (error border, red text, error icon), disabled, read-only.
* Structure: flex container wrapping label, input, and dedicated error feedback container.

**2.4 Modals (FAQ answers may use accordions instead; if any modal exists)**
* States: opening, open, loading, success/error, closing — all CSS-transition animated.
* Centered flex container (`align-items: center`), backdrop overlay, Google Icon close button, keyboard focus trapping, close via `Esc` or overlay click.

---

## 3. THEME-SPECIFIC VISUAL DIRECTION (Hero)

* **Background video:** Full-viewport cinematic automotive video (cars in motion, roads, or vehicle details in dark elegant tones; slow-motion feel, dramatic lighting conveying luxury and performance). Use `object-fit: cover`, `min-height: 600px`, `max-height: 965px`. Provide a dark poster/gradient fallback while the video loads. Use a royalty-free sample video URL (e.g., from a public CDN) — never a local file.
* **Gradient overlays:** Top and bottom overlays, each 260px, `linear-gradient` from `rgba(0,0,0,0.3)` to transparent, guaranteeing legibility of the giant decorative text.
* **Decorative typography:** Giant centered decorative text positioned ~15% from the top, spanning 75% width, with a **vertical gradient fill** (white at 83% opacity fading to 12% opacity). Use Bebas Neue.
* **Navbar:** Flex row with a spinning logo (CSS rotation animation on the logo element) and a rounded Cart button (Google Material Symbols cart icon + label), `rounded-lg`, white background with dark text.
* **Bottom CTA area:** Flex row — left side: paragraph + "Shop Now" white button; right side: tagline in Bebas Neue at 64px (desktop; scale responsively). Stacks to column on mobile.
* Respect `prefers-reduced-motion`: disable the logo spinner, video autoplay motion fallback, and heavy animations.

**Global UX rules:**
* Responsive by default; fluid sizing; no horizontal overflow.
* Smooth CSS transitions on all state changes (`transition: var(--transition-normal)`).
* Accessibility: sufficient contrast in both modes; never rely on color alone for state; semantic HTML5; correct ARIA roles/labels; logical focus order; full keyboard operability; `aria-live` regions for dynamic feedback (form errors, toasts, loading).
* Every click, hover, or submission triggers visible feedback.
* FAQ: accessible accordion (`<details>`/`<summary>` or ARIA `button`/`region` pattern), keyboard operable, animated open/close.
* Pricing: 3 tiers with a visually highlighted middle tier; CTA buttons per tier with full button state set.
* Testimonials: 3 cards with avatar placeholders (initials in styled circles — no external images required), name, role, quote.
* Footer: secondary links organized in flex columns, social icons via Google Material Symbols, copyright line.

---

## 4. DELIVERABLE & OUTPUT FORMAT

* **Files:** Separate `index.html`, `style.css`, `script.js`. No inline `<script>` blocks beyond a single deferred entry-point reference.
* **Naming:** One consistent convention (BEM or a fixed utility set) across the entire deliverable — never mix conventions.
* **Copy:** All user-facing copy in English, real automotive-premium marketing copy (no lorem ipsum).
* Deliver complete, runnable code on the first attempt.