Spaces:
Running
Running
File size: 6,050 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 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 |
import { CheckIcon } from '@heroicons/react/20/solid'
const tiers = [
{
id: 'freelancer',
name: 'Freelancer',
price: { monthly: '$19', annually: '$199' },
description: 'The essentials to provide your best work for clients.',
features: ['5 products', 'Up to 1,000 subscribers', 'Basic analytics', '48-hour support response time'],
featured: false,
},
{
id: 'startup',
name: 'Startup',
price: { monthly: '$29', annually: '$299' },
description: 'A plan that scales with your rapidly growing business.',
features: [
'25 products',
'Up to 10,000 subscribers',
'Advanced analytics',
'24-hour support response time',
'Marketing automations',
],
featured: true,
},
{
id: 'enterprise',
name: 'Enterprise',
price: { monthly: '$59', annually: '$599' },
description: 'Dedicated support and infrastructure for your company.',
features: [
'Unlimited products',
'Unlimited subscribers',
'Advanced analytics',
'1-hour, dedicated support response time',
'Marketing automations',
'Custom reporting tools',
],
featured: false,
},
]
export default function ThreeTiersWithToggle() {
return (
<form className="group/tiers 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 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-balance text-gray-900 sm:text-6xl">
Pricing that grows with you
</p>
</div>
<p className="mx-auto mt-6 max-w-2xl text-center text-lg font-medium text-pretty text-gray-600 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-16 flex justify-center">
<fieldset aria-label="Payment frequency">
<div className="grid grid-cols-2 gap-x-1 rounded-full p-1 text-center text-xs/5 font-semibold ring-1 ring-gray-200 ring-inset">
<label className="group relative rounded-full px-2.5 py-1 has-checked:bg-indigo-600">
<input
defaultValue="monthly"
defaultChecked
name="frequency"
type="radio"
className="absolute inset-0 appearance-none rounded-full"
/>
<span className="text-gray-500 group-has-checked:text-white">Monthly</span>
</label>
<label className="group relative rounded-full px-2.5 py-1 has-checked:bg-indigo-600">
<input
defaultValue="annually"
name="frequency"
type="radio"
className="absolute inset-0 appearance-none rounded-full"
/>
<span className="text-gray-500 group-has-checked:text-white">Annually</span>
</label>
</div>
</fieldset>
</div>
<div className="isolate mx-auto mt-10 grid max-w-md grid-cols-1 gap-8 lg:mx-0 lg:max-w-none lg:grid-cols-3">
{tiers.map((tier) => (
<div
key={tier.id}
data-featured={tier.featured ? 'true' : undefined}
className="group/tier rounded-3xl p-8 ring-1 ring-gray-200 data-featured:ring-2 data-featured:ring-indigo-600 xl:p-10"
>
<div className="flex items-center justify-between gap-x-4">
<h3
id={`tier-${tier.id}`}
className="text-lg/8 font-semibold text-gray-900 group-data-featured/tier:text-indigo-600"
>
{tier.name}
</h3>
<p className="rounded-full bg-indigo-600/10 px-2.5 py-1 text-xs/5 font-semibold text-indigo-600 group-not-data-featured/tier:hidden">
Most popular
</p>
</div>
<p className="mt-4 text-sm/6 text-gray-600">{tier.description}</p>
<p className="mt-6 flex items-baseline gap-x-1 group-not-has-[[name=frequency][value=monthly]:checked]/tiers:hidden">
<span className="text-4xl 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-6 flex items-baseline gap-x-1 group-not-has-[[name=frequency][value=annually]:checked]/tiers:hidden">
<span className="text-4xl font-semibold tracking-tight text-gray-900">{tier.price.annually}</span>
<span className="text-sm/6 font-semibold text-gray-600">/year</span>
</p>
<button
value={tier.id}
name="tier"
type="submit"
aria-describedby={`tier-${tier.id}`}
className="mt-6 block w-full rounded-md px-3 py-2 text-center text-sm/6 font-semibold text-indigo-600 ring-1 ring-indigo-200 ring-inset group-data-featured/tier:bg-indigo-600 group-data-featured/tier:text-white group-data-featured/tier:shadow-xs group-data-featured/tier:ring-0 hover:ring-indigo-300 group-data-featured/tier:hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
>
Buy plan
</button>
<ul role="list" className="mt-8 space-y-3 text-sm/6 text-gray-600 xl:mt-10">
{tier.features.map((feature) => (
<li key={feature} className="flex gap-x-3">
<CheckIcon aria-hidden="true" className="h-6 w-5 flex-none text-indigo-600" />
{feature}
</li>
))}
</ul>
</div>
))}
</div>
</div>
</form>
)
}
|