Components
Loading preview...
Here is Pricing Blocks component
npx shadcn@latest add https://21st.dev/r/educlopez/pricing-blocks"use client"
import { motion } from "motion/react"
export default function PricingModern() {
return (
<section className="relative flex flex-col items-center py-24">
<div className="flex w-full flex-col items-center justify-center gap-8 md:flex-row">
{/* Basic */}
<motion.div
initial={{ opacity: 0, y: 40 }}
animate={{ opacity: 1, y: 0 }}
transition={{ type: "spring", duration: 0.5 }}
className="relative z-10 w-72 rounded-xl border border-pink-400/30 bg-black/40 p-8 text-foreground shadow-[0_0_0_1px_rgba(255,105,180,.08)_inset] backdrop-blur-md transition-transform hover:scale-105"
>
<div className="mb-2 text-center text-lg font-semibold text-pink-400">
Basic
</div>
<div className="mb-4 text-center text-4xl font-extrabold text-white">
$12/mo
</div>
<ul className="mb-6 space-y-2 text-sm text-white/70">
<li><span className="mr-2 text-emerald-400">✔</span>1 Project</li>
<li><span className="mr-2 text-emerald-400">✔</span>Email Support</li>
<li><span className="mr-2 text-emerald-400">✔</span>All Core Features</li>
</ul>
<button className="w-full rounded-md bg-pink-500 py-2 font-semibold text-[#111] hover:bg-pink-400 transition">
Choose Basic
</button>
</motion.div>
{/* Pro (Featured) */}
<motion.div
initial={{ opacity: 0, y: 40 }}
animate={{ opacity: 1, y: 0 }}
transition={{ type: "spring", duration: 0.6 }}
className="relative z-20 w-80 scale-110 rounded-xl border-4 border-pink-400/50 bg-gradient-to-b from-[#ff6fb1] to-[#ff3a95] p-10 text-[#1a1a1a] shadow-xl transition-transform hover:scale-[1.12]"
>
<div className="absolute -top-4 left-1/2 -translate-x-1/2 rounded-full border border-black/20 bg-[#ff6fb1] px-4 py-1 text-xs font-bold text-[#1a1a1a] shadow">
Most Popular
</div>
<div className="mb-2 text-center text-lg font-semibold">Pro</div>
<div className="mb-4 text-center text-5xl font-extrabold">$29/mo</div>
<ul className="mb-6 space-y-2 text-sm">
<li><span className="mr-2 text-emerald-600">✔</span>Unlimited Projects</li>
<li><span className="mr-2 text-emerald-600">✔</span>Priority Support</li>
<li><span className="mr-2 text-emerald-600">✔</span>Team Collaboration</li>
<li><span className="mr-2 text-emerald-600">✔</span>Advanced Analytics</li>
</ul>
<button className="w-full rounded-md bg-neutral-900 py-2 font-semibold text-white hover:bg-neutral-800 transition">
Choose Pro
</button>
</motion.div>
{/* Enterprise */}
<motion.div
initial={{ opacity: 0, y: 40 }}
animate={{ opacity: 1, y: 0 }}
transition={{ type: "spring", duration: 0.7 }}
className="relative z-10 w-72 rounded-xl border border-pink-400/30 bg-black/40 p-8 text-foreground shadow-[0_0_0_1px_rgba(255,105,180,.08)_inset] backdrop-blur-md transition-transform hover:scale-105"
>
<div className="mb-2 text-center text-lg font-semibold text-pink-400">
Enterprise
</div>
<div className="mb-4 text-center text-4xl font-extrabold text-white">
Custom
</div>
<ul className="mb-6 space-y-2 text-sm text-white/70">
<li><span className="mr-2 text-emerald-400">✔</span>Dedicated Manager</li>
<li><span className="mr-2 text-emerald-400">✔</span>Custom Integrations</li>
<li><span className="mr-2 text-emerald-400">✔</span>SLA & Support</li>
</ul>
<button className="w-full rounded-md bg-pink-500 py-2 font-semibold text-[#111] hover:bg-pink-400 transition">
Contact Sales
</button>
</motion.div>
</div>
</section>
)
}