--- name: landing-page-creator description: > Build high-converting affiliate landing pages as single self-contained HTML files. Triggers on: "create a landing page for", "build a landing page", "product landing page", "affiliate landing page", "comparison page for", "vs page", "single product page", "conversion page", "sales page for affiliate", "landing page HTML", "build me a page for", "create a page to promote [product]", "I need a landing page", "make a page for [product]". license: MIT version: "1.0.0" tags: ["affiliate-marketing", "landing-pages", "conversion", "offers", "html", "tailwind"] compatibility: "Claude Code, ChatGPT, Gemini CLI, Cursor, Windsurf, OpenClaw, any AI agent" metadata: author: affitor version: "1.0" stage: S4-Landing --- # Landing Page Creator Build dedicated affiliate landing pages that convert. Output is a single self-contained HTML file with inline CSS — no build step, no dependencies, mobile-responsive, deployable anywhere. Supports two page types: single product spotlight and multi-product comparison. ## Stage S4: Landing — Higher conversion than blog links because the entire page is designed around one goal: convert a visitor into a click. Landing pages are the bridge between traffic sources (social, email, ads) and the affiliate product. ## When to Use - User wants a dedicated page to promote an affiliate product - User wants a comparison/vs page for 2-3 competing products - User has a product from S1 (affiliate-program-search) and needs a conversion page - User says anything like "landing page", "sales page", "product page", "comparison page", "vs page" - User wants to promote an affiliate product beyond blog content - User needs a deployable HTML page for an affiliate campaign ## Input Schema ```yaml product: # REQUIRED — the affiliate product to feature name: string # Product name (e.g., "HeyGen") description: string # What it does reward_value: string # Commission (e.g., "30% recurring") url: string # Affiliate link URL reward_type: string # "recurring" | "one-time" | "tiered" cookie_days: number # Cookie duration tags: string[] # e.g., ["ai", "video", "saas"] page_type: string # OPTIONAL — "single" | "comparison" # Default: "single" compare_with: object[] # OPTIONAL — products for comparison page - name: string # Competitor name description: string # Brief description url: string # URL (non-affiliate OK) pricing: string # Starting price angle: string # OPTIONAL — marketing angle / hook # e.g., "fastest", "cheapest", "best for beginners" # Default: auto-generated from product strengths color_scheme: string # OPTIONAL — "blue" | "green" | "purple" | "orange" | "dark" | hex code # Default: "blue" (#2563eb) ``` **Chaining from S1**: If `affiliate-program-search` was run earlier in the conversation, automatically pick up `recommended_program` from its output as the `product` input. The field mapping: - `recommended_program.name` → `product.name` - `recommended_program.description` → `product.description` - `recommended_program.reward_value` → `product.reward_value` - `recommended_program.url` → `product.url` - `recommended_program.reward_type` → `product.reward_type` - `recommended_program.cookie_days` → `product.cookie_days` - `recommended_program.tags` → `product.tags` **Chaining from S3**: If `affiliate-blog-builder` was run, use `products_featured` for the comparison page's `compare_with` list. If the user says "now make a landing page for it" after running S1 — use the recommended program. No need to ask again. ## Workflow ### Step 1: Gather Product Info If `product` data is available from S1 chaining or user input, use it directly. Otherwise: 1. Use `web_search` to research the product: `"[product name] features pricing review"` 2. Gather: name, description, key features (3-6), pricing, target audience, top competitors 3. If `page_type = comparison` and `compare_with` is empty: - Search: `"best alternatives to [product.name]" OR "[product.name] vs"` - Find 1-2 competitors with pricing, features, and positioning ### Step 2: Plan Page Structure Read `references/conversion-principles.md` for AIDA framework, CTA placement, and design rules. Choose `page_type` if not specified: - If user mentions "vs", "compare", "comparison", or provides `compare_with` → `comparison` - Otherwise → `single` Plan the page sections based on type: **Single product:** 1. FTC disclosure (above fold) 2. Hero: headline + subtitle + primary CTA + trust signal 3. Trust bar: rating, user count, press mention 4. Features: 3-column grid (3-6 features as benefits) 5. Pricing: price + CTA 6. Testimonial: one strong quote 7. Who is this for: audience list 8. FAQ: 4-6 questions addressing objections 9. Final CTA: headline + CTA button 10. Footer: Affitor branding **Comparison:** 1. FTC disclosure (above fold) 2. Hero: "[A] vs [B]" headline + subtitle 3. Comparison table: feature rows with winner highlights 4. Individual product sections: description + pros/cons + CTA each 5. Winner callout: clear recommendation with reasoning 6. FAQ: 4-6 comparison-specific questions 7. Dual CTA: buttons for top 2 products 8. Footer: Affitor branding Map the user's `color_scheme` to CSS custom properties: - `blue` → `--color-primary: #2563eb` - `green` → `--color-primary: #059669` - `purple` → `--color-primary: #7c3aed` - `orange` → `--color-primary: #ea580c` - `dark` → `--color-primary: #3b82f6; --color-bg: #0f172a; --color-surface: #1e293b; --color-text: #f1f5f9` - Hex code → use directly as `--color-primary` ### Step 3: Write Full HTML Read the matching template from `templates/`: - `templates/single-product.html` for `page_type = single` - `templates/comparison.html` for `page_type = comparison` Use the template as a structural guide. Write a complete HTML file with: **Content rules:** - All CSS must be inline (in a `