Spaces:
Running
Running
File size: 3,865 Bytes
21a686e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 |
import { CheckCircleIcon } from '@heroicons/react/20/solid'
const tiers = [
{
name: 'Basic',
id: 'tier-basic',
href: '#',
price: { monthly: '$19', annually: '$15' },
description: 'Everything necessary to get started.',
features: ['5 products', 'Up to 1,000 subscribers', 'Basic analytics', '48-hour support response time'],
},
{
name: 'Essential',
id: 'tier-essential',
href: '#',
price: { monthly: '$49', annually: '$39' },
description: 'Everything in Basic, plus essential tools for growing your business.',
features: [
'25 products',
'Up to 10,000 subscribers',
'Advanced analytics',
'24-hour support response time',
'Marketing automations',
],
},
{
name: 'Growth',
id: 'tier-growth',
href: '#',
price: { monthly: '$99', annually: '$79' },
description: 'Everything in Essential, plus collaboration tools and deeper insights.',
features: [
'Unlimited products',
'Unlimited subscribers',
'Advanced analytics',
'1-hour, dedicated support response time',
'Marketing automations',
'Custom reporting tools',
],
},
]
export default function ThreeTiersWithDividers() {
return (
<div className="bg-white py-24 sm:py-32">
<div className="mx-auto max-w-7xl px-6 lg:px-8">
<div className="mx-auto max-w-4xl sm:text-center">
<h2 className="text-base/7 font-semibold text-indigo-600">Pricing</h2>
<p className="mt-2 text-5xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-6xl sm:text-balance">
Pricing that grows with you
</p>
</div>
<p className="mx-auto mt-6 max-w-2xl text-lg font-medium text-pretty text-gray-600 sm:text-center sm:text-xl/8">
Choose an affordable plan that’s packed with the best features for engaging your audience, creating customer
loyalty, and driving sales.
</p>
<div className="mt-20 flow-root">
<div className="isolate -mt-16 grid max-w-sm grid-cols-1 gap-y-16 divide-y divide-gray-100 sm:mx-auto lg:-mx-8 lg:mt-0 lg:max-w-none lg:grid-cols-3 lg:divide-x lg:divide-y-0 xl:-mx-4">
{tiers.map((tier) => (
<div key={tier.id} className="pt-16 lg:px-8 lg:pt-0 xl:px-14">
<h3 id={tier.id} className="text-base/7 font-semibold text-gray-900">
{tier.name}
</h3>
<p className="mt-6 flex items-baseline gap-x-1">
<span className="text-5xl font-semibold tracking-tight text-gray-900">{tier.price.monthly}</span>
<span className="text-sm/6 font-semibold text-gray-600">/month</span>
</p>
<p className="mt-3 text-sm/6 text-gray-500">{tier.price.annually} per month if paid annually</p>
<a
href={tier.href}
aria-describedby={tier.id}
className="mt-10 block rounded-md bg-indigo-600 px-3 py-2 text-center text-sm/6 font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
>
Buy plan
</a>
<p className="mt-10 text-sm/6 font-semibold text-gray-900">{tier.description}</p>
<ul role="list" className="mt-6 space-y-3 text-sm/6 text-gray-600">
{tier.features.map((feature) => (
<li key={feature} className="flex gap-x-3">
<CheckCircleIcon aria-hidden="true" className="h-6 w-5 flex-none text-indigo-600" />
{feature}
</li>
))}
</ul>
</div>
))}
</div>
</div>
</div>
</div>
)
}
|