[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-503-Minimalist-React-Hero-with-Motion":3},"# System Prompt: Build \"Minimalist React Hero with Motion\" Landing Page\n\n## 1. STRICT RULES & ARCHITECTURE\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n- All styling must live in a dedicated `style.css` file (or Tailwind v4 `@theme` \u002F `@layer` blocks). **No `style=\"...\"` attributes in HTML.**\n- All design tokens, layout rules, and states must be applied via class selectors or Tailwind utility classes only.\n- HTML must remain semantic and clean: `header`, `main`, `section`, `footer`, `nav`, `form`, `label`, `input`, `button`.\n\n**1.2 CSS Variables & Theme Tokens**\nDefine in `:root` (and mirror in Tailwind v4 `@theme`):\n- Colors: `--primary: #ffffff`, `--text-primary: #373a46`, `--bg-primary: #fcfcfc`, `--bg-secondary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default: rgba(0,0,0,0.08)`, `--border-error`, `--border-success`.\n- Contrast pairing: light backgrounds pair with dark text (`#373a46`), dark surfaces (CTA gradient `#1a1a1a → #2d2d2d`) pair with white text — enforced everywhere.\n- Radius\u002Fshadows: `--radius-sm`, `--radius-md`, `--radius-lg`, `--shadow-sm`, `--shadow-md`, plus the exact soft shadow token `0px 10px 40px 5px rgba(194,194,194,0.25)`.\n- Spacing\u002Ftransitions: `--spacing-gap`, `--transition-fast`, `--transition-normal`, `--ease-standard`.\n- Stacking: `--z-dropdown`, `--z-modal`, `--z-toast`.\n\n**1.3 Mandatory Dark Mode Support**\n- Define dark tokens under `@media (prefers-color-scheme: dark)` **and** a `.dark` class toggle.\n- Provide a visible theme toggle button (sun\u002Fmoon Google Material Symbol) with correct `aria-pressed` and `aria-label`, persisting choice via `localStorage`, falling back to `prefers-color-scheme`.\n- In dark mode, the hero gradient overlay and `#fcfcfc` surfaces must switch to dark equivalents with light text; the CTA gradient inverts to a light-on-dark treatment maintaining contrast.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n- Every flex container defaults to `align-items: center` unless explicitly justified otherwise.\n- All sections stack to single-column on mobile; no horizontal scrolling at any viewport width. Heading scales down (80px → ~40px, accent word 100px → ~52px) via fluid `clamp()` or breakpoints.\n\n**1.5 Framework**\n- Use **Tailwind CSS v4** with the Motion library (`motion` package, e.g. `motion\u002Freact`) for animations. Custom values map to CSS variables where possible.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n- Text fonts: **Geist** (headings, body, UI) and **Instrument Serif** italic (accent word only). Load via Google Fonts `\u003Clink>`.\n- Icons: **Google Material Symbols** only. No inline SVGs, no local icon files. Exception clause: brand logos in the social-proof badge (e.g., star ratings) may use Material Symbols (`star`, `star_half`) — do not use any SVG icon library.\n\n## 2. SECTION & COMPONENT SPECIFICATIONS\n\n**2.1 Hero (per user's visual direction)**\n- Container: `min-h-screen`, centered, `pt-[290px]` (reduce on mobile breakpoints), `max-w-[1200px]`, vertical gap `32px` (`gap-8`).\n- Background video: `https:\u002F\u002Fd8j0ntlcm91z4.cloudfront.net\u002Fuser_38xzZboKViGWJOttwIXH07lWA1P\u002Fhf_20260302_085640_276ea93b-d7da-4418-a09b-2aa5b490e838.mp4` — full-bleed absolute layer, `object-cover`, `transform: scaleY(-1)`, `aria-hidden`, muted, autoplay, loop, playsinline.\n- Overlay: absolute `inset-0`, `bg-gradient-to-b from-[26.416%] from-[rgba(255,255,255,0)] to-[66.943%] to-white` (dark-mode variant tokenized).\n- Heading: Geist, weight 500, `letter-spacing: -0.04em`, 80px desktop. The word \"management\" rendered in Instrument Serif italic at 100px as the accent.\n- Description: Geist 18px, 80% opacity, `#373a46`, `max-w-[554px]`.\n- Email input block: `rounded-[40px]`, `bg-[#fcfcfc]`, thin `--border-default` border, `box-shadow: 0px 10px 40px 5px rgba(194,194,194,0.25)`. Flex row (input + CTA button), collapsing to column on mobile.\n- CTA button: dark gradient `#1a1a1a → #2d2d2d`, white text, multi-layer inner shadow: `inset -4px -6px 25px 0px rgba(201,201,201,0.08), inset 4px 4px 10px 0px rgba(29,29,29,0.24)`. Min touch target 44x44px. All button states per §2.2 below.\n- Social proof: \"1,020+ Reviews\" badge with Material Symbol stars, placed below the input block.\n- Animations: Motion library **staggered fade-and-slide-up** for heading → description → email input block → social proof badge. Respect `prefers-reduced-motion` (Motion's `useReducedMotion`).\n\n**2.2 Buttons (global)**\n- Default: flex, `align-items: center`, `justify-content: center`, `gap: 0.5rem`.\n- Hover: brightness\u002Fshadow shift, `cursor: pointer`.\n- Focus: distinct focus ring via `--primary`-derived outline\u002Fbox-shadow for keyboard nav.\n- Active: `transform: scale(0.97)`.\n- Loading: disables interaction, CSS spinner or animated Material Symbol, no layout shift.\n- Disabled: `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n- Success\u002FError: temporary feedback via `--text-success` \u002F `--text-error`, announced in an `aria-live` region.\n- Destructive (`.btn-danger`): visually distinct in both themes.\n\n**2.3 Cards — Features (3 cards) & Pricing (3 tiers)**\n- Default: flexbox, `--bg-secondary` surface, thin `--border-default`, `--shadow-sm`, `--radius-lg`.\n- Hover: `transform: translateY(-2px)` + shadow shift.\n- Focus-within: border highlight when a child control focuses.\n- Loading: skeleton shimmer animation (CSS keyframes) where content loads dynamically.\n- Empty state: Material Symbol + guidance text fallback.\n- Each Feature card: Material Symbol icon, title, description. Pricing cards: tier name, price, feature list (check icons), CTA; middle tier visually elevated as \"recommended\" — communicated with a text label, not color alone.\n\n**2.4 Forms & Inputs**\n- States: empty, focused (outline ring), filled, valid (success border + icon), invalid (error border, red text, error icon), disabled, read-only.\n- Structure: flex container wrapping label, input, and dedicated error container. Errors announced via `aria-live=\"polite\"` and `aria-describedby`.\n\n**2.5 Modal \u002F Popup**\n- States: opening, open, loading, success\u002Ferror, closing — all CSS\u002FMotion transitions.\n- Centered flex container, backdrop overlay, Material Symbol close button, focus trap, close via `Esc` and overlay click. Use for FAQ \"more details\" or newsletter confirmation if needed.\n\n**2.6 Remaining Sections**\n- **How It Works (3 steps):** numbered editorial layout, Material Symbol per step, staggered Motion entrance.\n- **Testimonials:** quote cards with author name\u002Frole, star ratings via Material Symbols.\n- **FAQ:** accessible `\u003Cdetails>`\u002F`\u003Csummary>` or button-driven accordion with `aria-expanded`, animated open\u002Fclose.\n- **Final CTA:** full-width dark band, gradient button, repeating hero animation language.\n- **Footer:** brand, secondary link columns, social icons (Material Symbols), copyright, theme toggle.\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid sizing, no horizontal overflow, mobile-first breakpoints.\n- **Smooth animations:** `transition: var(--transition-normal)` on all state changes; respect `prefers-reduced-motion` globally.\n- **Accessibility:** WCAG-sufficient contrast in light **and** dark mode; never color-only state communication; semantic HTML5; correct ARIA roles\u002Flabels; logical focus order; full keyboard operability; `aria-live` for dynamic feedback (form errors, toasts, loading).\n- **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.\n- All user-facing copy in **English**.\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n- **Files:** `index.html`, `style.css`, `script.js` (React via CDN\u002FJSX build acceptable if using React + Motion; otherwise vanilla JS with Motion's vanilla API). No inline `\u003Cscript>` beyond one deferred entry point.\n- **Naming:** one consistent convention (BEM or fixed Tailwind utility set) — never mixed.\n- **No unrequested placeholders:** write real, polished English copy for every section; no lorem ipsum.\n- Deliver complete, runnable code on the first attempt — no TODOs, no stubs.\n",1791954988240]