<div class="relative overflow-hidden bg-white pt-32 pb-32">
    <div class="max-w-3xl1 px-6">
        <p class="text-4xl font-semibold tracking-tight text-gray-900 sm:text-center">OneUptime is 8+ tools combined
            into one.</p>
        <p class="mt-5 text-xl text-gray-500 sm:text-center mb-12">Everything from monitoring, status pages,
            incident management, on-call schedules - we've got it and we are just getting started!</p>
    </div>

    <div>
        <div class="sm:hidden px-6">
            <label for="location" class="block text-sm font-medium leading-6 text-gray-900">Select Product</label>
            <select id="location" onchange="showTab(this.value)" name="location" class="mt-2 block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-indigo-600 sm:text-sm sm:leading-6">
                <option value="1" selected>Status Pages</option>
                <option value="2">Monitoring</option>
                <option value="3">Incidents</option>
                <option value="4">On Call</option>
                <option value="5">Logs</option>
                <option value="6">APM</option>
                <option value="7">Workflows </option>
            </select>
          </div>

        <div class="hidden sm:block">
            <div class="border-b border-gray-200">
                <nav class="-mb-px flex justify-center space-x-8" aria-label="Tabs">
                    <!-- Current: "border-indigo-500 text-indigo-600", Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" -->
                    <a onclick="showTab(1)"
                        class="tab-1-button cursor-pointer border-indigo-500 text-indigo-600 group inline-flex items-center border-b-2 py-4 px-1 font-medium">
                        <!-- Current: "text-indigo-500", Default: "text-gray-400 group-hover:text-gray-500" -->
                        <svg class="icon-tab-1 text-gray-400 text-indigo-500 -ml-0.5 mr-2 h-5 w-5"
                            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>

                        <span>Status Pages</span>
                    </a>
                    <a onclick="showTab(2)"
                        class="tab-2-button cursor-pointer  border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 group inline-flex items-center border-b-2 py-4 px-1 font-medium">
                        <svg class="icon-tab-2 text-gray-400 group-hover:text-gray-500 -ml-0.5 mr-2 h-5 w-5"
                            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>

                        <span>Monitoring</span>
                    </a>
                    <a onclick="showTab(3)"
                        class="tab-3-button cursor-pointer  border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 group inline-flex items-center border-b-2 py-4 px-1 font-medium"
                        aria-current="page">
                        <svg xmlns="http://www.w3.org/2000/svg"
                            class="icon-tab-3 text-gray-400 group-hover:text-gray-500 -ml-0.5 mr-2 h-5 w-5" 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>

                        <span>Incidents</span>
                    </a>
                    <a onclick="showTab(4)"
                        class="tab-4-button cursor-pointer  border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 group inline-flex items-center border-b-2 py-4 px-1 font-medium">
                        <svg class="icon-tab-4 text-gray-400 group-hover:text-gray-500 -ml-0.5 mr-2 h-5 w-5"
                            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>

                        <span>On Call Alerts</span>
                    </a>

                    <a onclick="showTab(5)"
                        class="tab-5-button cursor-pointer  border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 group inline-flex items-center border-b-2 py-4 px-1 font-medium">
                        <svg class="icon-tab-5 text-gray-400 group-hover:text-gray-500 -ml-0.5 mr-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" >
                            <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 0 1 0 3.75H5.625a1.875 1.875 0 0 1 0-3.75Z" />
                          </svg>

                        <span>Logs</span>
                    </a>

                    <a onclick="showTab(6)"
                        class="tab-6-button cursor-pointer  border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 group inline-flex items-center border-b-2 py-4 px-1 font-medium">
                    
                        <svg class="icon-tab-6 text-gray-400 group-hover:text-gray-500 -ml-0.5 mr-2 h-5 w-5"
                            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 0 1 3 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 0 1-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 0 1-1.125-1.125V4.125Z" />
                        </svg>

                        <span>APM</span>
                    </a>

                    <a onclick="showTab(7)"
                        class="tab-7-button cursor-pointer  border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 group inline-flex items-center border-b-2 py-4 px-1 font-medium">
                    
                        <svg class="icon-tab-7 text-gray-400 group-hover:text-gray-500 -ml-0.5 mr-2 h-5 w-5"
                            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 strokeLinecap="round" strokeLinejoin="round"
                                d="M2.25 7.125C2.25 6.504 2.754 6 3.375 6h6c.621 0 1.125.504 1.125 1.125v3.75c0 .621-.504 1.125-1.125 1.125h-6a1.125 1.125 0 01-1.125-1.125v-3.75zM14.25 8.625c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v8.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 01-1.125-1.125v-8.25zM3.75 16.125c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 01-1.125-1.125v-2.25z" />
                        </svg>

                        <span>Workflows</span>
                    </a>
                </nav>
            </div>
        </div>
    </div>


    <div class="mt-10 tab-1">
        <div class="lg:mx-auto lg:grid lg:max-w-7xl lg:grid-flow-col-dense lg:grid-cols-3 lg:gap-24 lg:px-8">

            <div class="mx-auto max-w-xl px-6 lg:mx-0 lg:max-w-none py-16 lg:px-0">
                <div>
                    <div class="mt-6">
                        <h2 class="text-2xl font-medium tracking-tight text-gray-900">Beautiful Status Pages for your
                            customers and stakeholders</h2>

                        <ul role="list" class="mt-6 space-y-3 mt-8 mb-8 text-lg text-gray-500">
                            <li class="flex space-x-3">
                                <%- include('./tick-icon') %>
                                    <div class="text-gray-500 -mt-1">Unlimited subscribers</div>
                            </li>
                            <li class="flex space-x-3">
                                <%- include('./tick-icon') %>
                                    <div class="text-gray-500 -mt-1">Unlimited private users</div>
                            </li>
                            <li class="flex space-x-3">
                                <%- include('./tick-icon') %>
                                    <div class="text-gray-500 -mt-1">Custom branding</div>
                            </li>
                            <li class="flex space-x-3">
                                <%- include('./tick-icon') %>
                                    <div class="text-gray-500 -mt-1">Keep stakeholders updated</div>
                            </li>

                        </ul>


                        <div class="mt-6">
                            <a href="/accounts/register"
                                class="rounded-md bg-indigo-600 px-3.5 py-1.5 text-base font-semibold leading-7 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 hover:text-white">Get
                                started</a>
                            <a href="/product/status-page"
                                class="text-base font-semibold leading-7 text-gray-900 ml-3">Learn more <span
                                    aria-hidden="true">→</span></a>
                        </div>
                    </div>
                </div>
                <div class="mt-8 border-t border-gray-200 pt-6">
                    <blockquote>
                        <div>
                            <p class="text-base text-gray-500">&ldquo;OneUptime is one of the best status page product
                                on
                                the internet.&rdquo;</p>
                        </div>
                        <footer class="mt-3">
                            <div class="flex items-center space-x-3">
                                <div class="text-base font-medium text-gray-700">Kamrin Danielle, G2 Crowd Reviewer
                                </div>
                            </div>
                        </footer>
                    </blockquote>
                </div>
            </div>
            <div class="my-auto mx-auto px-6 col-span-2">
                <div
                    class="relative -m-2 rounded-xl bg-gray-900/5 p-2 ring-1 ring-inset ring-gray-900/10 lg:-m-4 lg:rounded-2xl lg:p-4">

                    <img class="relative rounded-lg shadow-lg" src="/img/status-pages.png" alt="App screenshot">
                    <%- include('./watch-demo.ejs', {videoId: "F6BNipy5VCk" }) -%>
                </div>
            </div>
        </div>
    </div>


    <div class="mt-10 tab-2" style="display: none;">
        <div class="lg:mx-auto lg:grid lg:max-w-7xl lg:grid-flow-col-dense lg:grid-cols-3 lg:gap-24 lg:px-8">
            <div class="mx-auto max-w-xl px-6 lg:mx-0 lg:max-w-none py-16 lg:px-0">
                <div>
                    <div class="mt-6">
                        <h2 class="text-2xl font-medium tracking-tight text-gray-900">Monitor resources in realtime.</h2>

                        <ul role="list" class="mt-6 space-y-3 mt-8 mb-8 text-lg text-gray-500">
                            <li class="flex space-x-3">
                                <%- include('./tick-icon') %>
                                    <div class="text-gray-500 -mt-1">Monitor any resource.</div>
                            </li>
                            <li class="flex space-x-3">
                                <%- include('./tick-icon') %>
                                    <div class="text-gray-500 -mt-1">Showcase realtime status</div>
                            </li>
                            <li class="flex space-x-3">
                                <%- include('./tick-icon') %>
                                    <div class="text-gray-500 -mt-1">Alert right team members</div>
                            </li>
                            <li class="flex space-x-3">
                                <%- include('./tick-icon') %>
                                    <div class="text-gray-500 -mt-1">Monitor from multiple locations</div>
                            </li>

                        </ul>


                        <div class="mt-6">
                            <a href="/accounts/register"
                                class="rounded-md bg-indigo-600 px-3.5 py-1.5 text-base font-semibold leading-7 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 hover:text-white">Get
                                started</a>
                            <a href="/product/monitoring"
                                class="text-base font-semibold leading-7 text-gray-900 ml-3">Learn more <span
                                    aria-hidden="true">→</span></a>
                        </div>
                    </div>
                </div>
                <div class="mt-8 border-t border-gray-200 pt-6">
                    <blockquote>
                        <div>
                            <p class="text-base text-gray-500">&ldquo;Makes monitoring any endpoint or service really
                                easy
                                and the best part is, it's all open-source so there's no vendor lockin.&rdquo;</p>
                        </div>
                        <footer class="mt-3">
                            <div class="flex items-center space-x-3">
                                <div class="text-base font-medium text-gray-700">Otse Obande, Reviewer on AlternativeTo
                                </div>
                            </div>
                        </footer>
                    </blockquote>
                </div>
            </div>


            <div class="my-auto mx-auto px-6 col-span-2">
                <div
                    class="relative -m-2 rounded-xl bg-gray-900/5 p-2 ring-1 ring-inset ring-gray-900/10 lg:-m-4 lg:rounded-2xl lg:p-4">

                    <img class="relative rounded-lg shadow-lg" src="/img/monitor.png" alt="App screenshot">
                    <%- include('./watch-demo.ejs', {videoId: "_fQ_F4EisBQ" }) -%>
                </div>
            </div>
        </div>
    </div>

    <div class="mt-10 tab-3" style="display: none;">
        <div class="lg:mx-auto lg:grid lg:max-w-7xl lg:grid-flow-col-dense lg:grid-cols-3 lg:gap-24 lg:px-8">


            <div class="mx-auto max-w-xl px-6 lg:mx-0 lg:max-w-none py-16 lg:px-0">
                <div>
                    <div class="mt-6">
                        <h2 class="text-2xl font-medium tracking-tight text-gray-900">Incident Management and Response.</h2>

                        <ul role="list" class="mt-6 space-y-3 mt-8 mb-8 text-lg text-gray-500">
                            <li class="flex space-x-3">
                                <%- include('./tick-icon') %>
                                    <div class="text-gray-500 -mt-1">Alert right stakeholders instantly.</div>
                            </li>
                            <li class="flex space-x-3">
                                <%- include('./tick-icon') %>
                                    <div class="text-gray-500 -mt-1">Integrate with Slack / Teams / etc.</div>
                            </li>
                            <li class="flex space-x-3">
                                <%- include('./tick-icon') %>
                                    <div class="text-gray-500 -mt-1">Post Postmortem Notes</div>
                            </li>
                            <li class="flex space-x-3">
                                <%- include('./tick-icon') %>
                                    <div class="text-gray-500 -mt-1">Call, SMS, Email Alerts</div>
                            </li>

                        </ul>


                        <div class="mt-6">
                            <a href="/accounts/register"
                                class="rounded-md bg-indigo-600 px-3.5 py-1.5 text-base font-semibold leading-7 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 hover:text-white">Get
                                started</a>
                            <a href="/product/incident-management"
                                class="text-base font-semibold leading-7 text-gray-900 ml-3">Learn more <span
                                    aria-hidden="true">→</span></a>
                        </div>
                    </div>
                </div>
                <div class="mt-8 border-t border-gray-200 pt-6">
                    <blockquote>
                        <div>
                            <p class="text-base text-gray-500">&ldquo;OneUptime alerts right people at the right time,
                                and
                                lets us manage incidents directly from Slack. &rdquo;</p>
                        </div>
                        <footer class="mt-3">
                            <div class="flex items-center space-x-3">
                                <div class="text-base font-medium text-gray-700">Jeff Dunbee, Reviewer on Capterra
                                </div>
                            </div>
                        </footer>
                    </blockquote>
                </div>
            </div>

            <div class="my-auto mx-auto px-6 col-span-2">
                <div
                    class="relative -m-2 rounded-xl bg-gray-900/5 p-2 ring-1 ring-inset ring-gray-900/10 lg:-m-4 lg:rounded-2xl lg:p-4">

                    <img class="relative rounded-lg shadow-lg" src="/img/incidents.png" alt="App screenshot">
                    <%- include('./watch-demo.ejs', {videoId: "_fQ_F4EisBQ" }) -%>
                </div>
            </div>
        </div>
    </div>


    <div class="mt-10 tab-4" style="display: none;">
        <div class="lg:mx-auto lg:grid lg:max-w-7xl lg:grid-flow-col-dense lg:grid-cols-3 lg:gap-24 lg:px-8">




            <div class="mx-auto max-w-xl px-6 lg:mx-0 lg:max-w-none py-16 lg:px-0">
                <div>
                    <div class="mt-6">
                        <h2 class="text-2xl font-medium tracking-tight text-gray-900">On Call Policies, Schedules and
                            Alerts.</h2>

                        <ul role="list" class="mt-6 space-y-3 mt-8 mb-8 text-lg text-gray-500">
                            <li class="flex space-x-3">
                                <%- include('./tick-icon') %>
                                    <div class="text-gray-500 -mt-1">Escalate it to right stakeholders</div>
                            </li>
                            <li class="flex space-x-3">
                                <%- include('./tick-icon') %>
                                    <div class="text-gray-500 -mt-1">On Call Rotation and Shifts</div>
                            </li>
                            <li class="flex space-x-3">
                                <%- include('./tick-icon') %>
                                    <div class="text-gray-500 -mt-1">Call, SMS, Email Alerts</div>
                            </li>
                            <li class="flex space-x-3">
                                <%- include('./tick-icon') %>
                                    <div class="text-gray-500 -mt-1">Integrate with Slack / Teams</div>
                            </li>
                        </ul>


                        <div class="mt-6">
                            <a href="/accounts/register"
                                class="rounded-md bg-indigo-600 px-3.5 py-1.5 text-base font-semibold leading-7 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 hover:text-white">Get
                                started</a>
                            <a href="/product/on-call"
                                class="text-base font-semibold leading-7 text-gray-900 ml-3">Learn more <span
                                    aria-hidden="true">→</span></a>
                        </div>
                    </div>
                </div>
                <div class="mt-8 border-t border-gray-200 pt-6">
                    <blockquote>
                        <div>
                            <p class="text-base text-gray-500">&ldquo;Easy to use, pleasant UI, outstanding support,
                                extremely fast responses.&rdquo;</p>
                        </div>
                        <footer class="mt-3">
                            <div class="flex items-center space-x-3">
                                <div class="text-base font-medium text-gray-700">Etso Obasake, G2 Crowd Reviewer
                                </div>
                            </div>
                        </footer>
                    </blockquote>
                </div>
            </div>

            <div class="my-auto mx-auto px-6 col-span-2">
                <div
                    class="relative -m-2 rounded-xl bg-gray-900/5 p-2 ring-1 ring-inset ring-gray-900/10 lg:-m-4 lg:rounded-2xl lg:p-4">

                    <img class="relative rounded-lg shadow-lg" src="/img/on-call-policies.png" alt="App screenshot">
                    <%- include('./watch-demo.ejs', {videoId: "HzhKmCryYdc" }) -%>
                </div>
            </div>
        </div>
    </div>



    <div class="mt-10 tab-5" style="display: none;">
        <div class="lg:mx-auto lg:grid lg:max-w-7xl lg:grid-flow-col-dense lg:grid-cols-3 lg:gap-24 lg:px-8">


            <div class="mx-auto max-w-xl px-6 lg:mx-0 lg:max-w-none py-16 lg:px-0">
                <div>
                    <div class="mt-6">
                        <h2 class="text-2xl font-medium tracking-tight text-gray-900">Ingest logs from any source and search in seconds.</h2>

                        <ul role="list" class="mt-6 space-y-3 mt-8 mb-8 text-lg text-gray-500">
                            <li class="flex space-x-3">
                                <%- include('./tick-icon') %>
                                    <div class="text-gray-500 -mt-1">Native OpenTelemetry Support</div>
                            </li>
                            <li class="flex space-x-3">
                                <%- include('./tick-icon') %>
                                    <div class="text-gray-500 -mt-1">Docker, Syslog, Application logs</div>
                            </li>
                            <li class="flex space-x-3">
                                <%- include('./tick-icon') %>
                                    <div class="text-gray-500 -mt-1">Ingest TB's and search in seconds</div>
                            </li>
                            <li class="flex space-x-3">
                                <%- include('./tick-icon') %>
                                    <div class="text-gray-500 -mt-1">Alert right team members</div>
                            </li>
                        </ul>


                        <div class="mt-6">
                            <a href="/accounts/register"
                                class="rounded-md bg-indigo-600 px-3.5 py-1.5 text-base font-semibold leading-7 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 hover:text-white">Get
                                started</a>
                            <a href="/product/logs-management"
                                class="text-base font-semibold leading-7 text-gray-900 ml-3">Learn more <span
                                    aria-hidden="true">→</span></a>
                        </div>
                    </div>
                </div>
                <div class="mt-8 border-t border-gray-200 pt-6">
                    <blockquote>
                        <div>
                            <p class="text-base text-gray-500">&ldquo;We have built fastest log software on the planet, powered by Ceph &amp; Clickhouse. Ingest petabytes of data and search in milliseconds.&rdquo;</p>
                        </div>
                        <footer class="mt-3">
                            <div class="flex items-center space-x-3">
                                <div class="text-base font-medium text-gray-700">Simon Larsen, CTO, OneUptime.
                                </div>
                            </div>
                        </footer>
                    </blockquote>
                </div>
            </div>

            <div class="my-auto mx-auto px-6 col-span-2">
                <div
                    class="relative -m-2 rounded-xl bg-gray-900/5 p-2 ring-1 ring-inset ring-gray-900/10 lg:-m-4 lg:rounded-2xl lg:p-4">

                    <img class="relative rounded-lg shadow-lg" src="/img/log-management.png" alt="App screenshot">
                    
                </div>
            </div>
        </div>
    </div>


    <div class="mt-10 tab-6" style="display: none;">
        <div class="lg:mx-auto lg:grid lg:max-w-7xl lg:grid-flow-col-dense lg:grid-cols-3 lg:gap-24 lg:px-8">


            <div class="mx-auto max-w-xl px-6 lg:mx-0 lg:max-w-none py-16 lg:px-0">
                <div>
                    <div class="mt-6">
                        <h2 class="text-2xl font-medium tracking-tight text-gray-900">Monitor performance of any app, any service, any stack.</h2>

                        <ul role="list" class="mt-6 space-y-3 mt-8 mb-8 text-lg text-gray-500">
                            <li class="flex space-x-3">
                                <%- include('./tick-icon') %>
                                    <div class="text-gray-500 -mt-1">Monitor any Backend </div>
                            </li>
                            <li class="flex space-x-3">
                                <%- include('./tick-icon') %>
                                    <div class="text-gray-500 -mt-1">Monitor any Database </div>
                            </li>
                            <li class="flex space-x-3">
                                <%- include('./tick-icon') %>
                                    <div class="text-gray-500 -mt-1">Monitor any Frontend</div>
                            </li>
                            <li class="flex space-x-3">
                                <%- include('./tick-icon') %>
                                    <div class="text-gray-500 -mt-1">Monitor Microservices</div>
                            </li>
                        </ul>


                        <div class="mt-6">
                            <a href="/accounts/register"
                                class="rounded-md bg-indigo-600 px-3.5 py-1.5 text-base font-semibold leading-7 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 hover:text-white">Get
                                started</a>
                            <a href="/product/apm"
                                class="text-base font-semibold leading-7 text-gray-900 ml-3">Learn more <span
                                    aria-hidden="true">→</span></a>
                        </div>
                    </div>
                </div>
                <div class="mt-8 border-t border-gray-200 pt-6">
                    <blockquote>
                        <div>
                            <p class="text-base text-gray-500">&ldquo;OpenTelemetry is an open standard for collecting telemetry in a vendor agnostic way.
                                &rdquo;</p>
                        </div>
                        <footer class="mt-3">
                            <div class="flex items-center space-x-3">
                                <div class="text-base font-medium text-gray-700">Charity Majors on Twitter.
                                </div>
                            </div>
                        </footer>
                    </blockquote>
                </div>
            </div>

            <div class="my-auto mx-auto px-6 col-span-2">
                <div
                    class="relative -m-2 rounded-xl bg-gray-900/5 p-2 ring-1 ring-inset ring-gray-900/10 lg:-m-4 lg:rounded-2xl lg:p-4">

                    <img class="relative rounded-lg shadow-lg" src="/img/apm-3.png" alt="App screenshot">
                    
                </div>
            </div>
        </div>
    </div>


    <div class="mt-10 tab-7" style="display: none;">
        <div class="lg:mx-auto lg:grid lg:max-w-7xl lg:grid-flow-col-dense lg:grid-cols-3 lg:gap-24 lg:px-8">


            <div class="mx-auto max-w-xl px-6 lg:mx-0 lg:max-w-none py-16 lg:px-0">
                <div>
                    <div class="mt-6">
                        <h2 class="text-2xl font-medium tracking-tight text-gray-900">Integrate with any software</h2>

                        <ul role="list" class="mt-6 space-y-3 mt-8 mb-8 text-lg text-gray-500">
                            <li class="flex space-x-3">
                                <%- include('./tick-icon') %>
                                    <div class="text-gray-500 -mt-1">Drag and Drop workflows</div>
                            </li>
                            <li class="flex space-x-3">
                                <%- include('./tick-icon') %>
                                    <div class="text-gray-500 -mt-1">Supports Webhooks and API's</div>
                            </li>
                            <li class="flex space-x-3">
                                <%- include('./tick-icon') %>
                                    <div class="text-gray-500 -mt-1">5000+ Integrations</div>
                            </li>
                            <li class="flex space-x-3">
                                <%- include('./tick-icon') %>
                                    <div class="text-gray-500 -mt-1">Supports Custom Code</div>
                            </li>
                        </ul>


                        <div class="mt-6">
                            <a href="/accounts/register"
                                class="rounded-md bg-indigo-600 px-3.5 py-1.5 text-base font-semibold leading-7 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 hover:text-white">Get
                                started</a>
                            <a href="/product/workflows"
                                class="text-base font-semibold leading-7 text-gray-900 ml-3">Learn more <span
                                    aria-hidden="true">→</span></a>
                        </div>
                    </div>
                </div>
                <div class="mt-8 border-t border-gray-200 pt-6">
                    <blockquote>
                        <div>
                            <p class="text-base text-gray-500">&ldquo;Workflows are very powerful feature of OneUptime.
                                Let's us automate literally anything.&rdquo;</p>
                        </div>
                        <footer class="mt-3">
                            <div class="flex items-center space-x-3">
                                <div class="text-base font-medium text-gray-700">Jamie Polowin, AlternativeTo Reviewer
                                </div>
                            </div>
                        </footer>
                    </blockquote>
                </div>
            </div>

            <div class="my-auto mx-auto px-6 col-span-2">
                <div
                    class="relative -m-2 rounded-xl bg-gray-900/5 p-2 ring-1 ring-inset ring-gray-900/10 lg:-m-4 lg:rounded-2xl lg:p-4">

                    <img class="relative rounded-lg shadow-lg" src="/img/workflow-builder.png" alt="App screenshot">
                    <%- include('./watch-demo.ejs', {videoId: "z-b7_KQcUDY" }) -%>
                </div>
            </div>
        </div>
    </div>

</div>


<script>
    let currentActiveTab = 1;


    function hideTab(tab) {

        document.querySelector(`.tab-${tab}`).style.display = 'none';

        document.querySelector(`.tab-${tab}-button`).classList.remove('border-indigo-500', 'text-indigo-600');
        document.querySelector(`.tab-${tab}-button`).classList.add('border-transparent', 'text-gray-500', 'hover:border-gray-300', 'hover:text-gray-700');

        document.querySelector(`.icon-tab-${tab}`).classList.remove('text-indigo-500');
        document.querySelector(`.icon-tab-${tab}`).classList.add('text-gray-400');
    }

    function showTab(tab) {

        hideTab(currentActiveTab);

        document.querySelector(`.tab-${tab}`).style.display = 'block';

        document.querySelector(`.tab-${tab}-button`).classList.remove('border-transparent', 'text-gray-500', 'hover:border-gray-300', 'hover:text-gray-700');
        document.querySelector(`.tab-${tab}-button`).classList.add('border-indigo-500', 'text-indigo-600');

        document.querySelector(`.icon-tab-${tab}`).classList.remove('text-gray-400');
        document.querySelector(`.icon-tab-${tab}`).classList.add('text-indigo-500');

        currentActiveTab = tab;

    }

</script>


