Created
October 23, 2023 14:14
-
-
Save SimRunBot/25e852d1040a44d9763a8003fad92656 to your computer and use it in GitHub Desktop.
Pricing Page Component Next.JS generated using v0.dev by vercel
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * v0 by Vercel. | |
| * @see https://v0.dev/t/Dtm1B7M2eEP | |
| */ | |
| // for this to work in your app you need shadcn component library initialized | |
| // using the command here: https://ui.shadcn.com/docs/installation/next#run-the-cli | |
| import { Button } from "@/components/ui/button"; | |
| export default function Component() { | |
| return ( | |
| <div className="min-h-screen flex flex-col justify-between"> | |
| <main className="py-12"> | |
| <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> | |
| <h1 className="text-4xl font-extrabold text-center text-gray-900 dark:text-gray-100"> | |
| Pricing | |
| </h1> | |
| <div className="mt-12 lg:space-y-0 lg:grid lg:grid-cols-2 lg:gap-8 justify-center"> | |
| <div className="relative p-8 bg-white border border-gray-200 rounded-2xl shadow-sm flex flex-col items-center w-auto mx-auto"> | |
| <div className="flex-1 text-center"> | |
| <h3 className="text-xl font-semibold text-gray-900 dark:text-gray-100"> | |
| Basic Plan | |
| </h3> | |
| <p className="mt-4 flex items-baseline justify-center text-gray-900 dark:text-gray-100"> | |
| <span className="text-5xl font-extrabold tracking-tight"> | |
| $20 | |
| </span> | |
| <span className="ml-1 text-2xl font-semibold">/mo</span> | |
| </p> | |
| <div className="my-5 text-gray-500 space-y-6 text-left ml-10"> | |
| <p className="flex items-center"> | |
| <svg | |
| className=" text-gray-400 mr-2" | |
| fill="none" | |
| height="24" | |
| stroke="currentColor" | |
| strokeLinecap="round" | |
| strokeLinejoin="round" | |
| strokeWidth="2" | |
| viewBox="0 0 24 24" | |
| width="24" | |
| xmlns="http://www.w3.org/2000/svg" | |
| > | |
| <polyline points="20 6 9 17 4 12" /> | |
| </svg> | |
| 10,000 tokens | |
| </p> | |
| <p className="flex items-center"> | |
| <svg | |
| className=" text-gray-400 mr-2" | |
| fill="none" | |
| height="24" | |
| stroke="currentColor" | |
| strokeLinecap="round" | |
| strokeLinejoin="round" | |
| strokeWidth="2" | |
| viewBox="0 0 24 24" | |
| width="24" | |
| xmlns="http://www.w3.org/2000/svg" | |
| > | |
| <polyline points="20 6 9 17 4 12" /> | |
| </svg> | |
| Basic support | |
| </p> | |
| <p className="flex items-center"> | |
| <svg | |
| className=" text-gray-400 mr-2" | |
| fill="none" | |
| height="24" | |
| stroke="currentColor" | |
| strokeLinecap="round" | |
| strokeLinejoin="round" | |
| strokeWidth="2" | |
| viewBox="0 0 24 24" | |
| width="24" | |
| xmlns="http://www.w3.org/2000/svg" | |
| > | |
| <polyline points="20 6 9 17 4 12" /> | |
| </svg> | |
| Access to community | |
| </p> | |
| </div> | |
| </div> | |
| <Button className="mt-8 w-full" variant="default"> | |
| Get Basic Plan | |
| </Button> | |
| </div> | |
| <div className="relative p-8 bg-white border border-gray-200 rounded-2xl shadow-sm flex flex-col items-center w-auto mx-auto"> | |
| <div className="flex-1 text-center"> | |
| <h3 className="text-xl font-semibold text-gray-900 dark:text-gray-100"> | |
| Pro Plan | |
| </h3> | |
| <p className="mt-4 flex items-baseline justify-center text-gray-900 dark:text-gray-100"> | |
| <span className="text-5xl font-extrabold tracking-tight"> | |
| $60 | |
| </span> | |
| <span className="ml-1 text-2xl font-semibold">/mo</span> | |
| </p> | |
| <div className="my-5 text-gray-500 space-y-6 text-left ml-10"> | |
| <p className="flex items-center"> | |
| <svg | |
| className=" text-gray-400 mr-2" | |
| fill="none" | |
| height="24" | |
| stroke="currentColor" | |
| strokeLinecap="round" | |
| strokeLinejoin="round" | |
| strokeWidth="2" | |
| viewBox="0 0 24 24" | |
| width="24" | |
| xmlns="http://www.w3.org/2000/svg" | |
| > | |
| <polyline points="20 6 9 17 4 12" /> | |
| </svg> | |
| 30,000 tokens | |
| </p> | |
| <p className="flex items-center"> | |
| <svg | |
| className=" text-gray-400 mr-2" | |
| fill="none" | |
| height="24" | |
| stroke="currentColor" | |
| strokeLinecap="round" | |
| strokeLinejoin="round" | |
| strokeWidth="2" | |
| viewBox="0 0 24 24" | |
| width="24" | |
| xmlns="http://www.w3.org/2000/svg" | |
| > | |
| <polyline points="20 6 9 17 4 12" /> | |
| </svg> | |
| Email support | |
| </p> | |
| <p className="flex items-center"> | |
| <svg | |
| className=" text-gray-400 mr-2" | |
| fill="none" | |
| height="24" | |
| stroke="currentColor" | |
| strokeLinecap="round" | |
| strokeLinejoin="round" | |
| strokeWidth="2" | |
| viewBox="0 0 24 24" | |
| width="24" | |
| xmlns="http://www.w3.org/2000/svg" | |
| > | |
| <polyline points="20 6 9 17 4 12" /> | |
| </svg> | |
| Access to community | |
| </p> | |
| <p className="flex items-center"> | |
| <svg | |
| className=" text-gray-400 mr-2" | |
| fill="none" | |
| height="24" | |
| stroke="currentColor" | |
| strokeLinecap="round" | |
| strokeLinejoin="round" | |
| strokeWidth="2" | |
| viewBox="0 0 24 24" | |
| width="24" | |
| xmlns="http://www.w3.org/2000/svg" | |
| > | |
| <polyline points="20 6 9 17 4 12" /> | |
| </svg> | |
| Better generated results | |
| </p> | |
| </div> | |
| </div> | |
| <Button className="mt-8 w-full" variant="default"> | |
| Get Pro Plan | |
| </Button> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| ); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment