Split Panel Product Mockup CTA Block for React

Edit ITEMS at the top of the file: each card has a name, a kind (its one-line description) and a Lucide icon. START lists the names that begin saved, and the count is worked out from the saved list, so it can never disagree with the bookmarks. To show more or fewer cards, add or remove entries; the popup grows with them.

Each bookmark is a real toggle button named after its card, such as "Bookmark Pricing table", with its saved state read out as pressed. It works with a click, a tap, Enter and Space. Pressing it fills the icon in the foreground colour and plays a short ring and a spray of dots around it. The burst is CSS and only plays when a bookmark turns on, not off.

The badge is a polite live region, so a screen reader reads "3 saved" after each press without moving focus. The number sits in a bdi so it keeps its place in right-to-left layouts.

The popup is a mock: its state lives in the block and nothing is stored. To make it real, keep the saved list in your extension's storage, pass each bookmark's active from it (the block already does) and write the change in onActiveChange. Point the Shine Button's href at your store listing, and leave brand names out of the copy unless you hold the right to use them. On Base UI, the call to action renders its link with render={<a href="…" />} and nativeButton={false}.

The window is a figure named Extension popup. Its title bar, with the dots, address bar and puzzle icon, is decoration: hidden from screen readers and out of the tab order. The cards are a list, and each one reads its name, its description and then its bookmark button.

The columns stack below the lg breakpoint, with the popup under the copy and the three benefits as a ruled list at the foot. Card names and descriptions shorten with an ellipsis, so the bookmark stays at the end of its row down to 320px, and the call to action and the note beside it wrap onto two lines when they run out of room.

The columns fade and rise in once, and a bookmark pops and bursts when it turns on. It's all CSS, with no animation library. With reduced motion on, the entrance is off and the bookmark just fills, with no pop or burst.