Glassmorphismグレースケールヘルスケアフッター

<footer class="relative overflow-hidden bg-white/50 backdrop-blur-md dark:bg-gray-900/50 dark:backdrop-blur-md py-12 md:py-16 border-t-2 border-gray-200 dark:border-gray-800">
  <div class="absolute inset-0 z-0 opacity-20 dark:opacity-10">
    <svg class="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice">
      <defs>
        <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
          <stop offset="0%" stop-color="#e0e0e0"></stop>
          <stop offset="100%" stop-color="#f0f0f0"></stop>
        </radialGradient>
        <radialGradient id="grad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
          <stop offset="0%" stop-color="#a0a0a0"></stop>
          <stop offset="100%" stop-color="#c0c0c0"></stop>
        </radialGradient>
      </defs>
      <circle cx="20" cy="30" r="30" fill="url(#grad1)" opacity="0.7" />
      <circle cx="80" cy="70" r="40" fill="url(#grad2)" opacity="0.7" />
    </svg>
  </div>

  <div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 md:gap-12">
      <!-- Company Info -->
      <div class="space-y-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100">MedCare Health</h3>
        <p class="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
          Providing compassionate and advanced healthcare solutions for a healthier tomorrow.
        </p>
        <ul class="flex space-x-4">
          <li><a href="#" class="text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 transition-colors"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22h7.42c5.523 0 10-4.477 10-10Z" clip-rule="evenodd" /></svg></a></li>
          <li><a href="#" class="text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 transition-colors"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M8.29 20.251c1.24 1.332 2.71 2.029 4.15 2.029 3.325 0 5.981-2.656 5.981-5.981 0-0.342-.033-0.678-.088-1.006 1.258-0.871 2.259-1.991 3.015-3.269-0.038 0.051-0.071 0.101-0.109 0.151-1.282 1.484-3.056 2.378-5.74 2.875 1.442-0.867 2.478-2.364 2.986-4.085-1.353 0.803-2.859 1.385-4.472 1.63-1.277-1.36-3.045-2.212-5.04-2.212-3.844 0-6.958 3.114-6.958 6.958 0 0.546 0.063 1.077 0.17 1.597-5.798-0.292-10.9-3.054-14.331-7.243-0.592 1.01-0.929 2.193-0.929 3.468 0 2.41 1.229 4.545 3.094 5.795-1.144-0.032-2.222-0.345-3.155-0.862v0.086c0 3.383 2.404 6.136 5.583 6.791-0.589 0.16-1.213 0.245-1.854 0.245-0.455 0-0.899-0.043-1.331-0.127 0.873 2.766 3.424 4.779 6.442 4.838-2.673 2.093-6.027 3.344-9.688 3.344-0.627 0-1.242-0.038-1.847-0.108 3.473 2.248 7.593 3.563 11.996 3.563Z" /></svg></a></li>
          <li><a href="#" class="text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 transition-colors"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12c0 4.418 2.865 8.163 6.838 9.504.5.092.682-.217.682-.483 0-.237-.007-.866-.012-1.7-2.782.604-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.464-1.11-1.464-.908-.62.068-.607.068-.607 1.002.07 1.536 1.03 1.536 1.03.892 1.527 2.342 1.085 2.91.829.091-.643.349-1.085.635-1.334-2.22-.25-4.555-1.11-4.555-4.943 0-1.09.39-1.978 1.029-2.674-.103-.251-.446-1.264.098-2.632 0 0 .84-.268 2.75 1.025A9.303 9.303 0 0 1 12 6.687c.85.006 1.7.117 2.502.324 1.908-1.293 2.747-1.025 2.747-1.025.544 1.368.201 2.381.098 2.632.64.696 1.029 1.584 1.029 2.674 0 3.842-2.339 4.689-4.566 4.935.359.307.678.915.678 1.846 0 1.334-.012 2.413-.012 2.74 0 .267.18.579.688.482C21.137 20.163 24 16.418 24 12c0-5.523-4.477-10-10-10Z" clip-rule="evenodd" /></svg></a></li>
        </ul>
      </div>

      <!-- Quick Links -->
      <div>
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-4">Quick Links</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100 transition-colors text-sm">Our Services</a></li>
          <li><a href="#" class="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100 transition-colors text-sm">Departments</a></li>
          <li><a href="#" class="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100 transition-colors text-sm">Find a Doctor</a></li>
          <li><a href="#" class="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100 transition-colors text-sm">Patient Resources</a></li>
          <li><a href="#" class="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100 transition-colors text-sm">Careers</a></li>
        </ul>
      </div>

      <!-- Contact Info -->
      <div>
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-4">Contact Us</h3>
        <ul class="space-y-3">
          <li class="flex items-start text-gray-600 dark:text-gray-300 text-sm">
            <svg class="w-5 h-5 mr-2 text-gray-500 dark:text-gray-400 flex-shrink-0" 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="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.828 0L6.343 16.657a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
            123 Health Ave, Suite 400, Medical City, MC 10001
          </li>
          <li class="flex items-center text-gray-600 dark:text-gray-300 text-sm">
            <svg class="w-5 h-5 mr-2 text-gray-500 dark:text-gray-400 flex-shrink-0" 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="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684L10.95 4.81A3 3 0 0012.72 6h4.04a2 2 0 012 2.02v2.83a1 1 0 00.512.854l2.57 1.144a4 4 0 010 7.21l-2.57 1.144a1 1 0 00-.512.854v2.83a2 2 0 01-2 2.02h-4.04a3 3 0 00-1.77 0l-2.75 1.137a1 1 0 01-.948.684H5a2 2 0 01-2-2V5z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.875 17.5l-2.617-2.617a1 1 0 010-1.414l2.617-2.617a1 1 0 011.414 0l2.617 2.617a1 1 0 010 1.414l-2.617 2.617a1 1 0 01-1.414 0z"></path></svg>
            (555) 123-4567
          </li>
          <li class="flex items-center text-gray-600 dark:text-gray-300 text-sm">
            <svg class="w-5 h-5 mr-2 text-gray-500 dark:text-gray-400 flex-shrink-0" 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="M3 8l7.893 5.262a2 2 0 002.214 0L21 8m-1 10a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h12a2 2 0 012 2v12z"></path></svg>
            info@medcare.com
          </li>
        </ul>
      </div>

      <!-- Newsletter/Appointment -->
      <div>
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-4">Stay Connected</h3>
        <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Subscribe to our newsletter for health tips and updates.</p>
        <form class="flex flex-col sm:flex-row gap-2">
          <input type="email" placeholder="Your email" class="flex-grow px-4 py-2 rounded-lg bg-gray-100/70 border border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:bg-gray-800/70 dark:border-gray-700 dark:text-gray-100 dark:focus:ring-gray-600 text-sm placeholder-gray-500 dark:placeholder-gray-400" aria-label="Email for newsletter">
          <button type="submit" class="px-5 py-2 rounded-lg bg-gray-800 text-white font-medium hover:bg-gray-700 dark:bg-gray-200 dark:text-gray-900 dark:hover:bg-gray-300 transition-colors text-sm">Subscribe</button>
        </form>
        <p class="text-gray-600 dark:text-gray-300 text-sm mt-4">Need an appointment? <a href="#" class="font-medium text-gray-800 hover:text-gray-900 dark:text-gray-200 dark:hover:text-gray-100 transition-colors">Book Now</a></p>
      </div>
    </div>

    <div class="mt-12 md:mt-16 pt-8 border-t border-gray-300 dark:border-gray-700 text-center">
      <p class="text-gray-600 dark:text-gray-400 text-sm">&copy; 2023 MedCare Health. All rights reserved.</p>
    </div>
  </div>
</footer>