Retro_Healthcare_Sitemap_Component

<div class="font-mono text-gray-800 bg-gradient-to-br from-indigo-200 via-purple-200 to-pink-200 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 dark:text-gray-200 p-6 sm:p-8 lg:p-12 min-h-screen">
  <div class="max-w-6xl mx-auto bg-white dark:bg-gray-800 shadow-lg rounded-lg border-2 border-purple-500 dark:border-pink-500 overflow-hidden">
    <div class="p-6 sm:p-8 lg:p-10 border-b border-purple-300 dark:border-pink-700 bg-purple-100 dark:bg-gray-900">
      <h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-pink-400 mb-2 text-center tracking-wider uppercase">
        <span class="text-purple-600 dark:text-indigo-400">MediCorp</span> Sitemap
      </h1>
      <p class="text-center text-gray-600 dark:text-gray-400 text-lg sm:text-xl">Navigate our digital archive</p>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 p-6 sm:p-8 lg:p-10">

      <!-- Section 1: About Us -->
      <div class="border-2 border-indigo-400 dark:border-indigo-600 rounded-lg p-5 bg-indigo-50 dark:bg-gray-700 shadow-md transform hover:scale-105 transition-transform duration-300">
        <h2 class="text-2xl font-bold text-indigo-700 dark:text-indigo-300 mb-3 uppercase tracking-wide">About Us</h2>
        <ul class="space-y-2 text-gray-700 dark:text-gray-300">
          <li><a href="#" class="hover:text-indigo-900 dark:hover:text-indigo-100 underline decoration-indigo-400 hover:decoration-indigo-700 dark:decoration-indigo-600 dark:hover:decoration-indigo-300 text-lg">Our Mission</a></li>
          <li><a href="#" class="hover:text-indigo-900 dark:hover:text-indigo-100 underline decoration-indigo-400 hover:decoration-indigo-700 dark:decoration-indigo-600 dark:hover:decoration-indigo-300 text-lg">Our History</a></li>
          <li><a href="#" class="hover:text-indigo-900 dark:hover:text-indigo-100 underline decoration-indigo-400 hover:decoration-indigo-700 dark:decoration-indigo-600 dark:hover:decoration-indigo-300 text-lg">Leadership Team</a></li>
          <li><a href="#" class="hover:text-indigo-900 dark:hover:text-indigo-100 underline decoration-indigo-400 hover:decoration-indigo-700 dark:decoration-indigo-600 dark:hover:decoration-indigo-300 text-lg">Careers</a></li>
        </ul>
      </div>

      <!-- Section 2: Services -->
      <div class="border-2 border-purple-400 dark:border-purple-600 rounded-lg p-5 bg-purple-50 dark:bg-gray-700 shadow-md transform hover:scale-105 transition-transform duration-300">
        <h2 class="text-2xl font-bold text-purple-700 dark:text-purple-300 mb-3 uppercase tracking-wide">Services</h2>
        <ul class="space-y-2 text-gray-700 dark:text-gray-300 leading-relaxed">
          <li><a href="#" class="hover:text-purple-900 dark:hover:text-purple-100 underline decoration-purple-400 hover:decoration-purple-700 dark:decoration-purple-600 dark:hover:decoration-purple-300  text-lg">Primary Care</a></li>
          <li><a href="#" class="hover:text-purple-900 dark:hover:text-purple-100 underline decoration-purple-400 hover:decoration-purple-700 dark:decoration-purple-600 dark:hover:decoration-purple-300  text-lg">Specialties</a></li>
          <li><a href="#" class="hover:text-purple-900 dark:hover:text-purple-100 underline decoration-purple-400 hover:decoration-purple-700 dark:decoration-purple-600 dark:hover:decoration-purple-300  text-lg">Emergency</a></li>
          <li><a href="#" class="hover:text-purple-900 dark:hover:text-purple-100 underline decoration-purple-400 hover:decoration-purple-700 dark:decoration-purple-600 dark:hover:decoration-purple-300  text-lg">Telehealth</a></li>
        </ul>
      </div>

      <!-- Section 3: Patients & Visitors -->
      <div class="border-2 border-pink-400 dark:border-pink-600 rounded-lg p-5 bg-pink-50 dark:bg-gray-700 shadow-md transform hover:scale-105 transition-transform duration-300">
        <h2 class="text-2xl font-bold text-pink-700 dark:text-pink-300 mb-3 uppercase tracking-wide">Patients & Visitors</h2>
        <ul class="space-y-2 text-gray-700 dark:text-gray-300 leading-relaxed">
          <li><a href="#" class="hover:text-pink-900 dark:hover:text-pink-100 underline decoration-pink-400 hover:decoration-pink-700 dark:decoration-pink-600 dark:hover:decoration-pink-300  text-lg">Patient Portal</a></li>
          <li><a href="#" class="hover:text-pink-900 dark:hover:text-pink-100 underline decoration-pink-400 hover:decoration-pink-700 dark:decoration-pink-600 dark:hover:decoration-pink-300  text-lg">Appointments</a></li>
          <li><a href="#" class="hover:text-pink-900 dark:hover:text-pink-100 underline decoration-pink-400 hover:decoration-pink-700 dark:decoration-pink-600 dark:hover:decoration-pink-300  text-lg">Visiting Hours</a></li>
          <li><a href="#" class="hover:text-pink-900 dark:hover:text-pink-100 underline decoration-pink-400 hover:decoration-pink-700 dark:decoration-pink-600 dark:hover:decoration-pink-300  text-lg">Billing & Insurance</a></li>
        </ul>
      </div>

      <!-- Section 4: Health Resources -->
      <div class="border-2 border-indigo-400 dark:border-indigo-600 rounded-lg p-5 bg-indigo-50 dark:bg-gray-700 shadow-md transform hover:scale-105 transition-transform duration-300">
        <h2 class="text-2xl font-bold text-indigo-700 dark:text-indigo-300 mb-3 uppercase tracking-wide">Resources</h2>
        <ul class="space-y-2 text-gray-700 dark:text-gray-300 leading-relaxed">
          <li><a href="#" class="hover:text-indigo-900 dark:hover:text-indigo-100 underline decoration-indigo-400 hover:decoration-indigo-700 dark:decoration-indigo-600 dark:hover:decoration-indigo-300  text-lg">Health Blog</a></li>
          <li><a href="#" class="hover:text-indigo-900 dark:hover:text-indigo-100 underline decoration-indigo-400 hover:decoration-indigo-700 dark:decoration-indigo-600 dark:hover:decoration-indigo-300  text-lg">Medical Library</a></li>
          <li><a href="#" class="hover:text-indigo-900 dark:hover:text-indigo-100 underline decoration-indigo-400 hover:decoration-indigo-700 dark:decoration-indigo-600 dark:hover:decoration-indigo-300  text-lg">Events & Classes</a></li>
          <li><a href="#" class="hover:text-indigo-900 dark:hover:text-indigo-100 underline decoration-indigo-400 hover:decoration-indigo-700 dark:decoration-indigo-600 dark:hover:decoration-indigo-300  text-lg">FAQs</a></li>
        </ul>
      </div>

      <!-- Section 5: Locations -->
      <div class="border-2 border-purple-400 dark:border-purple-600 rounded-lg p-5 bg-purple-50 dark:bg-gray-700 shadow-md transform hover:scale-105 transition-transform duration-300">
        <h2 class="text-2xl font-bold text-purple-700 dark:text-purple-300 mb-3 uppercase tracking-wide">Locations</h2>
        <ul class="space-y-2 text-gray-700 dark:text-gray-300 leading-relaxed">
          <li><a href="#" class="hover:text-purple-900 dark:hover:text-purple-100 underline decoration-purple-400 hover:decoration-purple-700 dark:decoration-purple-600 dark:hover:decoration-purple-300  text-lg">Find a Clinic</a></li>
          <li><a href="#" class="hover:text-purple-900 dark:hover:text-purple-100 underline decoration-purple-400 hover:decoration-purple-700 dark:decoration-purple-600 dark:hover:decoration-purple-300  text-lg">Hospitals</a></li>
          <li><a href="#" class="hover:text-purple-900 dark:hover:text-purple-100 underline decoration-purple-400 hover:decoration-purple-700 dark:decoration-purple-600 dark:hover:decoration-purple-300  text-lg">Directions</a></li>
          <li><a href="#" class="hover:text-purple-900 dark:hover:text-purple-100 underline decoration-purple-400 hover:decoration-purple-700 dark:decoration-purple-600 dark:hover:decoration-purple-300  text-lg">Parking</a></li>
        </ul>
      </div>

      <!-- Section 6: Contact Us -->
      <div class="border-2 border-pink-400 dark:border-pink-600 rounded-lg p-5 bg-pink-50 dark:bg-gray-700 shadow-md transform hover:scale-105 transition-transform duration-300">
        <h2 class="text-2xl font-bold text-pink-700 dark:text-pink-300 mb-3 uppercase tracking-wide">Contact Us</h2>
        <ul class="space-y-2 text-gray-700 dark:text-gray-300 leading-relaxed">
          <li><a href="#" class="hover:text-pink-900 dark:hover:text-pink-100 underline decoration-pink-400 hover:decoration-pink-700 dark:decoration-pink-600 dark:hover:decoration-pink-300  text-lg">General Inquiries</a></li>
          <li><a href="#" class="hover:text-pink-900 dark:hover:text-pink-100 underline decoration-pink-400 hover:decoration-pink-700 dark:decoration-pink-600 dark:hover:decoration-pink-300  text-lg">Feedback</a></li>
          <li><a href="#" class="hover:text-pink-900 dark:hover:text-pink-100 underline decoration-pink-400 hover:decoration-pink-700 dark:decoration-pink-600 dark:hover:decoration-pink-300  text-lg">Call Us</a></li>
          <li><a href="#" class="hover:text-pink-900 dark:hover:text-pink-100 underline decoration-pink-400 hover:decoration-pink-700 dark:decoration-pink-600 dark:hover:decoration-pink-300  text-lg">Email Us</a></li>
        </ul>
      </div>

    </div>

    <div class="p-6 sm:p-8 lg:p-10 text-center text-gray-600 dark:text-gray-400 border-t border-purple-300 dark:border-pink-700 bg-purple-100 dark:bg-gray-900">
      <p class="text-lg sm:text-xl">&copy; 2023 MediCorp. All rights reserved.</p>
    </div>
  </div>
</div>