Pricing 97 block design & features
Pricing97 is a four-tier pricing section built with shadcn/ui badge, button, separator, and tabs components. A left-aligned heading and description sit above the plan cards, with a tab-style billing toggle (Monthly / Yearly) pushed to the right on wider viewports. Below that row, four equal cards line up in a four-column grid, each headed by a badge that serves as the plan name label.
Inside every card the badge sits at the top, followed by a large price figure, a cadence line that hides when the price is zero, a horizontal separator, a checklist of included features with check icons, and a full-width CTA link at the bottom. The recommended plan stands out with a filled badge and solid button while the remaining cards use outlined variants. Switching the billing tab swaps the displayed price and period across all four cards at once.
The overall feel is restrained and utilitarian, close to a default shadcn component style with minimal decoration. Rounded card borders, muted feature text, and generous vertical spacing keep the section scannable without visual noise. Complexity is low to moderate, driven mainly by the billing-toggle state and the four-column responsive grid.
On medium viewports the grid collapses to two columns; on small screens it stacks to a single column. The heading and toggle also stack vertically below medium breakpoints, keeping the toggle accessible without horizontal overflow.