Pricing 85 block design & features
Pricing85 is a four-tier pricing section built with shadcn/ui cards and carousel. A centered headline sits above a pill-shaped billing toggle with Monthly and Yearly options. On desktop, four equal card columns display side by side. On smaller viewports, plans become a horizontally swipeable carousel with previous and next controls, starting from the recommended plan when one is set.
Each card contains the plan name, a large price figure, a short cadence line, a two-line description that updates with the billing mode, a full-width CTA link, a centered “FEATURES” label flanked by horizontal rules, and a checklist of included items. The recommended plan uses a thicker primary-colored border and a solid button to stand out from the outlined siblings.
Light shadows, rounded corners, and muted secondary text give the cards a soft, approachable feel. Gradient masking on the carousel fades off-screen cards at both edges, keeping focus on the centered plan. Moderate complexity overall, driven by the billing state and the dual layout (carousel versus grid).
Below large breakpoints the four columns collapse into the swipeable row; desktop visitors see all four plans at once for side-by-side comparison.