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]".
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.
If product data is available from S1 or prior conversation, use it directly.
Otherwise, use to research the product:
web_search"[product name] features" — gather 6-12 distinct capabilities"[product name] pricing" — all tiers with feature differences"[product name] use cases" OR "[product name] examples" — concrete applications"[product name] reviews" on G2/Capterra — find real sentiment (do not copy verbatim — paraphrase or create realistic representative examples)"[product name] vs" — 2-3 competitors for the pricing comparison"[product name] questions" OR check product's own FAQ pageOrganize the research into these buckets:
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:
CTA placement rules:
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" |
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:
<style> block — no external stylesheets#2563eb) with appropriate complementary tonesCopy requirements per section:
Hero Headline (6-12 words, outcome-focused):
Feature headlines (each feature gets a benefit headline, not a feature name):
Use case structure (one per scenario):
<!-- The problem → The solution → The result pattern -->
"[Job title] needed to [task]. With [Product]'s [feature], they [outcome] in [timeframe]."
Pricing table (comparison layout):
Testimonials (2-3 cards): Write realistic representative testimonials if real ones unavailable. Each must have:
FAQ items (6-10): Cover the real objections:
Required elements:
target="_blank" rel="noopener"<meta name="viewport"> and basic SEO meta tags<meta name="robots" content="noindex"> (product pages are not for organic search)shared/references/affitor-branding.mdPart 1: Page Summary
---
PRODUCT SHOWCASE PAGE
---
Product: [name]
Angle: [marketing angle used]
Headline: [hero headline]
Sections: [list all sections in order]
CTAs: [count and placement]
Color: [color scheme]
Features covered: [N]
FAQ items: [N]
---
Part 2: Complete HTML
Full file in a fenced code block. Save as [product-slug]-showcase.html.
Part 3: Deploy Instructions
---
DEPLOY
---
1. Save as `[product-slug]-showcase.html`
2. Preview: open in any browser — no server needed
3. Customize: swap testimonial details, add real screenshots, update pricing
4. Deploy: Netlify Drop / Vercel / GitHub Pages
5. Track: Add UTM parameters to your traffic sources targeting this page
e.g., ?utm_source=email&utm_medium=newsletter&utm_campaign=[product]
---