モーダルコンポーネント

<div class="fixed inset-0 z-50 flex items-center justify-center p-4">
  <!-- Backdrop -->
  <div class="fixed inset-0 bg-gray-900 bg-opacity-75 backdrop-blur-sm transition-opacity duration-300 ease-in-out dark:bg-black dark:bg-opacity-85"></div>

  <!-- Modal Content -->
  <div class="relative w-full max-w-xl md:max-w-3xl lg:max-w-4xl xl:max-w-5xl overflow-hidden rounded-2xl bg-gray-100 dark:bg-gray-900 shadow-xl border-2 border-transparent 
              bg-gradient-to-br from-purple-500/10 via-pink-500/10 to-blue-500/10
              dark:from-purple-800/20 dark:via-pink-800/20 dark:to-blue-800/20
              transform transition-all duration-300 ease-out sm:scale-100 sm:opacity-100
              ring-2 ring-offset-2 ring-offset-gray-100 ring-purple-500
              dark:ring-offset-gray-900 dark:ring-purple-700
              ">

    <div class="absolute inset-0 block md:hidden lg:block filter blur-3xl opacity-30 pointer-events-none">
        <div class="absolute top-0 left-1/4 h-24 w-24 rounded-full bg-pink-500 animate-pulse"></div>
        <div class="absolute bottom-0 right-1/4 h-24 w-24 rounded-full bg-blue-500 animate-pulse animation-delay-200"></div>
        <div class="absolute top-1/2 left-1/2 h-24 w-24 rounded-full bg-purple-500 animate-pulse animation-delay-400"></div>
    </div>

    <div class="relative flex flex-col p-6 sm:p-8 md:p-10 z-10">

      <!-- Modal Header -->
      <div class="flex items-start justify-between pb-4 sm:pb-6 border-b border-purple-500/30 dark:border-purple-700/30 mb-6">
        <div>
          <h2 class="text-2xl sm:text-3xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-pink-500 to-blue-500 dark:from-pink-400 dark:to-blue-400 leading-tight">
            Welcome to Our Platform
          </h2>
          <p class="mt-2 text-base text-gray-700 dark:text-gray-300 max-w-md">
            Unlock your potential with our cutting-edge business solutions. Join us today!
          </p>
        </div>
        <button type="button" class="p-2 rounded-full text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-purple-500 transition-colors duration-200">
          <span class="sr-only">Close modal</span>
          <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>

      <!-- Modal Body - Grid Layout for content -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8">
        <div class="flex flex-col gap-4">
          <!-- Feature 1 -->
          <div class="p-4 rounded-xl shadow-inner bg-gradient-to-br from-purple-500/5 to-pink-500/5 dark:from-purple-800/10 dark:to-pink-800/10 border border-purple-500/10 dark:border-purple-700/10">
            <h3 class="text-lg font-semibold text-transparent bg-clip-text bg-gradient-to-r from-pink-400 to-yellow-400 dark:from-pink-300 dark:to-yellow-300 mb-2">Advanced Analytics</h3>
            <p class="text-gray-600 dark:text-gray-400 text-sm">Gain deep insights with our powerful, real-time data analysis tools.</p>
          </div>

          <!-- Feature 2 -->
          <div class="p-4 rounded-xl shadow-inner bg-gradient-to-br from-blue-500/5 to-green-500/5 dark:from-blue-800/10 dark:to-green-800/10 border border-blue-500/10 dark:border-blue-700/10">
            <h3 class="text-lg font-semibold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-green-400 dark:from-blue-300 dark:to-green-300 mb-2">Seamless Collaboration</h3>
            <p class="text-gray-600 dark:text-gray-400 text-sm">Connect and collaborate effortlessly with your team, anywhere, anytime.</p>
          </div>

          <!-- Testimonial/Quote -->
          <figure class="mt-4 p-4 rounded-xl shadow-lg bg-gradient-to-br from-gray-200/50 to-gray-50/50 dark:from-gray-800/50 dark:to-gray-900/50 border border-gray-300/30 dark:border-gray-700/30 relative overflow-hidden">
              <blockquote class="text-gray-700 dark:text-gray-300 italic relative z-10">
                  "This platform has revolutionized our workflow. The support and features are unparalleled!"
              </blockquote>
              <figcaption class="mt-4 flex items-center gap-3 relative z-10">
                  <img class="h-10 w-10 rounded-full object-cover ring-2 ring-pink-500/50 hover:ring-pink-400 transition-all duration-200" src="https://randomuser.me/api/portraits/women/6.jpg" alt="Customer Avatar">
                  <div>
                      <div class="font-semibold text-gray-800 dark:text-gray-200">Jane Doe</div>
                      <div class="text-sm text-gray-500 dark:text-gray-400">CEO, Tech Innovations</div>
                  </div>
              </figcaption>
              <div class="absolute inset-0 bg-gradient-to-br from-indigo-500/5 via-fuchsia-500/5 to-cyan-500/5 dark:from-indigo-800/5 dark:via-fuchsia-800/5 dark:to-cyan-800/5 blur-xl pointer-events-none"></div>
          </figure>

        </div>

        <!-- Contact Form / CTA Section -->
        <div class="flex flex-col gap-4">
          <form class="p-6 rounded-xl shadow-lg bg-gradient-to-br from-blue-500/5 to-purple-500/5 dark:from-blue-800/10 dark:to-purple-800/10 border border-blue-500/10 dark:border-blue-700/10">
            <h3 class="text-xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-400 dark:from-blue-300 dark:to-purple-300 mb-4">Request a Demo</h3>
            <div class="mb-4">
              <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Full Name</label>
              <input type="text" id="name" class="w-full p-3 rounded-lg border border-gray-300 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-200 dark:placeholder-gray-400 transition-all duration-200" placeholder="Your Name">
            </div>
            <div class="mb-4">
              <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Work Email</label>
              <input type="email" id="email" class="w-full p-3 rounded-lg border border-gray-300 focus:border-pink-500 focus:ring-1 focus:ring-pink-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-200 dark:placeholder-gray-400 transition-all duration-200" placeholder="[email protected]">
            </div>
            <div class="mb-6">
              <label for="message" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Message (Optional)</label>
              <textarea id="message" rows="3" class="w-full p-3 rounded-lg border border-gray-300 focus:border-green-500 focus:ring-1 focus:ring-green-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-200 dark:placeholder-gray-400 transition-all duration-200" placeholder="Tell us about your needs..."></textarea>
            </div>
            <button type="submit" class="w-full py-3 px-6 rounded-xl font-bold text-lg text-white 
                            bg-gradient-to-r from-pink-500 to-blue-500 hover:from-pink-600 hover:to-blue-600 
                            dark:from-pink-600 dark:to-blue-600 dark:hover:from-pink-700 dark:hover:to-blue-700 
                            shadow-lg transform hover:scale-105 transition-all duration-300 ease-out 
                            focus:outline-none focus:ring-4 focus:ring-pink-500/50 dark:focus:ring-pink-700/50">
              Submit Request
            </button>
          </form>

          <!-- Small image gallery/showcase -->
          <div class="mt-4 grid grid-cols-2 gap-4">
              <img src="https://picsum.photos/400/300?random=1" alt="Placeholder Image 1" class="rounded-lg shadow-md object-cover w-full h-32 hover:scale-105 transition-transform duration-200 border-2 border-purple-500/20 dark:border-purple-700/20">
              <img src="https://picsum.photos/400/300?random=2" alt="Placeholder Image 2" class="rounded-lg shadow-md object-cover w-full h-32 hover:scale-105 transition-transform duration-200 border-2 border-blue-500/20 dark:border-blue-700/20">
          </div>

        </div>
      </div>

      <!-- Modal Footer -->
      <div class="mt-8 flex justify-end pt-6 border-t border-blue-500/30 dark:border-blue-700/30">
        <button type="button" class="py-2 px-5 rounded-lg font-semibold text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100 
                        border border-transparent hover:border-gray-300 dark:hover:border-gray-700 
                        focus:outline-none focus:ring-2 focus:ring-purple-500 transition-all duration-200">
          Learn More
        </button>
        <button type="button" class="ml-4 py-2 px-5 rounded-lg font-semibold text-white 
                        bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 
                        dark:from-purple-600 dark:to-pink-600 dark:hover:from-purple-700 dark:hover:to-pink-700 
                        shadow-md transform hover:scale-105 transition-all duration-300 ease-out 
                        focus:outline-none focus:ring-4 focus:ring-purple-500/50 dark:focus:ring-purple-700/50">
          Get Started Now
        </button>
      </div>

    </div>
  </div>
</div>

<style>
/* Define keyframes for subtle pulsating gradient blobs */
@keyframes pulse {
  0% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(1.1); opacity: 0.5; }
  100% { transform: scale(1); opacity: 0.3; }
}

.animate-pulse {
  animation: pulse 4s infinite ease-in-out;
}

.animation-delay-200 {
    animation-delay: 0.2s;
}
.animation-delay-400 {
    animation-delay: 0.4s;
}
</style>