Description of the Pricing 4 block design & features
Built with shadcn/ui, the section pairs optional intro copy with tabs for monthly and yearly billing, then three equal columns. Each column shows a badge with the tier name, a large price line, a short period label, a separator, a vertical checklist with small check icons, and a full width button. Exactly one column can take muted fill, filled badge, and primary button so the recommended tier stands out without a separate comparison grid.
On small screens the columns stack; from medium width upward they sit as three flex columns. Pricing and period text track the active tab.
The look is straightforward product marketing with clear hierarchy from headline to features. Complexity is modest since only billing tab state and which tier is highlighted drive the differences.