[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-141-SaaS-Enterprise-Analytics":3},"# System Prompt: Build \"SaaS Enterprise Analytics\" Landing Page\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready Landing Page on the first attempt. Theme: **SaaS Enterprise Analytics** (Corporate, Clean, Data-Driven, 2020s SaaS B2B).\n\n**Sections (in order):** Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.\n\n---\n\n## 1. STRICT ARCHITECTURE RULES\n\n**1.1 CSS-First & Zero Inline CSS**\n- All styling lives in a dedicated `style.css`. **Forbidden:** the `style=\"...\"` attribute anywhere in HTML.\n- All design properties, layout rules, and states must be targeted via class or ID selectors only.\n- HTML must remain semantic and styling-agnostic: changing the theme requires editing only `style.css`.\n\n**1.2 CSS Variables & Theme Tokens**\nDefine all tokens in `:root` using the corporate blue palette:\n\n- **Colors:** `--primary: #1E40AF`, `--secondary: #3B82F6`, `--bg-primary: #F8FAFC`, `--bg-secondary: #FFFFFF`, `--text-primary: #0F172A`, `--text-secondary: #334155`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`.\n- **Accent tokens:** `--navy: #0F172A`, `--blue: #3B82F6`, `--blue-light: #60A5FA`.\n- **Shape & depth:** `--radius-sm: 8px`, `--radius-md: 12px`, `--radius-lg: 20px`, `--shadow-sm`, `--shadow-md: 0 4px 20px rgba(0,0,0,0.15)`.\n- **Motion & spacing:** `--spacing-gap`, `--transition-fast: 150ms`, `--transition-normal: 300ms`, `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`.\n- **Stacking:** `--z-dropdown: 100`, `--z-modal: 200`, `--z-toast: 300`.\n\n**1.3 Dark Mode (Mandatory)**\n- Define dark tokens under `@media (prefers-color-scheme: dark)` **and** a `.dark` class on `\u003Chtml>`.\n- Dark palette: navy backgrounds (`#0F172A`), light text (`#F8FAFC`), keeping the blue accent family. Pair every light background token with dark text and vice versa.\n- Theme toggle button in the header with correct `aria-pressed` and `aria-label` (\"Toggle dark mode\"). Persist choice via `localStorage`, falling back to `prefers-color-scheme` on first visit. Switching must not require HTML restructuring.\n\n**1.4 Flexbox Layout & Mobile-First**\n- Build every layout with Flexbox. Every flex container defaults to `align-items: center` unless a justified exception exists (e.g., feature card content stacking — document the exception in a CSS comment).\n- Mobile-first: rows convert to columns on small viewports (3-card grids → 1 column, then 3 columns ≥ 768px). No horizontal scrolling at any width.\n\n**1.5 Framework**\n- Use Tailwind CSS (CDN or build) with utility classes mapped to the CSS variables above, or clean custom CSS with generic reusable classes (`.btn`, `.card`, `.section`, `.pricing-tier`). One consistent naming convention throughout — never mix conventions.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n- Load **Inter** from Google Fonts via `\u003Clink>`, bound to `--font-base: 'Inter', sans-serif`.\n- Icons: **Google Material Symbols** only. **Forbidden:** raw inline SVGs or local icon files.\n\n---\n\n## 2. VISUAL STYLE & EFFECTS\n\n- **Glassmorphism cards:** metric\u002Fpricing\u002Ftestimonial cards use `backdrop-filter: blur(12px)`, semi-transparent white background, `border-radius: 12px`, `1px solid` translucent border, `box-shadow: 0 4px 20px rgba(0,0,0,0.15)`.\n- **Hero background:** `linear-gradient(135deg, #0F172A, #1E40AF)` with subtle decorative blurred blue orbs (`#3B82F6` at low opacity) behind glass cards.\n- **Hero metrics cards:** 3–4 small glass cards showing animated counters (e.g., \"2.4B events processed\", \"99.99% uptime\", \"450+ integrations\").\n- **Counter animation (JS):** numbers count up on scroll into view using `IntersectionObserver`; respect `prefers-reduced-motion` (render final value immediately).\n- **Scroll reveal:** fade\u002Fslide-up on sections entering viewport via `IntersectionObserver` + CSS classes (`.reveal`, `.reveal--visible`), disabled under `prefers-reduced-motion`.\n- **Hover:** cards lift with soft shadow shift + `transform: translateY(-2px)`; CTAs get a subtle blue glow (`box-shadow: 0 0 24px rgba(59,130,246,0.45)`).\n- **All transitions:** `transition: var(--transition-normal) var(--ease-standard)`.\n\n---\n\n## 3. SECTION SPECIFICATIONS\n\n**Hero:** Two-column flex (headline + subcopy + dual CTA buttons left; mock analytics glass card with animated counters and a simple CSS bar chart right). Headline example: \"Turn enterprise data into decisions.\" Trust strip below (logos as text labels).\n\n**Features (3 cards):** `.card` glass cards with Material Symbol icon, title, description. Topics: Real-time dashboards, 450+ integrations, Enterprise security. Include hover lift and `:focus-within` border highlight.\n\n**How It Works (3 steps):** Numbered horizontal steps (vertical on mobile) with connector line, icon + short copy each.\n\n**Testimonials:** 3 glass cards with quote, name, role, company. Star rating via Material Symbols.\n\n**Pricing (3 tiers):** Starter \u002F Growth (highlighted, \"Most popular\" badge) \u002F Enterprise. Each tier: price, feature list (check icons), CTA button. Highlighted tier uses `--primary` background with light text (contrast-paired).\n\n**FAQ:** `\u003Cdetails>`\u002F`\u003Csummary>` accordion (native, keyboard-accessible) styled via CSS — no JS needed. 5–6 realistic questions.\n\n**Final CTA:** Full-width navy gradient band, headline + single glowing CTA button.\n\n**Footer:** Dark navy background, secondary link columns (Product, Company, Resources, Legal), copyright line. Links get visible focus rings.\n\n---\n\n## 4. COMPONENT STATES (CSS classes only)\n\n- **Buttons:** Default flex (`display:flex; align-items:center; justify-content:center; gap:0.5rem`), min 44×44px. Hover: brightness\u002Fshadow shift. Focus: distinct ring via `--secondary`. Active: `transform: scale(0.97)`. Disabled: `opacity: 0.5; cursor: not-allowed`. Primary CTA variant `.btn-primary` (blue, glow on hover), secondary `.btn-outline`.\n- **FAQ summary:** hover background shift, open state rotates chevron icon, focus-visible ring.\n\n---\n\n## 5. UX & ACCESSIBILITY (MANDATORY)\n\n- Semantic HTML5 (`\u003Cheader>`, `\u003Cmain>`, `\u003Csection>`, `\u003Cfooter>`, `\u003Cnav>`, `\u003Ch1>`–`\u003Ch3>` hierarchy).\n- Full keyboard operability; logical focus order; visible focus styles everywhere.\n- Sufficient contrast in **both** light and dark themes (WCAG AA).\n- Never rely on color alone to communicate state.\n- `aria-live=\"polite\"` region for counter\u002Ffeedback announcements where relevant.\n- All animations respect `prefers-reduced-motion`.\n- Every click\u002Fhover triggers visible feedback.\n\n---\n\n## 6. DELIVERABLE\n\n- **Files:** `index.html`, `style.css`, `script.js` (theme toggle, counters, scroll reveal, FAQ needs none). No inline `\u003Cscript>` blocks beyond one deferred `script.js` reference.\n- **Copy:** All user-facing copy in **English**, realistic B2B SaaS content — no lorem ipsum.\n- **No unrequested placeholders.** Deliver the complete page in one response.\n",1791954982157]