Feature 180 - With and without comparison columns

Pro

Centered pitch with outline badge and intro copy, then two parallel columns listing pain points versus wins, each row pairing an outline icon with a short line and contrasting surface treatment.

Shadcn Feature 180 block

Component Data

  • ID:feature180
  • Access:pro
  • Created:Feb 20, 2025
  • Type:block

Feature 180 block design & features

Feature180 is a classic before-and-after story block implemented with shadcn/ui Badge styling and icon rows. The stack opens with a centered outline label, a large mission headline, and a muted supporting sentence. The lower half presents two equal-width columns on wide layouts. The left column signals the negative path with a red-toned cancel icon beside a title, then a simple bordered panel filled with vertically spaced list rows. Each row leads with a small outline icon and a single sentence pain point. The right column mirrors the structure but swaps in a success check icon, wraps the list in a gradient hairline frame, and uses standard body text color for the winning bullets.

Visual contrast leans on chrome rather than photography: flat bordered box versus gradient-trimmed inset card, cool icon tints against warm success accents, tight vertical rhythm so both columns feel comparably tall. No motion or charts appear; persuasion is entirely typographic and symbolic.

The pattern is familiar sales narrative geometry with clear affordances for renaming the two scenarios and rewriting every bullet. Complexity is low to moderate: four bullet slots per side, eight icons total, predictable hierarchy. Strength is clarity; originality comes from disciplined pairing of color cues and symmetrical layout.

Layouts stack vertically on narrow screens while preserving headings above each comparison list so the story still reads sequentially without side-by-side scanning.