Preview image. Unlock full-res
Split feature section pairing overlapping payment UI cards with savings copy and a black CTA on white.
Summary
A two-column Planned section showing layered payment-schedule UI mockups beside copy about instant savings and a "Start saving" button.
Visual description
White background. Left side: three overlapping rounded white cards with soft shadows. Foreground card shows a Payment schedule with Invoice 1 at $9,600 USD, two payment rows (Paid in green, Due in yellow), a light blue savings banner reading "Congrats! You saved $400 on this invoice", and a blue "Pay now" button. Behind it, a Pay invoice form with card fields and a partial black pay button. Top-right card shows a donut chart with $27,000 estimated costs. Right column: small blue label "Savings & payment", bold headline "Easy payments, instant savings", gray body copy about paying suppliers through Planned, and a black rounded "Start saving" button.
Key takeaway
Overlapping UI cards create depth without illustration. A savings callout inside the product UI makes the value prop tangible. Blue accent limited to labels, charts, and primary product actions; marketing CTA stays black for contrast.
Reuse notes
Strong for fintech or procurement products proving payment workflows. Needs credible UI data (amounts, statuses). Left-heavy mockup may need stacking on mobile.
