Pricing Tier Grid

This section is for pricing pages that need one obvious recommendation without turning into an overloaded comparison chart.

Starter

For new sites and brochure projects.

$6 /month

• •1 website
• •10 GB NVMe storage
• •Free SSL
• •Weekly backups

Scale

Most chosen

For growing brands that need margin and speed.

$14 /month

• •10 websites
• •50 GB NVMe storage
• •Daily backups
• •Priority chat

VPS Pro

For custom stacks and high-traffic workloads.

$39 /month

• •4 vCPU
• •8 GB RAM
• •Root access
• •Managed hardening

Why it works

• The middle plan can carry the main commercial push.
• Feature bullets stay readable even when plan copy changes.
• The card structure adapts well to shadcn cards and buttons.

Copy paste code

const plans = [
  {
    name: 'Starter',
    price: '$6',
    description: 'For new sites and brochure projects.',
    features: ['1 website', '10 GB NVMe storage', 'Free SSL', 'Weekly backups'],
  },
  {
    name: 'Scale',
    price: '$14',
    featured: true,
    description: 'For growing brands that need margin and speed.',
    features: ['10 websites', '50 GB NVMe storage', 'Daily backups', 'Priority chat'],
  },
  {
    name: 'VPS Pro',
    price: '$39',
    description: 'For custom stacks and high-traffic workloads.',
    features: ['4 vCPU', '8 GB RAM', 'Root access', 'Managed hardening'],
  },
];

export function PricingTierGrid() {
  return (
    <section className="grid gap-6 lg:grid-cols-3">
      {plans.map((plan) => (
        <article
          key={plan.name}
          className={[
            'rounded-[28px] border p-6 shadow-[0_24px_80px_-48px_rgba(15,23,42,0.35)]',
            plan.featured
              ? 'border-slate-950 bg-slate-950 text-white'
              : 'border-slate-200 bg-white text-slate-950',
          ].join(' ')}
        >
          <div className="flex items-center justify-between">
            <h3 className="text-xl font-semibold">{plan.name}</h3>
            {plan.featured ? (
              <span className="rounded-full bg-white/10 px-3 py-1 text-xs font-semibold uppercase tracking-[0.18em]">
                Most chosen
              </span>
            ) : null}
          </div>
          <p className={plan.featured ? 'mt-4 text-slate-300' : 'mt-4 text-slate-600'}>
            {plan.description}
          </p>
          <div className="mt-6">
            <span className="text-4xl font-semibold">{plan.price}</span>
            <span className={plan.featured ? 'ml-2 text-sm text-slate-300' : 'ml-2 text-sm text-slate-500'}>
              /month
            </span>
          </div>
          <ul className="mt-6 space-y-3 text-sm">
            {plan.features.map((feature) => (
              <li key={feature} className="flex items-start gap-3">
                <span className={plan.featured ? 'text-sky-300' : 'text-sky-700'}>•</span>
                <span>{feature}</span>
              </li>
            ))}
          </ul>
          <button
            className={[
              'mt-8 inline-flex w-full items-center justify-center rounded-full px-4 py-3 text-sm font-semibold',
              plan.featured ? 'bg-white text-slate-950' : 'bg-slate-950 text-white',
            ].join(' ')}
          >
            Choose {plan.name}
          </button>
        </article>
      ))}
    </section>
  );
}

Customization notes

• Keep plan counts and quotas visually balanced.
• Do not overload the cards with every feature.
• Push detailed specs into a comparison table below the pricing grid.