Project Brief — Infographic Templates (Replicate Cover & Divider system)
0) Summary

Replace the current Infographic AI page with a Gallery + Picker flow:

Users browse infographic slides (single-slide items).

Each card has a checkbox; users can pick up to 4 slides (can be 1–4, price is always $14.99).

“Buy Now” creates a single checkout; on success, deliver an instant download (zip of the selected slides) compatible with PowerPoint, Keynote, Google Slides.

Reuse the exact billing/ownership/download patterns we shipped for Cover & Divider.

1) What to Reuse (from Cover & Divider)

Watermarked gallery (thumbnails and modal preview).

Filters: Top-tier industry (FIG, TMT, Healthcare/Pharma, General), sub-categories (list below), search, price range.

Creator upload → admin approve → active → gallery pipeline.

Stripe global single-price product flow + webhook to mark purchases paid.

Ownership → instant download endpoint and auto-download on return (polling).

My Purchases list and secure downloads.

2) New UX/Behavior (Infographics)

Page title: Infographic Templates.

Each card = one infographic slide (not a set).

Card UI: thumbnail, title, top-tier badge, subcat tag(s), formats text, price reference (“Included in $14.99 bundle”).

Checkbox on each card (top-left) → selection state persists while browsing.

Selection tray (sticky footer) shows: Selected: N / 4 + “Buy Now” button.

Limit: hard cap at 4 (disable additional checks; toast: “You can select up to 4 infographics”).

Clicking card body opens lightbox preview (same interactions as stock photos); check/uncheck remains available on the card.

Remove any custom design CTA (no AI prompt, no custom work).

3) Taxonomy / Filters

Top-tier industries (exact labels):

Financial Institutions Group (FIG)

Technology, Media, and Telecom (TMT)

Healthcare/Pharmaceutical

General

Sub-categories (exact labels):

Manufacturing

Healthcare

Finance & Insurance

Retail Trade

Information Technology (IT) / Information

Professional, Scientific, & Technical Services

Construction

Real Estate

Accommodation & Food Services

Transportation & Warehousing

Utilities

Agriculture, Forestry, Fishing, & Hunting

Public Administration

Entertainment

Filters UI:

Search (title)

Top-tier (select)

Category (simple style grouping: business/professional/creative/modern) — same as Covers

Sub-category (select from list above)

Price min/max (optional; keep for parity)

4) Data Model (mirror Covers with lighter fields)

Create a new table (or reuse existing table with a type='infographic' discriminator—your call). Minimal new table:

infographic_templates

id (PK)

creator_id (nullable)

title (text)

top_tier (enum: FIG, TMT, Healthcare/Pharma, General)

subcategories (text[]) – from the list above

category (text) – style: business|professional|creative|modern

price_cents (int) – store MSRP but UI charges via bundle price

currency (text, default “usd”)

preview_image_url (thumbnail)

Formats (one or more): pptx_url, keynote_url, gslides_url, or download_bundle_url (zip)

is_active (bool)

approval_status (pending|approved|rejected)

created_at (timestamp)

Purchases (bundle of selected items)

Reuse existing cover_purchases pattern or create a new infographic_purchases table:

id, user_id, status, download_url, stripe_session_id, stripe_payment_intent, amount_cents, currency, created_at

Add selected_ids (text[]) to store the 1–4 template IDs selected at checkout (or use a join table infographic_purchase_items (purchase_id, template_id)).

Note: File delivery should produce one ZIP containing the selected items (see §6).

5) API Requirements

Gallery/Filters

GET /api/infographics → list with filters: q, toptier, category, subcat, min, max.

GET /api/infographics/:id → detail for modal preview.

Creator Upload

POST /api/creator/infographics (auth)
Body: title, top_tier, subcategories[], category, preview_image_url, pptx_url?, keynote_url?, gslides_url?, download_bundle_url?
Stored as approval_status='pending', is_active=false.

Admin Approve

PATCH /api/admin/infographics/:id/activate { active: boolean } and/or update approval_status.

Checkout (Bundle of up to 4)

POST /api/infographics/checkout (auth)
Body: { selectedIds: string[] } (1–4 items)
Server:

Validate selected IDs exist and are approved & active.

Create pending purchase (record selected_ids).

Create Stripe Checkout for a single global price ($14.99) regardless of count (1–4).

success_url includes purchase=<id> (for auto-download polling).

Return { checkoutUrl, purchaseId }.

Ownership / Download

GET /api/infographics/purchases/:id (auth) → returns purchase row (status, download_url).

GET /api/infographics/:id/my-status is not needed per-item (ownership is for the bundle purchase). Optional to expose a “My purchases” list:

GET /api/me/infographic-purchases → list for Account page.

GET /api/infographics/purchases/:id/download (auth) → verifies paid, redirects to the signed ZIP URL (or streams).