Description of the Pricing 3 block design & features
A centered heading and description sit above a shadcn/ui Switch for toggling between monthly and yearly billing. Below, three plan columns display plan name, price, short description, and a CTA button inside a bordered card, followed by a feature list outside the card where each item is separated by horizontal Separator lines. Features use check icons and combine bold labels with muted descriptions.
The layout uses a three-column grid on medium screens with consistent vertical spacing between plan sections. Cards have rounded corners and a single theme border. The feature list below each card uses smaller text with muted foreground color and thin separator lines between items, creating a scannable checklist. Typography is bold on the heading and plan prices, with lighter weight elsewhere.
The style is utilitarian and close to a shadcn default wireframe aesthetic. No highlighted or recommended plan is visually distinguished by color or border weight. The feature lists outside the card body give each column a taller vertical footprint with clear visual rhythm from the repeated separators. Low complexity overall with a single piece of state for the billing toggle.
On mobile the columns stack vertically with full-width cards and feature lists.