Site Map Component

<div class="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 min-h-screen p-8">
  <div class="max-w-4xl mx-auto">
    <h1 class="text-3xl font-bold mb-8 text-center">Site Map</h1>

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

      <!-- Section 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform transition duration-300 hover:scale-105 hover:shadow-xl">
        <h2 class="text-xl font-semibold mb-4 dark:text-white">Section 1</h2>
        <ul>
          <li class="mb-2 transform transition duration-300 hover:translate-x-2">
            <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 1.1</a>
          </li>
          <li class="mb-2 transform transition duration-300 hover:translate-x-2">
            <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 1.2</a>
          </li>
          <li class="mb-2 transform transition duration-300 hover:translate-x-2">
            <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 1.3</a>
          </li>
        </ul>
      </div>

      <!-- Section 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform transition duration-300 hover:scale-105 hover:shadow-xl">
        <h2 class="text-xl font-semibold mb-4 dark:text-white">Section 2</h2>
        <ul>
          <li class="mb-2 transform transition duration-300 hover:translate-x-2">
            <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 2.1</a>
          </li>
          <li class="mb-2 transform transition duration-300 hover:translate-x-2">
            <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 2.2</a>
          </li>
          <li class="mb-2 transform transition duration-300 hover:translate-x-2">
            <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 2.3</a>
          </li>
        </ul>
      </div>

      <!-- Section 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform transition duration-300 hover:scale-105 hover:shadow-xl">
        <h2 class="text-xl font-semibold mb-4 dark:text-white">Section 3</h2>
        <ul>
          <li class="mb-2 transform transition duration-300 hover:translate-x-2">
            <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 3.1</a>
          </li>
          <li class="mb-2 transform transition duration-300 hover:translate-x-2">
            <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 3.2</a>
          </li>
          <li class="mb-2 transform transition duration-300 hover:translate-x-2">
            <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 3.3</a>
          </li>
        </ul>
      </div>

      <!-- Section 4 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform transition duration-300 hover:scale-105 hover:shadow-xl">
        <h2 class="text-xl font-semibold mb-4 dark:text-white">Section 4</h2>
        <ul>
          <li class="mb-2 transform transition duration-300 hover:translate-x-2">
            <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 4.1</a>
          </li>
          <li class="mb-2 transform transition duration-300 hover:translate-x-2">
            <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 4.2</a>
          </li>
          <li class="mb-2 transform transition duration-300 hover:translate-x-2">
            <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 4.3</a>
          </li>
        </ul>
      </div>

      <!-- Section 5 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform transition duration-300 hover:scale-105 hover:shadow-xl">
        <h2 class="text-xl font-semibold mb-4 dark:text-white">Section 5</h2>
        <ul>
          <li class="mb-2 transform transition duration-300 hover:translate-x-2">
            <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 5.1</a>
          </li>
          <li class="mb-2 transform transition duration-300 hover:translate-x-2">
            <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 5.2</a>
          </li>
          <li class="mb-2 transform transition duration-300 hover:translate-x-2">
            <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 5.3</a>
          </li>
        </ul>
      </div>

       <!-- Section 6 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform transition duration-300 hover:scale-105 hover:shadow-xl">
        <h2 class="text-xl font-semibold mb-4 dark:text-white">Section 6</h2>
        <ul>
          <li class="mb-2 transform transition duration-300 hover:translate-x-2">
            <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 6.1</a>
          </li>
          <li class="mb-2 transform transition duration-300 hover:translate-x-2">
            <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 6.2</a>
          </li>
          <li class="mb-2 transform transition duration-300 hover:translate-x-2">
            <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 6.3</a>
          </li>
        </ul>
      </div>

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