Split Panel Pricing Card Visual CTA Block for React

Edit the constants at the top of the file. PRICE_PER_SEAT and SEATS set the price printed on the card and the total in the sentence under the features, which is computed, and DISCOUNT_SEATS and DISCOUNT feed the discount it mentions. FEATURES is the list of four. The card's name is the text of its Emboss Text, and the member number is plain text in the card: change both to your own.

Nine invisible zones lie over the card in a three by three grid. Each zone says which row and which column it is in, and the wrapper reads whichever one the pointer is over with CSS :has(): it sets one lean for the row and one for the column, from minus one to one. The card turns by those leans in perspective, with a transition, and the highlight on its face moves with them. When the pointer leaves, both leans fall back to zero and the card settles. There is no event handler, so it works the same on the server and on every framework.

The card doesn't tilt: its transform is switched off and the highlight stays put, so it reads as a flat card. The block's entrance is skipped too.

The tilt is decoration, so nothing depends on it. On a touch screen the card tilts toward the last place tapped, as hover does, and a keyboard can't reach it because the card is hidden from assistive technology and has nothing to focus. Everything a visitor needs, the plan, the price per seat and the call to action, is in the text beside the card.

Yes. The card has no dark scope: it is a bg-card card with a ring and a shadow on a bg-muted/40 panel, so it is light on a light page and dark on a dark one, in whichever preset is active. The chip and the rings are drawn in foreground tones, so the Shine Button stays the only primary element.

The button is a real link: point its href at your Team checkout, for example /checkout?plan=team&seats=5. It's a ShineButton with render set to an a element and nativeButton={false}.