Bento Grid Pricing Block for React

Edit the PLANS array at the top of the file. Each plan has its name, tagline, icon (any Lucide icon), price and per (the text after the amount: /mo or /TB), the highlights checklist, the call to action's cta and href, featured and place. A price of 0 shows Free and null shows Custom, for a quote-only plan. EVERYTHING is the list of what every plan includes, in the header row.

The grid has three columns from the lg breakpoint. The featured tile's place classes (lg:col-start-2 lg:row-span-2 lg:row-start-1) pin it to the middle column across both rows, and the other four tiles fill the corners in order. To feature another plan, set featured: true on it and false on Pro, move the place classes to it, and put it first in PLANS. A featured tile shows its price at display size with the call to action under it; the others show the price beside the name and keep their button at the bottom.

Below lg the tiles stack in one column as full-width rows divided by the same hairlines. The featured plan comes first in the markup, so it is also first on a phone, with its button within the first screen and a half. Nothing scrolls sideways at 320px.

Plans are h3 headings under the section's h2, highlights are lists with decorative check icons, and prices are read as "per month" or "per terabyte" instead of /mo and /TB. Each call to action is a link whose name includes its plan, as in Start a trial, Scale. The featured tile doesn't rely on colour: its panel is raised and carries a Best value badge. Because Pro is first in the markup, keyboard focus reaches its button before the corner tiles', although it sits in the middle on a wide screen.

Each call to action is a real link to its plan's href. It is a ShineButton with render set to an a element and nativeButton={false}. Point the paid plans at your checkout route with the plan in the query, the Hobby plan at sign-up, the bandwidth add-on at your billing settings and the Enterprise plan at your contact-sales form.

Use a bento grid when you sell four or five things and want one of them to lead without hiding the rest: the tall middle tile draws the eye while the corners stay a glance away. It also fits an add-on that isn't a plan, like bandwidth here. Three equal columns read better when the plans matter about equally, or when each one needs a long feature list that a small corner tile can't hold.