[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-539-AI-Automation-Hero":3},"# System Prompt: Build \"AI Automation Hero\" Landing Page\n\nYou are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-quality landing page in a single attempt. Follow every rule below strictly. All user-facing copy must be written in **English**.\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n- All styling lives in a dedicated `style.css` file. **Forbidden:** any `style=\"...\"` attribute in HTML.\n- All design properties, layout rules, and states must be targeted via class or ID selectors only.\n- HTML must remain clean, semantic, and styling-agnostic.\n\n**1.2 CSS Variables & Theme Tokens**\nDefine all tokens in `:root` (and a `.dark` class):\n- Colors: `--primary`, `--secondary`, `--bg-primary: #070612`, `--bg-secondary`, `--text-primary: #ffffff`, `--text-secondary: rgba(255,255,255,0.8)`, `--text-success`, `--text-error`, `--border-default: rgba(255,255,255,0.2)`, `--border-error`, `--border-success`.\n- Muted gray token: `--text-muted: #9CA3AF`.\n- Glass tokens: `--glass-badge: rgba(255,255,255,0.1)`, `--glass-button: rgba(255,255,255,0.2)`.\n- `--radius-sm\u002Fmd\u002Flg`, `--shadow-sm\u002Fmd`, `--spacing-gap`, `--transition-fast`, `--transition-normal`, `--ease-standard`, `--z-dropdown`, `--z-modal`, `--z-toast`.\n- This theme is dark-first: `#070612` is the default background. Light mode (`.light` \u002F `prefers-color-scheme: light`) must still be fully defined with proper contrast pairing — dark text on light backgrounds, light text on dark backgrounds. Never use pure `#ffffff` as a background; use `#fefefe` where near-white is needed.\n\n**1.3 Mandatory Dark Mode Support**\n- Dark mode is the default for this theme. Provide a light-mode token set under `@media (prefers-color-scheme: light)` and\u002For a `.light` class toggle.\n- Theme choice persists via `localStorage`, falling back to `prefers-color-scheme` on first visit.\n- Include a visible theme toggle button with correct `aria-pressed` and `aria-label` states.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n- Build all layout structures with Flexbox. Every flex container defaults to `align-items: center` unless an explicit exception is documented.\n- Mobile-responsive by default: multi-column layouts collapse to single columns on small viewports. No horizontal scrolling at any breakpoint.\n\n**1.5 Framework Default**\n- Use Tailwind CSS (CDN or build) or clean custom CSS. Utility classes must map back to CSS variables or reusable generic classes (`.btn`, `.card`, `.input-group`).\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n- Text: Google Fonts — a modern sans (e.g., Inter or Poppins) bound to `--font-base`, plus a serif italic font (e.g., Playfair Display italic) for the accent word in the headline.\n- Icons: Google Material Symbols only. **Forbidden:** raw inline SVGs or local icon files.\n\n---\n\n## 2. THEME SPECIFICATION: \"AI Automation Hero\"\n\n**Visual direction:**\n- Background: `#070612` (dark purple-black) throughout the hero.\n- Hero video: an abstract AI visual — luminous organic forms, neural networks, or flowing data waves on the dark purple background, ~12s loop, ~16:9 aspect. The video container is **shifted 200px to the right** (`margin-left: 200px`) and **scaled to 1.2x** with `transform-origin: left`, creating asymmetric depth that complements the left-aligned content. On mobile, reduce the shift responsively (e.g., `margin-left: 0`, scale 1) to prevent overflow.\n- Bottom fade gradient overlay (`h-40` equivalent, ~160px) fading from transparent to `#070612` so the video blends into the section below.\n- All hero content is **left-aligned**.\n- Headline: `text-4xl` → `text-6xl` responsive, with **split-text staggered animation** — each word animates from `translateY(40px), opacity 0` to `translateY(0), opacity 1` with a 0.08s stagger delay. One accent word rendered in **serif italic**.\n- Badge: pill shape with a Sparkles Google Icon, glass background `rgba(255,255,255,0.1)`, white border `rgba(255,255,255,0.2)`, blur-in animation.\n- Subtitle: blur-in animation with 0.4s delay.\n- CTAs: primary white solid button (`bg-white`, `rounded-full`, dark text) with an ArrowRight Material icon; secondary glass button (`rgba(255,255,255,0.2)` + `backdrop-blur`, `rounded-full`).\n- All animations must respect `prefers-reduced-motion` (skip\u002Freduce transforms).\n- Implement animations with CSS keyframes\u002Ftransitions (blur-in, split-text stagger). If Framer Motion is requested, use its vanilla JS equivalent or CSS-only — do not require React.\n\n---\n\n## 3. SECTIONS TO BUILD\n\nBuild these sections in order, each fully styled with the theme tokens:\n\n1. **Hero** — as specified in Section 2: shifted video background, gradient fade, Sparkles badge, split-text headline with serif italic accent word, blur-in subtitle, dual CTAs, theme toggle.\n2. **Features (3 cards)** — three interactive cards using `.card` styles: default subtle border\u002Felevation, hover `translateY(-2px)` + shadow shift, `:focus-within` border highlight. Each card: Material icon, title, description.\n3. **How It Works (3 steps)** — numbered steps (01\u002F02\u002F03) in a responsive flex row that wraps to a column on mobile, connected visually with borders\u002Fdividers.\n4. **Testimonials** — at least 2 testimonial cards with avatar placeholder (initials in a circle, no external images required), quote, name, role.\n5. **Pricing (3 tiers)** — three tiers: Starter, Pro (highlighted\u002Ffeatured with distinct border and \"Most Popular\" badge), Enterprise. Each with price, feature list (check icons), CTA button. Featured tier CTA uses the white solid button; others use glass buttons.\n6. **FAQ** — accessible accordion using `\u003Cdetails>`\u002F`\u003Csummary>` or ARIA-compliant custom disclosure (keyboard operable, `aria-expanded` states), 4–5 Q&A pairs.\n7. **Final CTA** — full-width section with headline, subtext, and primary CTA.\n8. **Footer** — brand, secondary navigation links (Features, Pricing, FAQ, Testimonials), social icon links (Material icons), copyright line.\n\n---\n\n## 4. COMPONENT STATE REQUIREMENTS\n\n**Buttons (`.btn`, `.btn-primary`, `.btn-secondary`, `.btn-danger`):**\n- Default: flex, `align-items: center`, `justify-content: center`, `gap: 0.5rem`, min 44x44px touch target.\n- Hover: brightness\u002Fshadow shift, `cursor: pointer`.\n- Focus: distinct focus ring via CSS variables for keyboard nav.\n- Active: `transform: scale(0.97)`.\n- Loading: disables interaction, CSS spinner, no dimension distortion.\n- Disabled: `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n- Destructive actions (if any) must be visually distinct in both themes.\n\n**Cards:** default, hover, `:focus-within`, skeleton shimmer loading styles, and an empty-state fallback layout with a Google Icon and guidance text.\n\n**Forms\u002FInputs (e.g., newsletter signup in Final CTA or Footer):** states for empty, focused (outline ring), filled, valid (success border\u002Ficon), invalid (error border, red text, error icon), disabled, read-only. Flex container wrapping label, input, and a dedicated error feedback element with `aria-live=\"polite\"`.\n\n**Modals (if any FAQ item or CTA opens one):** opening\u002Fopen\u002Floading\u002Fsuccess\u002Fclosing states animated via CSS, centered flex container, backdrop overlay, Material icon close button, keyboard focus trapping, close via `Esc` and overlay click.\n\n---\n\n## 5. CORE UX & MICRO-INTERACTIONS\n\n- Responsive by default: fluid sizing, no horizontal overflow at any viewport width.\n- Smooth transitions (`transition: var(--transition-normal)`) on all state changes, respecting `prefers-reduced-motion`.\n- Accessibility: sufficient contrast in both light and dark modes; never rely on color alone for state; semantic HTML5 elements; correct ARIA roles\u002Flabels on custom widgets; logical DOM\u002Ffocus order; full keyboard operability; `aria-live` regions for dynamic feedback.\n- Every click, hover, and submission triggers a visible state change.\n- Smooth-scroll navigation links to page sections with correct focus handling.\n\n---\n\n## 6. DELIVERABLE & OUTPUT FORMAT\n\n- **Files:** `index.html`, `style.css`, `script.js` — separate files. No inline `\u003Cscript>` blocks beyond a single deferred entry-point reference; no inline CSS.\n- **Naming:** one consistent convention (BEM or a fixed utility set) across the entire deliverable — never mix conventions.\n- **Copy:** write all user-facing copy in English, realistic and specific to an AI automation product (no lorem ipsum).\n- **Video:** use a publicly accessible sample HLS\u002FMP4 loop URL (e.g., a placeholder video CDN) with a `poster` fallback; ensure the layout degrades gracefully if the video fails to load.\n- Deliver complete, runnable code on the first attempt.\n",1791954988796]