<main class="py-12">
    <article class="prose">
       <!-- Hero Section -->
       <div class="relative mb-12">
          <div class="flex items-center gap-3 mb-4">
             <div class="flex items-center justify-center w-10 h-10 rounded-xl bg-indigo-600 shadow-lg shadow-indigo-500/30">
                <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
                </svg>
             </div>
             <span class="text-xs font-semibold text-indigo-600 uppercase tracking-wider">REST API</span>
          </div>
          <h1 class="font-bold text-3xl text-slate-900 tracking-tight mb-4">API Reference</h1>
          <p class="text-lg text-slate-600 leading-relaxed max-w-2xl">
             Use the OneUptime API to access any resource in your projects, create automated workflows,
             and seamlessly integrate with the tools and services your organization uses.
          </p>
       </div>
       
       
       <!-- Guides Section -->
       <div class="my-12 xl:max-w-none">
          <h2 id="guides" class="scroll-mt-24 text-xl font-semibold text-slate-900 mb-6">
             Getting Started
          </h2>
          <div class="not-prose grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
             <a href="/reference/authentication" class="group relative rounded-xl border border-slate-200 bg-white p-5 hover:border-indigo-300 hover:shadow-md hover:shadow-indigo-100/50 transition-all">
                <div class="flex items-center justify-center w-10 h-10 rounded-lg bg-indigo-50 text-indigo-600 mb-4 group-hover:bg-indigo-100 transition-colors">
                   <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"></path>
                   </svg>
                </div>
                <h3 class="text-sm font-semibold text-slate-900 group-hover:text-indigo-600 transition-colors">Authentication</h3>
                <p class="mt-1.5 text-sm text-slate-500 leading-relaxed">Learn how to authenticate your API requests.</p>
             </a>
             <a href="/reference/pagination" class="group relative rounded-xl border border-slate-200 bg-white p-5 hover:border-indigo-300 hover:shadow-md hover:shadow-indigo-100/50 transition-all">
                <div class="flex items-center justify-center w-10 h-10 rounded-lg bg-indigo-50 text-indigo-600 mb-4 group-hover:bg-indigo-100 transition-colors">
                   <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"></path>
                   </svg>
                </div>
                <h3 class="text-sm font-semibold text-slate-900 group-hover:text-indigo-600 transition-colors">Pagination</h3>
                <p class="mt-1.5 text-sm text-slate-500 leading-relaxed">Understand how to work with paginated responses.</p>
             </a>
             <a href="/reference/errors" class="group relative rounded-xl border border-slate-200 bg-white p-5 hover:border-indigo-300 hover:shadow-md hover:shadow-indigo-100/50 transition-all">
                <div class="flex items-center justify-center w-10 h-10 rounded-lg bg-indigo-50 text-indigo-600 mb-4 group-hover:bg-indigo-100 transition-colors">
                   <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                   </svg>
                </div>
                <h3 class="text-sm font-semibold text-slate-900 group-hover:text-indigo-600 transition-colors">Errors</h3>
                <p class="mt-1.5 text-sm text-slate-500 leading-relaxed">Read about the different types of errors returned.</p>
             </a>
             <a href="/reference/permissions" class="group relative rounded-xl border border-slate-200 bg-white p-5 hover:border-indigo-300 hover:shadow-md hover:shadow-indigo-100/50 transition-all">
                <div class="flex items-center justify-center w-10 h-10 rounded-lg bg-indigo-50 text-indigo-600 mb-4 group-hover:bg-indigo-100 transition-colors">
                   <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
                   </svg>
                </div>
                <h3 class="text-sm font-semibold text-slate-900 group-hover:text-indigo-600 transition-colors">Permissions</h3>
                <p class="mt-1.5 text-sm text-slate-500 leading-relaxed">Learn how API Key Permissions work.</p>
             </a>
          </div>
       </div>

       <!-- Featured Resources Section -->
       <div class="my-12 xl:max-w-none">
          <h2 id="resources" class="scroll-mt-24 text-xl font-semibold text-slate-900 mb-6">
             Featured Resources
          </h2>
          <div class="not-prose grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
             <% for(var i=0; i<pageData.featuredResources.length; i++) {%>
             <a href="/reference/<%= pageData.featuredResources[i].path -%>"
                class="group relative rounded-xl border border-slate-200 bg-white p-5 hover:border-indigo-300 hover:shadow-md hover:shadow-indigo-100/50 transition-all">
                <div class="flex items-center justify-center w-10 h-10 rounded-lg bg-slate-100 text-slate-600 mb-4 group-hover:bg-indigo-100 group-hover:text-indigo-600 transition-colors">
                   <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path>
                   </svg>
                </div>
                <h3 class="text-sm font-semibold text-slate-900 group-hover:text-indigo-600 transition-colors"><%= pageData.featuredResources[i].name -%></h3>
                <p class="mt-1.5 text-sm text-slate-500 leading-relaxed"><%= pageData.featuredResources[i].description -%></p>
             </a>
             <% } %>
          </div>
       </div>
    </article>
</main>