Pricing 32 block design & features
Pricing32 is a five-tier pricing grid built with Shadcn UI, led by an oversized centered headline and a monthly versus annual toggle with savings callout in green. Five plan cards arrange in a six-column grid on large screens: three narrower tiers on the first row and two wider tiers spanning half the row each below. Each card shows the plan name, animated price swap between monthly and yearly amounts, a per-person period line, a best-for line, a short description, a CTA with arrow icon, and an optional list of feature rows with Lucide icons.
The Pro plan carries a primary border, solid button, and a floating Most popular badge centered on the top edge. Price numbers slide vertically when the toggle changes, giving immediate feedback without reloading. A full-width Compare all plans button sits below the grid.
This is an elaborate, developer-tool style pricing wall with many named features on the lower tiers and sparser cards on Business and Enterprise. Complexity is high because copy, icons, and prices are embedded in the component. Mixed content-driven labels with code-defined structure.
Cards collapse to a single column on small screens while the toggle and headline stay centered. The bottom two tiers still span full width once the multi-column grid breaks.