<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">The open platform for all your
        observability needs.</h1>
      <p class="mt-5 text-xl text-gray-500 sm:text-center">With OneUptime, you get a complete SRE toolchain
        out-of-the-box. One interface. One conversation. One permission model. Thousands of features. You'll be amazed
        at everything OneUptime can do today. And we're just getting started.</p>

    </div>
    <div
      class="mt-12 space-y-4 sm:mt-16 sm:grid sm:grid-cols-2 sm:gap-6 sm:space-y-0 lg:mx-auto lg:max-w-4xl xl:mx-0 xl:max-w-none xl:grid-cols-4">
      <div class="divide-y divide-gray-200 rounded-lg border border-gray-200 shadow-sm">
        <div class="p-6">
          <div class="text-lg font-medium leading-6 text-gray-900 flex space-x-2">
            <div>
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                stroke="currentColor" class="w-6 h-6">
                <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>

            </div>
            <div>Status Page</div>
          </div>
          <p class="mt-4 text-sm text-gray-500">Status Page for your Business</p>
        </div>
        <div class="px-6 pt-6 pb-8">
          <h3 class="text-sm font-medium text-gray-900">What's included</h3>
          <ul role="list" class="mt-6 space-y-4">
            <li class="flex space-x-3">
              <!-- Heroicon name: mini/check -->
              <%- include('./Partials/tick-icon') %>
                <span class="text-sm text-gray-500"> Unlimited Public Status Pages</span>
            </li>

            <li class="flex space-x-3">
              <!-- Heroicon name: mini/check -->
              <%- include('./Partials/tick-icon') %>
                <span class="text-sm text-gray-500">Unlimited Private Status Pages</span>
            </li>

            <li class="flex space-x-3">
              <!-- Heroicon name: mini/check -->
              <%- include('./Partials/tick-icon') %>
                <span class="text-sm text-gray-500">Unlimited Subscribers</span>
            </li>

            <li class="flex space-x-3">
              <!-- Heroicon name: mini/check -->
              <%- include('./Partials/tick-icon') %>
                <span class="text-sm text-gray-500">Custom Domain Support</span>
            </li>

            <li class="flex space-x-3">
              <!-- Heroicon name: mini/check -->
              <%- include('./Partials/tick-icon') %>
                <span class="text-sm text-gray-500">Custom Branding</span>
            </li>

            <li class="flex space-x-3">
              <!-- Heroicon name: mini/check -->
              <%- include('./Partials/tick-icon') %>
                <span class="text-sm text-gray-500">Post Announcements</span>
            </li>

            <li class="flex space-x-3">
              <!-- Heroicon name: mini/check -->
              <%- include('./Partials/tick-icon') %>
                <span class="text-sm text-gray-500">Post Incidents</span>
            </li>

            <li class="flex space-x-3">
              <!-- Heroicon name: mini/check -->
              <%- include('./Partials/tick-icon') %>
                <span class="text-sm text-gray-500">Scheduled Maintenance</span>
            </li>

            <li class="flex space-x-3">
              <!-- Heroicon name: mini/check -->
              <%- include('./Partials/tick-icon') %>
                <span class="text-sm text-gray-500">Private Status Page</span>
            </li>

            <li class="flex space-x-3">
              <!-- Heroicon name: mini/check -->
              <%- include('./Partials/tick-icon') %>
                <span class="text-sm text-gray-500">Status Page with SSO</span>
            </li>

            <li class="flex space-x-3">
              <!-- Heroicon name: mini/check -->
              <%- include('./Partials/tick-icon') %>
                <span class="text-sm text-gray-500">Reports</span>
            </li>

            <li class="flex space-x-3">
              <!-- Heroicon name: mini/check -->
              <%- include('./Partials/tick-icon') %>
                <span class="text-sm text-gray-500">API Access &amp; Integrations</span>
            </li>

            <li class="flex space-x-3">
              <!-- Heroicon name: mini/check -->
              <%- include('./Partials/tick-icon') %>
                <span class="text-sm text-gray-500">Terraform / OpenTofu Support</span>
            </li>

          </ul>

        </div>
        <div class="p-6 border-t-2 border-gray-200">
          <h2 class="text-lg font-medium leading-6 text-gray-900">OneUptime can replace</h2>
          <p class="mt-4 text-sm text-gray-500">StatusPage.io, FreshPing, etc.</p>
        </div>
      </div>




      <div class="divide-y divide-gray-200 rounded-lg border border-gray-200 shadow-sm">
        <div class="p-6">
          <div class="text-lg font-medium leading-6 text-gray-900 flex space-x-2">
            <div>
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                stroke="currentColor" class="w-6 h-6">
                <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>

            </div>
            <div>Incident Management</div>
          </div>
          <p class="mt-4 text-sm text-gray-500">Respond to incidents faster</p>
        </div>
        <div class="px-6 pt-6 pb-8">
          <h3 class="text-sm font-medium text-gray-900">What's included</h3>
          <ul role="list" class="mt-6 space-y-4">
            <li class="flex space-x-3">
              <!-- Heroicon name: mini/check -->
              <%- include('./Partials/tick-icon') %>
                <span class="text-sm text-gray-500">Integrates with monitoring tool</span>
            </li>

            <li class="flex space-x-3">
              <!-- Heroicon name: mini/check -->
              <%- include('./Partials/tick-icon') %>
                <span class="text-sm text-gray-500">Show Incident on Status Page</span>
            </li>

            <li class="flex space-x-3">
              <!-- Heroicon name: mini/check -->
              <%- include('./Partials/tick-icon') %>
                <span class="text-sm text-gray-500">See Root Cause</span>
            </li>

            <li class="flex space-x-3">
              <!-- Heroicon name: mini/check -->
              <%- include('./Partials/tick-icon') %>
                <span class="text-sm text-gray-500">Custom Incident States</span>
            </li>

            <li class="flex space-x-3">
              <!-- Heroicon name: mini/check -->
              <%- include('./Partials/tick-icon') %>
                <span class="text-sm text-gray-500">Custom Incident Severity</span>
            </li>

            <li class="flex space-x-3">
              <!-- Heroicon name: mini/check -->
              <%- include('./Partials/tick-icon') %>
                <span class="text-sm text-gray-500">Post Public Postmortem</span>
            </li>

            <li class="flex space-x-3">
              <!-- Heroicon name: mini/check -->
              <%- include('./Partials/tick-icon') %>
                <span class="text-sm text-gray-500">Private Postmortem Notes</span>
            </li>

            <li class="flex space-x-3">
              <!-- Heroicon name: mini/check -->
              <%- include('./Partials/tick-icon') %>
                <span class="text-sm text-gray-500">Integrate with Slack</span>
            </li>

            <li class="flex space-x-3">
              <!-- Heroicon name: mini/check -->
              <%- include('./Partials/tick-icon') %>
                <span class="text-sm text-gray-500">5000+ Integrations</span>
            </li>


            <li class="flex space-x-3">

              <!-- Heroicon name: mini/check -->
              <%- include('./Partials/tick-icon') %>



                <span class="text-sm text-gray-500">Incident Workflows</span>
            </li>

            <li class="flex space-x-3">
              <!-- Heroicon name: mini/check -->
              <%- include('./Partials/tick-icon') %>


                <span class="text-sm text-gray-500">Active Monitoring</span>
            </li>


                         <li class="flex space-x-3">
              <!-- Heroicon name: mini/check -->
              <%- include('./Partials/tick-icon') %>


                <span class="text-sm text-gray-500">Terraform / Opentofu Support</span>
            </li>

            <li class="flex space-x-3">
              <!-- Heroicon name: mini/check -->
              <%- include('./Partials/tick-icon') %>


                <span class="text-sm text-gray-500">Call & SMS Alerts</span>
            </li>




          </ul>


        </div>
        <div class="p-6 border-t-2 border-gray-200">
          <h2 class="text-lg font-medium leading-6 text-gray-900">OneUptime can replace</h2>
          <p class="mt-4 text-sm text-gray-500">Incident.io, Fire Hydrant, etc.</p>
        </div>
      </div>


      <div class="divide-y divide-gray-200 rounded-lg border border-gray-200 shadow-sm">
        <div class="p-6">
          <div class="text-lg font-medium leading-6 text-gray-900 flex space-x-2">
            <div>
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                stroke="currentColor" class="w-6 h-6">
                <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>


            </div>
            <div>Monitoring</div>
          </div>
          <p class="mt-4 text-sm text-gray-500">Monitor status of any resource</p>
        </div>
        <div class="px-6 pt-6 pb-8">
          <h3 class="text-sm font-medium text-gray-900">What's included</h3>
          <ul role="list" class="mt-6 space-y-4">
            <li class="flex space-x-3">
              <%- include('./Partials/tick-icon') %>
                <span class="text-sm text-gray-500"> Static Monitors </span>
            </li>
            <li class="flex space-x-3">

              <!-- Heroicon name: mini/check -->
              <%- include('./Partials/tick-icon') %>



                <span class="text-sm text-gray-500">Advanced Workflows</span>
            </li>


            <li class="flex space-x-3">

              <!-- Heroicon name: mini/check -->
              <%- include('./Partials/tick-icon') %>



                <span class="text-sm text-gray-500">Monitor Website</span>
            </li>
            <li class="flex space-x-3">

              <!-- Heroicon name: mini/check -->
              <%- include('./Partials/tick-icon') %>



                <span class="text-sm text-gray-500">Monitor API</span>
            </li>

            <li class="flex space-x-3">

              <!-- Heroicon name: mini/check -->
              <%- include('./Partials/tick-icon') %>



                <span class="text-sm text-gray-500">Monitor IPv4 and IPv6</span>
            </li>

            <li class="flex space-x-3">

              <%- include('./Partials/tick-icon') %>



                <span class="text-sm text-gray-500">Inbound Webhook Monitoring</span>
            </li>
           


            <li class="flex space-x-3">

              <%- include('./Partials/tick-icon') %>



                <span class="text-sm text-gray-500">Monitor VM's &amp; Servers</span>
            </li>

            <li class="flex space-x-3">

              <%- include('./Partials/tick-icon') %>



                <span class="text-sm text-gray-500">Monitor Docker Containers</span>
            </li>

            <li class="flex space-x-3">

              <%- include('./Partials/tick-icon') %>



                <span class="text-sm text-gray-500">Monitor your Network</span>
            </li>

            <li class="flex space-x-3">

              <%- include('./Partials/tick-icon') %>



                <span class="text-sm text-gray-500">Monitor Kubernetes Clusters</span>
            </li>


            <li class="flex space-x-3">

              <%- include('./Partials/tick-icon') %>



                <span class="text-sm text-gray-500">Monitor User Journeys</span>
            </li>

            <li class="flex space-x-3">

              <%- include('./Partials/tick-icon') %>



                <span class="text-sm text-gray-500">Monitor any Metric</span>
            </li>

             <li class="flex space-x-3">

              <%- include('./Partials/tick-icon') %>



                <span class="text-sm text-gray-500">Terraform / OpenTofu Support</span>
            </li>





          </ul>

        </div>
        <div class="p-6 border-t-2 border-gray-200">
          <h2 class="text-lg font-medium leading-6 text-gray-900">OneUptime will replace</h2>
          <p class="mt-4 text-sm text-gray-500">Pingdom, New Relic, DataDog, etc. </p>
        </div>
      </div>

      <div class="divide-y divide-gray-200 rounded-lg border border-gray-200 shadow-sm">
        <div class="p-6">
          <div class="text-lg font-medium leading-6 text-gray-900 flex space-x-2">
            <div>
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                stroke="currentColor" class="w-6 h-6">
                <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>



            </div>
            <div>On-Call &amp; Alerts</div>
          </div>

          <p class="mt-4 text-sm text-gray-500">Alert your team</p>
        </div>
        <div class="px-6 pt-6 pb-8">

          <h3 class="text-sm font-medium text-gray-900">What's included</h3>
          <ul role="list" class="mt-6 space-y-4">
            <li class="flex space-x-3">

              <!-- Heroicon name: mini/check -->
              <%- include('./Partials/tick-icon') %>



                <span class="text-sm text-gray-500">Call / SMS Alerts</span>
            </li>

           



            <li class="flex space-x-3">

              <!-- Heroicon name: mini/check -->
              <%- include('./Partials/tick-icon') %>



                <span class="text-sm text-gray-500">Email Alerts</span>
            </li>

            <li class="flex space-x-3">

              <!-- Heroicon name: mini/check -->
              <%- include('./Partials/tick-icon') %>



                <span class="text-sm text-gray-500">Push Notification Alerts</span>
            </li>


            <li class="flex space-x-3">

              <!-- Heroicon name: mini/check -->
              <%- include('./Partials/tick-icon') %>



                <span class="text-sm text-gray-500">Webhook Alerts</span>
            </li>

            <li class="flex space-x-3">

              <!-- Heroicon name: mini/check -->
              <%- include('./Partials/tick-icon') %>



                <span class="text-sm text-gray-500">On-Call Escalation</span>
            </li>

            <li class="flex space-x-3">

              <%- include('./Partials/tick-icon') %>



                <span class="text-sm text-gray-500">On-Call Rotations</span>
            </li>


            <li class="flex space-x-3">

              <%- include('./Partials/tick-icon') %>



                <span class="text-sm text-gray-500">Integrates with Slack / Team</span>
            </li>
            <li class="flex space-x-3">

              <%- include('./Partials/tick-icon') %>



                <span class="text-sm text-gray-500">Advanced Workflows</span>
            </li>
            <li class="flex space-x-3">

              <%- include('./Partials/tick-icon') %>



                <span class="text-sm text-gray-500">On-Call Logs & Timelines</span>
            </li>



            <li class="flex space-x-3">

              <%- include('./Partials/tick-icon') %>



              <span class="text-sm text-gray-500">Vacation Policy &amp; Overrides</span>
            </li>


            <li class="flex space-x-3">

              <%- include('./Partials/tick-icon') %>



              <span class="text-sm text-gray-500">Calendar Integration</span>
            </li>

            <li class="flex space-x-3">

              <%- include('./Partials/tick-icon') %>



              <span class="text-sm text-gray-500">Dashboards &amp; Reports</span>
            </li>

                        <li class="flex space-x-3">

              <!-- Heroicon name: mini/check -->
              <%- include('./Partials/tick-icon') %>



                <span class="text-sm text-gray-500">Terraform / OpenTofu Support</span>
            </li>



          </ul>

        </div>
        <div class="p-6 border-t-2 border-gray-200">
          <h2 class="text-lg font-medium leading-6 text-gray-900">OneUptime will replace</h2>
          <p class="mt-4 text-sm text-gray-500">PagerDuty, OpsGenie, Splunk</p>
        </div>
      </div>
    </div>
  </div>
