product-showcase-page

What this skill does

# 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):
```html
<!-- 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`

### Step 4: Format Output

**Part 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]
---
```

## Input Schema

```yaml
product:                    # REQUIRED
  name: string
  description: string
  reward_value: string
  url: string               # Affiliate link
  reward_type: string
  cookie_days: number
  tags: string[]

angle: string               # OPTIONAL — marketing angle
                            # "best-in-class" | "price-value" | "speed" | "simplicity" | "results"
                            # Default: auto-detected from product strengths

compare_with: object[]      # OPTIONAL — competitors for pricing comparison table
  - name: string
    pricing: string         # Starting price
    url: string             # Non-affiliate URL

color_scheme: string        # OPTIONAL — "blue" | "green" | "purple" | "orange" | "dark" | hex
                            # Default: "blue"

target_audience: