Product Overview
Figma Component: 22867-861370
GitHub Issue: #73
Comprehensive product overview section displaying title, expandable description, anchor navigation cards, selling points with images, what's included list, and gallery preview. Desktop layout uses two-column structure.
Functional Documentation
| Role | Scenario | Description |
|---|---|---|
| system | Display product title and description | Shows large heading and expandable description text with "Show more" button to reveal full content. |
| system | Display anchor navigation cards | Shows 3 cards with large numbers, descriptive text, and yellow scroll-down icons. Cards link to sections further down the page. |
| system | Display selling points section | Shows section title and list of feature cards. Each card has image, bold title, and description text. |
| system | Display what's included list | Shows section title and list of included items with green checkmarks. Extra/add-on items marked with orange plus icon and underlined text (clickable). |
| system | Display gallery section | Shows section title and gallery preview component with image grid and optional video embed. |
| editor | Add product title and description | Set main product title. Add description text that can be expanded/collapsed. |
| editor | Configure anchor cards | Set number, label text, and target section ID for each navigation card. |
| editor | Add selling points | Set section title. Add feature cards with image, title, and description. Cards can be reordered. |
| editor | Configure included items | Set section title. Add included items (with checkmarks) and optional extra items (with plus icons and underline). |
| editor | Add gallery | Set gallery section title. Choose gallery images and optional video. |
| user | Expand description | Click "Show more" button to expand full description text. |
| user | Navigate via anchor cards | Click anchor card to scroll to corresponding section on page. |
| user | View gallery | Click gallery preview to open full gallery lightbox or video player. |
Properties
Responsive (Variant)
| Value | Example |
|---|---|
| Desktop |  |
| Mobile |  |