/product-showcase-page

name: product-showcase-page
description: >
  Build a single-product deep-dive showcase page as a self-contained HTML file.
  Triggers on: "build a product showcase page", "deep dive landing page for [product]",
  "create a product spotlight page", "product feature page", "single product page",
  "detailed page about [product]", "build a page showing everything about [product]",
  "create a long-form product page", "build a sales page for [product]",
  "product deep dive page", "make a feature breakdown page for [product]".
license: MIT
version: "1.0.0"
tags: ["affiliate-marketing", "landing-pages", "conversion", "offers", "showcase", "product-page"]
compatibility: "Claude Code, ChatGPT, Gemini CLI, Cursor, Windsurf, OpenClaw, any AI agent"
metadata:
  author: affitor
  version: "1.0"
  stage: S4-Landing

Product Showcase Page

Build a long-form, single-product showcase page as a self-contained HTML file. Goes deeper than a standard landing page — includes a full hero section, feature breakdown with icons, use case demonstrations, testimonials, a pricing comparison table, FAQ with accordions, and multiple high-intent affiliate CTAs. Designed for pre-sold traffic (readers who came from a review or comparison) and wants to make the final conversion push.

When to Use

• User wants a dedicated page for one product that covers everything a buyer needs to know
• User says "showcase page", "product spotlight", "deep-dive page", "feature breakdown page"
• User wants a page longer than a standard landing page — for high-ticket products needing more persuasion
• User is sending warm traffic (from a blog post or email) and wants to close the sale
• User wants a page that can double as a product review in page form

Workflow

Step 1: Gather Product Data

If `product` data is available from S1 or prior conversation, use it directly.

Otherwise, use `web_search` to research the product: 1. **Features**: `"[product name] features"` — gather 6-12 distinct capabilities 2. **Pricing**: `"[product name] pricing"` — all tiers with feature differences 3. **Use cases**: `"[product name] use cases"` OR `"[product name] examples"` — concrete applications 4. **Testimonials**: `"[product name] reviews"` on G2/Capterra — find real sentiment (do not copy verbatim — paraphrase or create realistic representative examples) 5. **Competitors**: `"[product name] vs"` — 2-3 competitors for the pricing comparison 6. **FAQ**: `"[product name] questions"` OR check product's own FAQ page

Organize the research into these buckets:

• Core features (6-12, each with a one-sentence benefit statement)
• Use cases (3-5, each framed as a specific problem solved)
• Pricing tiers (2-4 tiers with included features and price)
• Comparison data (the 5-8 dimensions where this product wins vs. competitors)
• Social proof (ratings, user counts, company names using it)
• FAQ answers (6-10 questions)

Step 2: Plan the Page Architecture

Read `references/conversion-principles.md` for long-form page principles.

A product showcase page is longer than a standard landing page — it must justify the length with value at every section. Plan each section:

1. **FTC Disclosure** — small, above hero 2. **Hero** — headline + sub-headline + primary CTA + hero visual + trust bar 3. **Problem Statement** — 2-3 sentences establishing the pain the product solves 4. **Product Overview** — 3-sentence description + key stats 5. **Features Grid** — 6-12 features with icons (pure CSS) + headline + description 6. **Use Cases** — 3-5 real scenarios (who uses it, how, outcome) 7. **Social Proof Bar** — logos, ratings, subscriber counts 8. **Pricing Comparison** — table comparing this product's tiers against 2 competitors 9. **Testimonials** — 2-3 cards with quote, name, role 10. **FAQ Accordion** — 6-10 questions with JS-powered expand/collapse 11. **Final CTA Section** — strong headline + benefits recap + primary CTA button 12. **Footer** — FTC disclosure full text, Affitor attribution

**CTA placement rules:**

• Hero: primary CTA (always visible)
• After Features Grid: secondary CTA
• After Pricing Table: high-intent CTA (primed by seeing pricing)
• After Testimonials: social-proof-backed CTA
• Final CTA section: closing CTA
• Total: 4-5 CTAs per page

**Angle selection** — choose based on what the research shows: | Angle | Headline formula | |---|---| | Best in category | "The [Category] Tool That Actually Works" | | Price/value | "Get [Competitor]-Level Results for Half the Price" | | Speed | "From Zero to [Outcome] in [Timeframe]" | | Simplicity | "The [Category] Tool That Doesn't Require a Manual" | | Results-focused | "[Specific Outcome]: How [Product] Delivers Where Others Don't" |

Step 3: Write the Full HTML

Build a complete self-contained HTML file. This page is longer than standard (~150-200 lines of HTML) and should feel like a high-quality product page.

**Design specifications:**

• All CSS inline in a `<style>` block — no external stylesheets
• System font stack — no Google Fonts
• Mobile-first responsive (375px base, 768px, 1024px breakpoints)
• Feature icons: pure CSS geometric shapes or Unicode symbols — no icon libraries
• FAQ accordion: minimal JavaScript for expand/collapse, gracefully degrades without JS
• Color scheme from input or default blue (`#2563eb`) with appropriate complementary tones
• Section alternating backgrounds for visual rhythm (white / light gray / white)

**Copy requirements per section:**

*Hero Headline* (6-12 words, outcome-focused):

• Avoid: "Welcome to [Product]", "[Product] is the best...", generic superlatives
• Use: specific outcomes, target audience callouts, contrarian angles

*Feature headlines* (each feature gets a benefit headline, not a feature name):

• Not: "Advanced Reporting Dashboard"
• Yes: "See Exactly What's Working at a Glance"

*Use case structure* (one per scenario):

<!-- The problem → The solution → The result pattern -->
"[Job title] needed to [task]. With [Product