Pricing 29 block design & features
Pricing29 is a three-tier pricing section built with Shadcn UI. A centered heading and subheading sit at the top, followed by a three-column card area rendered over a primary-to-primary/80 gradient background filled with a repeating plus-sign SVG pattern. Each card shows the tier name in monospaced uppercase, a large price, a short description, a feature checklist with check icons, and a CTA button with a chevron icon. The middle card is highlighted with a secondary button variant and inverse coloring on mobile.
On desktop all three cards sit transparently over the gradient, sharing divider lines between columns and using light-on-dark text inherited from the primary background. On mobile each card renders individually, with the highlighted card picking up the gradient background and the others falling back to a bordered surface. Button styles shift between outline and a subtle inset shadow effect depending on highlight state.
The pattern uses a plus-sign SVG rendered as a tiled background behind the cards and again at a larger scale behind the entire section, masked with a radial gradient fade. This gives the section a textured, layered feel. Complexity is moderate because you define an array of tier objects with name, price, description, features, and CTA link.
Below the desktop breakpoint the three columns stack vertically, with each card gaining its own rounded border and the gradient background moving to the highlighted card only.