Glassmorphic 3-Tier Pricing Table with Add-ons

<section class="w-full sm:px-6 lg:px-8 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/0d850914-e949-410a-ac08-c604b47ea90f_3840w.jpg)] bg-cover mr-auto ml-auto pt-8 pr-4 pb-8 pl-4">
  <div class="mt-16 text-center">
    <h2 class="text-3xl lg:text-4xl tracking-tighter font-sans">Simple, transparent pricing</h2>
    <p class="max-w-2xl text-base text-neutral-300 mt-4 mr-auto ml-auto font-sans">
      Start free, scale as you grow. No hidden fees or complex usage calculations.
    </p>
  </div>
  
  <div class="grid gap-8 lg:grid-cols-3 mt-12 mr-auto ml-auto max-w-7xl">
    <!-- Starter Plan -->
    <div class="card-top glass-effect w-full h-fit overflow-hidden relative transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] bg-gradient-to-r from-white/15 to-white/5 rounded-[1.2em]" style="backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);">
      <div class="absolute inset-0 border-white/20 border rounded-[1.2em]" style="mask-image: linear-gradient(135deg, white, transparent 60%)"></div>
      <div class="absolute inset-0 border-white/10 border rounded-[1.2em]" style="mask-image: linear-gradient(135deg, transparent 60%, white)"></div>
      
      <div class="relative pt-8 pr-8 pb-8 pl-8">
        <div class="absolute -right-8 -top-8 h-64 w-64 bg-white/10 rounded-full blur-[100px]"></div>
        <div class="relative">
          <h3 class="text-xl font-semibold tracking-tight font-sans">Starter</h3>
          <p class="mt-2 text-sm text-neutral-400 font-sans">Perfect for prototypes and small projects</p>
          <div class="mt-6 flex items-baseline gap-2">
            <span class="text-3xl tracking-tighter font-sans">$0</span>
            <span class="text-sm text-neutral-400 font-sans">/month</span>
          </div>
          <ul class="mt-8 space-y-3 text-sm">
            <li class="flex items-start gap-3">
              <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" class="mt-0.5 h-4 w-4 text-orange-300"><circle cx="12" cy="12" r="10" class=""></circle><path d="m9 12 2 2 4-4" class=""></path></svg>
              <span class="text-neutral-300 font-sans">10K API calls/month</span>
            </li>
            <li class="flex items-start gap-3">
              <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" class="mt-0.5 h-4 w-4 text-orange-300"><circle cx="12" cy="12" r="10" class=""></circle><path d="m9 12 2 2 4-4" class=""></path></svg>
              <span class="text-neutral-300 font-sans">Basic evaluation pipeline</span>
            </li>
            <li class="flex items-start gap-3">
              <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" class="mt-0.5 h-4 w-4 text-orange-300"><circle cx="12" cy="12" r="10" class=""></circle><path d="m9 12 2 2 4-4" class=""></path></svg>
              <span class="text-neutral-300 font-sans">3 team members</span>
            </li>
            <li class="flex items-start gap-3">
              <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" class="mt-0.5 h-4 w-4 text-orange-300"><circle cx="12" cy="12" r="10" class=""></circle><path d="m9 12 2 2 4-4" class=""></path></svg>
              <span class="text-neutral-300 font-sans">Community support</span>
            </li>
          </ul>
          <button class="mt-8 w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-sm font-medium text-white hover:bg-white/10 transition font-sans">
            Get Started Free
          </button>
        </div>
      </div>
    </div>

    <!-- Pro Plan -->
    <div class="card-top w-full h-fit overflow-hidden relative transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] ring-1 ring-neutral-300/20 bg-gradient-to-br from-neutral-900/80 to-neutral-900/40 rounded-[1.2em]" style="backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);">
      
      
      
      <div class="relative pt-8 pr-8 pb-8 pl-8">
        
        <div class="relative">
          <h3 class="text-xl font-semibold tracking-tight font-sans">Pro</h3>
          <p class="mt-2 text-sm text-neutral-400 font-sans">For growing teams and production apps</p>
          <div class="mt-6 flex items-baseline gap-2">
            <span class="text-3xl tracking-tighter font-sans">$99</span>
            <span class="text-sm text-neutral-400 font-sans">/month</span>
          </div>
          <ul class="mt-8 space-y-3 text-sm">
            <li class="flex items-start gap-3">
              <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" class="mt-0.5 h-4 w-4 text-orange-300"><circle cx="12" cy="12" r="10" class=""></circle><path d="m9 12 2 2 4-4" class=""></path></svg>
              <span class="text-neutral-300 font-sans">1M API calls/month</span>
            </li>
            <li class="flex items-start gap-3">
              <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" class="mt-0.5 h-4 w-4 text-orange-300"><circle cx="12" cy="12" r="10" class=""></circle><path d="m9 12 2 2 4-4" class=""></path></svg>
              <span class="text-neutral-300 font-sans">Advanced evaluations &amp; A/B testing</span>
            </li>
            <li class="flex items-start gap-3">
              <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" class="mt-0.5 h-4 w-4 text-orange-300"><circle cx="12" cy="12" r="10" class=""></circle><path d="m9 12 2 2 4-4" class=""></path></svg>
              <span class="text-neutral-300 font-sans">Unlimited team members</span>
            </li>
            <li class="flex items-start gap-3">
              <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" class="mt-0.5 h-4 w-4 text-orange-300"><circle cx="12" cy="12" r="10" class=""></circle><path d="m9 12 2 2 4-4" class=""></path></svg>
              <span class="text-neutral-300 font-sans">Priority support &amp; SLA</span>
            </li>
          </ul>
          <button class="w-full hover:brightness-95 transition text-sm font-semibold text-neutral-900 bg-gradient-to-br from-orange-300 to-orange-300 rounded-xl mt-8 pt-3 pr-4 pb-3 pl-4 font-sans">
            Start 14-Day Trial
          </button>
        </div>
      </div>
    </div>

    <!-- Enterprise Plan -->
    <div class="card-top glass-effect w-full h-fit overflow-hidden relative transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] bg-gradient-to-r from-white/15 to-white/5 rounded-[1.2em]" style="backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);">
      <div class="absolute inset-0 border-white/20 border rounded-[1.2em]" style="mask-image: linear-gradient(135deg, white, transparent 60%)"></div>
      <div class="absolute inset-0 border-white/10 border rounded-[1.2em]" style="mask-image: linear-gradient(135deg, transparent 60%, white)"></div>
      
      <div class="relative pt-8 pr-8 pb-8 pl-8">
        <div class="absolute -left-8 -bottom-8 h-16 w-16 rounded-full bg-orange-300/10 blur-xl"></div>
        <div class="relative">
          <h3 class="text-xl font-semibold tracking-tight font-sans">Enterprise</h3>
          <p class="mt-2 text-sm text-neutral-400 font-sans">Custom solutions for large organizations</p>
          <div class="mt-6 flex items-baseline gap-2">
            <span class="text-3xl tracking-tighter font-sans">Custom</span>
          </div>
          <ul class="mt-8 space-y-3 text-sm">
            <li class="flex items-start gap-3">
              <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" class="mt-0.5 h-4 w-4 text-orange-300"><circle cx="12" cy="12" r="10" class=""></circle><path d="m9 12 2 2 4-4" class=""></path></svg>
              <span class="text-neutral-300 font-sans">Unlimited API calls</span>
            </li>
            <li class="flex items-start gap-3">
              <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" class="mt-0.5 h-4 w-4 text-orange-300"><circle cx="12" cy="12" r="10" class=""></circle><path d="m9 12 2 2 4-4" class=""></path></svg>
              <span class="text-neutral-300 font-sans">SOC2 compliance &amp; audit trails</span>
            </li>
            <li class="flex items-start gap-3">
              <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" class="mt-0.5 h-4 w-4 text-orange-300"><circle cx="12" cy="12" r="10" class=""></circle><path d="m9 12 2 2 4-4" class=""></path></svg>
              <span class="text-neutral-300 font-sans">Dedicated infrastructure</span>
            </li>
            <li class="flex items-start gap-3">
              <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" class="mt-0.5 h-4 w-4 text-orange-300"><circle cx="12" cy="12" r="10" class=""></circle><path d="m9 12 2 2 4-4" class=""></path></svg>
              <span class="text-neutral-300 font-sans">24/7 dedicated support</span>
            </li>
          </ul>
          <button class="mt-8 w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-sm font-medium text-white hover:bg-white/10 transition font-sans">
            Contact Sales
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Add-ons -->
  <div class="card-top glass-effect w-full h-fit overflow-hidden relative transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] bg-gradient-to-r from-white/15 to-white/5 rounded-[1.2em] mt-12 mr-auto ml-auto max-w-7xl" style="backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);">
    <div class="absolute inset-0 border-white/20 border rounded-[1.2em]" style="mask-image: linear-gradient(135deg, white, transparent 60%)"></div>
    <div class="absolute inset-0 border-white/10 border rounded-[1.2em]" style="mask-image: linear-gradient(135deg, transparent 60%, white)"></div>
    
    <div class="relative max-w-7xl text-center mr-auto ml-auto pt-8 pr-8 pb-8 pl-8">
      <h3 class="text-lg font-semibold tracking-tight font-sans">Need more than what's included?</h3>
      <p class="mt-2 text-sm text-neutral-400 font-sans">Additional API calls: $0.10 per 1K calls • Premium models: $0.50 per 1K calls</p>
      <div class="mt-6 flex flex-wrap justify-center gap-4 text-xs text-neutral-500 font-sans">
          <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" class="h-3 w-3 text-orange-300"><circle cx="12" cy="12" r="10" class=""></circle><path d="m9 12 2 2 4-4" class=""></path></svg>
          No setup fees
        
        <span class="flex items-center gap-2 font-sans">
          <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" class="h-3 w-3 text-orange-300"><circle cx="12" cy="12" r="10" class=""></circle><path d="m9 12 2 2 4-4" class=""></path></svg>
          Cancel anytime
        </span>
        <span class="flex items-center gap-2 font-sans">
          <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" class="h-3 w-3 text-orange-300"><circle cx="12" cy="12" r="10" class=""></circle><path d="m9 12 2 2 4-4" class=""></path></svg>
          30-day money back
        </span>
      </div>
    </div>
  </div>
</section>