imail/resources/views/components/bento/pricing.blade.php

<section id="pricing" class="py-24 relative overflow-hidden" x-data="{ yearly: false }">
    <!-- Background Accents -->
    <div class="absolute top-0 right-0 w-[600px] h-[600px] bg-pink-500/5 rounded-full blur-[120px] -z-10"></div>
    <div class="absolute bottom-0 left-0 w-[600px] h-[600px] bg-emerald-500/5 rounded-full blur-[120px] -z-10"></div>

    <div class="container mx-auto px-4 lg:px-8 max-w-7xl">
        <!-- Header -->
        <div class="mb-16 md:mb-20 flex flex-col items-center text-center">
            <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-pink-500/10 border border-pink-500/20 mb-6">
                <div class="w-1.5 h-1.5 rounded-full bg-pink-500 animate-pulse"></div>
                <span class="text-[10px] font-bold tracking-widest text-pink-500 uppercase">Pricing</span>
            </div>
            <h2 class="text-3xl md:text-5xl font-bold tracking-tight text-white mb-6">
                Simple, <span class="text-emerald-500">transparent</span> pricing.
            </h2>
            <p class="text-zinc-400 max-w-2xl text-sm md:text-lg leading-relaxed mb-10">
                Choose the plan that fits your needs. No hidden fees, no complicated contracts. 
                Switch or cancel anytime.
            </p>

            <!-- Billing Toggle -->
            <div class="flex items-center gap-4 p-1 bg-zinc-900 border border-white/5 rounded-full">
                <button 
                    @click="yearly = false"
                    class="px-6 py-2 rounded-full text-sm font-medium transition-all duration-300"
                    :class="!yearly ? 'bg-zinc-800 text-white shadow-lg' : 'text-zinc-500 hover:text-zinc-300'"
                >
                    Monthly
                </button>
                <button 
                    @click="yearly = true"
                    class="px-6 py-2 rounded-full text-sm font-medium transition-all duration-300 relative"
                    :class="yearly ? 'bg-zinc-800 text-white shadow-lg' : 'text-zinc-500 hover:text-zinc-300'"
                >
                    Yearly
                    <span class="absolute -top-6 -right-4 px-2 py-0.5 bg-emerald-500 text-[10px] font-bold text-black rounded-md rotate-12 animate-bounce">
                        SAVE 20%
                    </span>
                </button>
            </div>
        </div>

        <!-- Pricing Cards -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <!-- Free Plan -->
            <div class="relative group">
                <div class="h-full p-8 rounded-3xl bg-zinc-950/50 border border-white/5 backdrop-blur-xl flex flex-col transition-all duration-500 hover:border-white/10 hover:translate-y-[-4px]">
                    <div class="mb-8">
                        <h3 class="text-xl font-bold text-white mb-2">Free</h3>
                        <p class="text-zinc-500 text-sm">Perfect for individuals starting out.</p>
                    </div>
                    
                    <div class="mb-8 flex items-baseline gap-1">
                        <span class="text-4xl font-bold text-white">$0</span>
                        <span class="text-zinc-500 text-sm">/mo</span>
                    </div>

                    <ul class="space-y-4 mb-10 flex-1">
                        <li class="flex items-center gap-3 text-sm text-zinc-300">
                            <svg class="w-5 h-5 text-emerald-500/60" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                            Up to 5 active addresses
                        </li>
                        <li class="flex items-center gap-3 text-sm text-zinc-300">
                            <svg class="w-5 h-5 text-emerald-500/60" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                            24h retention period
                        </li>
                        <li class="flex items-center gap-3 text-sm text-zinc-300">
                            <svg class="w-5 h-5 text-emerald-500/60" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                            Standard delivery speeds
                        </li>
                        <li class="flex items-center gap-3 text-sm text-zinc-300/40">
                            <svg class="w-5 h-5 text-zinc-800" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                            Custom domain support
                        </li>
                    </ul>

                    <button class="w-full py-4 rounded-xl bg-white/5 border border-white/10 text-white font-bold text-sm transition-all hover:bg-white/10">
                        Get Started
                    </button>
                </div>
            </div>

            <!-- Pro Plan (Most Popular) -->
            <div class="relative group md:scale-105 z-10">
                <!-- Glowing Border Effect (Balanced) -->
                <div class="absolute -inset-[1px] bg-gradient-to-b from-pink-500 via-pink-500/40 to-emerald-500/40 rounded-[25px] blur-[3px] opacity-40 group-hover:opacity-100 transition-opacity duration-500"></div>
                
                <div class="h-full p-8 rounded-3xl bg-zinc-900 border border-white/10 backdrop-blur-2xl flex flex-col relative transition-all duration-500 hover:translate-y-[-4px]">
                    <div class="absolute top-4 right-4 px-3 py-1 rounded-full bg-pink-500 text-[10px] font-black text-white uppercase tracking-tighter shadow-[0_0_15px_rgba(236,72,153,0.5)]">
                        Most Popular
                    </div>

                    <div class="mb-8">
                        <h3 class="text-xl font-bold text-white mb-2">Pro</h3>
                        <p class="text-zinc-500 text-sm">Advanced privacy for power users.</p>
                    </div>
                    
                    <div class="mb-8 flex items-baseline gap-1">
                        <span class="text-4xl font-bold text-white" x-text="yearly ? '$12' : '$15'">$15</span>
                        <span class="text-zinc-500 text-sm" x-text="yearly ? '/mo (billed yearly)' : '/mo'">/mo</span>
                    </div>

                    <ul class="space-y-4 mb-10 flex-1">
                        <li class="flex items-center gap-3 text-sm text-zinc-200">
                            <svg class="w-5 h-5 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                            Unlimited active addresses
                        </li>
                        <li class="flex items-center gap-3 text-sm text-zinc-200">
                            <svg class="w-5 h-5 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                            7-day retention period
                        </li>
                        <li class="flex items-center gap-3 text-sm text-zinc-200">
                            <svg class="w-5 h-5 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                            Blazing fast SMTP delivery
                        </li>
                        <li class="flex items-center gap-3 text-sm text-zinc-200">
                            <svg class="w-5 h-5 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                            Custom domain support
                        </li>
                        <li class="flex items-center gap-3 text-sm text-zinc-200">
                            <svg class="w-5 h-5 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                            API access for developers
                        </li>
                    </ul>

                    <button class="w-full py-4 rounded-xl bg-white text-black font-black text-sm transition-all hover:bg-zinc-200 shadow-[0_0_20px_rgba(255,255,255,0.2)]">
                        Upgrade to Pro
                    </button>
                </div>
            </div>

            <!-- Enterprise Plan -->
            <div class="relative group">
                <div class="h-full p-8 rounded-3xl bg-zinc-950/50 border border-white/5 backdrop-blur-xl flex flex-col transition-all duration-500 hover:border-white/10 hover:translate-y-[-4px]">
                    <div class="mb-8">
                        <h3 class="text-xl font-bold text-white mb-2">Enterprise</h3>
                        <p class="text-zinc-500 text-sm">Custom solutions for organizations.</p>
                    </div>
                    
                    <div class="mb-8 flex items-baseline gap-1">
                        <span class="text-4xl font-bold text-white">Custom</span>
                    </div>

                    <ul class="space-y-4 mb-10 flex-1">
                        <li class="flex items-center gap-3 text-sm text-zinc-300">
                            <svg class="w-5 h-5 text-zinc-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                            Everything in Pro
                        </li>
                        <li class="flex items-center gap-3 text-sm text-zinc-300">
                            <svg class="w-5 h-5 text-zinc-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                            SLA-backed uptime
                        </li>
                        <li class="flex items-center gap-3 text-sm text-zinc-300">
                            <svg class="w-5 h-5 text-zinc-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                            Dedicated support manager
                        </li>
                        <li class="flex items-center gap-3 text-sm text-zinc-300">
                            <svg class="w-5 h-5 text-zinc-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                            Custom security audits
                        </li>
                    </ul>

                    <button class="w-full py-4 rounded-xl bg-white/5 border border-white/10 text-white font-bold text-sm transition-all hover:bg-white/10">
                        Contact Sales
                    </button>
                </div>
            </div>
        </div>
    </div>
</section>