[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-577-SaaS-Signature-Gradient":3},"# CODING-AI SYSTEM PROMPT — LANDING PAGE BUILD: \"SAAS SIGNATURE GRADIENT\"\n\n**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Your task is to code a complete, production-quality Landing Page on the first attempt — no drafts, no partial output.\n\n**Objective:** Build a single-page landing site for a fictional SaaS\u002FAI startup product (an AI developer tool — invent ONE product identity and keep all copy consistent with it). The page must contain, in order: **Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.** All user-facing copy must be written in **English**, realistic and cohesive — no lorem ipsum.\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n* **No Inline CSS:** The `style=\"...\"` attribute is forbidden anywhere in the HTML.\n* **Class\u002FID Selectors Only:** All design properties, layout rules, and states must be targeted via class or ID selectors in `style.css`.\n* **Minimal HTML Modifications:** HTML must remain clean, semantic, and styling-agnostic — re-theming the site must require editing only the CSS file, never the markup.\n\n**1.2 CSS Variables (`var(--...)`) & Theme Tokens**\nAll visual tokens must live in `:root`:\n\n* **Colors:** `--primary: #6C3AED` (Base Purple), `--secondary: #2563EB` (Deep Blue), `--primary-light: #A78BFA` (Light Purple), `--secondary-light: #60A5FA` (Light Blue), `--accent-cyan: #06B6D4` (Highlight Cyan), `--accent-teal: #14B8A6` (Teal).\n* **Surfaces:** `--bg-primary: #0B0F1A` (Dark Background), `--bg-secondary: #131A2B` (elevated dark surface), `--glass-bg: rgba(255,255,255,0.05)`, `--glass-border: rgba(255,255,255,0.10)`.\n* **Text:** `--text-primary: #F1F5F9` (Text White), `--text-secondary: #94A3B8` (muted slate), `--text-success: #14B8A6`, `--text-error: #F87171`.\n* **Borders:** `--border-default: rgba(255,255,255,0.10)`, `--border-error: rgba(248,113,113,0.50)`, `--border-success: rgba(20,184,166,0.50)`.\n* **Theme Gradients & Glows:** `--gradient-primary: linear-gradient(135deg, #6C3AED 0%, #2563EB 100%)`, `--gradient-accent: linear-gradient(135deg, #06B6D4 0%, #14B8A6 100%)`, `--glow-purple: 0 0 30px rgba(108,58,237,0.5)`, `--glow-cyan: 0 0 30px rgba(6,182,212,0.3)`, `--text-glow: 0 0 20px rgba(108,58,237,0.5)`.\n* **Radius & Shadows:** `--radius-sm: 0.5rem`, `--radius-md: 0.75rem`, `--radius-lg: 1.5rem`, `--shadow-sm: 0 2px 8px rgba(0,0,0,0.35)`, `--shadow-md: 0 8px 24px rgba(0,0,0,0.45)`.\n* **Spacing & Transitions:** `--spacing-gap: 1.5rem`, `--transition-fast: 150ms`, `--transition-normal: 300ms`, `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`.\n* **Elevation\u002FStacking:** `--z-dropdown: 100`, `--z-modal: 1000`, `--z-toast: 1100` (plus any extras such as `--z-nav`, `--z-decorative`) to prevent overlap conflicts between layered components.\n* **Contrast Pairing:** Dark background tokens pair exclusively with light text tokens. Never use `--primary`\u002F`--secondary` as text color on dark backgrounds for readable copy — use `--primary-light`\u002F`--secondary-light` for colored text. If any near-white surface is ever introduced, use `#fefefe`, never `#ffffff`.\n\n**1.3 Mandatory Dark Mode (Dark-Only Theme)**\n* This theme is **full dark mode**: all `:root` tokens above ARE the dark palette (`#0B0F1A` background, `#F1F5F9` text). `prefers-color-scheme` must never switch the page to a light palette — it renders dark for every user.\n* Theming must remain 100% CSS-variable-driven so a future light theme could be added via a class override with zero HTML restructuring.\n* **Exception:** The theme specification mandates a dark-only experience (no light variant), so the visible theme toggle and localStorage persistence requirements are waived for this build — do not add a theme switcher.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n* Build all layout structures with **Flexbox** (`display: flex` \u002F Tailwind flex utilities).\n* **Default Alignment Rule:** Every flex container must default to `align-items: center` (`items-center`) unless an exception is explicitly justified in a CSS comment.\n* **Mobile-Friendly First:** All flex rows must collapse to columns at appropriate breakpoints; zero horizontal scrolling at any viewport from 320px upward; fluid sizing throughout.\n\n**1.5 Framework Default & Tailwind CSS Integration**\n* Use Tailwind CSS (CDN script acceptable) for layout utilities; define all custom components as reusable classes (`.btn`, `.card`, `.input-group`) in `@layer components` or `style.css`, always mapping back to the CSS variables above. Never hardcode a hex value in a utility where a token exists.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n* **Text:** Load **Inter** and **Plus Jakarta Sans** from Google Fonts via `\u003Clink>` tags; bind to `--font-base: 'Inter', 'Plus Jakarta Sans', sans-serif` (Plus Jakarta Sans for headings, Inter for body).\n* **Icons:** Use **Google Material Symbols (Rounded)** via the Google Fonts link — every icon rendered as `\u003Cspan class=\"material-symbols-rounded\">icon_name\u003C\u002Fspan>`. Raw inline SVGs and local icon files are forbidden for icons.\n* **Exception:** The theme's required feTurbulence noise texture is the single permitted SVG — it must be embedded exclusively as a CSS `background-image` data-URI (`data:image\u002Fsvg+xml,...`), never as inline `\u003Csvg>` markup in the HTML.\n\n---\n\n## 2. THEME VISUAL DIRECTION — \"SAAS SIGNATURE GRADIENT\"\n\n**2.1 Base & Mesh Background**\n* Page background: `#0B0F1A` with extremely smooth purple-to-blue mesh as the base: `background-image: radial-gradient(ellipse at 20% 50%, rgba(108,58,237,0.3) 0%, transparent 50%), radial-gradient(ellipse at 80% 20%, rgba(37,99,235,0.2) 0%, transparent 50%);`\n* Mesh-gradient **blobs** built from multiple overlapping radial-gradients at varying positions and colors (purple, blue, cyan, teal).\n\n**2.2 Floating Orbs & Blobs**\n* Create 3–5 decorative **orbs** — soft 3D spheres via `radial-gradient` with `filter: blur(60px–100px)` (typically `blur(80px)`), 300–600px in size, positioned inside a fixed, full-viewport background layer with `pointer-events: none`, `aria-hidden=\"true\"`, and a `z-index` below all content.\n* Animate drift with: `@keyframes float-orb { 0%,100% { transform: translate(0,0) } 50% { transform: translate(30px,-20px) } }` — slow durations (20s–40s) with staggered delays per orb for organic motion.\n* Edge fade on every orb\u002Fblob: `mask-image: radial-gradient(circle, black 40%, transparent 70%)` (include `-webkit-mask-image`) so opacity dissolves at the edges.\n* **Interactivity:** Add subtle pointer-parallax — on `pointermove`, the orb layer translates a few pixels toward\u002Faway from the cursor via JS transforms (requestAnimationFrame-throttled); fully disabled under `prefers-reduced-motion: reduce`.\n\n**2.3 Noise Texture**\n* Full-viewport fixed overlay using SVG `feTurbulence` with `baseFrequency=\"0.65\"` at **3–5% opacity**, implemented as a CSS data-URI background (per the 1.6 exception), `pointer-events: none`, `aria-hidden=\"true\"` — producing a grainy\u002Ffrosted texture over backgrounds and glass surfaces.\n\n**2.4 Glassmorphism**\n* All cards\u002Fpanels: `background: var(--glass-bg)` (rgba(255,255,255,0.05)), `backdrop-filter: blur(20px)` plus `-webkit-backdrop-filter`, 1px `var(--glass-border)`, `var(--radius-lg)` corners.\n\n**2.5 Simulated Neon Glow**\n* Key headings and gradient text: `text-shadow: 0 0 20px rgba(108,58,237,0.5)`.\n* Key interactive elements (primary buttons, featured pricing tier): `box-shadow: 0 0 30px rgba(6,182,212,0.3)`, intensifying on hover.\n* Glow is always decorative reinforcement — never the sole indicator of any state.\n\n**2.6 Visual Rhyme (Mandatory Cohesion)**\n* Repeat the same gradient family (purple→blue with cyan\u002Fteal accents) and the same curved shape language across the logo mark, buttons, card corners, icon containers, step connectors, and decorative elements.\n* Logo mark: built with CSS only (gradient rounded\u002Forb shape or a Material Symbol inside a gradient container) — no image files, no inline SVG.\n* Gradient text on hero headline keywords: `background-clip: text; -webkit-background-clip: text; color: transparent;` over `--gradient-primary`.\n\n**2.7 Reduced Motion**\n* Under `@media (prefers-reduced-motion: reduce)`: orbs freeze, parallax is disabled, and transitions\u002Fanimations are reduced to essentials.\n\n---\n\n## 3. COMPONENT DESIGN SPECIFICATIONS\n\n**3.1 Button Component**\n* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` — minimum touch target 44×44px. Variants: `.btn--primary` (gradient background, white text, cyan glow), `.btn--secondary` (glass background + border), `.btn--danger` (visually distinct red treatment, defined in the stylesheet).\n* **Hover:** brightness\u002Fshadow shift with intensified glow, `cursor: pointer`.\n* **Focus:** distinct focus ring via `outline`\u002F`box-shadow` using CSS variables, clearly visible on the dark background.\n* **Active\u002FPressed:** `transform: scale(0.97)`.\n* **Loading:** disables interactions, prevents double-clicks, renders a CSS spinner or animated Google Icon without distorting button dimensions.\n* **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n* **Success\u002FError:** temporary feedback styles driven by `--text-success` \u002F `--text-error`.\n\n**3.2 Card Component (Glass)**\n* **Default:** flexible Flexbox layout, `--glass-bg`, `--glass-border`, `--radius-lg`, subtle elevation.\n* **Hover:** `transform: translateY(-2px)` plus shadow\u002Fglow shift.\n* **Focus-within:** card border highlights when a child link\u002Fbutton receives focus.\n* **Loading (Skeleton):** shimmer animation class defined in CSS to prevent layout jumps.\n* **Empty State:** structured fallback layout with a Google Icon and clear guidance text (define the classes).\n\n**3.3 Form & Input Requirements** (newsletter form in footer; email capture inside the modal)\n* **States:** Empty, Focused (outline ring), Filled, Valid (success border + icon), Invalid (error border, error text, error icon), Disabled, Read-only.\n* **Structure:** flex container wrapping a label, input field, and a dedicated error feedback container with `aria-live=\"polite\"`.\n* Validation feedback must never rely on color alone — always pair icon + text.\n\n**3.4 FAQ Accordion**\n* Semantic trigger buttons with `aria-expanded` + `aria-controls`, fully keyboard operable (Enter\u002FSpace), chevron Material Symbol rotating on toggle, smooth CSS height transition, independent toggle per item.\n\n**3.5 Modal \u002F Popup** (opened by Final CTA and pricing \"Get started\" buttons)\n* **States:** Opening, Open, Loading, Success\u002FError, Closing — all animated via CSS transitions.\n* **UX Features:** centered flex container (`align-items: center`), blurred backdrop overlay, Material Symbol close button, keyboard focus trapping, close via `Esc` and overlay click, `role=\"dialog\"` + `aria-modal=\"true\"`, focus returned to the trigger on close. Success state shows a check icon with `--text-success`; error state uses `--text-error`.\n\n**3.6 Toast** (form\u002Fnewsletter feedback): stacked at `--z-toast`, inside an `aria-live` region, auto-dismissing, glass styling, success\u002Ferror variants.\n\n---\n\n## 4. PAGE STRUCTURE & REQUIRED SECTIONS\n\n**Global Chrome:** Fixed glass navbar (gradient logo mark + wordmark, anchor links, CTA button) collapsing to a keyboard-accessible mobile menu (`aria-expanded`, Material Symbol hamburger); smooth anchor scrolling via CSS `scroll-behavior: smooth` (respecting reduced motion); skip-to-content link; fixed decorative background layer (orbs, mesh, noise) behind all content.\n\n* **4.1 Hero:** badge pill, H1 with gradient-text keyword + neon text glow, subheadline, two CTAs (primary \"Start free trial\" → opens modal; glass secondary \"See how it works\" → smooth scroll), social-proof row, and a glassmorphism product mockup panel built purely with CSS shapes (bars, mini-cards) — no external image assets anywhere on the page.\n* **4.2 Features:** exactly 3 glass cards — Material Symbol icon in a gradient-tinted rounded container, H3 title, description; hover lift per 3.2; flex row → column on mobile.\n* **4.3 How It Works:** exactly 3 steps with gradient numerals (01\u002F02\u002F03), icon, title, text, connected by a curved gradient line on desktop (visual rhyme); vertical stack on mobile.\n* **4.4 Testimonials:** 3 glass cards with quote, 5-star rating via Material Symbols, avatar as a gradient circle with initials (CSS only), name, and role.\n* **4.5 Pricing:** exactly 3 tiers (Starter, Pro, Enterprise) with check-icon feature lists and per-tier CTAs; middle tier featured (\"Most popular\" badge, gradient border, glow, slight elevation); monthly\u002Fyearly billing toggle with `aria-pressed`, animated price updates announced via `aria-live`.\n* **4.6 FAQ:** 5–6 realistic English Q&As using the 3.4 accordion.\n* **4.7 Final CTA:** full-width glass panel with gradient border and glow, headline, subcopy, primary CTA opening the modal.\n* **4.8 Footer:** logo + tagline, secondary link columns (Product, Company, Resources, Legal), newsletter form per 3.3 with toast feedback, social icons (Material Symbols), and a copyright bar. Secondary links may use `href=\"#\"` for non-existent pages but must show full hover\u002Ffocus states.\n\n---\n\n## 5. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by Default:** fluid sizing and breakpoints with zero horizontal overflow from 320px up.\n* **Smooth Animations:** `transition: var(--transition-normal)` on all state changes, respecting `prefers-reduced-motion`.\n* **Accessibility (a11y):** WCAG-sufficient contrast against `#0B0F1A` in every component; never rely solely on color to communicate state; semantic HTML5 (`header`, `nav`, `main`, `section`, `footer`, strict `h1`–`h3` hierarchy); correct ARIA roles\u002Flabels on all custom widgets (accordion, modal, mobile menu, billing toggle); logical DOM\u002Ffocus order; full keyboard operability; `aria-live` regions for all dynamic feedback (form errors, toasts, pricing changes, loading states).\n* **Mandatory Visual Feedback:** every click, hover, and submission must trigger a visible state change.\n* **Destructive Actions:** `.btn-danger` must be visually distinct on the dark theme (defined even if unused in this page).\n\n---\n\n## 6. DELIVERABLE & OUTPUT FORMAT\n\n* **File Structure:** Separate, complete `index.html`, `style.css`, and `script.js`. No inline `\u003Cscript>` blocks beyond one deferred `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>` entry point; no inline CSS; no inline SVG markup (noise data-URI lives in CSS only).\n* **Naming Convention:** One consistent convention — **BEM** (`.card`, `.card__title`, `.card--featured`) for all custom components, with Tailwind utilities reserved for layout only. Never mix conventions.\n* **No Unrequested Placeholders:** No lorem ipsum or Latin filler — write real, cohesive English copy for the fictional product; `placeholder` attributes are allowed only as genuine input affordances.\n* **Output:** Deliver the complete final code for all three files in a single response, fully functional when opened directly in a browser, on the first attempt.\n",1791954989463]