Feature 405 block design & features
The block pairs a list of capabilities with a phone preview. On the left a heading and paragraph sit above four rows, each with an icon tile, a title, one line of detail and an arrow that appears on the active row.
Hovering, focusing or tapping a row makes it active. The bright gradient panel on the right crossfades to that row's colours, and the phone inside swaps its wallet card and screen. The screens cover multi-currency balances, a list of virtual cards, a round-up savings pot with a progress bar, and a cashback summary.
The phone, card and every screen are built in JSX with fixed light colours so they look the same in both modes. The capabilities, including their gradients and card colours, and the cardholder name are passed in as props.
On mobile the list sits above the phone panel and rows respond to taps. The crossfades are removed when the visitor prefers reduced motion.