mirrors/oneuptime
1
0
Fork 0
mirror of https://github.com/OneUptime/oneuptime synced 2024-11-22 15:24:55 +00:00
Code Issues Packages Projects Releases Wiki Activity
b5929454b0
oneuptime/Home/views/incident-management.ejs
Simon Larsen 251c763245
remove svg on the sides
2023-07-12 14:22:39 +01:00

313 lines
21 KiB
Plaintext
Raw Blame History

<!DOCTYPE html>
<html lang="en" id="home">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<head>
<title>OneUptime | Incident Management and Response. </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') -%>
</head>
<body>
<%- include('nav') -%>
<div class="">
<div class="relative overflow-hidden">
<div class="relative pt-6 pb-16 sm:pb-24">
<div>
<div class="mx-auto mt-16 max-w-7xl px-6 sm:mt-24">
<div class="text-center">
<h1 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl md:text-6xl">
<div class="">Protect revenue and improve experience,</div>
<div class="text-indigo-600">by resolving critical incidents faster.</div>
</h1>
<p class="mx-auto mt-3 text-base text-gray-500 sm:text-lg md:mt-5 md:text-xl">Keep stakeholders throughout the business informed in real-time, empowering the entire company to collaborate and respond proactively.</p>
</div>
</div>
</div>
<div class="relative mt-12">
<div class="absolute inset-0 flex flex-col" aria-hidden="true">
<div class="flex-1"></div>
<div class="w-full flex-1 bg-gray-800"></div>
</div>
<div class="mx-auto max-w-7xl px-6">
<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">
</div>
</div>
</div>
</div>
<%- include('dark-logo-roll') -%>
</div>
<div class="relative overflow-hidden bg-white pt-16 pb-32">
<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">An unbeatable incident management product built for you.</p>
<p class="mt-5 text-xl text-gray-500 sm:text-center mb-12">Our real-time operations platform ensures less downtime and fewer outages, meaning happier customers and more productive teams.</p>
</div>
<div class="relative mt-24">
<div class="lg:mx-auto lg:grid lg:max-w-7xl lg:grid-flow-col-dense lg:grid-cols-2 lg:gap-24 lg:px-8">
<div class="mx-auto max-w-xl px-6 lg:mx-0 lg:max-w-none lg:py-16 lg:px-0">
<div>
<div>
<span class="flex h-12 w-12 items-center justify-center rounded-xl bg-indigo-600">
<!-- Heroicon name: outline/inbox -->
<svg class="h-8 w-8 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<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>
</div>
<div class="mt-6">
<h2 class="text-3xl font-bold tracking-tight text-gray-900">Incident Created Instantly</h2>
<p class="mt-4 text-lg text-gray-500">OneUptime's monitoring lets you know exactly what is wrong with your service, at the right time, incidents are created instantly, alerting the right people saving you critical minutes during downtime.</p>
<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>
</div>
</div>
</div>
</div>
<div class="mt-12 sm:mt-16 lg:mt-0">
<div class="-mr-48 pl-6 md:-mr-16 lg:relative lg:m-0 lg:h-full lg:px-0">
<img class="w-full rounded-xl shadow-xl ring-1 ring-black ring-opacity-5 lg:absolute lg:left-0 lg:h-full lg:w-auto lg:max-w-none" src="/img/incidents.png" alt="Inbox user interface">
</div>
</div>
</div>
</div>
<div class="mt-24">
<div class="lg:mx-auto lg:grid lg:max-w-7xl lg:grid-flow-col-dense lg:grid-cols-2 lg:gap-24 lg:px-8">
<div class="mx-auto max-w-xl px-6 lg:col-start-2 lg:mx-0 lg:max-w-none lg:py-32 lg:px-0">
<div>
<div>
<span class="flex h-12 w-12 items-center justify-center rounded-xl bg-indigo-600">
<!-- Heroicon name: outline/inbox -->
<svg class="h-8 w-8 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<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>
</div>
<div class="mt-6">
<h2 class="text-3xl font-bold tracking-tight text-gray-900">Custom Incident Severity</h2>
<p class="mt-4 text-lg text-gray-500">Customize incident severity for your project - have levels like P1, P2 and more. Severity help you to keep your team in the loop and keep customers updated.</p>
<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>
</div>
</div>
</div>
</div>
<div class="mt-12 sm:mt-16 lg:col-start-1 lg:mt-0">
<div class="-ml-48 pr-6 md:-ml-16 lg:relative lg:m-0 lg:h-full lg:px-0">
<img class="w-full rounded-xl shadow-xl ring-1 ring-black ring-opacity-5 lg:absolute lg:right-0 lg:h-full lg:w-auto lg:max-w-none" src="/img/incident-severity.png" alt="Monitoring">
</div>
</div>
</div>
</div>
<div class="relative mt-24">
<div class="lg:mx-auto lg:grid lg:max-w-7xl lg:grid-flow-col-dense lg:grid-cols-2 lg:gap-24 lg:px-8">
<div class="mx-auto max-w-xl px-6 lg:mx-0 lg:max-w-none lg:py-16 lg:px-0">
<div>
<div>
<span class="flex h-12 w-12 items-center justify-center rounded-xl bg-indigo-600">
<!-- Heroicon name: outline/inbox -->
<svg class="h-8 w-8 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M12.75 15l3-3m0 0l-3-3m3 3h-7.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</span>
</div>
<div class="mt-6">
<h2 class="text-3xl font-bold tracking-tight text-gray-900">Custom Incident State</h2>
<p class="mt-4 text-lg text-gray-500">Customize incident states for your project - have states like investigating, monitoring and more. States help you to keep your team in the loop and keep customers updated.</p>
<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>
</div>
</div>
</div>
</div>
<div class="mt-12 sm:mt-16 lg:mt-0">
<div class="-mr-48 pl-6 md:-mr-16 lg:relative lg:m-0 lg:h-full lg:px-0">
<img class="w-full rounded-xl shadow-xl ring-1 ring-black ring-opacity-5 lg:absolute lg:left-0 lg:h-full lg:w-auto lg:max-w-none" src="/img/incident-state.png" alt="Inbox user interface">
</div>
</div>
</div>
</div>
<div class="mt-24">
<div class="lg:mx-auto lg:grid lg:max-w-7xl lg:grid-flow-col-dense lg:grid-cols-2 lg:gap-24 lg:px-8">
<div class="mx-auto max-w-xl px-6 lg:col-start-2 lg:mx-0 lg:max-w-none lg:py-32 lg:px-0">
<div>
<div>
<span class="flex h-12 w-12 items-center justify-center rounded-xl bg-indigo-600">
<!-- Heroicon name: outline/inbox -->
<svg class="h-8 w-8 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 01-2.555-.337A5.972 5.972 0 015.41 20.97a5.969 5.969 0 01-.474-.065 4.48 4.48 0 00.978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25z" />
</svg>
</span>
</div>
<div class="mt-6">
<h2 class="text-3xl font-bold tracking-tight text-gray-900">Post Incident and Postmortem Notes</h2>
<p class="mt-4 text-lg text-gray-500">Post notes directly on your status page and communicate directly with your team, customers and users. Always keep them in the loop and reduce support costs. </p>
<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>
</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="mt-12 sm:mt-16 lg:col-start-1 lg:mt-0">
<div class="-ml-48 pr-6 md:-ml-16 lg:relative lg:m-0 lg:h-full lg:px-0">
<img class="w-full rounded-xl shadow-xl ring-1 ring-black ring-opacity-5 lg:absolute lg:right-0 lg:h-full lg:w-auto lg:max-w-none" src="/img/incident-report.png" alt="Monitoring">
</div>
</div>
</div>
</div>
</div>
<%- include('testimonials') -%>
<div class="relative bg-white py-24 sm:py-32 lg:py-40">
<div class="mx-auto max-w-md px-6 text-center sm:max-w-3xl lg:max-w-7xl lg:px-8">
<h2 class="text-lg font-semibold text-indigo-600">More features</h2>
<p class="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">Advanced features, built for you.</p>
<p class="mx-auto mt-5 max-w-prose text-xl text-gray-500">Build custom workflows, integrate with anything you have, or more - you never run out of features. Batteries included.
</p>
<div class="mt-20">
<div class="grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-3">
<div class="pt-6">
<div class="flow-root rounded-lg bg-gray-50 px-6 pb-8">
<div class="-mt-6">
<div>
<span class="inline-flex items-center justify-center rounded-xl bg-indigo-500 p-3 shadow-lg">
<!-- Heroicon name: outline/cloud-arrow-up -->
<svg class="h-8 w-8 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0112 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 01-3.296-1.043 3.745 3.745 0 01-1.043-3.296A3.745 3.745 0 013 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 011.043-3.296 3.746 3.746 0 013.296-1.043A3.746 3.746 0 0112 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 013.296 1.043 3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z" />
</svg>
</span>
</div>
<h3 class="mt-8 text-lg font-semibold leading-8 tracking-tight text-gray-900">Reliability Guaranteed.</h3>
<p class="mt-5 text-base leading-7 text-gray-600">Hosted on a distributed high avalability infrastructure across multiple clouds when there is a major incident at a cloud provider you are hosted on, we never go down.</p>
</div>
</div>
</div>
<div class="pt-6">
<div class="flow-root rounded-lg bg-gray-50 px-6 pb-8">
<div class="-mt-6">
<div>
<span class="inline-flex items-center justify-center rounded-xl bg-indigo-500 p-3 shadow-lg">
<!-- Heroicon name: outline/lock-closed -->
<svg class="h-8 w-8 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 002.25-2.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v2.25A2.25 2.25 0 006 10.5zm0 9.75h2.25A2.25 2.25 0 0010.5 18v-2.25a2.25 2.25 0 00-2.25-2.25H6a2.25 2.25 0 00-2.25 2.25V18A2.25 2.25 0 006 20.25zm9.75-9.75H18a2.25 2.25 0 002.25-2.25V6A2.25 2.25 0 0018 3.75h-2.25A2.25 2.25 0 0013.5 6v2.25a2.25 2.25 0 002.25 2.25z" />
</svg>
</span>
</div>
<h3 class="mt-8 text-lg font-semibold leading-8 tracking-tight text-gray-900">Integrations</h3>
<p class="mt-5 text-base leading-7 text-gray-600">Choose from 5000+ integrates to integrate with. Your team can upate incidents and manage everything without leaving Slack for example. Build custom integrations with our API.</p>
</div>
</div>
</div>
<div class="pt-6">
<div class="flow-root rounded-lg bg-gray-50 px-6 pb-8">
<div class="-mt-6">
<div>
<span class="inline-flex items-center justify-center rounded-xl bg-indigo-500 p-3 shadow-lg">
<!-- Heroicon name: outline/arrow-path -->
<svg class="h-8 w-8 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="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>
</div>
<h3 class="mt-8 text-lg font-semibold leading-8 tracking-tight text-gray-900">Workflows</h3>
<p class="mt-5 text-base leading-7 text-gray-600">Build complex workflows without code. Automate incident workflow, status page updates, have one control plane for all of your resources and keep stakeholders updated.</p>
</div>
</div>
</div>
<div class="pt-6">
<div class="flow-root rounded-lg bg-gray-50 px-6 pb-8">
<div class="-mt-6">
<div>
<span class="inline-flex items-center justify-center rounded-xl bg-indigo-500 p-3 shadow-lg">
<!-- Heroicon name: outline/shield-check -->
<svg class="h-8 w-8 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 11-3 0m3 0a1.5 1.5 0 10-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-9.75 0h9.75" />
</svg>
</span>
</div>
<h3 class="mt-8 text-lg font-semibold leading-8 tracking-tight text-gray-900">Custom Criteria</h3>
<p class="mt-5 text-base leading-7 text-gray-600">Define custom criteria to create incidents - create an incident if the response time is delayed for 5 mins for example. </p>
</div>
</div>
</div>
<div class="pt-6">
<div class="flow-root rounded-lg bg-gray-50 px-6 pb-8">
<div class="-mt-6">
<div>
<span class="inline-flex items-center justify-center rounded-xl bg-indigo-500 p-3 shadow-lg">
<!-- Heroicon name: outline/cog -->
<svg class="h-8 w-8 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
</svg>
</span>
</div>
<h3 class="mt-8 text-lg font-semibold leading-8 tracking-tight text-gray-900">Instant Alerts</h3>
<p class="mt-5 text-base leading-7 text-gray-600">Alert anyone across the company via email, sms, slack notification, phone call or more.</p>
</div>
</div>
</div>
<div class="pt-6">
<div class="flow-root rounded-lg bg-gray-50 px-6 pb-8">
<div class="-mt-6">
<div>
<span class="inline-flex items-center justify-center rounded-xl bg-indigo-500 p-3 shadow-lg">
<!-- Heroicon name: outline/server -->
<svg class="h-8 w-8 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
</svg>
</span>
</div>
<h3 class="mt-8 text-lg font-semibold leading-8 tracking-tight text-gray-900">On-Call Schedules</h3>
<p class="mt-5 text-base leading-7 text-gray-600">Create on-call schedules, and escalation policies so your incidents are always responded to as fast as possible.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<%- include('features-table') -%>
<%- include('cta') -%>
<%- include('footer') -%>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink