Section · Product storytelling

Workflow feature sequence

A sequence of alternating workflow stories with distinct product visuals.

Component gallery

The section at every supported size.

Explains how a department-level solution works without reproducing a literal user-journey diagram.

Desktop1440 × 760
Live component specimen
Tablet900 × 680
Live component specimen
Mobile390 × 720
Live component specimen

Build recipe

Anatomy and content rules

Anatomy

  1. Workflow heading
  2. Two-line explanation
  3. Unique screenshot or diagram
  4. Optional callout or approval state

Content checklist

  • One operational moment per section
  • Do not duplicate the hero visual
  • Keep UI alignment credible
  • Use sourced values only

Composition guidance

Place it with compatible sections.

Works beside

Solution detail heroSystems & workforce explorer

Live usage

/case-studies

Source reference

app/components/SolutionDetailPage.tsxapp/components/SolutionWorkflowVisual.tsxapp/content/solutions.ts