    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="mt-12 rounded-lg bg-gray-200 overflow-hidden shadow divide-y divide-gray-200 sm:divide-y-0 sm:grid sm:grid-cols-2 sm:gap-px">
        {%- for navItem in links -%}
          <div class="relative group bg-white p-6 focus:outline-link">
            <h3 class="text-lg font-medium">
              <a href="{{navItem.url}}" class="focus:outline-none">
                <!-- Extend touch target to entire panel -->
                <span class="absolute inset-0" aria-hidden="true"></span>
                {{navItem.title}}
              </a>
            </h3>
            <p class="mt-2 text-sm text-gray-500">
              {{navItem.description}}
            </p>
          </div>
        {%- endfor -%}
      </div>
      
      <footer class="mt-12 mb-4">
        <div class="text-gray-500">
          Built in <a class="hover:underline focus:text-white focus:bg-pink-700 focus:outline-link" href="https://www.11ty.dev/">Eleventy</a> with <a class="hover:underline focus:text-white focus:bg-pink-700 focus:outline-link" href="https://tailwindui.com/">Tailwind UI</a>
        </div>
      </footer>
    </div>
  </body>
</html>