</div>


<div class="bg-white">
  <div class="mx-auto max-w-7xl py-24 pt-10 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">Logs, Traces, Metrics, Copilot and more.</h1>
      <p class="mt-5 text-xl text-gray-500 sm:text-center">We truly envision to be the best open-source observability
        platform out there. All of this to help you build reliable software all of the time. Coming very soon.</p>

    </div>
    <div
      class="mt-12 space-y-4 sm:mt-16 sm:grid sm:grid-cols-2 sm:gap-6 sm:space-y-0 lg:mx-auto lg:max-w-4xl xl:mx-0 xl:max-w-none xl:grid-cols-4">
      <div class="divide-y divide-gray-200 rounded-lg border border-gray-200 shadow-sm">
        <div class="p-6">
          <div class="text-lg font-medium leading-6 text-gray-900 flex space-x-2">
            <div>
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                stroke="currentColor" class="w-6 h-6">
                <path stroke-linecap="round" stroke-linejoin="round"
                  d="M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 010 3.75H5.625a1.875 1.875 0 010-3.75z" />
              </svg>


            </div>
            <div>Logs Management</div>
          </div>
          <p class="mt-4 text-sm text-gray-500">Ingest logs of from any source and search in seconds.</p>
        </div>
        <div class="px-6 pt-6 pb-8">

          <h3 class="text-sm font-medium text-gray-900">What's included</h3>
          <ul role="list" class="mt-6 space-y-4">

            <li class="flex space-x-3">
              <!-- Heroicon name: mini/check -->
              <%- include('./Partials/tick-icon') %>


                <span class="text-sm text-gray-500">Ingest with OpenTelemetry</span>
            </li>

            <li class="flex space-x-3">
              <!-- Heroicon name: mini/check -->
              <%- include('./Partials/tick-icon') %>


                <span class="text-sm text-gray-500">Ingest with Fluentd</span>
            </li>

            <li class="flex space-x-3">
              <!-- Heroicon name: mini/check -->
              <%- include('./Partials/tick-icon') %>


                <span class="text-sm text-gray-500">Ingest +1000 Sources</span>
            </li>


            <li class="flex space-x-3">

              <%- include('./Partials/tick-icon') %>



                <span class="text-sm text-gray-500">Application Logs</span>
            </li>

            <li class="flex space-x-3">

              <%- include('./Partials/tick-icon') %>



                <span class="text-sm text-gray-500">Container Logs</span>
            </li>

            <li class="flex space-x-3">
              <!-- Heroicon name: mini/check -->
              <%- include('./Partials/tick-icon') %>


                <span class="text-sm text-gray-500">Custom Queries</span>
            </li>


            <li class="flex space-x-3">
              <!-- Heroicon name: mini/check -->
              <%- include('./Partials/tick-icon') %>


                <span class="text-sm text-gray-500">Security and Compliance</span>
            </li>

            <li class="flex space-x-3">
              <!-- Heroicon name: mini/check -->
              <%- include('./Partials/tick-icon') %>


                <span class="text-sm text-gray-500">Advanced Workflows</span>
            </li>

            <li class="flex space-x-3">
              <!-- Heroicon name: mini/check -->
              <%- include('./Partials/tick-icon') %>


                <span class="text-sm text-gray-500">Integrate with Slack / Teams</span>
            </li>

            <li class="flex space-x-3">
              <!-- Heroicon name: mini/check -->
              <%- include('./Partials/tick-icon') %>


                <span class="text-sm text-gray-500">Alerting</span>
            </li>


            <li class="flex space-x-3">
              <!-- Heroicon name: mini/check -->
              <%- include('./Partials/tick-icon') %>


                <span class="text-sm text-gray-500">Export to Data Warehouse</span>
            </li>

            <li class="flex space-x-3">
              <!-- Heroicon name: mini/check -->
              <%- include('./Partials/tick-icon') %>


                <span class="text-sm text-gray-500">Realtime Log Dashboards</span>
            </li>


            <li class="flex space-x-3">
              <!-- Heroicon name: mini/check -->
              <%- include('./Partials/tick-icon') %>


                <span class="text-sm text-gray-500">Monitor Logs &amp; Alerts</span>
            </li>

          </ul>


        </div>
        <div class="p-6 border-t-2 border-gray-200">
          <h2 class="text-lg font-medium leading-6 text-gray-900">OneUptime can replace</h2>
          <p class="mt-4 text-sm text-gray-500">Logz.io, Loggly, etc.</p>
        </div>
      </div>




      <div class="divide-y divide-gray-200 rounded-lg border border-gray-200 shadow-sm">
        <div class="p-6">
          <div class="text-lg font-medium leading-6 text-gray-900 flex space-x-2">
            <div>
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                stroke="currentColor" class="w-6 h-6">
                <path stroke-linecap="round" stroke-linejoin="round"
                  d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" />
              </svg>


            </div>
            <div>APM</div>
          </div>
          <p class="mt-4 text-sm text-gray-500">Monitor performance of any app, any stack, any environment.</p>
        </div>
        <div class="px-6 pt-6 pb-8">

          <h3 class="text-sm font-medium text-gray-900">What's included</h3>
          <ul role="list" class="mt-6 space-y-4">

            <li class="flex space-x-3">
              <!-- Heroicon name: mini/check -->
              <%- include('./Partials/tick-icon') %>


                <span class="text-sm text-gray-500">Ingest with OpenTelemetry</span>
            </li>
            <li class="flex space-x-3">
              <!-- Heroicon name: mini/check -->
              <%- include('./Partials/tick-icon') %>


                <span class="text-sm text-gray-500">Find Bottlenecks Instantly</span>
            </li>


            <li class="flex space-x-3">
              <!-- Heroicon name: mini/check -->
              <%- include('./Partials/tick-icon') %>


                <span class="text-sm text-gray-500">Cross Microservice Visibility</span>
            </li>

            <li class="flex space-x-3">
              <!-- Heroicon name: mini/check -->
              <%- include('./Partials/tick-icon') %>


                <span class="text-sm text-gray-500">Distributed Tracing</span>
            </li>

            <li class="flex space-x-3">
              <!-- Heroicon name: mini/check -->
              <%- include('./Partials/tick-icon') %>


                <span class="text-sm text-gray-500">Deployment Tracking</span>
            </li>

            <li class="flex space-x-3">
              <!-- Heroicon name: mini/check -->
              <%- include('./Partials/tick-icon') %>


                <span class="text-sm text-gray-500">Frontend Monitoring</span>
            </li>

            <li class="flex space-x-3">
              <!-- Heroicon name: mini/check -->
              <%- include('./Partials/tick-icon') %>


                <span class="text-sm text-gray-500">Backend Monitoring</span>
            </li>

            <li class="flex space-x-3">
              <!-- Heroicon name: mini/check -->
              <%- include('./Partials/tick-icon') %>


                <span class="text-sm text-gray-500">Query Monitoring</span>
            </li>

            <li class="flex space-x-3">
              <!-- Heroicon name: mini/check -->
              <%- include('./Partials/tick-icon') %>


                <span class="text-sm text-gray-500">Code Level Tracing</span>
            </li>

            <li class="flex space-x-3">
              <!-- Heroicon name: mini/check -->
              <%- include('./Partials/tick-icon') %>


                <span class="text-sm text-gray-500">Track Custom Metrics</span>
            </li>

            <li class="flex space-x-3">
              <!-- Heroicon name: mini/check -->
              <%- include('./Partials/tick-icon') %>


                <span class="text-sm text-gray-500">Build Realtime Dashboards</span>
            </li>

            <li class="flex space-x-3">
              <!-- Heroicon name: mini/check -->
              <%- include('./Partials/tick-icon') %>


                <span class="text-sm text-gray-500">Set up Alerts</span>
            </li>




            <li class="flex space-x-3">
              <!-- Heroicon name: mini/check -->
              <%- include('./Partials/tick-icon') %>


                <span class="text-sm text-gray-500">Integrate with Slack / Teams</span>
            </li>
          </ul>

        </div>
        <div class="p-6 border-t-2 border-gray-200">
          <h2 class="text-lg font-medium leading-6 text-gray-900">OneUptime can replace</h2>
          <p class="mt-4 text-sm text-gray-500">NewRelic, DataDog, etc.</p>
        </div>
      </div>


      <div class="divide-y divide-gray-200 rounded-lg border border-gray-200 shadow-sm">
        <div class="p-6">
          <div class="text-lg font-medium leading-6 text-gray-900 flex space-x-2">
            <div>
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                stroke="currentColor" class="w-6 h-6">
                <path stroke-linecap="round" stroke-linejoin="round"
                  d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
              </svg>



            </div>
            <div>Error Tracking</div>
          </div>
          <p class="mt-4 text-sm text-gray-500">Track software errors. See issues that really matter.</p>
        </div>
        <div class="px-6 pt-6 pb-8">

          <h3 class="text-sm font-medium text-gray-900">What's included</h3>
          <ul role="list" class="mt-6 space-y-4">

            <li class="flex space-x-3">
              <!-- Heroicon name: mini/check -->
              <%- include('./Partials/tick-icon') %>


                <span class="text-sm text-gray-500">Track errors in any stack</span>
            </li>
            <li class="flex space-x-3">

              <%- include('./Partials/tick-icon') %>



                <span class="text-sm text-gray-500">Custom Queries</span>
            </li>
            <li class="flex space-x-3">

              <%- include('./Partials/tick-icon') %>



                <span class="text-sm text-gray-500">Session Replay</span>
            </li>

            <li class="flex space-x-3">

              <%- include('./Partials/tick-icon') %>



                <span class="text-sm text-gray-500">Cross Microservice Issues</span>
            </li>

            <li class="flex space-x-3">

              <%- include('./Partials/tick-icon') %>



                <span class="text-sm text-gray-500">Distributed Tracing</span>
            </li>

            <li class="flex space-x-3">

              <%- include('./Partials/tick-icon') %>



                <span class="text-sm text-gray-500">Stack Traces</span>
            </li>

            <li class="flex space-x-3">

              <%- include('./Partials/tick-icon') %>



                <span class="text-sm text-gray-500">Version Management</span>
            </li>

            <li class="flex space-x-3">

              <%- include('./Partials/tick-icon') %>



                <span class="text-sm text-gray-500">Issue Owners</span>
            </li>

            <li class="flex space-x-3">

              <%- include('./Partials/tick-icon') %>



                <span class="text-sm text-gray-500">Integrate with Slack / Teams</span>
            </li>

            <li class="flex space-x-3">
              <%- include('./Partials/tick-icon') %>
                <span class="text-sm text-gray-500">Advanced Workflows</span>
            </li>

            <li class="flex space-x-3">
              <%- include('./Partials/tick-icon') %>
                <span class="text-sm text-gray-500">View Release Health</span>
            </li>

            <li class="flex space-x-3">
              <%- include('./Partials/tick-icon') %>
                <span class="text-sm text-gray-500">Set up Alerts</span>
            </li>

            <li class="flex space-x-3">
              <%- include('./Partials/tick-icon') %>
                <span class="text-sm text-gray-500">Auto Resolve with Copilot</span>
            </li>


          </ul>

        </div>
        <div class="p-6 border-t-2 border-gray-200">
          <h2 class="text-lg font-medium leading-6 text-gray-900">OneUptime will replace</h2>
          <p class="mt-4 text-sm text-gray-500">Sentry, Dynatrace and more. </p>
        </div>
      </div>

      <div class="divide-y divide-gray-200 rounded-lg border border-gray-200 shadow-sm">
        <div class="p-6">
          <div class="text-lg font-medium leading-6 text-gray-900 flex space-x-2">
            <div>
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
                <path stroke-linecap="round" stroke-linejoin="round" d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z" />
              </svg>
            </div>
            <div>Reliability Copilot</div>
          </div>

          <p class="mt-4 text-sm text-gray-500">Fix issues with your code automatically.</p>
        </div>
        <div class="px-6 pt-6 pb-8">

          <h3 class="text-sm font-medium text-gray-900">What's included</h3>
          <ul role="list" class="mt-6 space-y-4">

            <li class="flex space-x-3">

              <%- include('./Partials/tick-icon') %>




                <span class="text-sm text-gray-500">Scan your Codebase.</span>
            </li>

            <li class="flex space-x-3">

              <%- include('./Partials/tick-icon') %>




                <span class="text-sm text-gray-500">Fix Errors Automatically</span>
            </li>

            <li class="flex space-x-3">

              <%- include('./Partials/tick-icon') %>




                <span class="text-sm text-gray-500">Fix Performance Issues</span>
            </li>



            <li class="flex space-x-3">

              <%- include('./Partials/tick-icon') %>




                <span class="text-sm text-gray-500">Fix DB Queries Automatically</span>
            </li>

            <li class="flex space-x-3">

              <%- include('./Partials/tick-icon') %>




                <span class="text-sm text-gray-500">Auto Fix Common Issues</span>
            </li>

            <li class="flex space-x-3">

              <%- include('./Partials/tick-icon') %>




                <span class="text-sm text-gray-500">Pull Request Reviews</span>
            </li>

            <li class="flex space-x-3">

              <%- include('./Partials/tick-icon') %>




                <span class="text-sm text-gray-500">Fix Frontend Issues</span>
            </li>

            <li class="flex space-x-3">

              <%- include('./Partials/tick-icon') %>




                <span class="text-sm text-gray-500">Integrate with GitHub, GitLab</span>
            </li>


            <li class="flex space-x-3">

              <%- include('./Partials/tick-icon') %>




                <span class="text-sm text-gray-500">Integrate with CI/CD</span>
            </li>

            <li class="flex space-x-3">

              <%- include('./Partials/tick-icon') %>




                <span class="text-sm text-gray-500">Integrate with Issue Tracker</span>
            </li>

            <li class="flex space-x-3">

              <%- include('./Partials/tick-icon') %>




                <span class="text-sm text-gray-500">Integrates with Slack / Team</span>
            </li>

            <li class="flex space-x-3">

              <%- include('./Partials/tick-icon') %>




                <span class="text-sm text-gray-500">Write tests automatically</span>
            </li>

            <li class="flex space-x-3">

              <%- include('./Partials/tick-icon') %>




                <span class="text-sm text-gray-500">Advanced Workflows</span>
            </li>

          </ul>
        </div>
        <div class="p-6 border-t-2 border-gray-200">
          <h2 class="text-lg font-medium leading-6 text-gray-900">OneUptime will improve</h2>
          <p class="mt-4 text-sm text-gray-500">a lot of your software reliability. </p>
        </div>
      </div>
    </div>
  </div>
</div>