oneuptime/Home/views/pricing-compare.ejs

<div class="bg-white">
    <div class="mx-auto max-w-7xl py-24 px-6 lg:px-8">
    
    <div class="relative mx-auto max-w-container px-4 sm:px-6 lg:px-8">
       <section class="mx-auto max-w-[40rem] lg:max-w-none">
          <div class="max-w-3xl1 pr-12">
             <h2 class="text-base font-semibold leading-7 text-indigo-500 sm:text-center">Why OneUptime.</h2>
             <p class="text-5xl font-bold tracking-tight text-gray-900 sm:text-center">No vendor lock in. <br/> Saves you thousands as you grow.</p>
             <p class="mt-5 text-xl text-gray-500 sm:text-center mb-12">Always self-hostable. OneUptime replaces 4-5 apps that cumulatively cost a lot. Using our SaaS offering funds free and Open Source development.</p>
             
          <div class="mt-24 lg:mt-0 lg:flex lg:flex-row-reverse lg:items-center">
             <div class="relative z-10 -mx-4 shadow-lg ring-1 ring-slate-900/10 sm:mx-0 sm:rounded-3xl lg:w-1/2 lg:flex-none">
                <div class="flex absolute -bottom-px left-1/2 -ml-48 h-[2px] w-96">
                   <div class="w-full flex-none blur-sm [background-image:linear-gradient(90deg,rgba(56,189,248,0)_0%,#0EA5E9_32.29%,rgba(236,72,153,0.3)_67.19%,rgba(236,72,153,0)_100%)]"></div>
                   <div class="-ml-[100%] w-full flex-none blur-[1px] [background-image:linear-gradient(90deg,rgba(56,189,248,0)_0%,#0EA5E9_32.29%,rgba(236,72,153,0.3)_67.19%,rgba(236,72,153,0)_100%)]"></div>
                   <div class="-ml-[100%] w-full flex-none blur-sm [background-image:linear-gradient(90deg,rgba(56,189,248,0)_0%,#0EA5E9_32.29%,rgba(236,72,153,0.3)_67.19%,rgba(236,72,153,0)_100%)]"></div>
                   <div class="-ml-[100%] w-full flex-none blur-[1px] [background-image:linear-gradient(90deg,rgba(56,189,248,0)_0%,#0EA5E9_32.29%,rgba(236,72,153,0.3)_67.19%,rgba(236,72,153,0)_100%)]"></div>
                </div>
                <div class="relative bg-white px-4 py-10 sm:rounded-3xl sm:px-10">
                  <div class="mb-2 -ml-2">
                     <img class="h-8 w-auto sm:h-10" src="/img/3-transparent.svg" alt="">
                  </div>
                   <div class="flex items-center justify-between">
                      <h3 class="text-base font-semibold text-indigo-500">Starts from</h3>
                      <a class="inline-flex justify-center rounded-lg text-sm font-semibold py-2 px-3 bg-slate-900 text-white hover:bg-slate-700" href="/accounts/register"><span>Get started <span aria-hidden="true">→</span></span></a>
                   </div>
                   <div class="mt-3 flex items-center">
                      <p class="text-[2.5rem] leading-none text-slate-900">$<span class="font-bold">0</span></p>
                      <p class="ml-3 text-sm"><span class="font-semibold text-slate-900">per month</span><br><span class="text-slate-500">per user</span></p>
                   </div>
                   <p class="mt-6 text-sm leading-6 text-slate-600">No vendor lock-in. Always self-hostable. OneUptime replaces 4-5 apps that cumulatively cost a lot. Using our SaaS offering funds free and Open Source development.</p>
                   <h4 class="sr-only">All-access features</h4>
                   <ul class="mt-10 space-y-8 border-t border-slate-900/10 pt-10 text-sm leading-6 text-slate-700">
                      <li class="flex">
                         
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-10 h-10">
                           <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                         </svg>
                         
               
                         <p class="ml-5"><strong class="font-semibold text-slate-900">Status Pages</strong> — Unlimited public or private status pages with unlimited subscribers.</p>
                      </li>
                      <li class="flex">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-12 h-12">
                           <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
                         </svg>
                         
                         <p class="ml-5"><strong class="font-semibold text-slate-900">Incident Management</strong> — respond to incidents faster, post them on status page, add postmortem notes.</p>
                      </li>
                      <li class="flex">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-14 h-14">
                           <path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418" />
                         </svg>
                         
                         
                         <p class="ml-5"><strong class="font-semibold text-slate-900">Monitoring</strong> — Monitor status of any resource real-time. Create incidents automatically. Alert right team at the right time. (Coming soon)</p>
                      </li>
                      <li class="flex">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-10 h-10">
                           <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z" />
                         </svg>
                         
                        <p class="ml-5"><strong class="font-semibold text-slate-900">On-Call & Alerts</strong> — create on-call schedule, escalation policy, alert right team for right resources. (Coming soon)</p>
                     </li>
                   </ul>
                   <div class="relative mt-10 flex rounded-xl border border-slate-600/10 bg-slate-50 p-6">
                      <svg fill="none" xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 flex-none" stroke="#94A3B8" stroke-width="1.5">
                         <circle cx="11" cy="16" r="3.25" fill="#94A3B8" fill-opacity=".2"></circle>
                         <circle cx="21" cy="13" r="3.25" fill="#94A3B8" fill-opacity=".2"></circle>
                         <path d="M28.909 19c.223-.964.341-1.968.341-3 0-7.318-5.932-13.25-13.25-13.25S2.75 8.682 2.75 16c0 1.032.118 2.036.341 3" stroke-linecap="round"></path>
                         <path d="m18.031 29.016-2.187.109s-1.475-.118-1.827-.29c-1.049-.51-.579-2.915 0-3.95 1.157-2.064 3.752-5.135 7.125-5.135h.024c2.5 0 4.404 1.687 5.692 3.401-1.963 2.975-5.161 5.276-8.827 5.865Z" fill="#94A3B8" fill-opacity=".2" stroke-linejoin="round"></path>
                         <path d="m14.001 24.913.016-.027c.26-.465.593-.98.991-1.5-1.042-.918-2.374-1.636-3.988-1.636H11c-2.094 0-3.847 1.208-5.055 2.492a12.987 12.987 0 0 0 7.987 4.595l.057-.016c-1.004-.534-.555-2.868.012-3.908Z" fill="#94A3B8" fill-opacity=".2" stroke-linejoin="round"></path>
                      </svg>
                      <p class="ml-5 text-sm leading-6 text-slate-700"><strong class="font-semibold text-slate-900">No vendor lock-in. We are open-source</strong> — We are MIT licensed. Find us on <a href="https://github.com/oneuptime/oneuptime">GitHub</a>. You are more than welcome to self-host, create issues, modify the code and send us pull-requests!</p>
                   </div>
                </div>
             </div>
             <div class="relative mt-10 lg:mt-0 lg:w-1/2 lg:flex-none">
                <div class="absolute -inset-y-8 -left-2 w-px bg-slate-900/10 [mask-image:linear-gradient(to_top,transparent,white_4rem,white_calc(100%-4rem),transparent)] sm:left-0"></div>
                <div class="absolute -inset-y-8 -right-2 w-px bg-slate-900/10 [mask-image:linear-gradient(to_top,transparent,white_4rem,white_calc(100%-4rem),transparent)] sm:right-0 lg:hidden"></div>
                <div class="absolute -inset-x-8 top-0 h-px bg-slate-900/10 [mask-image:linear-gradient(to_right,transparent,white_4rem,white_calc(100%-4rem),transparent)]"></div>
                <div class="absolute -inset-x-8 bottom-0 h-px bg-slate-900/10 [mask-image:linear-gradient(to_right,transparent,white_4rem,white_calc(100%-4rem),transparent)]"></div>
                <ul>
                  <li class="relative py-8 px-2 sm:px-10">
                     <div class="absolute -inset-x-8 top-0 h-px bg-slate-900/10 [mask-image:linear-gradient(to_right,transparent,white_4rem,white_calc(100%-4rem),transparent)]"></div>
                     <div class="flex items-center justify-between">
                        <h3 class="text-sm font-semibold text-slate-500">StatusPage.io charges you</h3>
                        <a href="/compare/statuspage.io"  class="inline-flex justify-center rounded-lg text-sm font-semibold py-2 px-3 text-slate-900 ring-1 ring-slate-900/10 hover:ring-slate-900/20 cursor-pointer">
                           
                           Compare with OneUptime
                           <span aria-hidden="true" class="text-black/25 ml-2">→</span>
                        </a>
                     </div>
                     <p class="flex items-center"><span class="text-2xl text-slate-900">$<span class="font-bold">99</span></span><span class="ml-2 text-sm text-slate-500">a month</span></p>
                     <p class="mt-3 text-sm leading-6 text-slate-600">For their status pages with 1000 subscribers. You get that for free with OneUptime. Unlimited subscribers included!</p>
                  </li>
                  <li class="relative py-8 px-2 sm:px-10">
                     <div class="absolute -inset-x-8 top-0 h-px bg-slate-900/10 [mask-image:linear-gradient(to_right,transparent,white_4rem,white_calc(100%-4rem),transparent)]"></div>
                     <div class="flex items-center justify-between">
                        <h3 class="text-sm font-semibold text-slate-500">Incident.io charges you</h3>
                        <a href="/compare/incident.io" class="inline-flex justify-center rounded-lg text-sm font-semibold py-2 px-3 text-slate-900 ring-1 ring-slate-900/10 hover:ring-slate-900/20 cursor-pointer">
                           
                           Compare with OneUptime
                           <span aria-hidden="true" class="text-black/25 ml-2">→</span>
                        </a>
                     </div>
                     <p class="flex items-center"><span class="text-2xl text-slate-900">$<span class="font-bold">160</span></span><span class="ml-2 text-sm text-slate-500">a month</span></p>
                     <p class="mt-3 text-sm leading-6 text-slate-600">For 10 teammates on the platform, responding to incidents. You can get that for free at OneUptime. Post postmortem notes on the Status Page directly.</p>
                  </li>
                  
                  <li class="relative py-8 px-2 sm:px-10">
                     <div class="absolute -inset-x-8 top-0 h-px bg-slate-900/10 [mask-image:linear-gradient(to_right,transparent,white_4rem,white_calc(100%-4rem),transparent)]"></div>
                     <div class="flex items-center justify-between">
                        <h3 class="text-sm font-semibold text-slate-500">Pingdom charges you</h3>
                        <a href="/compare/pingdom"  class="inline-flex justify-center rounded-lg text-sm font-semibold py-2 px-3 text-slate-900 ring-1 ring-slate-900/10 hover:ring-slate-900/20 cursor-pointer">
                          
                           Compare with OneUptime
                           <span aria-hidden="true" class="text-black/25 ml-2">→</span>
                        </a>
                     </div>
                     <p class="flex items-center"><span class="text-2xl text-slate-900">$<span class="font-bold">49</span></span><span class="ml-2 text-sm text-slate-500">a month</span></p>
                     <p class="mt-3 text-sm leading-6 text-slate-600">For 50 uptime monitors. You can monitor any resource in real-time with OneUptime, all for free (coming very soon).</p>
                  </li>
                   <li class="relative py-8 px-2 sm:px-10">
                      <div class="absolute -inset-x-8 top-0 h-px bg-slate-900/10 [mask-image:linear-gradient(to_right,transparent,white_4rem,white_calc(100%-4rem),transparent)]"></div>
                      <div class="flex items-center justify-between">
                         <h3 class="text-sm font-semibold text-slate-500">PagerDuty charges you</h3>
                         <a href="/compare/pagerduty" class="inline-flex justify-center rounded-lg text-sm font-semibold py-2 px-3 text-slate-900 ring-1 ring-slate-900/10 hover:ring-slate-900/20 cursor-pointer">
                            
                            Compare with OneUptime
                            <span aria-hidden="true" class="text-black/25 ml-2">→</span>
                         </a>
                      </div>
                      <p class="flex items-center"><span class="text-2xl text-slate-900">$<span class="font-bold">210</span></span><span class="ml-2 text-sm text-slate-500">per month</span></p>
                      <p class="mt-3 text-sm leading-6 text-slate-600">For 10 users alerts and on-call schedule. You can get alerts, on-call rotation and schedules for free with OneUptime (coming very soon)</p>
                   </li>
                   
                </ul>
             </div>
          </div>
       </section>

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