Componente di visualizzazione dei prezzi di Cyberpunk

<div class="font-sans antialiased text-purple-200 bg-gray-950 dark:bg-black py-16 px-4 sm:px-8 lg:px-16">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-4xl sm:text-5xl lg:text-6xl font-bold text-center mb-12 sm:mb-16 tracking-tight drop-shadow-lg text-transparent bg-clip-text bg-gradient-to-r from-fuchsia-500 via-rose-500 to-amber-400 dark:from-fuchsia-400 dark:via-rose-400 dark:to-orange-300">
      Our Cybernetic Solutions
    </h2>
    <p class="text-lg sm:text-xl text-center text-purple-300 dark:text-purple-400 mb-16 max-w-3xl mx-auto">
      Navigate the digital frontier with our bespoke services, engineered for peak performance and unparalleled insight. Choose your path to technological superiority.
    </p>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 sm:gap-12">

      <!-- Pricing Card 1: Standard Protocol -->
      <div class="relative bg-gradient-to-br from-gray-900 to-gray-800 dark:from-black dark:to-gray-950 p-8 rounded-lg shadow-lg border border-fuchsia-600/50 dark:border-fuchsia-500/70 overflow-hidden transform hover:scale-105 transition-all duration-300 ease-in-out">
        <div class="absolute inset-0 bg-fuchsia-600/10 dark:bg-fuchsia-500/10 opacity-30 blur-sm"></div>
        <div class="relative z-10">
          <h3 class="text-3xl font-semibold mb-4 text-fuchsia-400">Standard Protocol</h3>
          <p class="text-purple-300 dark:text-purple-400 mb-6">Essential data streams and basic threat analysis.</p>
          <div class="flex items-baseline mb-8">
            <span class="text-5xl font-bold text-rose-400 drop-shadow-md">$499</span>
            <span class="text-xl text-purple-400 dark:text-purple-500 ml-2">/month</span>
          </div>
          <ul class="text-purple-200 dark:text-purple-300 space-y-3 mb-8">
            <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-rose-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Basic System Audit</li>
            <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-rose-400" fill="currentColor" viewBox="0 0 20 20" ><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> 24/7 Virtual Support</li>
            <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-rose-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> 10GB Secure Storage</li>
            <li class="flex items-center text-purple-500 dark:text-purple-600"><svg class="w-5 h-5 mr-3 text-purple-600 dark:text-purple-700" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path></svg> Advanced AI Analytics</li>
          </ul>
          <button class="w-full py-3 px-6 rounded-md text-lg font-bold text-gray-950 bg-gradient-to-r from-fuchsia-500 to-rose-500 hover:from-fuchsia-400 hover:to-rose-400 transition-all duration-300 transform hover:-translate-y-1 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 focus:ring-offset-gray-900 shadow-lg">
            Initiate Protocol
          </button>
        </div>
      </div>

      <!-- Pricing Card 2: Quantum Nexus (Featured) -->
      <div class="relative bg-gradient-to-br from-fuchsia-900 to-rose-900 dark:from-fuchsia-950 dark:to-rose-950 p-8 rounded-lg shadow-2xl border-2 border-rose-400 dark:border-rose-300 overflow-hidden transform hover:scale-105 transition-all duration-300 ease-in-out scale-102">
        <span class="absolute top-0 right-0 -mr-2 -mt-2 bg-gradient-to-br from-rose-500 to-orange-400 rounded-bl-lg px-4 py-1 text-sm font-semibold uppercase text-gray-950 dark:text-black shadow-md rotate-3">Most Popular</span>
        <div class="absolute inset-0 bg-orange-400/10 dark:bg-rose-400/10 opacity-30 blur-sm animate-pulse"></div>
        <div class="relative z-10">
          <h3 class="text-3xl font-semibold mb-4 text-orange-300">Quantum Nexus</h3>
          <p class="text-purple-200 dark:text-purple-300 mb-6">Full-spectrum data integration and predictive analysis.</p>
          <div class="flex items-baseline mb-8">
            <span class="text-6xl font-bold text-amber-300 drop-shadow-lg">$999</span>
            <span class="text-xl text-orange-300 dark:text-orange-400 ml-2">/month</span>
          </div>
          <ul class="text-purple-100 dark:text-purple-200 space-y-3 mb-8">
            <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-amber-300" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Complete System Overhaul</li>
            <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-amber-300" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Dedicated Cyber-Agent</li>
            <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-amber-300" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Unlimited Secure Storage</li>
            <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-amber-300" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Advanced AI Predictive Analytics</li>
            <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-amber-300" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Priority Network Access</li>
          </ul>
          <button class="w-full py-4 px-6 rounded-md text-lg font-bold text-gray-950 bg-gradient-to-r from-orange-400 to-amber-300 hover:from-orange-300 hover:to-amber-200 transition-all duration-300 transform hover:-translate-y-1 focus:outline-none focus:ring-2 focus:ring-amber-300 focus:ring-offset-2 focus:ring-offset-fuchsia-900 shadow-xl">
            Access Nexus
          </button>
        </div>
      </div>

      <!-- Pricing Card 3: Elite Cipher -->
      <div class="relative bg-gradient-to-br from-gray-900 to-gray-800 dark:from-black dark:to-gray-950 p-8 rounded-lg shadow-lg border border-orange-600/50 dark:border-orange-500/70 overflow-hidden transform hover:scale-105 transition-all duration-300 ease-in-out">
        <div class="absolute inset-0 bg-orange-600/10 dark:bg-orange-500/10 opacity-30 blur-sm"></div>
        <div class="relative z-10">
          <h3 class="text-3xl font-semibold mb-4 text-orange-400">Elite Cipher</h3>
          <p class="text-purple-300 dark:text-purple-400 mb-6">Proprietary algorithms and direct neural interface.</p>
          <div class="flex items-baseline mb-8">
            <span class="text-5xl font-bold text-amber-400 drop-shadow-md">$1499</span>
            <span class="text-xl text-purple-400 dark:text-purple-500 ml-2">/month</span>
          </div>
          <ul class="text-purple-200 dark:text-purple-300 space-y-3 mb-8">
            <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Bespoke System Engineering</li>
            <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> 24/7 On-Site Specialist</li>
            <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Decentralized Data Vault</li>
            <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Quantum AI Integration</li>
          </ul>
          <button class="w-full py-3 px-6 rounded-md text-lg font-bold text-gray-950 bg-gradient-to-r from-orange-500 to-amber-400 hover:from-orange-400 hover:to-amber-300 transition-all duration-300 transform hover:-translate-y-1 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 focus:ring-offset-gray-900 shadow-lg">
            Activate Cipher
          </button>
        </div>
      </div>

    </div>

    <div class="mt-20 text-center">
      <p class="text-lg text-purple-400 dark:text-purple-500 mb-6">Need a custom solution for your unique digital footprint?</p>
      <a href="#" class="inline-flex items-center px-8 py-4 border border-rose-500 rounded-full text-lg font-bold text-rose-300 hover:text-gray-950 hover:bg-gradient-to-r hover:from-rose-500 hover:to-amber-400 transition-all duration-300 transform hover:-translate-y-1 shadow-lg dark:hover:text-black dark:hover:from-rose-400 dark:hover:to-amber-300">
        <svg class="w-6 h-6 mr-3 text-current" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
        Contact Our Data Alchemists
      </a>
    </div>
  </div>
</div>