shadcn.io is not affiliated with official shadcn/ui
Card Inset Benefits Stack CTA Block for Solid
A centred card-in-card CTA for a managed cloud: the headline, a Shine Button and an outline button, then three benefits drawn as a deck of cards that fan apart into a row on hover or focus.
Installation
Overview
A closing call to action for Solid with Ark UI, framed like a card inside a card. A muted shell with + marks on its corners wraps a raised panel that follows your theme and holds a two-line headline, a short pitch, the Shine Button with a quiet outline button beside it, and a line saying the average migration takes 15 minutes. The three benefits close the panel as a deck of cards: the middle card in front, the other two tucked behind it and tilted. When the pointer enters the panel or focus lands on one of its buttons, the cards fan apart into a row so every benefit can be read; on a phone, for reduced motion and on touch screens they are simply an open list. The actions come before the deck, so on a phone the button is on the first screen. The page's rails and top rule come from the Guides spine. It's built from Guides, Item, Button and Shine Button, with CSS transitions and your theme's tokens only. For migration, upgrade and "move to the managed version" prompts where three short reasons close the deal.
FAQ
How do I change the benefits and the migration time?
Edit BENEFITS at the top of the file: each entry has an icon, a title and one line of detail, and the deck is built from the first three. The line under the buttons reads MIGRATION_MINUTES, so the figure lives in one place. Keep the details to a sentence: the cards are narrow, and they grow in height together when one wraps.
How does the deck fan apart?
The three cards sit in three grid columns at all times, so the section never changes height. They are the last thing in the panel, after the actions. At rest, a CSS transform slides the outer cards toward the middle one, tilts them a few degrees and scales them down; hovering the panel or focusing anything inside it sets the transforms back to nothing over half a second. The deck works from the md breakpoint up.
Can keyboard and screen reader users read all three benefits?
Yes. Every card is real content in a list, in reading order, and a screen reader reads all three whatever the deck looks like. The cards themselves aren't focusable, so the deck opens when focus reaches one of the two buttons in the same panel, which is where a keyboard user ends up next anyway.
What happens with reduced motion, touch screens and small screens?
The deck is only drawn when the screen is at least md wide, the visitor hasn't asked for reduced motion and the device can hover. Otherwise the cards are an open list: stacked on a phone, in a row on a wider touch screen. Nothing is hidden behind a hover on those devices.
Does it work right to left?
Yes. The tilt and the slide use a direction variable that flips in a right-to-left page, so the first benefit stays at the start of the row and the deck mirrors. The migration line is wrapped so its number and unit keep their order.
Where do the buttons go?
Both are links (href="#"): point the Shine Button at your migration flow and the outline button at a plan comparison. The Shine Button sweeps a band of light across itself once on hover and keyboard focus.
Each button's asChild receives its props: spread them onto your router's link.