Pricing 36 block design & features
Built with Shadcn UI Separator and Lucide icons, this block uses a distinctive double-layer shell pattern instead of standard cards. Each plan sits inside a large rounded outer container with a 1-pixel colored border. The inner white panel holds the plan name, an oversized price with cadence suffix, a short description, a horizontal separator, and a tightly spaced feature checklist. Below the white panel, a narrow colored strip carries the CTA link text and an animated arrow icon that slides right on hover.
The highlighted plan uses the primary token for its outer shell and CTA strip, making the link text white against the solid color. The non-highlighted plan uses the border token for a subtler outline and foreground-colored text on its strip. Check icons use the foreground color rather than an accent, keeping the palette cohesive.
The look is rounded and structural, with the large corner radius on the outer shell giving each plan a pill-like silhouette that stands apart from typical rectangular card layouts. There are no shadows, gradients, or decorative fills; visual interest comes entirely from the shell shape and the color split between content panel and footer strip. This is a static block with no billing toggle, making it a quick-to-implement choice when plans only show one price point.