<!DOCTYPE html>
<html lang="en" id="home">

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<head>
    <title>OneUptime | Compare <%= productConfig.productName %> with OneUptime. </title>
    <meta name="description"
        content="OneUptime monitors websites, API's, and servers and alerts your team if something goes wrong. It also keeps your customers updated about any downtime.">
        <%- include('head', {
    enableGoogleTagManager: typeof enableGoogleTagManager !== 'undefined' ? enableGoogleTagManager : false
}) -%>
</head>

<body>

  <%- include('nav') -%>

  <div class="bg-white">
    <div class="mx-auto max-w-7xl py-24 px-6 lg:px-8">
      <div class="sm:align-center sm:flex sm:flex-col">
        <h1 class="text-4xl font-semibold tracking-tight text-gray-900 sm:text-center">Compare <%= productConfig.productName %> with OneUptime</h1>
        <p class="mt-5 text-xl text-gray-500 sm:text-center"><%= productConfig.description %></p></p>
        <p class="mt-5 text-xl text-gray-500 sm:text-center"><%= productConfig.descriptionLine2 %></p></p>
    </div>
  </div>









  <div class="bg-white">
    <div class="mx-auto max-w-7xl bg-white py-16 sm:py-24 sm:px-6 lg:px-8">
      <!-- xs to lg -->
      <div class="mx-auto max-w-2xl space-y-16 lg:hidden">
        <section>
          <div class="mb-8 px-6 sm:px-4">
            <h2 class="text-lg font-medium leading-6 text-gray-900"><%= productConfig.productName %></h2>
            <p class="mt-4">
              <span class="text-4xl font-bold tracking-tight text-gray-900 free-plan-price"><%= productConfig.price %></span>
              <span class="text-base font-medium text-gray-500 billing-period">/mo</span>
            </p>
            <p class="mt-4 text-sm text-gray-500"><%= productConfig.productDescription %></p>
          </div>
  
          <% for(var i=0; i<productConfig.items.length; i++) {%>
          <table class="w-full">
            <caption class="border-t border-gray-200 bg-gray-50 py-3 px-6 text-left text-sm font-medium text-gray-900 sm:px-4">
              <%= productConfig.items[i].name %>
            </caption>
            <thead>
              <tr>
                <th class="sr-only" scope="col">Feature</th>
                <th class="sr-only" scope="col">Included</th>
              </tr>
            </thead>
            <tbody class="divide-y divide-gray-200">
              <% for(var j=0; j<productConfig.items[i].data.length; j++) {%>
              <tr class="border-t border-gray-200">
                <th class="py-5 px-6 text-left text-sm font-normal text-gray-500 sm:px-4" scope="row"><%= productConfig.items[i].data[j].title %></th>
                <td class="py-5 pr-6 sm:pr-4">
                  <% if(productConfig.items[i].data[j].productColumn === "tick"){ %>
                    <!-- Heroicon name: mini/check -->
                 <svg class="h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                   <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                 </svg>
                <% } else if(productConfig.items[i].data[j].productColumn === ""){ %>
                 <!-- Heroicon name: mini/check -->
                 <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                   <path fill-rule="evenodd" d="M4 10a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75A.75.75 0 014 10z" clip-rule="evenodd" />
                 </svg>
               <% } else { %>
                    <!-- Heroicon name: mini/check -->
                    <span class="text-sm text-gray-700"><%= productConfig.items[i].data[j].productColumn %></span>
                <% } %>
                </td>
              </tr>
              <% } %>
              
            </tbody>
          </table>
          <% } %>


        </section>
  
        <section>
          <div class="mb-8 px-6 sm:px-4">
            <h2 class="text-lg font-medium leading-6 text-gray-900">OneUptime</h2>
            <p class="mt-4">
              <span class="text-4xl font-bold tracking-tight text-gray-900 growth-plan-price"><%= productConfig.oneuptimePrice %></span>
              <span class="text-base font-medium text-gray-500 billing-period">/mo</span>
            </p>
            <p class="mt-4 text-sm text-gray-500"><%= productConfig.oneUptimeDescription %></p>
          </div>
  
          <% for(var i=0; i<productConfig.items.length; i++) {%>
            <table class="w-full">
              <caption class="border-t border-gray-200 bg-gray-50 py-3 px-6 text-left text-sm font-medium text-gray-900 sm:px-4">
                <%= productConfig.items[i].name %>
              </caption>
              <thead>
                <tr>
                  <th class="sr-only" scope="col">Feature</th>
                  <th class="sr-only" scope="col">Included</th>
                </tr>
              </thead>
              <tbody class="divide-y divide-gray-200">
                <% for(var j=0; j<productConfig.items[i].data.length; j++) {%>
                <tr class="border-t border-gray-200">
                  <th class="py-5 px-6 text-left text-sm font-normal text-gray-500 sm:px-4" scope="row"><%= productConfig.items[i].data[j].title %></th>
                  <td class="py-5 pr-6 sm:pr-4">
                    <% if(productConfig.items[i].data[j].oneuptimeColumn === "tick"){ %>
                      <!-- Heroicon name: mini/check -->
                   <svg class="h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                     <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                   </svg>
                  <% } else if(productConfig.items[i].data[j].oneuptimeColumn === ""){ %>
                   <!-- Heroicon name: mini/check -->
                   <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                     <path fill-rule="evenodd" d="M4 10a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75A.75.75 0 014 10z" clip-rule="evenodd" />
                   </svg>
                 <% } else { %>
                      <!-- Heroicon name: mini/check -->
                      <span class="text-sm text-gray-700"><%= productConfig.items[i].data[j].oneuptimeColumn %></span>
                  <% } %>
                  </td>
                </tr>
                <% } %>
                
              </tbody>
            </table>
            <% } %>
        </section>

      </div>
  
      <!-- lg+ -->
      <div class="hidden lg:block">
        <table class="h-px w-full table-fixed">
          <caption class="sr-only">
            Compare Products
          </caption>
          <thead>
            <tr>
              <th class="w-1/3 px-6 pb-4 text-left text-sm font-medium text-gray-900" scope="col">
                <span class="sr-only">Feature by</span>
                <span>Products</span>
              </th>
  
              <th class="w-1/3 px-6 pb-4 text-left text-lg font-medium leading-6 text-gray-900" scope="col"><%= productConfig.productName %></th>
  
              <th class="w-1/3 px-6 pb-4 text-left text-lg font-medium leading-6 text-gray-900" scope="col">OneUptime</th>
  
            </tr>
          </thead>
          <tbody class="divide-y divide-gray-200 border-t border-gray-200">
            <tr>
              <th class="py-8 px-6 text-left align-top text-sm font-medium text-gray-900" scope="row">Pricing</th>
  
              <td class="h-full py-8 px-6 align-top">
                <div class="relative table h-full">
                  <p>
                    <span class="text-4xl font-bold tracking-tight text-gray-900 free-plan-price"><%= productConfig.price %></span>
                    <span class="text-base font-medium text-gray-500 billing-period">/mo</span>
                  </p>
                  <p class="mt-4 mb-16 text-sm text-gray-500"><%= productConfig.productDescription %></p>
                 
                </div>
              </td>
  
              <td class="h-full py-8 px-6 align-top">
                <div class="relative table h-full">
                  <p>
                    <span class="text-4xl font-bold tracking-tight text-gray-900 growth-plan-price"><%= productConfig.oneuptimePrice %></span>
                    <span class="text-base font-medium text-gray-500 billing-period">/mo</span>
                  </p>
                  <p class="mt-4 mb-16 text-sm text-gray-500"><%= productConfig.oneUptimeDescription %></p>
                  
                </div>
              </td>
  
            </tr>
  

            <% for(var i=0; i<productConfig.items.length; i++) {%>
            <tr>
              <th class="bg-gray-50 py-3 pl-6 text-left text-sm font-medium text-gray-900" colspan="5" scope="colgroup"><%= productConfig.items[i].name %></th>
            </tr>
                <% for(var j=0; j<productConfig.items[i].data.length; j++) {%>
                <tr>
                  <th class="py-5 px-6 text-left text-sm font-normal text-gray-500" scope="row"><%= productConfig.items[i].data[j].title %></th>
      
                  <td class="py-5 px-6">
                    <% if(productConfig.items[i].data[j].productColumn === "tick"){ %>
                       <!-- Heroicon name: mini/check -->
                    <svg class="h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                      <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                    </svg>
                   <% } else if(productConfig.items[i].data[j].productColumn === ""){ %>
                    <!-- Heroicon name: mini/check -->
                    <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                      <path fill-rule="evenodd" d="M4 10a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75A.75.75 0 014 10z" clip-rule="evenodd" />
                    </svg>
                  <% } else { %>
                       <!-- Heroicon name: mini/check -->
                       <span class="text-sm text-gray-700"><%= productConfig.items[i].data[j].productColumn %></span>
                   <% } %>
                   
                  </td>
      
                  <td class="py-5 px-6">
                    <% if(productConfig.items[i].data[j].oneuptimeColumn === "tick"){ %>
                      <!-- Heroicon name: mini/check -->
                   <svg class="h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                     <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                   </svg>
                  <% } else if(productConfig.items[i].data[j].oneuptimeColumn === ""){ %>
                   <!-- Heroicon name: mini/check -->
                   <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                     <path fill-rule="evenodd" d="M4 10a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75A.75.75 0 014 10z" clip-rule="evenodd" />
                   </svg>
            <% } else { %>
                 <!-- Heroicon name: mini/check -->
                 <span class="text-sm text-gray-700"><%= productConfig.items[i].data[j].oneuptimeColumn %></span>
             <% } %>
                  </td>
                </tr>
                <% } %>
            <% } %>

          </tbody>
          
        </table>
      </div>
    </div>
  </div>










  <div class="bg-white">
    <div class="mx-auto max-w-7xl px-6 py-24 sm:py-32 lg:py-40 lg:px-8">
      <div class="mx-auto max-w-4xl divide-y divide-gray-900/10">
        <h2 class="text-2xl font-bold leading-10 tracking-tight text-gray-900">Frequently asked questions</h2>
        <dl class="mt-10 space-y-6 divide-y divide-gray-900/10">
          <% for(var i=0; i < productConfig.faq.length; i++) { %>
          <div class="pt-6">
            <dt>
              <!-- Expand/collapse question button -->
              <div  class="flex w-full items-start justify-between text-left text-gray-900" aria-controls="faq-0" aria-expanded="false">
                <span class="text-base font-semibold leading-7"><%= productConfig.faq[i].question %></span>
              </div>
            </dt>
            <dd class="mt-2 pr-12" id="faq-0">
              <p class="text-base leading-7 text-gray-600"><%= productConfig.faq[i].answer %></p>
            </dd>
          </div>
          <% } %>
  
        </dl>
      </div>
    </div>
  </div>

      
  <%- include('cta') -%>
  <%- include('footer') -%>


</body>

</html>