Proposed cells (tune during build)
- Anchor (large): the existing
juxtapose of two sandboxes (light/dark profile card) — the only live iframes. - Plan chart:
{% aggregate type="work,bug,spec,decision,milestone" group="status" layout="chart" %} — our own roadmap, live (WORK-349). - Map: a 2-pin
map in a cell. - Stat (small, tinted): an
aggregate count ("100+ runes"). - Showcase bleed (wide): a
mockup (static screenshot) in a showcase, bleeding past the tile corner. - Code/diagram (small): a compact
codegroup or diagram. - Pullquote (small, tinted dark): the existing testimonial quote.
Acceptance Criteria
- The index composability section is a
bento grid authored with explicit {% bento-cell %} cells (exercises WORK-347), with mixed sizes and a coherent magazine rhythm. - One tile charts the real plan roadmap via
aggregate layout="chart" (WORK-349). - At least one tile uses showcase bleed and at least two use per-cell tint (the SPEC-085 signature compositions).
- Live
sandbox iframes are limited (anchor cell only; the showcase tile uses a static image) to keep the landing page fast. - The section renders correctly in light and dark mode and at mobile widths; no layout/overflow regressions.
- The grid is referenced as the hero example from the Compositions category (WORK-346).
Approach
Author as site content in site/content/index.md, replacing the current {% feature %} composability block. Depends on the full bento substrate and the aggregate chart layout landing first. Treat it as the acceptance test for the whole composition/bento workstream.
Dependencies
- Bento substrate: WORK-345, WORK-347, WORK-348
- Media-zone selector: WORK-339
- Plan chart: WORK-349
References
site/content/index.md (current feature/juxtapose composability section)- SPEC-085, WORK-346