Enterprise Custom Pricing Block for React

CATEGORIES holds the columns: each has an id, a name (the column's heading) and features, each with an optional tip, a short note shown after its name. Three categories fill three columns from the md breakpoint; with two or four, change md:grid-cols-3 to match. The button's count comes from the features, so it stays right when you edit them. CUSTOMERS holds the wordmarks: a Lucide icon, the name and its lettering, the classes that give each logo its own type. Use your real customers' names only with their permission.

Below the md breakpoint the first column is shown and the other two are hidden with display: none, so they leave the page and the tab order. The "All 15 features" button, which only appears on a phone, sets aria-expanded and points at the grid with aria-controls; pressing it shows every column and turns the label into "Show fewer features". From md the three columns always show and the button is gone.

Yes. Nothing in it forces a scope: the section has no background of its own, so light pages stay light and dark pages stay dark, and every colour is a theme token. The emphasis is structural: the price sits on a bg-card panel with shadow-lg and a ring-foreground/15 ring, inset in a bg-muted/50 shell, and the call to action is the one control in the primary colour. If you want a stronger lift, deepen the shadow or widen the shell's padding; avoid filling the card with the primary colour.

It's a link. The ShineButton has render set to an a element and nativeButton={false}. Point it at your booking page or contact form, adding the page and campaign to the query if you want to attribute the lead. The enterprise contact block has a scheduler you can put on that page.

The headline is the section's h2, each column's label is an h3 over a list, and the wordmarks are a list of names, their icons hidden from assistive technology. The notes are plain text after each feature's name, so nothing waits for a hover or a click. The lines and the + marks are decorative and hidden.

When the price really depends on the deal: regions, workloads, commitment and contract terms. A fixed number would mislead, and a single panel puts the weight on what the plan includes and on talking to sales. Place it below your self-serve tiers, or on its own enterprise page for buyers who already know they need it.