[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-105-Zapier-Warm-Automation":3},"# CODING AGENT PROMPT — \"ZAPIER WARM AUTOMATION\" LANDING PAGE\n\n**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready, single-page marketing site for a workflow-automation SaaS — in one attempt, with no follow-up questions. Category: Corporate & SaaS. Tone: professional, warm, trustworthy.\n\n**Page Sections (in order):** Navigation, 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* **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 a dedicated `style.css` file.\n* **Minimal HTML Modifications:** HTML must remain clean, semantic, and styling-agnostic — changing the site's look must only require editing `style.css`, never the markup.\n\n### 1.2 CSS Variables & Theme Tokens\nStore every visual token in `:root` (and theme classes). Required tokens:\n\n```css\n:root {\n  \u002F* Color — Light (primary experience) *\u002F\n  --primary: #ff4f00;          \u002F* Zapier Orange — CTAs, active tab underline, accents *\u002F\n  --primary-hover: #e64700;    \u002F* darkened orange for hover\u002Factive *\u002F\n  --secondary: #201515;        \u002F* Warm Black *\u002F\n  --bg-primary: #fffefb;       \u002F* Warm Cream canvas — never #ffffff *\u002F\n  --bg-secondary: #eceae3;     \u002F* Light Sand *\u002F\n  --bg-tertiary: #36342e;      \u002F* Charcoal — inverted bands (Final CTA, Footer) *\u002F\n  --text-primary: #201515;     \u002F* Warm Black text *\u002F\n  --text-secondary: #36342e;   \u002F* Charcoal body text *\u002F\n  --text-muted: #939084;       \u002F* Warm Gray — captions, meta *\u002F\n  --text-on-dark: #fffefb;     \u002F* cream text on dark bands *\u002F\n  --border-default: #c5c0b1;   \u002F* Sand — the primary structural element *\u002F\n  --border-strong: #939084;\n  --text-success: #1a7f37;  --text-error: #b3261e;\n  --border-success: #1a7f37; --border-error: #b3261e;\n\n  \u002F* Radius — theme-specific mapping *\u002F\n  --radius-sm: 4px;    \u002F* orange primary CTA *\u002F\n  --radius-md: 8px;    \u002F* dark\u002Foutline buttons, cards, panels *\u002F\n  --radius-lg: 12px;   \u002F* large panels *\u002F\n  --radius-pill: 20px; \u002F* pills, tags, badges *\u002F\n\n  \u002F* Shadows — defined but used sparingly (border-forward design) *\u002F\n  --shadow-sm: 0 1px 2px rgba(32, 21, 21, 0.06);\n  --shadow-md: 0 4px 12px rgba(32, 21, 21, 0.10);\n\n  \u002F* Spacing, motion, elevation *\u002F\n  --spacing-gap: 1.5rem;\n  --transition-fast: 150ms; --transition-normal: 250ms;\n  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);\n  --z-dropdown: 100; --z-modal: 1000; --z-toast: 1100;\n\n  \u002F* Typography *\u002F\n  --font-base: 'Inter', sans-serif;\n  --font-display: 'Archivo', sans-serif;   \u002F* substitutes Degular Display *\u002F\n  --font-serif: 'Newsreader', serif;       \u002F* substitutes GT Alpina *\u002F\n}\n```\n\n* **Contrast Pairing:** Every light background token must pair with a dark text token and every dark background token with a light text token — enforce this in Light AND Dark themes.\n* **No Pure White:** The canvas is warm cream `#fffefb` (unbleached-paper feel); where a near-white is needed, use `#fefefe`, never `#ffffff`.\n\n### 1.3 Mandatory Dark Mode Support\n* **Implementation:** Define dark tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class on `\u003Chtml>`; all backgrounds, text, and border variables must swap seamlessly with zero HTML restructuring.\n* **Warm-Dark Exception Clause:** This theme recommends Light mode as the primary experience; Dark mode remains mandatory but must be a **warm dark variant** — backgrounds in Warm Black `#201515` \u002F Charcoal `#36342e`, cream text `#fffefb`, muted text in Mid Warm `#b5b2aa`, borders darkened to a warm umber (e.g., `#4a443c`), orange accent preserved (brighten to `#ff5c14` if contrast requires) — never cold blue-black.\n* **Persistence:** Store the user's choice in `localStorage`, fall back to `prefers-color-scheme` on first visit, and render a visible toggle (in the nav and repeated in the footer) with correct `aria-pressed` and `aria-label` state.\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n* **Default Alignment Rule:** Every flex container defaults to `align-items: center` unless an explicitly justified exception exists (document the exception in a CSS comment).\n* **Mobile-Friendly First:** All layouts must be responsive out of the box — multi-column rows collapse to single columns on small viewports; horizontal scrolling is forbidden at any breakpoint.\n\n### 1.5 Framework Default\n* Use Tailwind CSS **or** clean custom CSS driven by `@layer`\u002F`@apply` — either way, every utility must map back to the CSS variables above or to generic reusable classes (`.btn`, `.card`, `.input-group`). Do not hardcode hex values outside `:root`\u002Ftheme classes.\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n* **Text Fonts:** Load via Google Fonts `\u003Clink>`: **Inter** (400\u002F500\u002F600 — all functional UI), **Archivo** (500 — display headlines), **Newsreader** (300 + italic — editorial serif moments).\n* **Licensed-Font Exception Clause:** Degular Display and GT Alpina are licensed fonts unavailable on Google Fonts; substitute **Archivo** and **Newsreader** respectively as the closest free matches, and note the substitution in a CSS comment.\n* **Icons:** Use Google Material Symbols exclusively. Raw inline SVGs and local icon files are forbidden.\n\n---\n\n## 2. THEME DESIGN SYSTEM — \"ZAPIER WARM AUTOMATION\"\n\n### 2.1 Canvas & Mood\n* Warm cream canvas `#fffefb` like unbleached paper; near-black text `#201515` with a reddish undertone.\n* **Border-Forward:** 1px solid `#c5c0b1` sand borders are the primary structural element — cards, section dividers, nav, footer, step panels, pricing tiers all defined by borders, not shadows. Elevation is expressed through border-color shifts and Light Sand `#eceae3` background fills, not drop shadows.\n* Orange `#ff4f00` is reserved for primary CTAs, active tab underlines, small indicators, and icon accents — never for body text on cream.\n\n### 2.2 Typography Scale\n* **Hero headline:** `--font-display`, `clamp(40px, 7vw, 80px)`, weight 500, `line-height: 0.90` (ultra-compressed), `letter-spacing: -0.02em`, color `#201515`.\n* **Section headings:** display font, 32–48px, `line-height: 1.05`.\n* **Eyebrow labels:** Inter 600, 12–13px, uppercase, `letter-spacing: 0.08em`, Warm Gray or Orange.\n* **Body:** Inter 400\u002F500, 16–18px, `line-height: 1.6`, Charcoal `#36342e`.\n* **Editorial serif:** Newsreader 300 italic for testimonial pull-quotes and one FAQ intro line.\n\n### 2.3 Signature Details (Non-Negotiable)\n* **Tab underline:** active tabs and active nav links use `box-shadow: rgb(255, 79, 0) 0px -4px 0px 0px inset`.\n* **Button radii:** orange primary CTA = 4px; dark and outline buttons = 8px; pills\u002Fbadges\u002Ftags = 20px.\n* **Button padding:** generous `20px 24px` on all buttons.\n* **Pills:** Light Sand background, sand border, 20px radius, Inter 500 13px.\n\n---\n\n## 3. SECTION-BY-SECTION BUILD SPECIFICATION\n\n### 3.1 Navigation\nSticky header, cream background, 1px sand bottom border. Text wordmark logo, anchor links (Features, How It Works, Pricing, FAQ) using the inset-box-shadow orange underline on hover\u002Factive, theme toggle, and an orange \"Start free\" CTA. Mobile: Material Symbol `menu` button toggling an accessible disclosure panel.\n\n### 3.2 Hero\nEyebrow pill (\"Workflow automation\" style), display headline at 56–80px \u002F weight 500 \u002F line-height 0.90, Inter subcopy, and two CTAs: primary orange \"Start free\" + dark 8px-radius \"See how it works\". Include a border-forward visual panel: a bordered card mock of an automation workflow (trigger app → action app) built with Material Symbols, pills, and sand-bordered connector elements — pure CSS, no images. Add a muted trust line beneath.\n\n### 3.3 Features (3 Cards)\nThree-column layout (collapses to one column on mobile). Each card: cream or Light Sand background, 1px sand border, 8px radius, orange Material Symbol icon, display-font title, Inter body. Hover: border darkens to `--border-strong` + `transform: translateY(-2px)` (border-forward hover — no shadow change). `:focus-within` highlights the border when a child link is focused.\n\n### 3.4 How It Works (3 Steps) — Tab Pattern\nRender as an accessible tab component: three tabs (\"Pick a trigger\", \"Choose an action\", \"Automate it\") with the active tab marked by `box-shadow: rgb(255,79,0) 0px -4px 0px 0px inset`. Each tabpanel shows a numbered step, display-font title, Inter description, and a bordered visual mock. Implement `role=\"tablist\"` \u002F `role=\"tab\"` \u002F `role=\"tabpanel\"`, `aria-selected`, `aria-controls`, arrow-key navigation, and proper `tabindex` management in `script.js`.\n\n### 3.5 Testimonials\nThree bordered quote cards (or one featured + two supporting). Pull-quotes in Newsreader 300 italic; author name in Inter 600, role in Warm Gray; avatar as a CSS circle with initials (no external images). Border-forward styling consistent with Features cards.\n\n### 3.6 Pricing (3 Tiers)\nThree cards: Starter, Pro (featured — 2px orange border + \"Most popular\" pill), Team. Prices in the display font. Feature lists with orange Material Symbol `check_circle` icons. Featured tier gets the orange primary CTA; other tiers get dark or outline 8px CTAs. Add a Monthly\u002FAnnual segmented pill toggle (20px radius) with `aria-pressed` state that updates prices via JS and announces changes in an `aria-live=\"polite\"` region.\n\n### 3.7 FAQ\nAccordion of 5–6 realistic questions. Each item: 1px sand border, Inter 600 question, Material Symbol `expand_more` that rotates 180° when open. Buttons carry `aria-expanded` + `aria-controls`; panels animate open\u002Fclosed via CSS (grid-rows or max-height technique). State is never communicated by color alone — icon rotation and border emphasis accompany every change.\n\n### 3.8 Final CTA\nFull-width inverted band: Charcoal `#36342e` or Warm Black `#201515` background with cream `#fffefb` text (enforced contrast pairing). Display-font headline, Inter subcopy, orange 4px-radius CTA with cream text, plus a subtle secondary link. Top and bottom sand borders frame the band.\n\n### 3.9 Footer with Secondary Links\nTop sand border; brand column with wordmark + tagline, then link columns (Product, Company, Resources, Legal — realistic secondary links), a newsletter `.input-group` (see 4.3), social icons via Material Symbols, and a bottom legal bar. Links in Warm Gray; hover transitions to orange with the inset underline treatment.\n\n---\n\n## 4. COMPONENT DESIGN SPECIFICATIONS\n\n### 4.1 Buttons\nAll states via CSS classes, never inline styles:\n* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` padding `20px 24px`, minimum 44×44px touch target. Variants: `.btn--primary` (orange, 4px radius, cream text, Inter 600 at 18px to meet AA large-text contrast), `.btn--dark` (Warm Black, 8px radius, cream text), `.btn--outline` (transparent, sand border, 8px radius, charcoal text), `.btn--danger` (visually distinct in both themes).\n* **Hover:** darkened orange \u002F border-color shift with `cursor: pointer`.\n* **Focus:** distinct ring using CSS variables (`outline: 2px solid var(--primary); outline-offset: 2px;`) for keyboard navigation.\n* **Active:** `transform: scale(0.97)`.\n* **Loading:** disables interaction, prevents double-clicks, shows an animated Material Symbol `progress_activity` spinner without changing 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### 4.2 Cards\n* **Default:** flexible flexbox layout, 1px sand border, 8px radius, `--bg-secondary` or cream fill.\n* **Hover:** border darkens + `translateY(-2px)`.\n* **Focus-within:** border highlights when a child link\u002Fbutton receives focus.\n* **Loading (Skeleton):** define a shimmer animation class in CSS to prevent layout jumps.\n* **Empty State:** structured fallback with a Google Icon and clear guidance text.\n\n### 4.3 Forms & Inputs (Newsletter Signup)\n* **States:** Empty, Focused (orange outline ring), Filled, Valid (success border + `check_circle` icon), Invalid (error border, red text, `error` icon), Disabled, Read-only.\n* **Structure:** flex `.input-group` wrapping a label, input field, and a dedicated error-feedback container announced via `aria-live=\"polite\"`. Simulated submit: loading state → inline success message; never a browser-default alert.\n\n### 4.4 Modal \u002F Popup (Conditional)\nIf any modal is used (e.g., a demo modal triggered from the Hero), it must cover: Opening, Open, Loading, Success\u002FError, and Closing — all animated via CSS transitions; centered flex container (`align-items: center`), backdrop overlay, Material Symbol `close` button, keyboard focus trapping, and close via `Esc` or overlay click.\n\n---\n\n## 5. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by Default:** fluid `clamp()` sizing, standard breakpoints, zero horizontal overflow.\n* **Smooth Animations:** `transition: var(--transition-normal) var(--ease-standard)` on all state changes; fully respect `prefers-reduced-motion`.\n* **Accessibility (a11y):** WCAG AA contrast in Light and Dark modes; never rely on color alone to communicate state; semantic HTML5 elements; correct ARIA roles\u002Flabels on the tabs, accordion, billing toggle, and theme toggle; logical DOM\u002Ffocus order; full keyboard operability; `aria-live` regions for form feedback and price changes.\n* **Mandatory Visual Feedback:** every click, hover, and submission triggers a visible state change.\n* **Destructive Actions:** `.btn--danger` must be visually distinct in both themes.\n\n---\n\n## 6. DELIVERABLES & OUTPUT FORMAT\n\n* **File Structure:** Separate `index.html`, `style.css`, and `script.js`. No inline `\u003Cscript>` blocks beyond a single deferred entry-point reference; no inline styles anywhere.\n* **Naming Convention:** BEM throughout — `.nav__link`, `.card__title`, `.card--featured`, `.btn--primary`, `.faq__item`, `.pricing__toggle` — never mix conventions.\n* **Script Behavior (`script.js`):** theme toggle with `localStorage` persistence + `prefers-color-scheme` fallback; accessible tab component; FAQ accordion; pricing billing toggle; newsletter form validation with `aria-live` feedback; mobile nav disclosure. No other behavioral JS.\n* **Copy:** Write all user-facing copy in **English** — realistic, specific SaaS automation copy (headlines, feature titles, step descriptions, testimonial quotes, tier names\u002Fprices, FAQ Q&As, footer links). Lorem ipsum is forbidden.\n* **No Unrequested Placeholders:** Do not invent sections, badges, or components beyond this specification; placeholders are permitted only where content was genuinely unspecified.\n\nGenerate the final code immediately.\n",1791954981676]