Product Showcase Page

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:

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]'s [feature], they [outcome] in [timeframe]."

Pricing table (comparison layout):

• Column 1: this product (highlighted as "Recommended")
• Column 2: Competitor A
• Column 3: Competitor B
• Rows: 8-10 comparison features
• Include: "Free trial" row and "Cancel anytime" signal

Testimonials (2-3 cards): Write realistic representative testimonials if real ones unavailable. Each must have:

• A specific, measurable result ("Saved 6 hours a week", "ROI of 340%")
• Name + job title + company type
• Do NOT use made-up full names and companies — use "[First name], [Job title] at a [company type]" format

FAQ items (6-10): Cover the real objections:

• Pricing and cancellation questions
• Technical requirements
• Data security / privacy
• How it compares to [main competitor]
• Onboarding time
• Customer support availability

Required elements:

• FTC disclosure (small, above hero)
• All affiliate links with target="_blank" rel="noopener"
• <meta name="viewport"> and basic SEO meta tags
• <meta name="robots" content="noindex"> (product pages are not for organic search)
• "Built with Affiliate Skills by Affitor" footer from shared/references/affitor-branding.md