ウィッシュリストコンポーネント

<div class="p-4 sm:p-6 md:p-8 bg-zinc-100 dark:bg-zinc-900 min-h-screen font-sans">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-4xl md:text-5xl font-extrabold text-center mb-12 text-zinc-900 dark:text-white leading-tight" style="text-shadow: 0 0 5px #00FFFF, 0 0 10px #00FFFF, 0 0 15px #00FFFF, 0 0 20px #00FFFF;">
      Your <span class="text-cyan-500 dark:text-cyan-400">Service</span> Wishlist
    </h2>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
      <!-- Item 1 -->
      <div class="relative flex flex-col bg-white dark:bg-zinc-800 rounded-xl shadow-lg dark:shadow-zinc-700/50 overflow-hidden transform transition-all duration-300 hover:scale-[1.02] hover:shadow-xl dark:hover:shadow-zinc-700/70 border border-transparent hover:border-cyan-400 dark:hover:border-cyan-600">
        <button class="absolute top-3 right-3 p-2 bg-gradient-to-br from-red-500 to-rose-600 rounded-full shadow-md text-white text-sm font-semibold transition-transform duration-200 hover:scale-105 active:scale-95 z-10" aria-label="Remove item">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd" />
          </svg>
        </button>
        <img src="https://picsum.photos/600/400?random=1" alt="Strategic Planning" class="w-full h-48 object-cover rounded-t-xl">
        <div class="p-6 flex flex-col flex-grow">
          <h3 class="text-2xl font-bold text-zinc-900 dark:text-white mb-2 leading-snug tracking-wide" style="text-shadow: 0 0 3px rgba(0,255,255,0.3);">Strategic Planning</h3>
          <p class="text-base text-zinc-600 dark:text-zinc-300 mb-4 flex-grow">
            Develop robust strategies that align with your business goals, ensuring long-term growth and success in competitive markets.
          </p>
          <div class="mt-auto flex justify-between items-center">
            <span class="text-xl font-bold text-teal-600 dark:text-teal-400">$1200 - $3500</span>
            <button class="px-5 py-2.5 rounded-full text-sm font-semibold text-white transition-all duration-300 transform hover:scale-105 active:scale-95
                           bg-gradient-to-br from-cyan-500 to-blue-600 shadow-lg shadow-cyan-500/40 dark:shadow-cyan-700/60
                           hover:from-cyan-600 hover:to-blue-700 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2 dark:focus:ring-offset-zinc-900"
                    aria-label="Request quote for Strategic Planning">
              Request Quote
            </button>
          </div>
        </div>
      </div>

      <!-- Item 2 -->
      <div class="relative flex flex-col bg-white dark:bg-zinc-800 rounded-xl shadow-lg dark:shadow-zinc-700/50 overflow-hidden transform transition-all duration-300 hover:scale-[1.02] hover:shadow-xl dark:hover:shadow-zinc-700/70 border border-transparent hover:border-lime-400 dark:hover:border-lime-600">
        <button class="absolute top-3 right-3 p-2 bg-gradient-to-br from-red-500 to-rose-600 rounded-full shadow-md text-white text-sm font-semibold transition-transform duration-200 hover:scale-105 active:scale-95 z-10" aria-label="Remove item">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd" />
          </svg>
        </button>
        <img src="https://picsum.photos/600/400?random=2" alt="Digital Transformation" class="w-full h-48 object-cover rounded-t-xl">
        <div class="p-6 flex flex-col flex-grow">
          <h3 class="text-2xl font-bold text-zinc-900 dark:text-white mb-2 leading-snug tracking-wide" style="text-shadow: 0 0 3px rgba(128,255,0,0.3);">Digital Transformation</h3>
          <p class="text-base text-zinc-600 dark:text-zinc-300 mb-4 flex-grow">
            Guide your organization through the complexities of digital evolution, leveraging technology for enhanced efficiency and innovation.
          </p>
          <div class="mt-auto flex justify-between items-center">
            <span class="text-xl font-bold text-lime-600 dark:text-lime-400">$2000 - $5000</span>
            <button class="px-5 py-2.5 rounded-full text-sm font-semibold text-white transition-all duration-300 transform hover:scale-105 active:scale-95
                           bg-gradient-to-br from-lime-500 to-green-600 shadow-lg shadow-lime-500/40 dark:shadow-lime-700/60
                           hover:from-lime-600 hover:to-green-700 focus:outline-none focus:ring-2 focus:ring-lime-500 focus:ring-offset-2 dark:focus:ring-offset-zinc-900"
                    aria-label="Request quote for Digital Transformation">
              Request Quote
            </button>
          </div>
        </div>
      </div>

      <!-- Item 3 -->
      <div class="relative flex flex-col bg-white dark:bg-zinc-800 rounded-xl shadow-lg dark:shadow-zinc-700/50 overflow-hidden transform transition-all duration-300 hover:scale-[1.02] hover:shadow-xl dark:hover:shadow-zinc-700/70 border border-transparent hover:border-fuchsia-400 dark:hover:border-fuchsia-600">
        <button class="absolute top-3 right-3 p-2 bg-gradient-to-br from-red-500 to-rose-600 rounded-full shadow-md text-white text-sm font-semibold transition-transform duration-200 hover:scale-105 active:scale-95 z-10" aria-label="Remove item">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd" />
          </svg>
        </button>
        <img src="https://picsum.photos/600/400?random=3" alt="Operations Optimization" class="w-full h-48 object-cover rounded-t-xl">
        <div class="p-6 flex flex-col flex-grow">
          <h3 class="text-2xl font-bold text-zinc-900 dark:text-white mb-2 leading-snug tracking-wide" style="text-shadow: 0 0 3px rgba(255,0,255,0.3);">Operations Optimization</h3>
          <p class="text-base text-zinc-600 dark:text-zinc-300 mb-4 flex-grow">
            Streamline your operational processes for maximum efficiency, reducing costs and improving overall productivity.
          </p>
          <div class="mt-auto flex justify-between items-center">
            <span class="text-xl font-bold text-fuchsia-600 dark:text-fuchsia-400">$900 - $2800</span>
            <button class="px-5 py-2.5 rounded-full text-sm font-semibold text-white transition-all duration-300 transform hover:scale-105 active:scale-95
                           bg-gradient-to-br from-fuchsia-500 to-purple-600 shadow-lg shadow-fuchsia-500/40 dark:shadow-fuchsia-700/60
                           hover:from-fuchsia-600 hover:to-purple-700 focus:outline-none focus:ring-2 focus:ring-fuchsia-500 focus:ring-offset-2 dark:focus:ring-offset-zinc-900"
                    aria-label="Request quote for Operations Optimization">
              Request Quote
            </button>
          </div>
        </div>
      </div>

      <!-- Item 4 (Example additional item) -->
      <div class="relative flex flex-col bg-white dark:bg-zinc-800 rounded-xl shadow-lg dark:shadow-zinc-700/50 overflow-hidden transform transition-all duration-300 hover:scale-[1.02] hover:shadow-xl dark:hover:shadow-zinc-700/70 border border-transparent hover:border-orange-400 dark:hover:border-orange-600">
        <button class="absolute top-3 right-3 p-2 bg-gradient-to-br from-red-500 to-rose-600 rounded-full shadow-md text-white text-sm font-semibold transition-transform duration-200 hover:scale-105 active:scale-95 z-10" aria-label="Remove item">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd" />
          </svg>
        </button>
        <img src="https://picsum.photos/600/400?random=4" alt="Market Research" class="w-full h-48 object-cover rounded-t-xl">
        <div class="p-6 flex flex-col flex-grow">
          <h3 class="text-2xl font-bold text-zinc-900 dark:text-white mb-2 leading-snug tracking-wide" style="text-shadow: 0 0 3px rgba(255,165,0,0.3);">Market Research</h3>
          <p class="text-base text-zinc-600 dark:text-zinc-300 mb-4 flex-grow">
            Gain deep insights into market trends, customer behavior, and competitive landscapes to inform your strategic decisions.
          </p>
          <div class="mt-auto flex justify-between items-center">
            <span class="text-xl font-bold text-orange-600 dark:text-orange-400">$800 - $2500</span>
            <button class="px-5 py-2.5 rounded-full text-sm font-semibold text-white transition-all duration-300 transform hover:scale-105 active:scale-95
                           bg-gradient-to-br from-orange-500 to-red-600 shadow-lg shadow-orange-500/40 dark:shadow-orange-700/60
                           hover:from-orange-600 hover:to-red-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-offset-zinc-900"
                    aria-label="Request quote for Market Research">
              Request Quote
            </button>
          </div>
        </div>
      </div>

    </div>

    <div class="text-center mt-12 mb-4">
      <button class="px-8 py-4 rounded-full text-lg font-bold text-white transition-all duration-300 transform hover:scale-105 active:scale-95 selection:from-sky-400 selection:to-blue-400
                     bg-gradient-to-br from-indigo-600 to-purple-700 shadow-2xl shadow-indigo-500/50 dark:shadow-indigo-700/70
                     hover:from-indigo-700 hover:to-purple-800 focus:outline-none focus:ring-4 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-zinc-900">
        Proceed to Checkout
      </button>
    </div>

  </div>
</div>