Pricing 33 block design & features
Pricing33 is an add-on pricing section built with Shadcn UI, centered under a rounded badge label and a large heading. Below the heading, add-on items stack vertically as full-width bordered cards with a subtle shadow. Each card splits into two zones on larger screens: the left side holds a circular black icon container, the add-on name, and a description; the right side shows the price amount, a unit label, and an outline "Get Add-on" button.
Icons sit inside solid black circular containers that contrast against the card surface. Prices render in semibold at a comfortable size, with a smaller muted unit label beside them such as "Total per month." The badge at the top of the section uses a rounded-full shape with a small primary-colored icon and foreground text, set against the default background with a muted border.
The layout is list-oriented rather than grid-based, presenting each add-on as its own full-width row rather than arranging them in columns. Complexity is low because you define an array of add-on objects with icon, name, description, price, and link.
On smaller screens each card's two zones stack vertically, placing the icon and description above the price and button.