[blocks]: Pricing page component block

[justerenoir]

Description

It would be great to have a pricing page component block that also has options for yearly vs monthly pricing.

Example

No response

[birobirobiro]

Examples:

https://shipixen.com/shadcn-pricing-page

https://pricing-page-shadcn.vercel.app/

[PaperPrototype]

This is exactly what I was about to suggest

[ten-x-dev]

Done: #3349

[krisnaw]

This is what I'm currently working on: a clone of the Vercel pricing page. Let me know if you guys are interested, and I'll create a pull request (PR).
@justerenoir @birobirobiro

[ten-x-dev]

Looks beautiful!

You might want to check out the changes in our PR because there is some unintuitive configuration you'll have to set up for it to work 🙏

Specifically, make sure to export:

export const description =
  "A pricing page with 3 tiers. You can also customize it with 4 tiers or less than 3 tiers - it always looks good. The monthly plan is highlighted with a 20% discount nudging users to pick the annual plan."

export const iframeHeight = "640px"

export const containerClassName = "w-full h-full p-4 lg:p-0"

From your page. Took us a while to figure out.

[krisnaw]

Thanks for the heads up! @ten-x-dev I'll definitely take a look at your PR for reference. Appreciate the guidance!

[PaperPrototype]

Only thing I would suggest is, change the buttons for each card to be
Free -> "Login / Signup"
Pro -> "Subscribe"
Enterprise -> "Contact Us"