Pricing 28 block design & features
Pricing28 is a four-plan pricing section built with shadcn/ui, centered under a large heading. Below the heading, a row of overlapping avatars and two trust statements provide social proof. A tab switcher toggles between monthly and yearly billing, with the yearly tab carrying a "Save 20%" badge. Four bordered, rounded cards display plan name, optional "Popular" badge, price in oversized semibold numerals, period text, an optional dashed-underline tagline with a tooltip, a full-width rounded CTA button, and grouped feature lists with icons.
The highlighted plan receives a badge next to its name. Taglines use a dashed underline that triggers a tooltip on hover, explaining credit usage. Feature groups are separated by muted subheadings with each item pairing a primary-colored icon and descriptive text. A lock icon and "Secure payment" note sit centered below the four cards.
The overall feel is polished and trust-focused, combining social proof elements with detailed tier breakdowns. Complexity is higher than a basic plan grid because each plan can carry optional taglines with tooltips, grouped features with custom icons, and the section includes avatar and trust-statement elements above the cards.
On smaller screens the four columns stack into a single column while the avatar row and trust statements remain centered above the billing tabs.