Gradient-card
Category: Pricing
<section class="relative z -10 sm:px-6 lg:px-8 max-w-7xl mr-auto ml-auto pt-8 pr-4 pb-16 pl-4">
<div class="relative overflow-hidden rounded-3xl ring-1 ring-white/10 bg-neutral-900">
<div class="absolute -right-20 -top-24 h-72 w-72 bg-gradient-to-tr from-violet-500/20 to-fuchsia-400/10 rounded-full blur-3xl pointer-events-none"></div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-0">
<!-- Copy -->
<div class="p-6 sm:p-10 lg:col-span-1">
<span class="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-1.5 text-[11px] text-neutral-200">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="sparkles" class="lucide lucide-sparkles w-3.5 h-3.5" style="stroke-width:1.5"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z" class=""></path><path d="M20 2v4" class=""></path><path d="M22 4h-4" class=""></path><circle cx="4" cy="20" r="2" class=""></circle></svg>
MEMBERSHIP
</span>
<h2 class="mt-4 text-3xl sm:text-4xl md:text-5xl tracking-tighter text-white">Arcade Plus</h2>
<p class="mt-3 text-neutral-300 max-w-[42ch]">
Get more from every session: member‑only discounts, free weekend trials, cloud saves, and extended refund windows.
</p>
<ul class="mt-6 space-y-3 text-sm text-neutral-300">
<li class="flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="percent" class="lucide lucide-percent w-4 h-4 text-emerald-400" style="stroke-width:1.5"><line x1="19" x2="5" y1="5" y2="19" class=""></line><circle cx="6.5" cy="6.5" r="2.5" class=""></circle><circle cx="17.5" cy="17.5" r="2.5" class=""></circle></svg>
Extra 10% off featured titles
</li>
<li class="flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="cloud" class="lucide lucide-cloud w-4 h-4 text-sky-300" style="stroke-width:1.5"><path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z" class=""></path></svg>
Unlimited cloud saves
</li>
<li class="flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="clock-3" class="lucide lucide-clock-3 w-4 h-4 text-violet-300" style="stroke-width:1.5"><path d="M12 6v6h4" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
Early access trials
</li>
<li class="flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="undo-2" class="lucide lucide-undo-2 w-4 h-4 text-rose-300" style="stroke-width:1.5"><path d="M9 14 4 9l5-5" class=""></path><path d="M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11" class=""></path></svg>
Extended refunds where available
</li>
</ul>
<a href="#join" class="mt-6 inline-flex items-center gap-2 rounded-full bg-white/10 hover:bg-white/15 text-white h-11 px-5 ring-1 ring-white/10 text-sm">
Start free 7‑day trial
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right w-4 h-4" style="stroke-width:1.5"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
</a>
</div>
<!-- Plans -->
<div class="lg:col-span-2 grid grid-cols-1 md:grid-cols-2 border-t border-white/10 lg:border-l lg:border-t-0">
<!-- Monthly -->
<div class="p-6 sm:p-10 border-b md:border-b-0 md:border-r border-white/10">
<div class="flex items-center justify-between">
<h3 class="text-xl text-white tracking-tight">Monthly</h3>
<span class="inline-flex items-center gap-1 rounded-lg border border-white/10 bg-white/5 px-2 py-1 text-[11px] text-neutral-300">
Flexible
</span>
</div>
<div class="mt-3 flex items-end gap-1">
<span class="text-4xl text-white tracking-tight">$8</span>
<span class="text-neutral-400 mb-1 text-sm">/mo</span>
</div>
<ul class="mt-5 space-y-2 text-sm text-neutral-300">
<li class="flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-4 h-4 text-emerald-400" style="stroke-width:1.5"><path d="M20 6 9 17l-5-5" class=""></path></svg> Member deals
</li>
<li class="flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-4 h-4 text-emerald-400" style="stroke-width:1.5"><path d="M20 6 9 17l-5-5" class=""></path></svg> Trials & betas
</li>
<li class="flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-4 h-4 text-emerald-400" style="stroke-width:1.5"><path d="M20 6 9 17l-5-5" class=""></path></svg> Cloud saves
</li>
</ul>
<button class="mt-6 inline-flex w-full items-center justify-center gap-2 rounded-full bg-emerald-600 hover:bg-emerald-600/90 text-white h-11 ring-1 ring-emerald-400/30 text-sm">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="crown" class="lucide lucide-crown w-4 h-4" style="stroke-width:1.5"><path d="M11.562 3.266a.5.5 0 0 1 .876 0L15.39 8.87a1 1 0 0 0 1.516.294L21.183 5.5a.5.5 0 0 1 .798.519l-2.834 10.246a1 1 0 0 1-.956.734H5.81a1 1 0 0 1-.957-.734L2.02 6.02a.5.5 0 0 1 .798-.519l4.276 3.664a1 1 0 0 0 1.516-.294z" class=""></path><path d="M5 21h14" class=""></path></svg>
Choose monthly
</button>
</div>
<!-- Annual -->
<div class="p-6 sm:p-10">
<div class="flex items-center justify-between">
<h3 class="text-xl text-white tracking-tight">Annual</h3>
<span class="inline-flex items-center gap-1 rounded-lg border border-amber-400/30 bg-amber-500/10 px-2 py-1 text-[11px] text-amber-200">
<span class="h-1.5 w-1.5 rounded-full bg-amber-300"></span>
Best value
</span>
</div>
<div class="mt-3 flex items-end gap-2 <span class=" text-4xl="" text-white="" tracking-tight"="">$79
<span class="text-neutral-400 mb-1 text-sm">/yr</span>
<span class="text-xs text-emerald-300 bg-emerald-500/10 ring-1 ring-emerald-400/20 rounded-full px-2 py-0.5">Save 18%</span>
</div>
<ul class="mt-5 space-y-2 text-sm text-neutral-300">
<li class="flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-4 h-4 text-emerald-400" style="stroke-width:1.5"><path d="M20 6 9 17l-5-5" class=""></path></svg> Everything in Monthly
</li>
<li class="flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-4 h-4 text-emerald-400" style="stroke-width:1.5"><path d="M20 6 9 17l-5-5" class=""></path></svg> Family sharing
</li>
<li class="flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-4 h-4 text-emerald-400" style="stroke-width:1.5"><path d="M20 6 9 17l-5-5" class=""></path></svg> Priority support
</li>
</ul>
<button class="mt-6 inline-flex w-full items-center justify-center gap-2 rounded-full bg-white text-neutral-900 hover:bg-neutral-100 h-11 text-sm">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="rocket" class="lucide lucide-rocket w-4 h-4" style="stroke-width:1.5"><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z" class=""></path><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z" class=""></path><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0" class=""></path><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5" class=""></path></svg>
Choose annual
</button>
</div>
</div>
</div>
</div>
</section>
create a canvas to display a PRICING component. we want the pricing component to be centered and the space around it to be flexible empty.
reproduce this pricing component. you can change the content
Created by: LandingHero
