mirror of
https://github.com/OneUptime/oneuptime.git
synced 2026-04-06 00:32:12 +02:00
1bf4c52518
Multiple product pages had identical generic meta descriptions: 'OneUptime monitors websites, APIs, and servers...' This hurt CTR because Google showed the same text for different pages. Updated with unique, keyword-rich descriptions: - /product/status-page: Focus on free, unlimited subscribers, Statuspage alternative - /product/monitoring: Focus on global locations, alerts, Datadog alternative - /product/incident-management: Focus on features, integrations - /product/on-call: Focus on rotations, escalations, PagerDuty alternative - /about: Focus on open source, GitHub stars, mission Expected impact: Improved CTR from search results
1277 lines
81 KiB
Plaintext
Executable File
1277 lines
81 KiB
Plaintext
Executable File
<!DOCTYPE html>
|
|
<html lang="en" id="home">
|
|
|
|
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
|
|
|
|
<head>
|
|
<title>OneUptime | On-Call Policies and Alerts. </title>
|
|
<meta name="description"
|
|
content="On-call scheduling with rotations, escalations, and multi-channel alerts (SMS, phone, Slack, Teams). Free tier includes unlimited schedules. Open source PagerDuty alternative.">
|
|
<%- include('head', {
|
|
enableGoogleTagManager: typeof enableGoogleTagManager !== 'undefined' ? enableGoogleTagManager : false
|
|
}) -%>
|
|
</head>
|
|
|
|
<body>
|
|
<%- include('nav') -%>
|
|
<main id="main-content">
|
|
<!-- Hero Section -->
|
|
<div class="relative isolate overflow-hidden bg-white" id="oncall-hero-section">
|
|
<!-- Subtle grid pattern background -->
|
|
<div class="absolute inset-0 -z-10 h-full w-full bg-white bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_110%)]"></div>
|
|
|
|
<!-- Grid glow effect that follows cursor - emerald color -->
|
|
<div id="oncall-grid-glow" class="absolute inset-0 -z-9 pointer-events-none" style="opacity: 0; transition: opacity 0.3s ease-out; background: linear-gradient(to right, rgba(16, 185, 129, 0.3) 1px, transparent 1px), linear-gradient(to bottom, rgba(16, 185, 129, 0.3) 1px, transparent 1px); background-size: 4rem 4rem; -webkit-mask-image: radial-gradient(circle 250px at var(--mouse-x, 50%) var(--mouse-y, 50%), black 0%, transparent 100%); mask-image: radial-gradient(circle 250px at var(--mouse-x, 50%) var(--mouse-y, 50%), black 0%, transparent 100%);"></div>
|
|
|
|
<div class="py-20 sm:py-28 lg:py-32">
|
|
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<div class="mx-auto max-w-3xl text-center">
|
|
<!-- Minimal badge -->
|
|
<p class="text-sm font-medium text-emerald-600 mb-4">Intelligent alerting with smart escalations</p>
|
|
|
|
<h1 class="text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl lg:text-6xl">
|
|
Alert the right people, instantly
|
|
</h1>
|
|
<p class="mt-6 text-lg leading-8 text-gray-600 max-w-2xl mx-auto">
|
|
Build robust on-call policies with smart escalations. Save valuable minutes during downtime by alerting the right stakeholders.
|
|
</p>
|
|
|
|
<div class="mt-10 flex items-center justify-center gap-x-6">
|
|
<a href="/accounts/register"
|
|
class="rounded-lg bg-gray-900 px-5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-800 transition-colors">
|
|
Get started
|
|
</a>
|
|
<a href="/enterprise/demo" class="text-sm font-semibold text-gray-900 hover:text-gray-600 transition-colors">
|
|
Request demo <span aria-hidden="true">→</span>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Subtle feature list -->
|
|
<div class="mt-12 flex flex-wrap items-center justify-center gap-x-8 gap-y-3 text-sm text-gray-500">
|
|
<span>Multi-channel alerts</span>
|
|
<span class="hidden sm:inline text-gray-300">|</span>
|
|
<span>Smart escalations</span>
|
|
<span class="hidden sm:inline text-gray-300">|</span>
|
|
<span>Rotation schedules</span>
|
|
<span class="hidden sm:inline text-gray-300">|</span>
|
|
<span>Alert logs</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Clean hero image -->
|
|
<div class="mt-16 sm:mt-20">
|
|
<div class="relative mx-auto max-w-5xl">
|
|
<div class="relative rounded-xl bg-gray-900/5 p-1.5 ring-1 ring-gray-900/10">
|
|
<img src="/img/on-call-policies.png" alt="OneUptime on-call scheduling interface" width="2432" height="1442"
|
|
class="rounded-lg shadow-lg">
|
|
<%- include('./Partials/watch-demo.ejs', {videoId: "HzhKmCryYdc" }) -%>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<%- include('logo-roll') -%>
|
|
|
|
<!-- How It Works Section -->
|
|
<div class="relative bg-gray-50 py-24 sm:py-32">
|
|
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<div class="mx-auto max-w-2xl text-center mb-16">
|
|
<p class="text-sm font-medium text-emerald-600 uppercase tracking-wide mb-3">How It Works</p>
|
|
<h2 class="text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl">
|
|
Get alerts delivered in seconds
|
|
</h2>
|
|
<p class="mt-4 text-lg text-gray-600">
|
|
Set up your on-call policies and start receiving alerts through your preferred channels in just four steps.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mx-auto max-w-5xl">
|
|
<!-- Connecting line for desktop -->
|
|
<div class="hidden lg:block relative">
|
|
<div class="absolute top-8 left-[calc(12.5%+24px)] right-[calc(12.5%+24px)] h-px bg-emerald-200"></div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-4">
|
|
<!-- Step 1 -->
|
|
<div class="text-center">
|
|
<div class="relative inline-flex items-center justify-center h-16 w-16 rounded-full bg-emerald-600 text-white mb-6 shadow-sm">
|
|
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
</svg>
|
|
<span class="absolute -bottom-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full bg-white text-xs font-semibold text-emerald-600 ring-2 ring-emerald-600">1</span>
|
|
</div>
|
|
<h3 class="text-base font-semibold text-gray-900 mb-2">Create Policy</h3>
|
|
<p class="text-sm text-gray-600 leading-relaxed">Define on-call policies with rotation schedules and rules.</p>
|
|
</div>
|
|
|
|
<!-- Step 2 -->
|
|
<div class="text-center">
|
|
<div class="relative inline-flex items-center justify-center h-16 w-16 rounded-full bg-emerald-600 text-white mb-6 shadow-sm">
|
|
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
|
|
</svg>
|
|
<span class="absolute -bottom-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full bg-white text-xs font-semibold text-emerald-600 ring-2 ring-emerald-600">2</span>
|
|
</div>
|
|
<h3 class="text-base font-semibold text-gray-900 mb-2">Add Team</h3>
|
|
<p class="text-sm text-gray-600 leading-relaxed">Assign team members and set their contact preferences.</p>
|
|
</div>
|
|
|
|
<!-- Step 3 -->
|
|
<div class="text-center">
|
|
<div class="relative inline-flex items-center justify-center h-16 w-16 rounded-full bg-emerald-600 text-white mb-6 shadow-sm">
|
|
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
|
|
</svg>
|
|
<span class="absolute -bottom-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full bg-white text-xs font-semibold text-emerald-600 ring-2 ring-emerald-600">3</span>
|
|
</div>
|
|
<h3 class="text-base font-semibold text-gray-900 mb-2">Set Escalations</h3>
|
|
<p class="text-sm text-gray-600 leading-relaxed">Configure escalation rules for unacknowledged alerts.</p>
|
|
</div>
|
|
|
|
<!-- Step 4 -->
|
|
<div class="text-center">
|
|
<div class="relative inline-flex items-center justify-center h-16 w-16 rounded-full bg-emerald-600 text-white mb-6 shadow-sm">
|
|
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
|
|
</svg>
|
|
<span class="absolute -bottom-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full bg-white text-xs font-semibold text-emerald-600 ring-2 ring-emerald-600">4</span>
|
|
</div>
|
|
<h3 class="text-base font-semibold text-gray-900 mb-2">Stay Alert</h3>
|
|
<p class="text-sm text-gray-600 leading-relaxed">Receive instant alerts via call, SMS, email, or push.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Why OneUptime Section -->
|
|
<div class="relative overflow-hidden bg-white py-24 sm:py-32">
|
|
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<!-- Section Header -->
|
|
<div class="mx-auto max-w-2xl text-center mb-20">
|
|
<div class="inline-flex items-center gap-2 rounded-full bg-emerald-50 px-4 py-1.5 text-sm font-medium text-emerald-700 ring-1 ring-inset ring-emerald-600/20 mb-6">
|
|
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
|
|
</svg>
|
|
Why OneUptime On-Call
|
|
</div>
|
|
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl lg:text-5xl">
|
|
On-call and alert management to keep services always on
|
|
</h2>
|
|
<p class="mt-6 text-lg leading-8 text-gray-600">
|
|
Effective on-call and alert management practices play a crucial role in maintaining uninterrupted services, ensuring a continuous and reliable experience for users.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Feature Blocks -->
|
|
<div class="space-y-24 lg:space-y-32">
|
|
<!-- Feature 1: On-call policy for every service -->
|
|
<div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
|
|
<div class="relative">
|
|
<div class="flex items-center gap-4 mb-6">
|
|
<div class="flex h-10 w-10 items-center justify-center rounded-xl bg-emerald-50 ring-1 ring-emerald-200">
|
|
<svg class="h-5 w-5 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
|
|
</svg>
|
|
</div>
|
|
<span class="text-sm font-semibold text-emerald-600 uppercase tracking-wide">Flexible Policies</span>
|
|
</div>
|
|
<h3 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4">On-call Policy for Every Service</h3>
|
|
<p class="text-lg text-gray-600 mb-6">
|
|
Build unlimited on-call policies - one for each team and for every service. Design custom workflows to alert the right stakeholders at the right time.
|
|
</p>
|
|
<ul class="space-y-3 mb-8">
|
|
<li class="flex items-center gap-3 text-gray-600">
|
|
<svg class="h-5 w-5 text-emerald-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Unlimited on-call policies
|
|
</li>
|
|
<li class="flex items-center gap-3 text-gray-600">
|
|
<svg class="h-5 w-5 text-emerald-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Team-based configuration
|
|
</li>
|
|
<li class="flex items-center gap-3 text-gray-600">
|
|
<svg class="h-5 w-5 text-emerald-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Service-specific workflows
|
|
</li>
|
|
</ul>
|
|
<a href="/accounts/register" class="mt-6 inline-flex items-center gap-1.5 px-4 py-2 bg-gray-900 text-white text-sm font-medium rounded-lg hover:bg-gray-800 transition-colors">
|
|
Get started
|
|
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
<div class="mt-12 lg:mt-0">
|
|
<div class="relative">
|
|
<!-- Subtle background -->
|
|
<div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
|
|
|
|
<!-- Calendar-style Rotation Schedule -->
|
|
<div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
|
|
<!-- Header -->
|
|
<div class="bg-orange-50 px-4 py-3 border-b border-orange-100">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-2">
|
|
<svg class="w-5 h-5 text-orange-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
|
</svg>
|
|
<span class="text-gray-800 text-sm font-semibold">On-Call Schedule</span>
|
|
</div>
|
|
<span class="text-xs text-gray-500">January 2024</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Week days header -->
|
|
<div class="grid grid-cols-7 gap-px bg-gray-100 text-center text-xs text-gray-500 py-2">
|
|
<div>Mon</div>
|
|
<div>Tue</div>
|
|
<div>Wed</div>
|
|
<div>Thu</div>
|
|
<div>Fri</div>
|
|
<div>Sat</div>
|
|
<div>Sun</div>
|
|
</div>
|
|
|
|
<!-- Calendar grid -->
|
|
<div class="p-3">
|
|
<div class="grid grid-cols-7 gap-1">
|
|
<!-- Week 1 -->
|
|
<div class="aspect-square flex items-center justify-center text-xs text-gray-400 bg-gray-50 rounded">1</div>
|
|
<div class="aspect-square flex items-center justify-center text-xs text-gray-400 bg-gray-50 rounded">2</div>
|
|
<div class="aspect-square flex items-center justify-center text-xs text-gray-400 bg-gray-50 rounded">3</div>
|
|
<div class="aspect-square flex items-center justify-center text-xs text-gray-400 bg-gray-50 rounded">4</div>
|
|
<div class="aspect-square flex items-center justify-center text-xs text-gray-400 bg-gray-50 rounded">5</div>
|
|
<div class="aspect-square flex items-center justify-center text-xs text-gray-400 bg-gray-50 rounded">6</div>
|
|
<div class="aspect-square flex items-center justify-center text-xs text-gray-400 bg-gray-50 rounded">7</div>
|
|
<!-- Week 2 - Team A (orange) -->
|
|
<div class="aspect-square flex items-center justify-center text-xs text-white bg-orange-500 rounded font-medium">8</div>
|
|
<div class="aspect-square flex items-center justify-center text-xs text-white bg-orange-500 rounded font-medium">9</div>
|
|
<div class="aspect-square flex items-center justify-center text-xs text-white bg-orange-500 rounded font-medium">10</div>
|
|
<div class="aspect-square flex items-center justify-center text-xs text-white bg-orange-500 rounded font-medium">11</div>
|
|
<div class="aspect-square flex items-center justify-center text-xs text-white bg-orange-500 rounded font-medium">12</div>
|
|
<div class="aspect-square flex items-center justify-center text-xs text-white bg-orange-500 rounded font-medium">13</div>
|
|
<div class="aspect-square flex items-center justify-center text-xs text-white bg-orange-500 rounded font-medium">14</div>
|
|
<!-- Week 3 - Team B (amber) -->
|
|
<div class="aspect-square flex items-center justify-center text-xs text-white bg-amber-500 rounded font-medium">15</div>
|
|
<div class="aspect-square flex items-center justify-center text-xs text-white bg-amber-500 rounded font-medium">16</div>
|
|
<div class="aspect-square flex items-center justify-center text-xs text-white bg-amber-500 rounded font-medium">17</div>
|
|
<div class="aspect-square flex items-center justify-center text-xs text-white bg-amber-500 rounded font-medium">18</div>
|
|
<div class="aspect-square flex items-center justify-center text-xs text-white bg-amber-500 rounded font-medium">19</div>
|
|
<div class="aspect-square flex items-center justify-center text-xs text-white bg-amber-500 rounded font-medium">20</div>
|
|
<div class="aspect-square flex items-center justify-center text-xs text-white bg-amber-500 rounded font-medium">21</div>
|
|
<!-- Week 4 - Team C (yellow) -->
|
|
<div class="aspect-square flex items-center justify-center text-xs text-gray-800 bg-yellow-400 rounded font-medium">22</div>
|
|
<div class="aspect-square flex items-center justify-center text-xs text-gray-800 bg-yellow-400 rounded font-medium">23</div>
|
|
<div class="aspect-square flex items-center justify-center text-xs text-gray-800 bg-yellow-400 rounded font-medium">24</div>
|
|
<div class="aspect-square flex items-center justify-center text-xs text-gray-800 bg-yellow-400 rounded font-medium">25</div>
|
|
<div class="aspect-square flex items-center justify-center text-xs text-gray-800 bg-yellow-400 rounded font-medium">26</div>
|
|
<div class="aspect-square flex items-center justify-center text-xs text-gray-800 bg-yellow-400 rounded font-medium">27</div>
|
|
<div class="aspect-square flex items-center justify-center text-xs text-gray-800 bg-yellow-400 rounded font-medium">28</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Legend -->
|
|
<div class="px-4 pb-4">
|
|
<div class="flex items-center justify-center gap-4 text-xs">
|
|
<div class="flex items-center gap-1.5">
|
|
<div class="w-3 h-3 rounded bg-orange-500"></div>
|
|
<span class="text-gray-600">Team Alpha</span>
|
|
</div>
|
|
<div class="flex items-center gap-1.5">
|
|
<div class="w-3 h-3 rounded bg-amber-500"></div>
|
|
<span class="text-gray-600">Team Beta</span>
|
|
</div>
|
|
<div class="flex items-center gap-1.5">
|
|
<div class="w-3 h-3 rounded bg-yellow-400"></div>
|
|
<span class="text-gray-600">Team Gamma</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Current on-call footer -->
|
|
<div class="bg-orange-50 px-4 py-3 border-t border-orange-100">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-6 h-6 rounded-full bg-orange-500 flex items-center justify-center text-white text-xs font-medium">JD</div>
|
|
<div>
|
|
<div class="text-gray-800 text-xs font-medium">John Doe</div>
|
|
<div class="text-gray-500 text-[10px]">Currently on-call</div>
|
|
</div>
|
|
</div>
|
|
<span class="px-2 py-1 bg-orange-100 text-orange-700 text-xs rounded-full font-medium">Team Alpha</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Feature 2: See who was alerted -->
|
|
<div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
|
|
<div class="relative order-2 lg:order-1 mt-12 lg:mt-0">
|
|
<div class="relative">
|
|
<!-- Subtle background -->
|
|
<div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
|
|
|
|
<!-- Alert Log Timeline -->
|
|
<div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
|
|
<!-- Header -->
|
|
<div class="bg-amber-50 px-4 py-3 border-b border-amber-100">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-2">
|
|
<svg class="w-5 h-5 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
<span class="text-gray-800 text-sm font-semibold">Alert Timeline</span>
|
|
</div>
|
|
<span class="text-xs text-gray-500">Last 24 hours</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Alert log entries -->
|
|
<div class="p-4 space-y-3">
|
|
<!-- Alert 1 - Acknowledged -->
|
|
<div class="flex gap-3">
|
|
<div class="flex flex-col items-center">
|
|
<div class="w-8 h-8 rounded-full bg-emerald-100 flex items-center justify-center">
|
|
<svg class="w-4 h-4 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
</div>
|
|
<div class="w-px h-full bg-gray-200 mt-2"></div>
|
|
</div>
|
|
<div class="flex-1 pb-4">
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-sm font-medium text-gray-800">Alert Acknowledged</span>
|
|
<span class="text-xs text-gray-400">2 min ago</span>
|
|
</div>
|
|
<p class="text-xs text-gray-500 mt-1">John Doe acknowledged via SMS</p>
|
|
<div class="mt-2 px-2 py-1.5 bg-gray-50 rounded text-xs text-gray-600">
|
|
Response time: <span class="font-medium text-emerald-600">47 seconds</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Alert 2 - Sent -->
|
|
<div class="flex gap-3">
|
|
<div class="flex flex-col items-center">
|
|
<div class="w-8 h-8 rounded-full bg-amber-100 flex items-center justify-center">
|
|
<svg class="w-4 h-4 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
|
|
</svg>
|
|
</div>
|
|
<div class="w-px h-full bg-gray-200 mt-2"></div>
|
|
</div>
|
|
<div class="flex-1 pb-4">
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-sm font-medium text-gray-800">SMS Alert Sent</span>
|
|
<span class="text-xs text-gray-400">3 min ago</span>
|
|
</div>
|
|
<p class="text-xs text-gray-500 mt-1">Sent to John Doe (+1 555-0123)</p>
|
|
<div class="mt-2 flex gap-2">
|
|
<span class="px-2 py-0.5 bg-amber-100 text-amber-700 text-xs rounded">SMS</span>
|
|
<span class="px-2 py-0.5 bg-gray-100 text-gray-600 text-xs rounded">Delivered</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Alert 3 - Triggered -->
|
|
<div class="flex gap-3">
|
|
<div class="flex flex-col items-center">
|
|
<div class="w-8 h-8 rounded-full bg-red-100 flex items-center justify-center">
|
|
<svg class="w-4 h-4 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="flex-1">
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-sm font-medium text-gray-800">Incident Triggered</span>
|
|
<span class="text-xs text-gray-400">3 min ago</span>
|
|
</div>
|
|
<p class="text-xs text-gray-500 mt-1">Database connection timeout</p>
|
|
<div class="mt-2 px-2 py-1.5 bg-red-50 rounded text-xs text-red-700 border border-red-100">
|
|
Severity: Critical - API Service Down
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="bg-gray-50 px-4 py-2 border-t border-gray-100 text-center">
|
|
<span class="text-xs text-gray-500">View full alert history</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="relative order-1 lg:order-2">
|
|
<div class="flex items-center gap-4 mb-6">
|
|
<div class="flex h-10 w-10 items-center justify-center rounded-xl bg-cyan-50 ring-1 ring-cyan-200">
|
|
<svg class="h-5 w-5 text-cyan-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</div>
|
|
<span class="text-sm font-semibold text-cyan-600 uppercase tracking-wide">Full Visibility</span>
|
|
</div>
|
|
<h3 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4">See Who Was Alerted and When</h3>
|
|
<p class="text-lg text-gray-600 mb-6">
|
|
Access complete information about who was alerted and when. Track notifications and debug policy issues with transparent logs of events.
|
|
</p>
|
|
<ul class="space-y-3 mb-8">
|
|
<li class="flex items-center gap-3 text-gray-600">
|
|
<svg class="h-5 w-5 text-cyan-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Complete alert timeline
|
|
</li>
|
|
<li class="flex items-center gap-3 text-gray-600">
|
|
<svg class="h-5 w-5 text-cyan-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Acknowledgment tracking
|
|
</li>
|
|
<li class="flex items-center gap-3 text-gray-600">
|
|
<svg class="h-5 w-5 text-cyan-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Debug policy issues easily
|
|
</li>
|
|
</ul>
|
|
<a href="/accounts/register" class="mt-6 inline-flex items-center gap-1.5 px-4 py-2 bg-gray-900 text-white text-sm font-medium rounded-lg hover:bg-gray-800 transition-colors">
|
|
Get started
|
|
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Feature 3: Escalation Rules -->
|
|
<div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
|
|
<div class="relative">
|
|
<div class="flex items-center gap-4 mb-6">
|
|
<div class="flex h-10 w-10 items-center justify-center rounded-xl bg-violet-50 ring-1 ring-violet-200">
|
|
<svg class="h-5 w-5 text-violet-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4h13M3 8h9m-9 4h9m5-4v12m0 0l-4-4m4 4l4-4" />
|
|
</svg>
|
|
</div>
|
|
<span class="text-sm font-semibold text-violet-600 uppercase tracking-wide">Smart Escalations</span>
|
|
</div>
|
|
<h3 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4">Escalation Rules & Rotation Policies</h3>
|
|
<p class="text-lg text-gray-600 mb-6">
|
|
Escalation rules determine how incidents are escalated based on severity or time elapsed. Rotation policies ensure fair distribution of on-call responsibilities.
|
|
</p>
|
|
<ul class="space-y-3 mb-8">
|
|
<li class="flex items-center gap-3 text-gray-600">
|
|
<svg class="h-5 w-5 text-violet-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Time-based escalation
|
|
</li>
|
|
<li class="flex items-center gap-3 text-gray-600">
|
|
<svg class="h-5 w-5 text-violet-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Fair rotation schedules
|
|
</li>
|
|
<li class="flex items-center gap-3 text-gray-600">
|
|
<svg class="h-5 w-5 text-violet-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Severity-based routing
|
|
</li>
|
|
</ul>
|
|
<a href="/accounts/register" class="mt-6 inline-flex items-center gap-1.5 px-4 py-2 bg-gray-900 text-white text-sm font-medium rounded-lg hover:bg-gray-800 transition-colors">
|
|
Get started
|
|
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
<div class="mt-12 lg:mt-0">
|
|
<div class="relative">
|
|
<!-- Subtle background -->
|
|
<div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
|
|
|
|
<!-- Escalation Chain Visualization -->
|
|
<div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
|
|
<!-- Header -->
|
|
<div class="bg-orange-50 px-4 py-3 border-b border-orange-100">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-2">
|
|
<svg class="w-5 h-5 text-orange-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4h13M3 8h9m-9 4h9m5-4v12m0 0l-4-4m4 4l4-4" />
|
|
</svg>
|
|
<span class="text-gray-800 text-sm font-semibold">Escalation Policy</span>
|
|
</div>
|
|
<span class="px-2 py-0.5 bg-emerald-100 text-emerald-700 text-xs rounded-full">Active</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Escalation chain -->
|
|
<div class="p-4">
|
|
<!-- Level 1 -->
|
|
<div class="flex items-start gap-3">
|
|
<div class="flex flex-col items-center">
|
|
<div class="w-8 h-8 rounded-full bg-orange-500 flex items-center justify-center text-white text-xs font-bold">1</div>
|
|
<div class="w-0.5 h-12 bg-orange-200 mt-2"></div>
|
|
</div>
|
|
<div class="flex-1 pb-4">
|
|
<div class="bg-orange-50 rounded-lg p-3 border border-orange-100">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<span class="text-sm font-medium text-gray-800">Primary On-Call</span>
|
|
<span class="text-xs text-orange-600">Immediate</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-6 h-6 rounded-full bg-orange-500 flex items-center justify-center text-white text-xs">JD</div>
|
|
<span class="text-xs text-gray-600">John Doe</span>
|
|
</div>
|
|
<div class="mt-2 flex gap-1">
|
|
<span class="px-1.5 py-0.5 bg-white text-gray-500 text-[10px] rounded border border-gray-200">SMS</span>
|
|
<span class="px-1.5 py-0.5 bg-white text-gray-500 text-[10px] rounded border border-gray-200">Call</span>
|
|
<span class="px-1.5 py-0.5 bg-white text-gray-500 text-[10px] rounded border border-gray-200">Push</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Level 2 -->
|
|
<div class="flex items-start gap-3">
|
|
<div class="flex flex-col items-center">
|
|
<div class="w-8 h-8 rounded-full bg-amber-500 flex items-center justify-center text-white text-xs font-bold">2</div>
|
|
<div class="w-0.5 h-12 bg-amber-200 mt-2"></div>
|
|
</div>
|
|
<div class="flex-1 pb-4">
|
|
<div class="bg-amber-50 rounded-lg p-3 border border-amber-100">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<span class="text-sm font-medium text-gray-800">Secondary On-Call</span>
|
|
<span class="text-xs text-amber-600">After 5 min</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-6 h-6 rounded-full bg-amber-500 flex items-center justify-center text-white text-xs">SM</div>
|
|
<span class="text-xs text-gray-600">Sarah Miller</span>
|
|
</div>
|
|
<div class="mt-2 flex gap-1">
|
|
<span class="px-1.5 py-0.5 bg-white text-gray-500 text-[10px] rounded border border-gray-200">SMS</span>
|
|
<span class="px-1.5 py-0.5 bg-white text-gray-500 text-[10px] rounded border border-gray-200">Email</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Level 3 -->
|
|
<div class="flex items-start gap-3">
|
|
<div class="flex flex-col items-center">
|
|
<div class="w-8 h-8 rounded-full bg-red-500 flex items-center justify-center text-white text-xs font-bold">3</div>
|
|
</div>
|
|
<div class="flex-1">
|
|
<div class="bg-red-50 rounded-lg p-3 border border-red-100">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<span class="text-sm font-medium text-gray-800">Engineering Manager</span>
|
|
<span class="text-xs text-red-600">After 15 min</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-6 h-6 rounded-full bg-red-500 flex items-center justify-center text-white text-xs">MJ</div>
|
|
<span class="text-xs text-gray-600">Mike Johnson</span>
|
|
</div>
|
|
<div class="mt-2 flex gap-1">
|
|
<span class="px-1.5 py-0.5 bg-white text-gray-500 text-[10px] rounded border border-gray-200">Call</span>
|
|
<span class="px-1.5 py-0.5 bg-white text-gray-500 text-[10px] rounded border border-gray-200">SMS</span>
|
|
<span class="px-1.5 py-0.5 bg-white text-gray-500 text-[10px] rounded border border-gray-200">Slack</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="bg-gray-50 px-4 py-2 border-t border-gray-100">
|
|
<div class="flex items-center justify-between text-xs text-gray-500">
|
|
<span>Repeat cycle: 3 times</span>
|
|
<span>Auto-resolve: 30 min</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Feature 4: Multi-channel Notifications -->
|
|
<div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
|
|
<div class="relative order-2 lg:order-1 mt-12 lg:mt-0">
|
|
<div class="relative">
|
|
<!-- Subtle background -->
|
|
<div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
|
|
|
|
<!-- Multi-channel Notification Cards -->
|
|
<div class="relative max-w-md mx-auto space-y-3">
|
|
<!-- Phone Call Card -->
|
|
<div class="bg-white rounded-xl shadow-lg border border-gray-200 p-4 transform hover:-translate-y-1 transition-transform">
|
|
<div class="flex items-start gap-4">
|
|
<div class="w-12 h-12 rounded-xl bg-orange-100 flex items-center justify-center flex-shrink-0">
|
|
<svg class="w-6 h-6 text-orange-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
|
|
</svg>
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex items-center justify-between">
|
|
<span class="font-semibold text-gray-800">Phone Call</span>
|
|
<span class="flex items-center gap-1 text-xs text-emerald-600">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></span>
|
|
Calling...
|
|
</span>
|
|
</div>
|
|
<p class="text-sm text-gray-500 mt-1">Calling John Doe at +1 (555) 123-4567</p>
|
|
<div class="mt-2 flex gap-2">
|
|
<span class="px-2 py-1 bg-orange-50 text-orange-700 text-xs rounded-lg font-medium">Critical Alert</span>
|
|
<span class="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded-lg">Auto-retry: 3x</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SMS Card -->
|
|
<div class="bg-white rounded-xl shadow-lg border border-gray-200 p-4 transform hover:-translate-y-1 transition-transform">
|
|
<div class="flex items-start gap-4">
|
|
<div class="w-12 h-12 rounded-xl bg-amber-100 flex items-center justify-center flex-shrink-0">
|
|
<svg class="w-6 h-6 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
|
|
</svg>
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex items-center justify-between">
|
|
<span class="font-semibold text-gray-800">SMS</span>
|
|
<span class="flex items-center gap-1 text-xs text-emerald-600">
|
|
<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Delivered
|
|
</span>
|
|
</div>
|
|
<p class="text-sm text-gray-500 mt-1 truncate">[OneUptime] Alert: Database connection timeout on prod-db-01</p>
|
|
<div class="mt-2 text-xs text-gray-400">Sent 12 seconds ago</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Email Card -->
|
|
<div class="bg-white rounded-xl shadow-lg border border-gray-200 p-4 transform hover:-translate-y-1 transition-transform">
|
|
<div class="flex items-start gap-4">
|
|
<div class="w-12 h-12 rounded-xl bg-yellow-100 flex items-center justify-center flex-shrink-0">
|
|
<svg class="w-6 h-6 text-yellow-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
|
</svg>
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex items-center justify-between">
|
|
<span class="font-semibold text-gray-800">Email</span>
|
|
<span class="flex items-center gap-1 text-xs text-emerald-600">
|
|
<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Sent
|
|
</span>
|
|
</div>
|
|
<p class="text-sm text-gray-500 mt-1">john.doe@company.com</p>
|
|
<div class="mt-2 bg-gray-50 rounded p-2 text-xs text-gray-600 border border-gray-100">
|
|
<span class="font-medium">Subject:</span> [Critical] Database connection timeout
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Push Notification Card -->
|
|
<div class="bg-white rounded-xl shadow-lg border border-gray-200 p-4 transform hover:-translate-y-1 transition-transform">
|
|
<div class="flex items-start gap-4">
|
|
<div class="w-12 h-12 rounded-xl bg-orange-100 flex items-center justify-center flex-shrink-0">
|
|
<svg class="w-6 h-6 text-orange-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
|
|
</svg>
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex items-center justify-between">
|
|
<span class="font-semibold text-gray-800">Push Notification</span>
|
|
<span class="flex items-center gap-1 text-xs text-amber-600">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-amber-500"></span>
|
|
Pending
|
|
</span>
|
|
</div>
|
|
<p class="text-sm text-gray-500 mt-1">Mobile app & browser notifications</p>
|
|
<div class="mt-2 flex gap-2">
|
|
<span class="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded-lg">iOS</span>
|
|
<span class="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded-lg">Android</span>
|
|
<span class="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded-lg">Web</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="relative order-1 lg:order-2">
|
|
<div class="flex items-center gap-4 mb-6">
|
|
<div class="flex h-10 w-10 items-center justify-center rounded-xl bg-amber-50 ring-1 ring-amber-200">
|
|
<svg class="h-5 w-5 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
|
|
</svg>
|
|
</div>
|
|
<span class="text-sm font-semibold text-amber-600 uppercase tracking-wide">Multi-Channel</span>
|
|
</div>
|
|
<h3 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4">Call, SMS, Email, Push Notifications</h3>
|
|
<p class="text-lg text-gray-600 mb-6">
|
|
Your team can receive alerts through various channels - phone calls, SMS, emails, and push notifications. Multi-channel ensures prompt notification using the most convenient method.
|
|
</p>
|
|
<ul class="space-y-3 mb-8">
|
|
<li class="flex items-center gap-3 text-gray-600">
|
|
<svg class="h-5 w-5 text-amber-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Phone call alerts
|
|
</li>
|
|
<li class="flex items-center gap-3 text-gray-600">
|
|
<svg class="h-5 w-5 text-amber-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
SMS & email notifications
|
|
</li>
|
|
<li class="flex items-center gap-3 text-gray-600">
|
|
<svg class="h-5 w-5 text-amber-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Push & Slack integrations
|
|
</li>
|
|
</ul>
|
|
<a href="/accounts/register" class="mt-6 inline-flex items-center gap-1.5 px-4 py-2 bg-gray-900 text-white text-sm font-medium rounded-lg hover:bg-gray-800 transition-colors">
|
|
Get started
|
|
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- More Features Section -->
|
|
<div class="relative bg-white py-24 sm:py-32 overflow-hidden">
|
|
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<!-- Section header -->
|
|
<div class="mx-auto max-w-2xl text-center">
|
|
<div class="inline-flex items-center gap-2 rounded-full bg-emerald-50 px-4 py-1.5 text-sm font-medium text-emerald-700 ring-1 ring-inset ring-emerald-600/20 mb-6">
|
|
<svg class="h-4 w-4 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
|
</svg>
|
|
<span class="text-sm font-medium text-emerald-700">Advanced capabilities</span>
|
|
</div>
|
|
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
|
|
Advanced features, built for you
|
|
</h2>
|
|
<p class="mt-6 text-lg leading-8 text-gray-600">
|
|
Build custom workflows, integrate with anything you have, or more - you never run out of features. Batteries included.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Feature cards grid -->
|
|
<div class="mx-auto mt-16 max-w-7xl">
|
|
<div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
|
|
|
|
<!-- Card 1: Reliability Guaranteed -->
|
|
<div class="group relative">
|
|
<div class="relative h-full rounded-2xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:border-emerald-200 hover:shadow-lg">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-emerald-50 ring-1 ring-emerald-200">
|
|
<svg class="h-6 w-6 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
|
|
</div>
|
|
<h3 class="mt-6 text-xl font-semibold text-gray-900">Reliability Guaranteed</h3>
|
|
<p class="mt-4 text-gray-600 leading-relaxed">Hosted on a distributed high availability infrastructure across multiple clouds and continents so your alerts always get through.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 2: Integrations -->
|
|
<div class="group relative">
|
|
<div class="relative h-full rounded-2xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:border-blue-200 hover:shadow-lg">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-50 ring-1 ring-blue-200">
|
|
<svg class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
|
|
</div>
|
|
<h3 class="mt-6 text-xl font-semibold text-gray-900">Integrations</h3>
|
|
<p class="mt-4 text-gray-600 leading-relaxed">Choose from 5000+ integrations. Manage on-call without leaving Slack. Build custom integrations with our powerful API.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 3: Workflows -->
|
|
<div class="group relative">
|
|
<div class="relative h-full rounded-2xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:border-violet-200 hover:shadow-lg">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-violet-50 ring-1 ring-violet-200">
|
|
<svg class="h-6 w-6 text-violet-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="mt-6 text-xl font-semibold text-gray-900">Workflows</h3>
|
|
<p class="mt-4 text-gray-600 leading-relaxed">Build complex workflows without code. Automate alert routing, escalations, and team notifications with visual automation.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 4: Custom Policies -->
|
|
<div class="group relative">
|
|
<div class="relative h-full rounded-2xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:border-amber-200 hover:shadow-lg">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-amber-50 ring-1 ring-amber-200">
|
|
<svg class="h-6 w-6 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="mt-6 text-xl font-semibold text-gray-900">Custom Policies</h3>
|
|
<p class="mt-4 text-gray-600 leading-relaxed">Let team members build custom alert policies so they can be notified in the way that works best for them.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 5: Timeline and Logs -->
|
|
<div class="group relative">
|
|
<div class="relative h-full rounded-2xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:border-cyan-200 hover:shadow-lg">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-cyan-50 ring-1 ring-cyan-200">
|
|
<svg class="h-6 w-6 text-cyan-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="mt-6 text-xl font-semibold text-gray-900">Timeline and Logs</h3>
|
|
<p class="mt-4 text-gray-600 leading-relaxed">See who was alerted and when. Debug policy issues with transparent logs of all events and actions.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 6: Custom SMS and Calls -->
|
|
<div class="group relative">
|
|
<div class="relative h-full rounded-2xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:border-pink-200 hover:shadow-lg">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-pink-50 ring-1 ring-pink-200">
|
|
<svg class="h-6 w-6 text-pink-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.34 15.84c-.688-.06-1.386-.09-2.09-.09H7.5a4.5 4.5 0 110-9h.75c.704 0 1.402-.03 2.09-.09m0 9.18c.253.962.584 1.892.985 2.783.247.55.06 1.21-.463 1.511l-.657.38c-.551.318-1.26.117-1.527-.461a20.845 20.845 0 01-1.44-4.282m3.102.069a18.03 18.03 0 01-.59-4.59c0-1.586.205-3.124.59-4.59m0 9.18a23.848 23.848 0 018.835 2.535M10.34 6.66a23.847 23.847 0 008.835-2.535m0 0A23.74 23.74 0 0018.795 3m.38 1.125a23.91 23.91 0 011.014 5.395m-1.014 8.855c-.118.38-.245.754-.38 1.125m.38-1.125a23.91 23.91 0 001.014-5.395m0-3.46c.495.413.811 1.035.811 1.73 0 .695-.316 1.317-.811 1.73m0-3.46a24.347 24.347 0 010 3.46" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="mt-6 text-xl font-semibold text-gray-900">Custom SMS and Calls</h3>
|
|
<p class="mt-4 text-gray-600 leading-relaxed">Use your own SMS and call provider for alerts. Bring your own Twilio or other telephony provider for complete control.</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Team Notifications Section -->
|
|
<div class="relative overflow-hidden bg-white py-24 sm:py-32">
|
|
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
|
|
<!-- Content -->
|
|
<div class="relative">
|
|
<p class="text-sm font-medium text-emerald-600 uppercase tracking-wide mb-3">Team Notifications</p>
|
|
<h2 class="text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl">
|
|
Alerts delivered where your team already works
|
|
</h2>
|
|
<p class="mt-4 text-lg text-gray-600 leading-relaxed">
|
|
Get instant on-call notifications in Slack and Microsoft Teams. Acknowledge, escalate, and resolve alerts without leaving your chat app.
|
|
</p>
|
|
|
|
<!-- Integration cards -->
|
|
<div class="mt-10 space-y-3">
|
|
<!-- Slack -->
|
|
<div class="flex items-center gap-4 p-4 rounded-xl bg-gray-50 border border-gray-100">
|
|
<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-white shadow-sm ring-1 ring-gray-200">
|
|
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none">
|
|
<path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313z" fill="#E01E5A"/>
|
|
<path d="M8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312z" fill="#36C5F0"/>
|
|
<path d="M18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312z" fill="#2EB67D"/>
|
|
<path d="M15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z" fill="#ECB22E"/>
|
|
</svg>
|
|
</div>
|
|
<div class="flex-1">
|
|
<h3 class="text-sm font-semibold text-gray-900">Slack</h3>
|
|
<p class="text-sm text-gray-500">Interactive alert actions in threads</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Microsoft Teams -->
|
|
<div class="flex items-center gap-4 p-4 rounded-xl bg-gray-50 border border-gray-100">
|
|
<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-white shadow-sm ring-1 ring-gray-200">
|
|
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none">
|
|
<path d="M20.16 7.8h-4.736c.103.317.159.654.159 1.005v7.029a3.588 3.588 0 01-3.583 3.583h-4.8v.777c0 .998.81 1.806 1.806 1.806h8.339l2.869 1.912a.452.452 0 00.703-.376V21.2h.646c.997 0 1.806-.809 1.806-1.806v-9.788A1.806 1.806 0 0020.16 7.8z" fill="#5059C9"/>
|
|
<circle cx="18.5" cy="4.5" r="2.5" fill="#5059C9"/>
|
|
<path d="M13.5 6H3.806A1.806 1.806 0 002 7.806v9.388c0 .997.81 1.806 1.806 1.806h2.611v3.336a.452.452 0 00.703.376L10.5 20h3a3.5 3.5 0 003.5-3.5v-7A3.5 3.5 0 0013.5 6z" fill="#7B83EB"/>
|
|
<circle cx="10" cy="3" r="3" fill="#7B83EB"/>
|
|
<path d="M6 11h6M6 14h4" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
|
|
</svg>
|
|
</div>
|
|
<div class="flex-1">
|
|
<h3 class="text-sm font-semibold text-gray-900">Microsoft Teams</h3>
|
|
<p class="text-sm text-gray-500">Native adaptive cards integration</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Features list -->
|
|
<div class="mt-8 grid grid-cols-2 gap-4">
|
|
<div class="flex items-center gap-2 text-sm text-gray-600">
|
|
<svg class="h-4 w-4 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Real-time delivery
|
|
</div>
|
|
<div class="flex items-center gap-2 text-sm text-gray-600">
|
|
<svg class="h-4 w-4 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Smart escalations
|
|
</div>
|
|
<div class="flex items-center gap-2 text-sm text-gray-600">
|
|
<svg class="h-4 w-4 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Multi-channel
|
|
</div>
|
|
<div class="flex items-center gap-2 text-sm text-gray-600">
|
|
<svg class="h-4 w-4 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Action buttons
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slack Demo -->
|
|
<div class="relative" id="oncall-slack-demo">
|
|
<!-- Decorative background elements -->
|
|
<div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
|
|
|
|
<!-- Slack Window -->
|
|
<div class="relative bg-[#1a1d21] rounded-2xl shadow-2xl overflow-hidden max-w-md mx-auto ring-1 ring-white/10">
|
|
<!-- Slack window header -->
|
|
<div class="bg-[#0f1114] px-4 py-3 flex items-center justify-between border-b border-white/5">
|
|
<div class="flex items-center gap-3">
|
|
<div class="flex gap-2">
|
|
<div class="w-3 h-3 rounded-full bg-[#ff5f57] shadow-sm shadow-red-500/50"></div>
|
|
<div class="w-3 h-3 rounded-full bg-[#febc2e] shadow-sm shadow-yellow-500/50"></div>
|
|
<div class="w-3 h-3 rounded-full bg-[#28c840] shadow-sm shadow-green-500/50"></div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-2 bg-[#1a1d21] px-3 py-1 rounded-md">
|
|
<svg class="w-4 h-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14"/>
|
|
</svg>
|
|
<span class="text-white text-sm font-semibold">on-call</span>
|
|
<svg class="w-4 h-4 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
|
</svg>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-7 h-7 rounded-full bg-gradient-to-br from-emerald-400 to-emerald-600 flex items-center justify-center ring-2 ring-green-500 ring-offset-1 ring-offset-[#0f1114]">
|
|
<span class="text-white text-xs font-bold">O</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Messages area -->
|
|
<div class="bg-[#1a1d21] px-4 py-4" id="oncall-slack-messages">
|
|
<!-- Original on-call alert message -->
|
|
<div class="group relative">
|
|
<div class="flex items-start gap-3">
|
|
<img src="/img/OneUptimePNG/1.png" alt="OneUptime" class="w-10 h-10 rounded-lg flex-shrink-0 shadow-lg" />
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex items-center gap-2">
|
|
<span class="font-bold text-white text-sm hover:underline cursor-pointer">OneUptime</span>
|
|
<span class="bg-[#4a3f7a] text-purple-200 text-[10px] px-1.5 py-0.5 rounded font-medium">APP</span>
|
|
<span class="text-gray-500 text-xs">3:42 PM</span>
|
|
</div>
|
|
|
|
<!-- On-call alert card -->
|
|
<div class="mt-3 bg-[#0f1114] rounded-lg overflow-hidden ring-1 ring-white/5">
|
|
<div class="h-1 bg-gradient-to-r from-red-500 to-orange-500"></div>
|
|
<div class="p-4">
|
|
<div class="flex items-start justify-between">
|
|
<div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-red-500/20 text-red-400 text-xs font-medium">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-red-400 animate-pulse"></span>
|
|
Critical Alert
|
|
</span>
|
|
</div>
|
|
<h4 class="text-white font-semibold mt-2">Database connection timeout</h4>
|
|
<p class="text-gray-400 text-sm mt-1">Primary DB not responding to health checks</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-4 mt-3 pt-3 border-t border-white/5">
|
|
<div class="flex items-center gap-1.5 text-xs text-gray-500">
|
|
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
|
|
</svg>
|
|
On-call: John Doe
|
|
</div>
|
|
<div class="flex items-center gap-1.5 text-xs text-gray-500">
|
|
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
Escalates in 5m
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action buttons -->
|
|
<div class="mt-3 flex flex-wrap gap-2" id="oncall-slack-buttons">
|
|
<button onclick="oncallAcknowledge()" id="oncall-btn-ack" class="inline-flex items-center gap-2 px-3 py-2 bg-[#007a5a] hover:bg-[#148567] rounded-md text-xs font-semibold text-white transition-all shadow-lg shadow-green-900/20">
|
|
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
|
</svg>
|
|
Acknowledge
|
|
</button>
|
|
<button onclick="oncallEscalate()" id="oncall-btn-escalate" class="inline-flex items-center gap-2 px-3 py-2 bg-[#1264a3] hover:bg-[#1d74b8] rounded-md text-xs font-semibold text-white transition-all shadow-lg shadow-blue-900/20">
|
|
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/>
|
|
</svg>
|
|
Escalate
|
|
</button>
|
|
<button onclick="oncallResolve()" id="oncall-btn-resolve" class="inline-flex items-center gap-2 px-3 py-2 bg-[#2e3136] hover:bg-[#3a3d42] border border-gray-600 rounded-md text-xs font-semibold text-white transition-all">
|
|
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
Resolve
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Reactions -->
|
|
<div class="mt-3 flex items-center gap-2" id="oncall-slack-reactions">
|
|
<div class="inline-flex items-center gap-1 px-2 py-1 bg-[#2e3136] rounded-full text-xs border border-gray-600 hover:border-gray-500 cursor-pointer transition-colors">
|
|
<span>👀</span>
|
|
<span class="text-gray-300">2</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Thread replies container -->
|
|
<div id="oncall-slack-thread" class="mt-4 space-y-3"></div>
|
|
|
|
<!-- Thread count indicator -->
|
|
<div id="oncall-thread-indicator" class="hidden mt-3 flex items-center gap-2 text-xs text-blue-400 hover:text-blue-300 cursor-pointer">
|
|
<div class="flex -space-x-1" id="oncall-thread-avatars"></div>
|
|
<span id="oncall-thread-count"></span>
|
|
<span class="text-gray-500">Last reply 1m ago</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Message input -->
|
|
<div class="bg-[#1a1d21] px-4 pb-4">
|
|
<div class="bg-[#2e3136] rounded-lg px-4 py-3 flex items-center gap-3 ring-1 ring-white/5">
|
|
<svg class="w-5 h-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
|
|
</svg>
|
|
<span class="text-gray-500 text-sm">Message #on-call</span>
|
|
<div class="ml-auto flex items-center gap-2">
|
|
<svg class="w-5 h-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
<svg class="w-5 h-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
(function() {
|
|
let oncallAckClicked = false;
|
|
let oncallEscalateClicked = false;
|
|
let oncallResolveClicked = false;
|
|
let oncallReplyCount = 0;
|
|
const oncallAvatars = [];
|
|
|
|
function updateOncallThreadIndicator() {
|
|
const indicator = document.getElementById('oncall-thread-indicator');
|
|
const countEl = document.getElementById('oncall-thread-count');
|
|
const avatarsEl = document.getElementById('oncall-thread-avatars');
|
|
|
|
if (oncallReplyCount > 0) {
|
|
indicator.classList.remove('hidden');
|
|
indicator.classList.add('flex');
|
|
countEl.textContent = oncallReplyCount + (oncallReplyCount === 1 ? ' reply' : ' replies');
|
|
avatarsEl.innerHTML = oncallAvatars.slice(-3).map(a =>
|
|
a.isBot
|
|
? `<img src="/img/OneUptimePNG/1.png" alt="O" class="w-5 h-5 rounded-full ring-2 ring-[#1a1d21]" />`
|
|
: `<div class="w-5 h-5 rounded-full ${a.bg} flex items-center justify-center ring-2 ring-[#1a1d21]">
|
|
<span class="text-white text-[8px] font-bold">${a.initial}</span>
|
|
</div>`
|
|
).join('');
|
|
}
|
|
}
|
|
|
|
function addOncallReaction(emoji) {
|
|
const reactions = document.getElementById('oncall-slack-reactions');
|
|
const newReaction = document.createElement('div');
|
|
newReaction.className = 'inline-flex items-center gap-1 px-2 py-1 bg-blue-500/20 rounded-full text-xs border border-blue-500/50 cursor-pointer transition-colors animate-bounce-in';
|
|
newReaction.innerHTML = `<span>${emoji}</span><span class="text-blue-300">1</span>`;
|
|
newReaction.style.animation = 'bounceIn 0.3s ease-out';
|
|
reactions.appendChild(newReaction);
|
|
}
|
|
|
|
function addOncallThreadReply(avatar, name, time, message, isBot) {
|
|
const thread = document.getElementById('oncall-slack-thread');
|
|
const reply = document.createElement('div');
|
|
reply.className = 'flex items-start gap-2.5 pl-3 border-l-2 border-emerald-500/30';
|
|
reply.style.animation = 'fadeSlideIn 0.3s ease-out';
|
|
|
|
const avatarClass = avatar;
|
|
const initial = name.charAt(0);
|
|
|
|
if (!isBot) {
|
|
oncallAvatars.push({ bg: `bg-gradient-to-br ${avatar}`, initial: name.charAt(0) });
|
|
} else {
|
|
oncallAvatars.push({ bg: '', initial: 'O', isBot: true });
|
|
}
|
|
oncallReplyCount++;
|
|
updateOncallThreadIndicator();
|
|
|
|
const avatarHtml = isBot
|
|
? `<img src="/img/OneUptimePNG/1.png" alt="OneUptime" class="w-8 h-8 rounded-lg flex-shrink-0 shadow-md" />`
|
|
: `<div class="w-8 h-8 rounded-lg bg-gradient-to-br ${avatarClass} flex items-center justify-center flex-shrink-0 shadow-md"><span class="text-white text-xs font-bold">${initial}</span></div>`;
|
|
|
|
reply.innerHTML = `
|
|
${avatarHtml}
|
|
<div class="flex-1 bg-[#0f1114] rounded-lg p-3 ring-1 ring-white/5">
|
|
<div class="flex items-center gap-2">
|
|
<span class="font-semibold text-white text-sm">${name}</span>
|
|
${isBot ? '<span class="bg-[#4a3f7a] text-purple-200 text-[9px] px-1 py-0.5 rounded font-medium">APP</span>' : ''}
|
|
<span class="text-gray-500 text-[11px]">${time}</span>
|
|
</div>
|
|
<p class="text-gray-300 text-sm mt-1 leading-relaxed">${message}</p>
|
|
</div>
|
|
`;
|
|
thread.appendChild(reply);
|
|
}
|
|
|
|
window.oncallAcknowledge = function() {
|
|
if (oncallAckClicked) return;
|
|
oncallAckClicked = true;
|
|
|
|
const btn = document.getElementById('oncall-btn-ack');
|
|
btn.disabled = true;
|
|
btn.classList.add('opacity-70');
|
|
btn.innerHTML = '<svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg><span>Acknowledging...</span>';
|
|
|
|
setTimeout(() => {
|
|
btn.innerHTML = '<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg><span>Acknowledged</span>';
|
|
btn.classList.remove('bg-[#007a5a]', 'hover:bg-[#148567]', 'shadow-green-900/20');
|
|
btn.classList.add('bg-[#2e3136]', 'border', 'border-green-500/50', 'text-green-400');
|
|
|
|
addOncallReaction('👍');
|
|
addOncallThreadReply('from-blue-400 to-blue-600', 'John Doe', '3:42 PM', 'Got it! Investigating the database connection issues now.', false);
|
|
|
|
setTimeout(() => {
|
|
addOncallThreadReply('from-green-400 to-green-600', 'OneUptime', '3:42 PM', '✅ Alert acknowledged by <strong class="text-white">John Doe</strong> in <strong class="text-emerald-400">47 seconds</strong>', true);
|
|
}, 1000);
|
|
}, 800);
|
|
};
|
|
|
|
window.oncallEscalate = function() {
|
|
if (oncallEscalateClicked) return;
|
|
oncallEscalateClicked = true;
|
|
|
|
const btn = document.getElementById('oncall-btn-escalate');
|
|
btn.disabled = true;
|
|
btn.classList.add('opacity-70');
|
|
btn.innerHTML = '<svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg><span>Escalating...</span>';
|
|
|
|
setTimeout(() => {
|
|
btn.innerHTML = '<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg><span>Escalated</span>';
|
|
btn.classList.remove('bg-[#1264a3]', 'hover:bg-[#1d74b8]', 'shadow-blue-900/20');
|
|
btn.classList.add('bg-[#2e3136]', 'border', 'border-blue-500/50', 'text-blue-400');
|
|
|
|
addOncallReaction('🚨');
|
|
addOncallThreadReply('from-green-400 to-green-600', 'OneUptime', '3:44 PM', '📟 Escalated to <strong class="text-white">Level 2 - Database Team</strong><br/><span class="text-gray-400">→ Paging: Sarah Chen (DBA), Mike Johnson (Infra Lead)</span>', true);
|
|
}, 800);
|
|
};
|
|
|
|
window.oncallResolve = function() {
|
|
if (oncallResolveClicked) return;
|
|
oncallResolveClicked = true;
|
|
|
|
const btn = document.getElementById('oncall-btn-resolve');
|
|
btn.disabled = true;
|
|
btn.classList.add('opacity-70');
|
|
btn.innerHTML = '<svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg><span>Resolving...</span>';
|
|
|
|
setTimeout(() => {
|
|
btn.innerHTML = '<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg><span>Resolved</span>';
|
|
btn.classList.remove('bg-[#2e3136]', 'border-gray-600', 'hover:bg-[#3a3d42]');
|
|
btn.classList.add('bg-green-600/20', 'border', 'border-green-500/50', 'text-green-400');
|
|
|
|
addOncallReaction('🎉');
|
|
addOncallThreadReply('from-blue-400 to-blue-600', 'John Doe', '3:51 PM', 'Fixed! The connection pool was maxed out. Restarted the connection handler and increased pool size.', false);
|
|
|
|
setTimeout(() => {
|
|
addOncallThreadReply('from-green-400 to-green-600', 'OneUptime', '3:51 PM', '🎉 Alert resolved by <strong class="text-white">John Doe</strong><br/><span class="text-gray-400">Time to resolve: 9 minutes • On-call response: 47s</span>', true);
|
|
}, 1000);
|
|
}, 800);
|
|
};
|
|
})();
|
|
</script>
|
|
</div>
|
|
</div>
|
|
|
|
<%- include('./Partials/enterprise-ready') -%>
|
|
<%- include('features-table') -%>
|
|
<%- include('cta') -%>
|
|
</main>
|
|
<%- include('footer') -%>
|
|
<%- include('./Partials/video-script') -%>
|
|
|
|
<style>
|
|
@keyframes fadeSlideIn {
|
|
from { opacity: 0; transform: translateY(10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
@keyframes bounceIn {
|
|
0% { opacity: 0; transform: scale(0.8); }
|
|
50% { transform: scale(1.1); }
|
|
100% { opacity: 1; transform: scale(1); }
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
// Grid glow effect for on-call hero section
|
|
(function() {
|
|
const heroSection = document.getElementById('oncall-hero-section');
|
|
const gridGlow = document.getElementById('oncall-grid-glow');
|
|
|
|
if (heroSection && gridGlow) {
|
|
heroSection.addEventListener('mousemove', (e) => {
|
|
const rect = heroSection.getBoundingClientRect();
|
|
const x = ((e.clientX - rect.left) / rect.width) * 100;
|
|
const y = ((e.clientY - rect.top) / rect.height) * 100;
|
|
|
|
gridGlow.style.setProperty('--mouse-x', x + '%');
|
|
gridGlow.style.setProperty('--mouse-y', y + '%');
|
|
gridGlow.style.opacity = '1';
|
|
});
|
|
|
|
heroSection.addEventListener('mouseleave', () => {
|
|
gridGlow.style.opacity = '0';
|
|
});
|
|
}
|
|
})();
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html> |