<main class="py-16">
    <article class="prose ">
       <div class="absolute inset-0 -z-10 mx-0 max-w-none overflow-hidden">
          <div
             class="absolute left-1/2 top-0 ml-[-38rem] h-[25rem] w-[81.25rem]">
             <div
                class="absolute inset-0 bg-gradient-to-r from-[#36b49f] to-[#DBFF75] opacity-40 [mask-image:radial-gradient(farthest-side_at_top,white,transparent)]">
                <svg aria-hidden="true"
                   class="absolute inset-x-0 inset-y-[-50%] h-[200%] w-full skew-y-[-18deg] fill-black/40 stroke-black/50 mix-blend-overlay  /5">
                   <defs>
                      <pattern id=":r6s:" width="72" height="56" patternUnits="userSpaceOnUse" x="-12"
                         y="4">
                         <path d="M.5 56V.5H72" fill="none"></path>
                      </pattern>
                   </defs>
                   <rect width="100%" height="100%" stroke-width="0" fill="url(#:r6s:)"></rect>
                   <svg x="-12" y="4" class="overflow-visible">
                      <rect stroke-width="0" width="73" height="57" x="288" y="168"></rect>
                      <rect stroke-width="0" width="73" height="57" x="144" y="56"></rect>
                      <rect stroke-width="0" width="73" height="57" x="504" y="168"></rect>
                      <rect stroke-width="0" width="73" height="57" x="720" y="336"></rect>
                   </svg>
                </svg>
             </div>
             <svg viewBox="0 0 1113 440" aria-hidden="true"
                class="absolute top-0 left-1/2 ml-[-19rem] w-[69.5625rem] fill-white blur-[26px] ">
                <path d="M.016 439.5s-9.5-300 434-300S882.516 20 882.516 20V0h230.004v439.5H.016Z">
                </path>
             </svg>
          </div>
       </div>
       <h1 class="font-bold text-xl">API Reference</h1>
       <p class="lead">Use the OneUptime API to access any resource in your projects, create automated
          workflows, and more
          and
          seamlessly integrate your project into the other tools and services you use in your
          organization.</p>
       
       
       <div class="my-16 xl:max-w-none">
          <h2 id="guides" class="scroll-mt-24 font-bold">
             <span class="group text-inherit no-underline hover:text-inherit">
                <div
                   class="absolute mt-1 ml-[calc(-1*var(--width))] hidden w-[var(--width)] opacity-0 transition [--width:calc(2.625rem+0.5px+50%-min(50%,calc(theme(maxWidth.lg)+theme(spacing.8))))] group-hover:opacity-100 group-focus:opacity-100 md:block lg:z-50 2xl:[--width:theme(spacing.10)]">
                   <div
                      class="group/anchor block h-5 w-5 rounded-lg bg-zinc-50 ring-1 ring-inset ring-zinc-300 transition hover:ring-zinc-500    ">
                      <svg viewBox="0 0 20 20" fill="none" stroke-linecap="round" aria-hidden="true"
                         class="h-5 w-5 stroke-zinc-500 transition  ">
                         <path
                            d="m6.5 11.5-.964-.964a3.535 3.535 0 1 1 5-5l.964.964m2 2 .964.964a3.536 3.536 0 0 1-5 5L8.5 13.5m0-5 3 3">
                         </path>
                      </svg>
                   </div>
                </div>
                Guides
             </span>
          </h2>
          <div
             class="not-prose mt-4 grid grid-cols-1 gap-8 border-t border-zinc-900/5 pt-10  sm:grid-cols-2 xl:grid-cols-4">
             <div>
                <h3 class="text-sm font-semibold text-zinc-900 ">Authentication</h3>
                <p class="mt-1 text-sm text-zinc-600 ">Learn how to authenticate your
                   API
                   requests.</p>
                <p class="mt-4">
                   <a class="inline-flex gap-0.5 justify-center overflow-hidden font-medium transition text-emerald-500 hover:text-emerald-600  "
                      href="/reference/authentication">
                      Read more
                      <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"
                         class="mt-0.5 h-5 w-5 relative top-px -mr-1">
                         <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                            d="m11.5 6.5 3 3.5m0 0-3 3.5m3-3.5h-9"></path>
                      </svg>
                   </a>
                </p>
             </div>
             <div>
                <h3 class="text-sm font-semibold text-zinc-900 ">Pagination</h3>
                <p class="mt-1 text-sm text-zinc-600 ">Understand how to work with
                   paginated responses.</p>
                <p class="mt-4">
                   <a class="inline-flex gap-0.5 justify-center overflow-hidden font-medium transition text-emerald-500 hover:text-emerald-600  "
                      href="/reference/pagination">
                      Read more
                      <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"
                         class="mt-0.5 h-5 w-5 relative top-px -mr-1">
                         <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                            d="m11.5 6.5 3 3.5m0 0-3 3.5m3-3.5h-9"></path>
                      </svg>
                   </a>
                </p>
             </div>
             <div>
                <h3 class="text-sm font-semibold text-zinc-900 ">Errors</h3>
                <p class="mt-1 text-sm text-zinc-600 ">Read about the different types
                   of
                   errors returned by the API.</p>
                <p class="mt-4">
                   <a class="inline-flex gap-0.5 justify-center overflow-hidden font-medium transition text-emerald-500 hover:text-emerald-600  "
                      href="/reference/errors">
                      Read more
                      <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"
                         class="mt-0.5 h-5 w-5 relative top-px -mr-1">
                         <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                            d="m11.5 6.5 3 3.5m0 0-3 3.5m3-3.5h-9"></path>
                      </svg>
                   </a>
                </p>
             </div>
             <div>
                <h3 class="text-sm font-semibold text-zinc-900 ">Permissions</h3>
                <p class="mt-1 text-sm text-zinc-600 ">Learn how API Key Permissions
                   work.</p>
                <p class="mt-4">
                   <a class="inline-flex gap-0.5 justify-center overflow-hidden font-medium transition text-emerald-500 hover:text-emerald-600  "
                      href="/reference/permissions">
                      Read more
                      <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"
                         class="mt-0.5 h-5 w-5 relative top-px -mr-1">
                         <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                            d="m11.5 6.5 3 3.5m0 0-3 3.5m3-3.5h-9"></path>
                      </svg>
                   </a>
                </p>
             </div>
          </div>
       </div>
       <div class="my-16 xl:max-w-none">
          <h2 id="resources" class="scroll-mt-24 font-bold"><span
                class="group text-inherit no-underline hover:text-inherit">Featured Resources</span>
          </h2>
          <div
             class="not-prose mt-4 grid grid-cols-1 gap-8 border-t border-zinc-900/5 pt-10  sm:grid-cols-2 xl:grid-cols-4">
             
             <% for(var i=0; i<pageData.featuredResources.length; i++) {%>
             <div
                class="cursor-pointer group relative flex rounded-2xl bg-zinc-50 transition-shadow hover:shadow-md hover:shadow-zinc-900/5  ">
                <div class="pointer-events-none">
                   <div
                      class="absolute inset-0 rounded-2xl transition duration-300 [mask-image:linear-gradient(white,transparent)] group-hover:opacity-50">
                      <svg aria-hidden="true"
                         class="absolute inset-x-0 inset-y-[-30%] h-[160%] w-full skew-y-[-18deg] fill-black/[0.02] stroke-black/5  /2.5">
                         <defs>
                            <pattern id=":r6t:" width="72" height="56" patternUnits="userSpaceOnUse"
                               x="50%" y="16">
                               <path d="M.5 56V.5H72" fill="none"></path>
                            </pattern>
                         </defs>
                         <rect width="100%" height="100%" stroke-width="0" fill="url(#:r6t:)"></rect>
                         <svg x="50%" y="16" class="overflow-visible">
                            <rect stroke-width="0" width="73" height="57" x="0" y="56"></rect>
                            <rect stroke-width="0" width="73" height="57" x="72" y="168"></rect>
                         </svg>
                      </svg>
                   </div>
                   <div
                      class="absolute inset-0 rounded-2xl bg-gradient-to-r from-[#D7EDEA] to-[#F4FBDF] opacity-0 transition duration-300 group-hover:opacity-100"
                      data-projection-id="35"
                      style="-webkit-mask-image: radial-gradient(180px at 0px 0px, white, transparent);">
                   </div>
                   <div
                      class="absolute inset-0 rounded-2xl opacity-0 mix-blend-overlay transition duration-300 group-hover:opacity-100"
                      data-projection-id="36"
                      style="-webkit-mask-image: radial-gradient(180px at 0px 0px, white, transparent);">
                      <svg aria-hidden="true"
                         class="absolute inset-x-0 inset-y-[-30%] h-[160%] w-full skew-y-[-18deg] fill-black/50 stroke-black/70  /10">
                         <defs>
                            <pattern id=":r6u:" width="72" height="56" patternUnits="userSpaceOnUse"
                               x="50%" y="16">
                               <path d="M.5 56V.5H72" fill="none"></path>
                            </pattern>
                         </defs>
                         <rect width="100%" height="100%" stroke-width="0" fill="url(#:r6u:)"></rect>
                         <svg x="50%" y="16" class="overflow-visible">
                            <rect stroke-width="0" width="73" height="57" x="0" y="56"></rect>
                            <rect stroke-width="0" width="73" height="57" x="72" y="168"></rect>
                         </svg>
                      </svg>
                   </div>
                </div>
                <div
                   class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-zinc-900/7.5 group-hover:ring-zinc-900/10  ">
                </div>
                <div class="relative rounded-2xl px-4 pt-16 pb-4">
                   
                   <h3 class="mt-4 text-sm font-semibold leading-7 text-zinc-900 "><a
                         href="/reference/<%= pageData.featuredResources[i].path -%>"><span
                            class="absolute inset-0 rounded-2xl"></span>  <%= pageData.featuredResources[i].name -%></a>
                   </h3>
                   <p class="mt-1 text-sm text-zinc-600 "><%= pageData.featuredResources[i].description -%></p>
                </div>
             </div>
             <% } %>

          </div>
       </div>
    </article>
 </main>