Flip Reveal Cards Pricing Block for React

Edit the PLANS array at the top of the file. The front reads tagline, the monthly and annual prices, cta and the three highlights; the back reads detailsHeading, the full details list and promise, which the front's last line also quotes. Set popular: true on the plan that gets the Best value badge, the ring and the primary button, and START to its index so the phone carousel opens on it. The turn is the rotate-y-180 class on each card's inner wrapper: change its duration-700 or the ease-[cubic-bezier(…)] curve to make it slower, faster or less bouncy.

Each face has the same call to action, and both are links: point href in the plan's data at your checkout with the plan and billing period in the address, and the top plan's at your application form. Each link is a ShineButton with render set to an a element and nativeButton={false}.

Yes, one side at a time. The face turned away is inert and hidden from assistive technology, so its links and buttons are out of the tab order and the two sides are never read mixed. The buttons are named for their plan ("Details of Coach", "Summary of Coach"), and pressing one moves focus to the button on the face that turned up. The billing switch is a radio group that arrow keys move through, and each price is read as "$39 per month". Under reduced motion the card turns without animating.

Both faces sit in the same grid cell, so the card takes the height of the taller one, and the three cards in a row share it. The copy is kept short enough that this stays under about 420 px; longer lists grow the card rather than hiding behind a scrollbar.

Below lg the cards sit in a horizontal scroller that snaps to each card, opens on the recommended plan and lets the next card peek in at the edge. The dots under it are buttons named "Show the Coach card" that scroll to a card, and the current one is marked. Each card flips on its own with a tap. The scroller works the same in a right-to-left page.

Use flip cards when each plan has dense secondary content, such as a long feature list or a guarantee, that would crowd the first scan: the front stays short and comparable. Use always-visible cards when the lists are short and every line matters for the first decision, since a visitor who never flips never sees the back.