Product Detail

The most content-rich page type. A 12-section long-form sales page that combines product hero with pricing sidebar, social proof, feature comparison, and multiple CTAs.

Section Flow

1

Breadcrumb

Shop / Category / Product Name

2

Product Hero

2-column grid: title, meta badges, description + sticky pricing sidebar

3

Problem Grid

2-column cards describing problems the product solves

4

Transform Grid

Before/after transformation outcomes in cards

5

Modules Accordion

Expandable course modules with numbered badges

6

Evidence Section

Research citations and evidence-based backing

7

Audience Section

"Who this is for" with bullet-point audience segments

8

Comparison Table

Feature comparison vs. alternatives

9

What's Included

Grid of included items with checkmark icons

10

FAQ Accordion

Common questions with expand/collapse answers

11

Testimonials

Client testimonial cards with avatar and role

12

CTA Band

Full-width closing call to action with purchase button

Key Components

Breadcrumb

Shop/Workbooks/DBT Skills Workbook

Product Hero

DBT Skills Workbook

WorkbookPDF120 pages

Comprehensive workbook covering all four DBT skill modules with exercises, worksheets, and tracking tools for clinical or self-guided use.

$47

One-time purchase

Add to Cart

30-day money-back guarantee

Problem / Transform Grids

The Problem

Overwhelming emotions without clear strategies for regulation

The Transform

Practical DBT skills for real-time emotional management

CTA Band

Start Your DBT Journey Today

Join 2,000+ practitioners who trust our evidence-based materials.

Purchase for $47

CSS

css

/* Product Detail Page Layout */
.product-detail {
  /* 1. Breadcrumb */
  /* 2. Product Hero (2-col: content + pricing sidebar) */
  /* 3. Problem Grid */
  /* 4. Transform Grid */
  /* 5. Modules Accordion */
  /* 6. Evidence / Research */
  /* 7. Audience Section */
  /* 8. Comparison Table */
  /* 9. What's Included */
  /* 10. FAQ Accordion */
  /* 11. Testimonials */
  /* 12. CTA Band */
}

/* Breadcrumb */
.breadcrumb {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 32px;
}
.breadcrumb a {
  color: var(--text-muted);
  text-decoration: none;
}
.breadcrumb a:hover { color: #1db954; }
.breadcrumb .separator { color: var(--border); }

/* Pricing Sidebar */
.pricing-sidebar {
  background: #111113;
  border: 1px solid #27272a;
  border-radius: 16px;
  padding: 32px;
  position: sticky;
  top: 100px;
}