Page study / StrategyComics
StrategyComics — neutral composition
An illustrated narrative with alternating explanation sections, a product tour, testimonials and FAQs.
View source site ↗Working layout preview
Default Artist typography, spacing and components. Gray blocks mark image areas; copy is abbreviated for layout review. This is a structural interpretation, not a replica or replacement of the source site. Gaps are labeled below and inside the preview.
The iframe has a real viewport: responsive rules and sticky behavior run inside it. Wider presets can be panned horizontally in the preview area.
Section-by-section coverage
Covered = existing component composition. Partial = layout exists, but some behavior does not. Gap = useful missing capability. Art direction = site-specific treatment. A simplified preview does not count as full coverage.
| Section | Artist structure | Coverage | Decision |
|---|---|---|---|
| Make marketing buyers love | Exhibit → Content.Is-Solo + Video-Player + logo row | Art direction | Screenshot shows art above centered copy, then a large video poster. Keep that hierarchy; the neutral preview marks the video area rather than substituting a generic button. |
| Loved by teams like yours | Marquee → logo slots | Covered | Use the narrow logo strip shown under the hero/video. Logo sizing remains art direction. |
| Marketing is too important to be this hard | Columns → Figure + Content → Stats | Covered | Use existing Columns and Stats. Handwritten arrows are site-specific artwork. Sample values in this preview are not source claims. |
| Let marketing be simple | Columns.Is-Reversed → Figure + Content → Checklist | Covered | Fits directly. The list should wrap naturally rather than copying hard line breaks from the mockup. |
| No geniuses allowed | Content.Is-Solo + Grid.Grid-3 → small Cards | Covered | Full-section artwork/atmosphere behind centered icon/title/copy and three enclosed cards. Use an immersive Exhibit, not a plain isolated grid. |
| Meet StrategyComics | Track → Card → Content + Figure | Partial | Track covers horizontal browsing. Accordion, Tabs and Selector are available for expandable internal insights; this preview still shows static card descriptions pending the exact product-tour content. |
| They say the nicest things | Content.Is-Solo + three proof lanes | Partial | Preserve the dense three-row proof arrangement; this preview uses independently moving lanes. Screenshot alone does not establish source motion, so animation direction/timing requires confirmation. |
| See how you can make marketing buyers love | Exhibit.Is-Immersive.Is-Bottom-Center → Content + Buttons | Covered | Links to a diagnostic/watch experience are application destinations, not missing page layout. |
| Frequently asked questions | Content + Accordion | Covered | Native-first animated Accordion is implemented, including reversible height changes and reduced motion. |
| Behind StrategyComics | Card.Is-Padded.Exhibit.Is-Immersive → Content | Covered | Screenshot has a compact artwork-backed mission panel, not a standalone side-by-side section. |
Recipe & implementation
Recipe: _data/artist_compositions.yml, entry strategycomics. Section renderer: _includes/artist/composition-section.html. Layouts use artist.css; preview-only placeholder and annotation styling is in code-compositions.css.