Interactive Pricing Table with Plan Comparison

<section class="min-h-[100svh] grid place-items-center pt-24 pr-4 pb-24 pl-4">
        <div class="w-full max-w-6xl mr-auto ml-auto">
          <div class="flex flex-col [animation:fadeSlideIn_0.8s_ease-out_0.1s_both] animate-on-scroll text-center mb-0 pr-4 pl-4 items-center">
            <div class="inline-flex gap-2 bg-blue-500/10 border-blue-500/20 border rounded-full mb-6 pt-1 pr-3 pb-1 pl-3 items-center">
              <span class="h-2 w-2 rounded-full bg-blue-400 animate-pulse"></span>
              <span class="text-xs font-medium text-blue-300 tracking-wide uppercase font-geist">
                Plans &amp; Pricing
              </span>
            </div>
            <h2 class="md:text-5xl text-3xl font-medium text-white tracking-tight font-jakarta mb-6 text-center">
              Transparent pricing for
              <span class="text-blue-500 font-jakarta font-medium">
                every stage
              </span>
            </h2>
            <p class="text-lg mb-8 max-w-2xl mx-auto font-geist text-gray-400">
              Start building for free, then scale as you grow. Upgrade,
              downgrade, or cancel at any time with no hidden fees.
            </p>

            <div class="flex items-center justify-center mb-10 rounded-full p-1 border border-white/10 shadow-inner shadow-black/30 bg-gray-800/50">
              <button class="px-5 py-2 text-sm font-semibold rounded-full bg-blue-600 text-white shadow-md shadow-blue-900/50 transition-all duration-200 font-geist">
                Monthly Billing
              </button>
              <button class="px-5 py-2 text-sm font-semibold rounded-full hover:text-white transition-colors duration-200 font-geist relative text-gray-400">
                Annual Billing
                
              </button>
            </div>
          </div>

          ---

          <div class="group spotlight-card overflow-hidden overflow-x-auto shadow-black/50 [animation:fadeSlideIn_0.8s_ease-out_0.2s_both] animate-on-scroll bg-[#0A0A0A] w-full border-white/5 border rounded-[32px] mt-8 shadow-2xl relative" style="--mouse-x: 0px; --mouse-y: 0px;">
            <!-- Spotlight Flashlight Effects -->
            <div class="pointer-events-none absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500" style="background: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y), rgba(255,255,255,0.06), transparent 40%); z-index: 1;"></div>
            <div class="pointer-events-none absolute inset-0 rounded-[32px] opacity-0 group-hover:opacity-100 transition-opacity duration-500" style="background: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y), rgba(255,255,255,0.4), transparent 40%); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; -webkit-mask-composite: xor; padding bg-[linear-gradient(rgba(255,255,255,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.03)_1px,transparent_1px)] bg-[size:40px_40px] [mask-image:radial-gradient(circle_at_100%_100%,black_40%,transparent_100%)] pointer-events-none z-0"></div>

            <div class="min-w-[800px] grid grid-cols-4 divide-x divide-white/5 z-10 text-sm relative group" onmousemove="const rect = this.getBoundingClientRect(); this.style.setProperty('--x', (event.clientX - rect.left) + 'px'); this.style.setProperty('--y', (event.clientY - rect.top) + 'px');" style="--x: 125px; --y: 1.8046875px;">
              <!-- Flashlight Background Effect -->
              <div class="pointer-events-none absolute inset-0 z-0 transition-opacity duration-500 opacity-0 group-hover:opacity-100" style="background: radial-gradient(600px circle at var(--x) var(--y), rgba(255, 255, 255, 0.03), transparent 40%);"></div>
              
              <!-- Flashlight Border Effect -->
              <div class="pointer-events-none absolute inset-0 z-20 transition-opacity duration-500 opacity-0 group-hover:opacity-100" style="background: radial-gradient(600px circle at var(--x) var(--y), rgba(255, 255, 255, 0.3), transparent 40%); padding: 1px; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; -webkit-mask-composite: xor;"></div>

              <div class="flex flex-col bg-gradient-to-br from-white/10 to-white/0">
                <!-- MERGED CONTAINER (exact height of h-10 + title block) -->
                <div class="flex flex-col border-white/5 border-b pt-12 pr-6 pb-10 pl-6 justify-center">
                  <h3 class="text-2xl font-semibold text-white tracking-tight font-jakarta">
                    Compare
                    <span class="text-gray-500">Features</span>
                  </h3>
                  <p class="text-xs mt-2 text-gray-500">
                    All plans include core functionality.
                  </p>
                </div>

                <!-- rows -->
                <div class="px-6 flex items-center font-geist border-b py-4 min-h-[4rem] text-gray-400 border-white/5">
                  Monthly Projects
                </div>
                <div class="px-6 flex items-center font-geist border-b py-4 min-h-[4rem] text-gray-400 border-white/5">
                  Code Export Options
                </div>
                <div class="px-6 flex items-center font-geist border-b py-4 min-h-[4rem] text-gray-400 border-white/5">
                  Team Seats
                </div>
                <div class="px-6 flex items-center font-geist border-b py-4 min-h-[4rem] text-gray-400 border-white/5">
                  Dedicated Version History
                </div>
                <div class="px-6 flex items-center font-geist border-b py-4 min-h-[4rem] text-gray-400 border-white/5">
                  Priority Support / SLA
                </div>

                <div class="h-24 px-6 flex items-center border-b border-white/5"></div>
              </div>

              <div class="flex flex-col">
                <div class="flex uppercase text-xs font-bold text-emerald-400 tracking-widest font-geist bg-emerald-500/10 h-10 border-b items-center justify-center border-white/5">
                  Starter
                </div>
                <div class="flex flex-col border-b py-6 items-center justify-center border-white/5">
                  <div class="text-3xl font-semibold text-white font-jakarta tracking-tight">
                    $0
                  </div>
                  <div class="text-xs font-geist mt-1 text-gray-500">
                    Free Forever
                  </div>
                </div>
                <div class="flex items-center justify-center border-b font-medium font-geist py-4 min-h-[4rem] border-white/5 text-gray-200">
                  3
                </div>
                <div class="flex items-center justify-center border-b font-medium font-geist py-4 min-h-[4rem] border-white/5 text-gray-200">
                  React Only
                </div>
                <div class="flex items-center justify-center border-b font-medium font-geist py-4 min-h-[4rem] border-white/5 text-gray-200">
                  1
                </div>
                <div class="flex items-center justify-center border-b py-4 min-h-[4rem] border-white/5">
                  <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-gray-700">
                    <path d="M18 6 6 18" class=""></path>
                    <path d="m6 6 12 12" class=""></path>
                  </svg>
                </div>
                <div class="flex items-center justify-center border-b py-4 min-h-[4rem] border-white/5">
                  <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-gray-700">
                    <path d="M18 6 6 18" class=""></path>
                    <path d="m6 6 12 12" class=""></path>
                  </svg>
                </div>
                <div class="h-24 p-4 flex items-center justify-center border-b border-white/5">
                  <button class="w-full inline-flex text-sm font-semibold rounded-full px-8 py-3.5 items-center justify-center transition-all duration-300 text-white font-geist bg-blue-950 border border-blue-600 shadow-lg shadow-blue-500/20 hover:bg-blue-700 hover:border-blue-300 hover:shadow-[0_0_40px_rgba(0,123,255,0.8)] focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 focus:ring-offset-blue-950 uppercase tracking-wide">
                    Get Started
                  </button>
                </div>
              </div>

              <div class="flex flex-col relative">
                <div class="absolute inset-0 shadow-[inset_0_0_10px_rgba(59,130,246,0.1)] rounded-2xl -m-0.5 pointer-events-none"></div>

                <div class="h-10 flex items-center justify-center bg-blue-600 text-white font-bold uppercase text-xs tracking-widest font-jakarta border-b relative z-10 border-white/5">
                  Professional
                </div>
                <div class="flex flex-col z-10 border-b pt-6 pb-6 relative items-center justify-center border-white/5">
                  <div class="text-3xl font-bold text-white font-jakarta tracking-tight">
                    $49
                  </div>
                  <div class="text-xs font-geist mt-1 text-gray-500">
                    Per Month
                  </div>
                </div>
                <div class="flex items-center justify-center border-b text-white font-bold font-geist relative z-10 py-4 min-h-[4rem] border-white/5">
                  Unlimited
                </div>
                <div class="flex items-center justify-center border-b text-white font-bold font-geist relative z-10 py-4 min-h-[4rem] border-white/5">
                  All Frameworks
                </div>
                <div class="flex items-center justify-center border-b text-white font-bold font-geist relative z-10 py-4 min-h-[4rem] border-white/5">
                  5 Seats
                </div>
                <div class="flex items-center justify-center border-b relative z-10 py-4 min-h-[4rem] border-white/5">
                  <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-blue-500">
                    <polyline points="20 6 9 17 4 12" class=""></polyline>
                  </svg>
                </div>
                <div class="flex items-center justify-center border-b relative z-10 py-4 min-h-[4rem] border-white/5">
                  <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-blue-500">
                    <polyline points="20 6 9 17 4 12" class=""></polyline>
                  </svg>
                </div>
                <div class="h-24 p-4 flex items-center justify-center border-b relative z-10 border-white/5">
                  <button class="w-full inline-flex text-sm font-semibold rounded-full px-8 py-3.5 items-center justify-center transition-all duration-300 text-white font-geist bg-gradient-to-tr from-blue-400 via-blue-600 to-blue-800 shadow-[0_4px_15px_rgba(0,123,255,0.4)] hover:shadow-[0_8px_25px_rgba(0,123,255,0.8)] hover:scale-[1.02] hover:bg-gradient-to-tr hover:from-blue-300 hover:via-blue-500 hover:to-blue-700 active:shadow-inner active:shadow-blue-900/50 active:scale-[0.98] active:duration-75 uppercase tracking-wide">
                    Start 14-Day Trial
                  </button>
                </div>
              </div>

              <div class="flex flex-col">
                <div class="h-10 flex items-center justify-center bg-purple-500/10 text-purple-400 font-bold uppercase text-xs tracking-widest font-geist border-b border-white/5">
                  Business
                </div>
                <div class="flex flex-col border-b py-6 items-center justify-center border-white/5">
                  <div class="text-3xl font-semibold text-white font-jakarta tracking-tight">
                    $149
                  </div>
                  <div class="text-xs font-geist mt-1 text-gray-500">
                    Per Month
                  </div>
                </div>
                <div class="flex items-center justify-center border-b font-medium font-geist py-4 min-h-[4rem] border-white/5 text-gray-200">
                  Unlimited
                </div>
                <div class="flex items-center justify-center border-b font-medium font-geist py-4 min-h-[4rem] border-white/5 text-gray-200">
                  All + Source
                </div>
                <div class="flex items-center justify-center border-b font-medium font-geist py-4 min-h-[4rem] border-white/5 text-gray-200">
                  Unlimited
                </div>
                <div class="flex items-center justify-center border-b py-4 min-h-[4rem] border-white/5">
                  <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-purple-500">
                    <polyline points="20 6 9 17 4 12" class=""></polyline>
                  </svg>
                </div>
                <div class="flex items-center justify-center border-b py-4 min-h-[4rem] border-white/5">
                  <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-purple-500">
                    <polyline points="20 6 9 17 4 12" class=""></polyline>
                  </svg>
                </div>
                <div class="h-24 p-4 flex items-center justify-center border-b border-white/5">
                  <button class="w-full inline-flex text-sm font-semibold rounded-full px-8 py-3.5 items-center justify-center transition-all duration-300 text-white font-geist bg-blue-950 border border-blue-600 shadow-lg shadow-blue-500/20 hover:bg-blue-700 hover:border-blue-300 hover:shadow-[0_0_40px_rgba(0,123,255,0.8)] focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 focus:ring-offset-blue-950 uppercase tracking-wide">
                    Buy Now
                  </button>
                </div>
              </div>
            </div>
            <script>
              (function() {
                const card = document.querySelector('[data-element-id="aura-emiale2oh2adgsyy"]');
                if (card) {
                  card.addEventListener('mousemove', (e) => {
                    const rect = card.getBoundingClientRect();
                    card.style.setProperty('--mouse-x', (e.clientX - rect.left) + 'px');
                    card.style.setProperty('--mouse-y', (e.clientY - rect.top) + 'px');
                  });
                }
              })();
            </script>
          </div>
        </div>
      </section>