Two-style
Category: Pricing
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
<section class="mt-32 mb-32 relative w-full">
<div class="pointer-events-none absolute -z-10 inset-0">
<div class="absolute top-1/4 left-1/4 h-96 w-96 rounded-full bg-indigo-500/10 blur-3xl"></div>
<div class="absolute bottom-0 right-1/4 h-80 w-80 rounded-full bg-fuchsia-400/10 blur-3xl"></div>
</div>
<div class="max-w-7xl mx-auto px-6">
<!-- Header -->
<div class="text-center mb-16 [animation:fadeSlideIn_0.5s_ease-out_0s_both] animate-on-scroll">
<div class="inline-flex items-center gap-2 text-sm text-indigo-200/80 mb-4">
<span class="font-sans">Pricing Plans</span>
</div>
<h2 class="text-4xl sm:text-5xl md:text-6xl tracking-tight text-white font-manrope font-semibold">
Choose your plan
</h2>
<p class="mt-5 text-base md:text-lg leading-relaxed text-white/70 max-w-2xl mx-auto font-sans">
Start free and scale as you grow. All plans include GPT-5 AI generation and unlimited edits.
</p>
</div>
<!-- Pricing Cards -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
<!-- Starter Plan -->
<div
class="[animation:fadeSlideIn_0.5s_ease-out_0.1s_both] animate-on-scroll border-gradient before:rounded-3xl bg-white/5 ring-1 ring-white/10 rounded-3xl p-8">
<div class="mb-6">
<h3 class="text-xl tracking-tight text-white font-manrope font-semibold">Starter</h3>
<p class="mt-2 text-sm text-white/60 font-sans">Perfect for personal projects</p>
</div>
<div class="mb-6">
<div class="flex items-baseline gap-2">
<span class="text-5xl tracking-tight text-white font-manrope font-semibold">$0</span>
<span class="text-white/50 font-sans">/month</span>
</div>
</div>
<a href="#"
class="block w-full text-center border-gradient before:rounded-full text-sm font-medium text-white bg-white/5 rounded-full py-3 px-4 hover:bg-white/10 transition font-sans">
Get Started Free
</a>
<ul class="mt-8 space-y-4">
<li class="flex items-start gap-3 text-sm text-white/70">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="text-indigo-400 flex-shrink-0 mt-0.5">
<path d="M20 6 9 17l-5-5" class=""></path>
</svg>
<span class="font-sans">1 website</span>
</li>
<li class="flex items-start gap-3 text-sm text-white/70">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="text-indigo-400 flex-shrink-0 mt-0.5">
<path d="M20 6 9 17l-5-5" class=""></path>
</svg>
<span class="font-sans">GPT-5 AI generation</span>
</li>
<li class="flex items-start gap-3 text-sm text-white/70">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="text-indigo-400 flex-shrink-0 mt-0.5">
<path d="M20 6 9 17l-5-5" class=""></path>
</svg>
<span class="font-sans">Basic templates</span>
</li>
<li class="flex items-start gap-3 text-sm text-white/70">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="text-indigo-400 flex-shrink-0 mt-0.5">
<path d="M20 6 9 17l-5-5" class=""></path>
</svg>
<span class="font-sans">Community support</span>
</li>
</ul>
</div>
<!-- Pro Plan (Featured) -->
<div
class="[animation:fadeSlideIn_0.5s_ease-out_0.2s_both] animate-on-scroll border-gradient before:rounded-3xl bg-gradient-to-br from-indigo-500/10 via-fuchsia-500/10 to-amber-400/10 ring-2 ring-indigo-400/50 rounded-3xl p-8 relative">
<div class="absolute -top-4 left-1/2 -translate-x-1/2">
<span class="inline-flex items-center gap-1 text-xs font-medium text-black bg-gradient-to-r from-indigo-400 via-fuchsia-400 to-amber-400 rounded-full px-3 py-1 font-sans">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="star" class="lucide lucide-star w-[12px] h-[12px]" data-icon-replaced="true" style="color: rgb(0, 0, 0); width: 12px; height: 12px;"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" class=""></path></svg>
Most Popular
</span>
</div>
<div class="mb-6">
<h3 class="text-xl tracking-tight text-white font-manrope font-semibold">Pro</h3>
<p class="mt-2 text-sm text-white/60 font-sans">For professionals & teams</p>
</div>
<div class="mb-6">
<div class="flex items-baseline gap-2">
<span class="text-5xl tracking-tight text-white font-manrope font-semibold">$29</span>
<span class="text-white/50 font-sans">/month</span>
</div>
</div>
<a href="#"
class="block w-full text-center text-sm font-medium text-black bg-gradient-to-r from-indigo-400 via-fuchsia-400 to-amber-400 rounded-full py-3 px-4 hover:opacity-90 transition shadow-[0_8px_30px_rgba(129,140,248,0.25)] font-sans">
Start Pro Trial
</a>
<ul class="mt-8 space-y-4">
<li class="flex items-start gap-3 text-sm text-white/70">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="text-fuchsia-400 flex-shrink-0 mt-0.5">
<path d="M20 6 9 17l-5-5" class=""></path>
</svg>
<span class="font-sans">Unlimited websites</span>
</li>
<li class="flex items-start gap-3 text-sm text-white/70">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="text-fuchsia-400 flex-shrink-0 mt-0.5">
<path d="M20 6 9 17l-5-5" class=""></path>
</svg>
<span class="">Advanced GPT-5 features</span>
</li>
<li class="flex items-start gap-3 text-sm text-white/70">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="text-fuchsia-400 flex-shrink-0 mt-0.5">
<path d="M20 6 9 17l-5-5" class=""></path>
</svg>
<span class="font-sans">Premium templates</span>
</li>
<li class="flex items-start gap-3 text-sm text-white/70">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="text-fuchsia-400 flex-shrink-0 mt-0.5">
<path d="M20 6 9 17l-5-5" class=""></path>
</svg>
<span class="font-sans">Priority support</span>
</li>
<li class="flex items-start gap-3 text-sm text-white/70">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="text-fuchsia-400 flex-shrink-0 mt-0.5">
<path d="M20 6 9 17l-5-5" class=""></path>
</svg>
<span class="font-sans">Advanced analytics</span>
</li>
</ul>
</div>
<!-- Enterprise Plan -->
<div
class="[animation:fadeSlideIn_0.5s_ease-out_0.3s_both] animate-on-scroll border-gradient before:rounded-3xl bg-white/5 ring-1 ring-white/10 rounded-3xl p-8">
<div class="mb-6">
<h3 class="text-xl tracking-tight text-white font-manrope font-semibold">Enterprise</h3>
<p class="mt-2 text-sm text-white/60 font-sans">For large organizations</p>
</div>
<div class="mb-6">
<div class="flex items-baseline gap-2">
<span class="text-5xl tracking-tight text-white font-manrope font-semibold">Custom</span>
</div>
</div>
<a href="#"
class="block w-full text-center border-gradient before:rounded-full text-sm font-medium text-white bg-white/5 rounded-full py-3 px-4 hover:bg-white/10 transition font-sans">
Contact Sales
</a>
<ul class="mt-8 space-y-4">
<li class="flex items-start gap-3 text-sm text-white/70">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="text-amber-400 flex-shrink-0 mt-0.5">
<path d="M20 6 9 17l-5-5" class=""></path>
</svg>
<span class="font-sans">Everything in Pro</span>
</li>
<li class="flex items-start gap-3 text-sm text-white/70">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="text-amber-400 flex-shrink-0 mt-0.5">
<path d="M20 6 9 17l-5-5" class=""></path>
</svg>
<span class="font-sans">Dedicated account manager</span>
</li>
<li class="flex items-start gap-3 text-sm text-white/70">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="text-amber-400 flex-shrink-0 mt-0.5">
<path d="M20 6 9 17l-5-5" class=""></path>
</svg>
<span class="font-sans">Custom AI training</span>
</li>
<li class="flex items-start gap-3 text-sm text-white/70">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="text-amber-400 flex-shrink-0 mt-0.5">
<path d="M20 6 9 17l-5-5" class=""></path>
</svg>
<span class="font-sans">SSO & advanced security</span>
</li>
<li class="flex items-start gap-3 text-sm text-white/70">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="text-amber-400 flex-shrink-0 mt-0.5">
<path d="M20 6 9 17l-5-5" class=""></path>
</svg>
<span class="font-sans">SLA guarantee</span>
</li>
</ul>
</div>
</div>
<!-- FAQ Teaser -->
<div class="mt-16 text-center [animation:fadeSlideIn_0.5s_ease-out_0.4s_both] animate-on-scroll">
<p class="text-sm text-white/60 font-sans">
Have questions?
<a href="#" class="text-indigo-400 hover:text-indigo-300 transition font-sans">View our FAQ</a>
or
<a href="#" class="text-indigo-400 hover:text-indigo-300 transition font-sans">chat with us</a>
</p>
</div>
</div>
</section>
Created by: LandingHero
