Problem Solution

problem_solution frames the before state and the after state as two balanced cards.

When to Use

Use it when visitors need to recognize the current pain before understanding the proposed solution.

{{ problem_solution(title="From chaos to system", problem_title="Before", solution_title="After") }}

Positioning

Make the contrast explicit without introducing decorative color.

Every landing page invents its own spacing and component structure.

Repeated one-off sections

Unclear mobile behavior

A consistent shortcode catalog gives teams clean defaults.

Shared section rhythm

Reusable proof patterns

Parameter	Description
`container`	Inner content width.
`eyebrow`	Small uppercase label above the heading.
`title`	Section heading.
`description`	Supporting copy.
`problem_title`	Problem card title.
`problem_desc`	Problem card description.
`problem_N`	Problem points, up to 4.
`solution_title`	Solution card title.
`solution_desc`	Solution card description.
`solution_N`	Solution points, up to 4.
`bg`	Full-width section background token.
`class`	Additional CSS classes on the outer section.