| 41 | }; |
| 42 | |
| 43 | export const Pricing: React.FC = () => { |
| 44 | return ( |
| 45 | <section className="relative"> |
| 46 | {/* Radial gradient */} |
| 47 | <div |
| 48 | className="absolute inset-0 overflow-hidden pointer-events-none -z-10" |
| 49 | aria-hidden="true" |
| 50 | > |
| 51 | <div className="absolute top-0 flex items-center justify-center w-1/3 -translate-y-1/2 left-1/2 -translate-x-1/2 aspect-square"> |
| 52 | <div className="absolute inset-0 translate-z-0 bg-primary-500 rounded-full blur-[120px] opacity-50" /> |
| 53 | </div> |
| 54 | </div> |
| 55 | <div className="max-w-6xl px-4 mx-auto sm:px-6"> |
| 56 | <div className="py-12 md:py-20"> |
| 57 | {/* Content */} |
| 58 | <div className="max-w-3xl pb-12 mx-auto text-center md:pb-20"> |
| 59 | <div> |
| 60 | <div className="inline-flex pb-3 font-medium text-transparent bg-clip-text bg-gradient-to-r from-primary-500 to-primary-200"> |
| 61 | Pricing plans |
| 62 | </div> |
| 63 | </div> |
| 64 | <h2 className="pb-4 text-4xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-zinc-200/60 via-zinc-200 to-zinc-200/60"> |
| 65 | Simple and transparent |
| 66 | </h2> |
| 67 | <p className="text-lg text-zinc-400"> |
| 68 | Invite your whole team, we don't do seat based pricing here. |
| 69 | </p> |
| 70 | </div> |
| 71 | {/* Pricing tabs */} |
| 72 | <HighlightGroup className="h-full grid gap-6 md:grid-cols-12 group"> |
| 73 | {/* Box #1 */} |
| 74 | |
| 75 | {tiers.map((tier, i) => ( |
| 76 | <div |
| 77 | key={tier.name} |
| 78 | className="h-full md:col-span-6 lg:col-span-4 group/item" |
| 79 | data-aos="fade-down" |
| 80 | > |
| 81 | <HighlighterItem> |
| 82 | <div className="relative h-full bg-zinc-900 rounded-[inherit] z-20 overflow-hidden"> |
| 83 | <Particles |
| 84 | className="absolute inset-0 -z-10 opacity-10 group-hover/item:opacity-100 transition-opacity duration-1000 ease-in-out" |
| 85 | quantity={(i + 1) ** 2 * 10} |
| 86 | color={["#34d399", "#fde047", "#f43f5e"][i]} |
| 87 | vy={-0.2} |
| 88 | /> |
| 89 | <div className="flex flex-col"> |
| 90 | {/* Radial gradient */} |
| 91 | <div |
| 92 | className="absolute bottom-0 w-1/2 pointer-events-none -translate-x-1/2 translate-y-1/2 left-1/2 -z-10 aspect-square" |
| 93 | aria-hidden="true" |
| 94 | > |
| 95 | <div className="absolute inset-0 translate-z-0 bg-zinc-800 rounded-full blur-[80px]" /> |
| 96 | </div> |
| 97 | {/* Text */} |
| 98 | |
| 99 | <div className="p-8"> |
| 100 | <h3 id={tier.name} className="text-lg font-semibold leading-8"> |