Showcase CRM Pipeline Hero Block for React

Edit STAGES at the top of the file. Each stage has a name, a count and a total for the whole stage, and the deals it shows, each with a company, a value and the owner's initials. The board shows every deal listed and fades out under them, so list as many as you want to see before the fade. Mark one deal with highlight: true to ring it.

Yes. The board is a grid of two columns on phones and four from the sm breakpoint up: change sm:grid-cols-4 to match your number of stages. Past five, the cards get too narrow; show your main stages and leave the rest to the product.

The board's box is max-h-72 on phones, max-h-96 from sm and max-h-[28rem] from md, with a mask that fades its bottom 45%. Raise the heights to show more of the board, or change the percentage in the mask. The board never needs a scrollbar because what is cut off is only decoration.

It reads the announcement as a link, then the headline (the block's one h1), the paragraph and the two links. The board is decoration: hidden from screen readers and inert, out of the tab order. If a figure on it matters to your pitch, such as the forecast accuracy, it belongs in the copy, where the paragraph already says it.

Everything stacks: the text, then the buttons, then the board under a rule with + marks. Below sm the four stages sit in two columns, so each card keeps enough room for a company name, and a name too long for its card ends with an ellipsis. The Shine Button is on the first screen, and nothing scrolls sideways down to 320 px.

The values are plain strings in the data, such as "$42k", so write them in your currency: "€42k" or "42 k€". Each one is kept left to right, so a right-to-left page shows the sign and the number in the right order.