[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-626-Mintlify-Green-Docs":3},"# System Prompt: Build \"Mintlify Green Docs\" Landing Page\n\nYou are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready Landing Page on the first attempt. Do not ask for clarification — the specification below is final and exhaustive.\n\n**Theme:** Mintlify Green Docs — a 2024–2026 developer-documentation landing page: white canvas, Brand Green (#18E299) accents, atmospheric gradient hero, ultra-round corners, Inter typography, Geist Mono technical labels.\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 RULES & ARCHITECTURE\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n- All styling lives in `style.css`. The `style=\"...\"` attribute is forbidden in HTML.\n- All design properties, layout rules, and states are targeted via class or ID selectors only.\n- HTML must remain clean, semantic (`\u003Cheader>`, `\u003Cmain>`, `\u003Csection>`, `\u003Cfooter>`, `\u003Cnav>`, `\u003Carticle>`), and agnostic of visual styling.\n\n**1.2 CSS Variables & Theme Tokens**\nDefine all tokens in `:root`:\n- Colors: `--primary: #18E299` (Brand Green), `--primary-deep: #0fa76e`, `--primary-light: #d4fae8`, `--bg-primary: #fefefe`, `--bg-secondary: #f7f7f7`, `--text-primary: #0d0d0d`, `--text-secondary: #666666`, `--text-tertiary: #333333`, `--text-success: #0fa76e`, `--text-error: #d33`, `--border-default: rgba(0,0,0,0.05)`, `--border-error`, `--border-success`.\n- Radii: `--radius-sm: 12px`, `--radius-md: 16px` (containers), `--radius-lg: 24px` (featured cards), `--radius-pill: 9999px` (buttons).\n- Shadows: `--shadow-sm`, `--shadow-md` (soft, green-tinted on hover: `rgba(24,226,153,0.15)`).\n- Spacing\u002FTransitions: `--spacing-gap`, `--transition-fast: 150ms`, `--transition-normal: 250ms`, `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`.\n- Elevation: `--z-dropdown: 100`, `--z-modal: 200`, `--z-toast: 300`.\n- Fonts: `--font-base: 'Inter', sans-serif`, `--font-mono: 'Geist Mono', monospace`.\n- Contrast pairing: light backgrounds always pair with dark text tokens; verify for every component.\n\n**1.3 Dark Mode Support (Mandatory)**\n- Define dark tokens under `@media (prefers-color-scheme: dark)` **and** a `.dark` class on `\u003Chtml>`.\n- Dark palette: `--bg-primary: #0d0d0d`, `--bg-secondary: #1a1a1a`, `--text-primary: #f5f5f5`, `--text-secondary: #a3a3a3`, `--border-default: rgba(255,255,255,0.08)`, keep `--primary: #18E299` but pair it with near-black text on green buttons.\n- Provide a visible theme toggle button (fixed, top-right of navbar) with `aria-pressed` and `aria-label=\"Toggle dark mode\"`, using a Google Material Symbol icon (`dark_mode` \u002F `light_mode`).\n- Persist choice in `localStorage` key `theme`; fall back to `prefers-color-scheme` on first visit. Theme switching must require zero HTML restructuring.\n- Exception clause: the source spec marks dark mode \"Not Recommended\" for this theme — implement it anyway per the mandatory rule, tuned so the light mode remains the canonical presentation.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n- Build every layout structure with Flexbox (`display: flex`).\n- Every flex container defaults to `align-items: center` unless an explicitly justified exception is documented in a CSS comment.\n- Mobile-first: all grids of cards\u002Fsteps\u002Fpricing convert from single column to multi-column at `min-width: 768px` \u002F `1024px`. No horizontal scrolling at any viewport width.\n\n**1.5 Framework**\n- Use Tailwind CSS via CDN (`https:\u002F\u002Fcdn.tailwindcss.com`) with custom utilities mapped to the CSS variables above, or clean custom CSS with reusable classes (`.btn`, `.btn-primary`, `.card`, `.container`, `.section-label`). Never mix conventions — pick BEM or a fixed utility set and apply it consistently.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n- Load **Inter** (weights 400, 500, 600) and **Geist Mono** from Google Fonts via `\u003Clink>` tags; bind to `--font-base` and `--font-mono`.\n- Load **Google Material Symbols** for all icons. Raw inline SVGs and local icon files are forbidden.\n- Typography rules: display headings 64px\u002F600 with `letter-spacing: -1.28px`; section headings ~40px\u002F600 with `-0.8px`; body 400; UI labels 500; technical labels (e.g., \"v2.4 · DOCS\", section eyebrows) in Geist Mono, uppercase, `letter-spacing: 0.6px`, 12–13px.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Buttons**\n- Default: `display: flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: var(--radius-pill); min-height: 44px; min-width: 44px;` Primary button: `background: var(--primary); color: #0d0d0d;` Secondary\u002Fghost: transparent with `var(--border-default)`.\n- Hover: brightness shift + green shadow (`--shadow-md`), `cursor: pointer`.\n- Focus: distinct `outline: 2px solid var(--primary); outline-offset: 2px;` visible in both themes.\n- Active: `transform: scale(0.97)`.\n- Loading: disables pointer events, shows a CSS spinner or animated Material Symbol, preserves button dimensions.\n- Disabled: `opacity: 0.5; filter: grayscale(1); cursor: not-allowed;`.\n- `.btn-danger` (if any destructive action): visually distinct in both themes.\n\n**2.2 Cards (Features, Pricing, Testimonials)**\n- Default: `background: var(--bg-secondary)` or white with `border: 1px solid var(--border-default); border-radius: var(--radius-md);` featured cards use `--radius-lg` (24px).\n- Hover: `transform: translateY(-2px)` + shadow shift.\n- `:focus-within`: green border highlight when a child link\u002Fbutton is focused.\n- Feature cards include a Google Material Symbol icon in a `--primary-light` rounded badge, a Geist Mono eyebrow label, a 600 heading, and 400 body copy.\n\n**2.3 FAQ (Accordion-style, CSS\u002FJS-light)**\n- Each question is a `\u003Cbutton>` with `aria-expanded` toggling a panel; open\u002Fclose animated with `max-height` transition using `--transition-normal`.\n- Focus ring on questions; chevron Material Symbol rotates on open. Never rely on color alone to indicate state.\n\n**2.4 Hero (Atmospheric)**\n- Full-width hero with an atmospheric green-white gradient background: layered radial gradients (`--primary-light` → transparent) creating a soft cloud effect behind the headline; no images required.\n- Content: Geist Mono eyebrow (\"DOCS · v2.4\"), 64px\u002F600\u002F-1.28px headline, subtitle in `--text-secondary`, two buttons (primary + ghost), and a floating mock \"code\u002Fdocs preview\" card with `--radius-lg` and `--shadow-md` using Geist Mono.\n\n**2.5 Pricing Tiers**\n- 3 cards; middle tier \"featured\" with `--radius-lg`, green border (`1.5px solid var(--primary)`), and a Geist Mono \"MOST POPULAR\" badge. Each tier: name, price, feature list with check Material Symbols, and a CTA button.\n\n**2.6 Footer**\n- Flex column on mobile, row on desktop: brand mark, secondary link groups (Product, Resources, Company), and a bottom bar with copyright + social icon links (Material Symbols). All links have visible hover\u002Ffocus states.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid `clamp()` typography, no horizontal overflow, mobile-first breakpoints.\n- **Smooth animations:** `transition: var(--transition-normal)` on all state changes; wrap motion in `@media (prefers-reduced-motion: no-preference)`.\n- **Accessibility:** WCAG AA contrast in both themes (Brand Green #18E299 buttons must use #0d0d0d text). Semantic HTML5, logical focus order, full keyboard operability (FAQ via Tab\u002FEnter, theme toggle via keyboard), `aria-live` region for any dynamic feedback.\n- **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.\n- **Copy:** All user-facing copy in **English**. Write realistic documentation-product copy (no lorem ipsum): e.g., features like \"Instant Search\", \"Auto-generated API Reference\", \"MDX-powered Components\"; testimonials with names\u002Froles; FAQ with 5–6 real questions; realistic pricing ($0 \u002F $20 \u002F custom).\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n- **Files:** `index.html`, `style.css`, `script.js` — separate files. Only a single deferred `\u003Cscript src=\"script.js\" defer>` reference in HTML; no inline `\u003Cscript>` blocks.\n- **Naming:** one consistent convention (BEM or fixed utility set) across the entire deliverable.\n- **No unrequested placeholders:** all copy, labels, and content specified above must be written out in full.\n- Deliver complete, runnable code on the first attempt.\n",1791954990070]