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
1521 lines
90 KiB
Plaintext
1521 lines
90 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="en" id="home">
|
|
|
|
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
|
|
|
|
<head>
|
|
<title>OneUptime | Monitor any resource in real-time. </title>
|
|
<meta name="description"
|
|
content="Monitor websites, APIs, servers, and containers from 7+ global locations. Get alerts via SMS, email, Slack, and phone. Free tier available. Open source Datadog 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="monitoring-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 - blue color -->
|
|
<div id="monitoring-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(59, 130, 246, 0.3) 1px, transparent 1px), linear-gradient(to bottom, rgba(59, 130, 246, 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-blue-600 mb-4">Real-time monitoring from 7 global locations</p>
|
|
|
|
<h1 class="text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl lg:text-6xl">
|
|
Monitor everything, miss nothing
|
|
</h1>
|
|
<p class="mt-6 text-lg leading-8 text-gray-600 max-w-2xl mx-auto">
|
|
Monitor websites, APIs, servers, and containers from anywhere. Get instant alerts when things go wrong and keep your services running smoothly.
|
|
</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>1-second checks</span>
|
|
<span class="hidden sm:inline text-gray-300">|</span>
|
|
<span>Unlimited monitors</span>
|
|
<span class="hidden sm:inline text-gray-300">|</span>
|
|
<span>Multi-channel alerts</span>
|
|
<span class="hidden sm:inline text-gray-300">|</span>
|
|
<span>Internal monitoring</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/monitor.png" alt="OneUptime monitoring dashboard" width="2432" height="1442"
|
|
class="rounded-lg shadow-lg">
|
|
<%- include('./Partials/watch-demo.ejs', {videoId: "_fQ_F4EisBQ" }) -%>
|
|
</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-blue-600 uppercase tracking-wide mb-3">How It Works</p>
|
|
<h2 class="text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl">
|
|
Set up monitoring in seconds
|
|
</h2>
|
|
<p class="mt-4 text-lg text-gray-600">
|
|
Get real-time visibility into your infrastructure with our simple four-step setup process.
|
|
</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-blue-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-blue-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 6v6m0 0v6m0-6h6m-6 0H6" />
|
|
</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-blue-600 ring-2 ring-blue-600">1</span>
|
|
</div>
|
|
<h3 class="text-base font-semibold text-gray-900 mb-2">Add Monitor</h3>
|
|
<p class="text-sm text-gray-600 leading-relaxed">Create a monitor for any resource - website, API, server, or container.</p>
|
|
</div>
|
|
|
|
<!-- Step 2 -->
|
|
<div class="text-center">
|
|
<div class="relative inline-flex items-center justify-center h-16 w-16 rounded-full bg-blue-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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 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-blue-600 ring-2 ring-blue-600">2</span>
|
|
</div>
|
|
<h3 class="text-base font-semibold text-gray-900 mb-2">Configure Checks</h3>
|
|
<p class="text-sm text-gray-600 leading-relaxed">Set check intervals, locations, and custom success criteria.</p>
|
|
</div>
|
|
|
|
<!-- Step 3 -->
|
|
<div class="text-center">
|
|
<div class="relative inline-flex items-center justify-center h-16 w-16 rounded-full bg-blue-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-blue-600 ring-2 ring-blue-600">3</span>
|
|
</div>
|
|
<h3 class="text-base font-semibold text-gray-900 mb-2">Set Up Alerts</h3>
|
|
<p class="text-sm text-gray-600 leading-relaxed">Choose notification channels and escalation policies.</p>
|
|
</div>
|
|
|
|
<!-- Step 4 -->
|
|
<div class="text-center">
|
|
<div class="relative inline-flex items-center justify-center h-16 w-16 rounded-full bg-blue-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 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 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-blue-600 ring-2 ring-blue-600">4</span>
|
|
</div>
|
|
<h3 class="text-base font-semibold text-gray-900 mb-2">Stay Informed</h3>
|
|
<p class="text-sm text-gray-600 leading-relaxed">Get real-time alerts and detailed performance insights.</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-blue-50 px-4 py-1.5 text-sm font-medium text-blue-700 ring-1 ring-inset ring-blue-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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
Why OneUptime
|
|
</div>
|
|
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl lg:text-5xl">
|
|
An unbeatable monitoring product built for you
|
|
</h2>
|
|
<p class="mt-6 text-lg leading-8 text-gray-600">
|
|
Monitor anything - Websites, API, IPv4, IPv6, or send data inbound. Create alerts on any metrics and alert the right team.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Feature Blocks -->
|
|
<div class="space-y-24 lg:space-y-32">
|
|
<!-- Feature 1: Monitor Anything -->
|
|
<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-blue-50 ring-1 ring-blue-200">
|
|
<svg class="h-5 w-5 text-blue-600" 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>
|
|
</div>
|
|
<span class="text-sm font-semibold text-blue-600 uppercase tracking-wide">Comprehensive Coverage</span>
|
|
</div>
|
|
<h3 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4">Monitor Anything</h3>
|
|
<p class="text-lg text-gray-600 mb-6">
|
|
Websites, API, IPv4, IPv6, Docker containers, Servers, VMs or send data inbound. OneUptime can monitor any resource you have.
|
|
</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-blue-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>
|
|
HTTP/HTTPS monitoring with SSL checks
|
|
</li>
|
|
<li class="flex items-center gap-3 text-gray-600">
|
|
<svg class="h-5 w-5 text-blue-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>
|
|
Server & container monitoring
|
|
</li>
|
|
<li class="flex items-center gap-3 text-gray-600">
|
|
<svg class="h-5 w-5 text-blue-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>
|
|
TCP, UDP, and custom port checks
|
|
</li>
|
|
</ul>
|
|
<a href="/accounts/register" class="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>
|
|
|
|
<!-- Grid of Monitor Type Cards -->
|
|
<div class="relative max-w-md mx-auto">
|
|
<div class="grid grid-cols-3 gap-3">
|
|
<!-- Website -->
|
|
<div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm text-center">
|
|
<div class="w-10 h-10 rounded-lg bg-gray-50 flex items-center justify-center mx-auto mb-2">
|
|
<svg class="w-5 h-5 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"/>
|
|
</svg>
|
|
</div>
|
|
<div class="text-gray-700 text-xs font-medium">Website</div>
|
|
<div class="text-gray-400 text-[10px]">HTTP/HTTPS</div>
|
|
</div>
|
|
|
|
<!-- API -->
|
|
<div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm text-center">
|
|
<div class="w-10 h-10 rounded-lg bg-gray-50 flex items-center justify-center mx-auto mb-2">
|
|
<svg class="w-5 h-5 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
|
|
</svg>
|
|
</div>
|
|
<div class="text-gray-700 text-xs font-medium">API</div>
|
|
<div class="text-gray-400 text-[10px]">REST/GraphQL</div>
|
|
</div>
|
|
|
|
<!-- Server -->
|
|
<div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm text-center">
|
|
<div class="w-10 h-10 rounded-lg bg-gray-50 flex items-center justify-center mx-auto mb-2">
|
|
<svg class="w-5 h-5 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"/>
|
|
</svg>
|
|
</div>
|
|
<div class="text-gray-700 text-xs font-medium">Server</div>
|
|
<div class="text-gray-400 text-[10px]">SSH/Ping</div>
|
|
</div>
|
|
|
|
<!-- Database -->
|
|
<div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm text-center">
|
|
<div class="w-10 h-10 rounded-lg bg-gray-50 flex items-center justify-center mx-auto mb-2">
|
|
<svg class="w-5 h-5 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"/>
|
|
</svg>
|
|
</div>
|
|
<div class="text-gray-700 text-xs font-medium">Database</div>
|
|
<div class="text-gray-400 text-[10px]">SQL/NoSQL</div>
|
|
</div>
|
|
|
|
<!-- Container -->
|
|
<div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm text-center">
|
|
<div class="w-10 h-10 rounded-lg bg-gray-50 flex items-center justify-center mx-auto mb-2">
|
|
<svg class="w-5 h-5 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/>
|
|
</svg>
|
|
</div>
|
|
<div class="text-gray-700 text-xs font-medium">Container</div>
|
|
<div class="text-gray-400 text-[10px]">Docker/K8s</div>
|
|
</div>
|
|
|
|
<!-- Port -->
|
|
<div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm text-center">
|
|
<div class="w-10 h-10 rounded-lg bg-gray-50 flex items-center justify-center mx-auto mb-2">
|
|
<svg class="w-5 h-5 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.857 15.355-5.857 21.213 0"/>
|
|
</svg>
|
|
</div>
|
|
<div class="text-gray-700 text-xs font-medium">Port</div>
|
|
<div class="text-gray-400 text-[10px]">TCP/UDP</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer label -->
|
|
<div class="mt-4 text-center text-xs text-gray-400">
|
|
+ SSL, IPv4, IPv6, Inbound Data & more
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Feature 2: Private Network Monitoring -->
|
|
<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>
|
|
|
|
<!-- Clean Browser Window -->
|
|
<div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
|
|
<!-- Browser header -->
|
|
<div class="bg-gray-50 px-4 py-2.5 flex items-center gap-3 border-b border-gray-100">
|
|
<div class="flex gap-1.5">
|
|
<div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
|
|
<div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
|
|
<div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Content area -->
|
|
<div class="p-4">
|
|
<!-- Header -->
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-8 h-8 rounded-lg bg-gray-100 flex items-center justify-center">
|
|
<svg class="w-4 h-4 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<div class="text-gray-800 text-sm font-medium">Private Network</div>
|
|
<div class="text-gray-400 text-xs">4 services</div>
|
|
</div>
|
|
</div>
|
|
<span class="flex items-center gap-1 px-2 py-1 bg-gray-50 rounded text-xs text-gray-600 border border-gray-200">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
|
|
Connected
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Services list -->
|
|
<div class="space-y-2">
|
|
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
|
|
<div class="flex items-center gap-2">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
|
|
<span class="text-gray-700 text-sm">PostgreSQL</span>
|
|
<span class="text-gray-400 text-xs font-mono">10.0.1.50</span>
|
|
</div>
|
|
<span class="text-gray-400 text-xs">12ms</span>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
|
|
<div class="flex items-center gap-2">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
|
|
<span class="text-gray-700 text-sm">Redis Cluster</span>
|
|
<span class="text-gray-400 text-xs font-mono">10.0.1.51</span>
|
|
</div>
|
|
<span class="text-gray-400 text-xs">3ms</span>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
|
|
<div class="flex items-center gap-2">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
|
|
<span class="text-gray-700 text-sm">K8s API Server</span>
|
|
<span class="text-gray-400 text-xs font-mono">10.0.0.1</span>
|
|
</div>
|
|
<span class="text-gray-400 text-xs">8ms</span>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
|
|
<div class="flex items-center gap-2">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
|
|
<span class="text-gray-700 text-sm">API Gateway</span>
|
|
<span class="text-gray-400 text-xs font-mono">10.0.2.10</span>
|
|
</div>
|
|
<span class="text-gray-400 text-xs">15ms</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="mt-3 pt-3 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400">
|
|
<span>Probe: prod-vpc-01</span>
|
|
<span>Last check: 2s ago</span>
|
|
</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-blue-50 ring-1 ring-blue-200">
|
|
<svg class="h-5 w-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
|
</svg>
|
|
</div>
|
|
<span class="text-sm font-semibold text-blue-600 uppercase tracking-wide">Internal Infrastructure</span>
|
|
</div>
|
|
<h3 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4">Private Network Monitoring</h3>
|
|
<p class="text-lg text-gray-600 mb-6">
|
|
Deploy lightweight monitoring probes inside your private networks, VPNs, or air-gapped environments. Monitor internal services, databases, and infrastructure that aren't accessible from the public internet.
|
|
</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-blue-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>
|
|
Monitor behind firewalls and VPNs
|
|
</li>
|
|
<li class="flex items-center gap-3 text-gray-600">
|
|
<svg class="h-5 w-5 text-blue-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>
|
|
Kubernetes cluster monitoring
|
|
</li>
|
|
<li class="flex items-center gap-3 text-gray-600">
|
|
<svg class="h-5 w-5 text-blue-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>
|
|
On-premise and hybrid cloud support
|
|
</li>
|
|
</ul>
|
|
<a href="/accounts/register" class="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: Real-time Status -->
|
|
<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-blue-50 ring-1 ring-blue-200">
|
|
<svg class="h-5 w-5 text-blue-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>
|
|
</div>
|
|
<span class="text-sm font-semibold text-blue-600 uppercase tracking-wide">Instant Updates</span>
|
|
</div>
|
|
<h3 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4">Showcase Real-time Status</h3>
|
|
<p class="text-lg text-gray-600 mb-6">
|
|
OneUptime checks the status of your endpoints every second to ensure your status page gets updated as soon as any of your resources go down.
|
|
</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-blue-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>
|
|
1-second check intervals
|
|
</li>
|
|
<li class="flex items-center gap-3 text-gray-600">
|
|
<svg class="h-5 w-5 text-blue-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>
|
|
Auto-updated status pages
|
|
</li>
|
|
<li class="flex items-center gap-3 text-gray-600">
|
|
<svg class="h-5 w-5 text-blue-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>
|
|
Instant incident detection
|
|
</li>
|
|
</ul>
|
|
<a href="/accounts/register" class="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>
|
|
|
|
<!-- Status Page with Uptime Bars -->
|
|
<div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
|
|
<!-- Header -->
|
|
<div class="p-4 border-b border-gray-100">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-3 h-3 rounded-full bg-emerald-500"></div>
|
|
<div>
|
|
<div class="text-gray-800 text-sm font-semibold">All Systems Operational</div>
|
|
<div class="text-gray-400 text-xs">Updated 1 second ago</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Uptime bars -->
|
|
<div class="p-4 space-y-4">
|
|
<!-- API Services -->
|
|
<div>
|
|
<div class="flex items-center justify-between mb-1.5">
|
|
<span class="text-gray-700 text-sm">API Services</span>
|
|
<span class="text-gray-400 text-xs">99.99%</span>
|
|
</div>
|
|
<div class="flex gap-0.5">
|
|
<div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
|
|
<div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
|
|
<div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
|
|
<div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
|
|
<div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
|
|
<div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
|
|
<div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
|
|
<div class="flex-1 h-6 bg-amber-400 rounded-sm"></div>
|
|
<div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
|
|
<div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
|
|
<div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
|
|
<div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
|
|
<div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
|
|
<div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Web Dashboard -->
|
|
<div>
|
|
<div class="flex items-center justify-between mb-1.5">
|
|
<span class="text-gray-700 text-sm">Web Dashboard</span>
|
|
<span class="text-gray-400 text-xs">100%</span>
|
|
</div>
|
|
<div class="flex gap-0.5">
|
|
<div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
|
|
<div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
|
|
<div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
|
|
<div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
|
|
<div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
|
|
<div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
|
|
<div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
|
|
<div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
|
|
<div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
|
|
<div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
|
|
<div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
|
|
<div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
|
|
<div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
|
|
<div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Database -->
|
|
<div>
|
|
<div class="flex items-center justify-between mb-1.5">
|
|
<span class="text-gray-700 text-sm">Database</span>
|
|
<span class="text-gray-400 text-xs">99.95%</span>
|
|
</div>
|
|
<div class="flex gap-0.5">
|
|
<div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
|
|
<div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
|
|
<div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
|
|
<div class="flex-1 h-6 bg-red-400 rounded-sm"></div>
|
|
<div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
|
|
<div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
|
|
<div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
|
|
<div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
|
|
<div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
|
|
<div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
|
|
<div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
|
|
<div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
|
|
<div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
|
|
<div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="px-4 py-3 bg-gray-50 border-t border-gray-100 flex items-center justify-between">
|
|
<span class="text-gray-400 text-xs">90 days ago</span>
|
|
<div class="flex items-center gap-2">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
|
|
<span class="text-gray-400 text-xs">Today</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Feature 4: User Journey Monitoring -->
|
|
<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>
|
|
|
|
<!-- Clean Card Design -->
|
|
<div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
|
|
<!-- Header -->
|
|
<div class="px-4 py-3 border-b border-gray-100">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-8 h-8 rounded-lg bg-gray-100 flex items-center justify-center">
|
|
<svg class="w-4 h-4 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<div class="text-gray-800 text-sm font-medium">Checkout Flow</div>
|
|
<div class="text-gray-400 text-xs">4 steps</div>
|
|
</div>
|
|
</div>
|
|
<span class="flex items-center gap-1 px-2 py-1 bg-gray-50 rounded text-xs text-gray-600 border border-gray-200">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
|
|
Passed
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Content area -->
|
|
<div class="p-4">
|
|
<!-- Journey flow visualization -->
|
|
<div class="flex items-start justify-between mb-5">
|
|
<!-- Step 1 -->
|
|
<div class="flex flex-col items-center">
|
|
<div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center border-2 border-emerald-500">
|
|
<svg class="w-4 h-4 text-emerald-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>
|
|
</div>
|
|
<span class="text-gray-600 text-xs mt-1.5">Login</span>
|
|
<span class="text-gray-400 text-[10px]">1.1s</span>
|
|
</div>
|
|
|
|
<div class="flex-1 h-0.5 bg-gray-200 mx-1 mt-5"></div>
|
|
|
|
<!-- Step 2 -->
|
|
<div class="flex flex-col items-center">
|
|
<div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center border-2 border-emerald-500">
|
|
<svg class="w-4 h-4 text-emerald-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>
|
|
</div>
|
|
<span class="text-gray-600 text-xs mt-1.5">Browse</span>
|
|
<span class="text-gray-400 text-[10px]">0.8s</span>
|
|
</div>
|
|
|
|
<div class="flex-1 h-0.5 bg-gray-200 mx-1 mt-5"></div>
|
|
|
|
<!-- Step 3 -->
|
|
<div class="flex flex-col items-center">
|
|
<div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center border-2 border-emerald-500">
|
|
<svg class="w-4 h-4 text-emerald-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>
|
|
</div>
|
|
<span class="text-gray-600 text-xs mt-1.5">Cart</span>
|
|
<span class="text-gray-400 text-[10px]">0.4s</span>
|
|
</div>
|
|
|
|
<div class="flex-1 h-0.5 bg-gray-200 mx-1 mt-5"></div>
|
|
|
|
<!-- Step 4 -->
|
|
<div class="flex flex-col items-center">
|
|
<div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center border-2 border-emerald-500">
|
|
<svg class="w-4 h-4 text-emerald-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>
|
|
</div>
|
|
<span class="text-gray-600 text-xs mt-1.5">Pay</span>
|
|
<span class="text-gray-400 text-[10px]">1.9s</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step details -->
|
|
<div class="space-y-2">
|
|
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
|
|
<div class="flex items-center gap-2">
|
|
<span class="w-5 h-5 rounded bg-gray-200 flex items-center justify-center text-xs text-gray-600 font-medium">1</span>
|
|
<span class="text-gray-700 text-sm">Navigate to login page</span>
|
|
</div>
|
|
<span class="text-gray-400 text-xs">320ms</span>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
|
|
<div class="flex items-center gap-2">
|
|
<span class="w-5 h-5 rounded bg-gray-200 flex items-center justify-center text-xs text-gray-600 font-medium">2</span>
|
|
<span class="text-gray-700 text-sm">Enter credentials</span>
|
|
</div>
|
|
<span class="text-gray-400 text-xs">180ms</span>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
|
|
<div class="flex items-center gap-2">
|
|
<span class="w-5 h-5 rounded bg-gray-200 flex items-center justify-center text-xs text-gray-600 font-medium">3</span>
|
|
<span class="text-gray-700 text-sm">Add item to cart</span>
|
|
</div>
|
|
<span class="text-gray-400 text-xs">412ms</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="mt-3 pt-3 border-t border-gray-100 flex items-center justify-between">
|
|
<div class="flex items-center gap-4 text-sm">
|
|
<div>
|
|
<span class="text-gray-400 text-xs">Total</span>
|
|
<span class="text-gray-700 font-medium ml-1">4.2s</span>
|
|
</div>
|
|
<div>
|
|
<span class="text-gray-400 text-xs">Success</span>
|
|
<span class="text-gray-700 font-medium ml-1">100%</span>
|
|
</div>
|
|
</div>
|
|
<span class="text-gray-400 text-xs">Runs every 5 min</span>
|
|
</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-blue-50 ring-1 ring-blue-200">
|
|
<svg class="h-5 w-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
|
|
</svg>
|
|
</div>
|
|
<span class="text-sm font-semibold text-blue-600 uppercase tracking-wide">End-to-End Testing</span>
|
|
</div>
|
|
<h3 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4">User Journey Monitoring</h3>
|
|
<p class="text-lg text-gray-600 mb-6">
|
|
Simulate real user interactions and monitor critical user journeys like sign-up, checkout, or onboarding flows. Catch issues before your users do with automated synthetic monitoring.
|
|
</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-blue-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>
|
|
Multi-step flow monitoring
|
|
</li>
|
|
<li class="flex items-center gap-3 text-gray-600">
|
|
<svg class="h-5 w-5 text-blue-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>
|
|
Form submissions and interactions
|
|
</li>
|
|
<li class="flex items-center gap-3 text-gray-600">
|
|
<svg class="h-5 w-5 text-blue-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>
|
|
Performance metrics per step
|
|
</li>
|
|
</ul>
|
|
<a href="/accounts/register" class="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 5: IoT, Cron & Backup Monitoring -->
|
|
<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-blue-50 ring-1 ring-blue-200">
|
|
<svg class="h-5 w-5 text-blue-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-blue-600 uppercase tracking-wide">Scheduled Task Monitoring</span>
|
|
</div>
|
|
<h3 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4">IoT, Cron & Backup Monitoring</h3>
|
|
<p class="text-lg text-gray-600 mb-6">
|
|
Monitor scheduled jobs, IoT device heartbeats, and backup processes. Get alerted when cron jobs fail to run, backups don't complete, or IoT devices go silent.
|
|
</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-blue-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>
|
|
Heartbeat monitoring for IoT devices
|
|
</li>
|
|
<li class="flex items-center gap-3 text-gray-600">
|
|
<svg class="h-5 w-5 text-blue-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>
|
|
Cron job and scheduled task alerts
|
|
</li>
|
|
<li class="flex items-center gap-3 text-gray-600">
|
|
<svg class="h-5 w-5 text-blue-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>
|
|
Backup completion verification
|
|
</li>
|
|
</ul>
|
|
<a href="/accounts/register" class="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>
|
|
|
|
<!-- Timeline Schedule View -->
|
|
<div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
|
|
<!-- Header with current time -->
|
|
<div class="px-4 py-3 bg-gray-50 border-b border-gray-100">
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-gray-500 text-xs">Heartbeat Timeline</span>
|
|
<span class="text-gray-700 text-xs font-mono">Today, 14:32</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Timeline content -->
|
|
<div class="p-4">
|
|
<div class="relative">
|
|
<!-- Vertical timeline line -->
|
|
<div class="absolute left-3 top-2 bottom-2 w-px bg-gray-200"></div>
|
|
|
|
<!-- Timeline items -->
|
|
<div class="space-y-4">
|
|
<!-- Item 1 - Recent -->
|
|
<div class="relative flex gap-4">
|
|
<div class="w-6 h-6 rounded-full bg-emerald-100 border-2 border-emerald-500 flex items-center justify-center z-10">
|
|
<div class="w-2 h-2 rounded-full bg-emerald-500"></div>
|
|
</div>
|
|
<div class="flex-1 pb-4">
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-gray-800 text-sm font-medium">Temperature Sensor</span>
|
|
<span class="text-gray-400 text-xs">5s ago</span>
|
|
</div>
|
|
<div class="text-gray-500 text-xs mt-0.5">Heartbeat received · IoT Device</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Item 2 -->
|
|
<div class="relative flex gap-4">
|
|
<div class="w-6 h-6 rounded-full bg-emerald-100 border-2 border-emerald-500 flex items-center justify-center z-10">
|
|
<div class="w-2 h-2 rounded-full bg-emerald-500"></div>
|
|
</div>
|
|
<div class="flex-1 pb-4">
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-gray-800 text-sm font-medium">Smart Gateway</span>
|
|
<span class="text-gray-400 text-xs">12s ago</span>
|
|
</div>
|
|
<div class="text-gray-500 text-xs mt-0.5">Heartbeat received · IoT Device</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Item 3 -->
|
|
<div class="relative flex gap-4">
|
|
<div class="w-6 h-6 rounded-full bg-emerald-100 border-2 border-emerald-500 flex items-center justify-center z-10">
|
|
<svg class="w-3 h-3 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="flex-1 pb-4">
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-gray-800 text-sm font-medium">Daily Report</span>
|
|
<span class="text-gray-400 text-xs">2h ago</span>
|
|
</div>
|
|
<div class="text-gray-500 text-xs mt-0.5">Completed successfully · Cron</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Item 4 -->
|
|
<div class="relative flex gap-4">
|
|
<div class="w-6 h-6 rounded-full bg-emerald-100 border-2 border-emerald-500 flex items-center justify-center z-10">
|
|
<svg class="w-3 h-3 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="flex-1">
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-gray-800 text-sm font-medium">Database Backup</span>
|
|
<span class="text-gray-400 text-xs">4h ago</span>
|
|
</div>
|
|
<div class="text-gray-500 text-xs mt-0.5">Completed · 2.4 GB backed up</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="px-4 py-3 bg-gray-50 border-t border-gray-100">
|
|
<div class="flex items-center justify-between text-xs">
|
|
<div class="flex items-center gap-3">
|
|
<span class="text-gray-500">12 IoT</span>
|
|
<span class="text-gray-300">·</span>
|
|
<span class="text-gray-500">8 Cron</span>
|
|
<span class="text-gray-300">·</span>
|
|
<span class="text-gray-500">5 Backup</span>
|
|
</div>
|
|
<span class="text-emerald-600 font-medium">All healthy</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- More Features 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-16">
|
|
<div class="inline-flex items-center gap-2 rounded-full bg-blue-50 px-4 py-1.5 text-sm font-medium text-blue-700 ring-1 ring-inset ring-blue-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="M13 10V3L4 14h7v7l9-11h-7z" />
|
|
</svg>
|
|
More Features
|
|
</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="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
|
<!-- Card 1: Reliability Guaranteed -->
|
|
<div class="group relative h-full bg-white rounded-2xl p-8 shadow-sm ring-1 ring-gray-200/60 hover:shadow-lg hover:ring-gray-300 transition-all duration-300">
|
|
<div class="relative h-full">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-emerald-50 ring-1 ring-emerald-200 mb-6">
|
|
<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 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-3">Reliability Guaranteed</h3>
|
|
<p class="text-gray-600 text-sm leading-relaxed">
|
|
Hosted on a distributed high availability infrastructure across multiple clouds so your resources are always being monitored, even if a major cloud provider is down.
|
|
</p>
|
|
<!-- Decorative element -->
|
|
<div class="mt-6 flex items-center gap-2">
|
|
<div class="flex -space-x-1">
|
|
<div class="h-6 w-6 rounded-full bg-blue-100 ring-2 ring-white flex items-center justify-center text-xs font-medium text-blue-600">A</div>
|
|
<div class="h-6 w-6 rounded-full bg-amber-100 ring-2 ring-white flex items-center justify-center text-xs font-medium text-amber-600">G</div>
|
|
<div class="h-6 w-6 rounded-full bg-cyan-100 ring-2 ring-white flex items-center justify-center text-xs font-medium text-cyan-600">Az</div>
|
|
</div>
|
|
<span class="text-xs text-gray-500">Multi-cloud</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 2: Integrations -->
|
|
<div class="group relative h-full bg-white rounded-2xl p-8 shadow-sm ring-1 ring-gray-200/60 hover:shadow-lg hover:ring-gray-300 transition-all duration-300">
|
|
<div class="relative h-full">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-50 ring-1 ring-blue-200 mb-6">
|
|
<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="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-3">Integrations</h3>
|
|
<p class="text-gray-600 text-sm leading-relaxed">
|
|
Choose from 5000+ integrations. Your team can check the status of resources without leaving Slack. Build custom integrations with our API.
|
|
</p>
|
|
<!-- Decorative element -->
|
|
<div class="mt-6 flex flex-wrap gap-2">
|
|
<span class="inline-flex items-center px-2.5 py-1 rounded-md bg-gray-100 text-xs font-medium text-gray-600">Slack</span>
|
|
<span class="inline-flex items-center px-2.5 py-1 rounded-md bg-gray-100 text-xs font-medium text-gray-600">Teams</span>
|
|
<span class="inline-flex items-center px-2.5 py-1 rounded-md bg-gray-100 text-xs font-medium text-gray-600">PagerDuty</span>
|
|
<span class="inline-flex items-center px-2.5 py-1 rounded-md bg-gray-100 text-xs font-medium text-gray-600">+5000</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 3: Workflows -->
|
|
<div class="group relative h-full bg-white rounded-2xl p-8 shadow-sm ring-1 ring-gray-200/60 hover:shadow-lg hover:ring-gray-300 transition-all duration-300">
|
|
<div class="relative h-full">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-violet-50 ring-1 ring-violet-200 mb-6">
|
|
<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="text-lg font-semibold text-gray-900 mb-3">Workflows</h3>
|
|
<p class="text-gray-600 text-sm leading-relaxed">
|
|
Build complex workflows without code. Automate incident workflow, status page updates, and showcase reliability to different stakeholders.
|
|
</p>
|
|
<!-- Decorative element -->
|
|
<div class="mt-6 flex items-center gap-2">
|
|
<div class="flex items-center gap-1 text-xs text-gray-500">
|
|
<span class="h-2 w-2 rounded-full bg-violet-500"></span>
|
|
<span>Trigger</span>
|
|
<svg class="h-4 w-4 text-gray-400" 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>
|
|
<span class="h-2 w-2 rounded-full bg-purple-500"></span>
|
|
<span>Action</span>
|
|
<svg class="h-4 w-4 text-gray-400" 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>
|
|
<span class="h-2 w-2 rounded-full bg-indigo-500"></span>
|
|
<span>Notify</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 4: Custom Criteria -->
|
|
<div class="group relative h-full bg-white rounded-2xl p-8 shadow-sm ring-1 ring-gray-200/60 hover:shadow-lg hover:ring-gray-300 transition-all duration-300">
|
|
<div class="relative h-full">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-amber-50 ring-1 ring-amber-200 mb-6">
|
|
<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="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-3">Custom Criteria</h3>
|
|
<p class="text-gray-600 text-sm leading-relaxed">
|
|
Define custom criteria to monitor for - create an alert if the response time is delayed for 5 mins for example.
|
|
</p>
|
|
<!-- Decorative element -->
|
|
<div class="mt-6 p-3 bg-gray-50 rounded-lg">
|
|
<div class="flex items-center justify-between text-xs">
|
|
<span class="text-gray-500">Response time</span>
|
|
<span class="font-medium text-amber-600">> 500ms</span>
|
|
</div>
|
|
<div class="mt-2 h-1.5 bg-gray-200 rounded-full overflow-hidden">
|
|
<div class="h-full w-3/4 bg-amber-500 rounded-full"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 5: Scheduled Maintenance -->
|
|
<div class="group relative h-full bg-white rounded-2xl p-8 shadow-sm ring-1 ring-gray-200/60 hover:shadow-lg hover:ring-gray-300 transition-all duration-300">
|
|
<div class="relative h-full">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-cyan-50 ring-1 ring-cyan-200 mb-6">
|
|
<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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-3">Scheduled Maintenance</h3>
|
|
<p class="text-gray-600 text-sm leading-relaxed">
|
|
Post scheduled events related to your monitors. Keep your customers, team or other stakeholders updated.
|
|
</p>
|
|
<!-- Decorative element -->
|
|
<div class="mt-6 space-y-2">
|
|
<div class="flex items-center gap-2 text-xs">
|
|
<div class="h-2 w-2 rounded-full bg-cyan-500"></div>
|
|
<span class="text-gray-600">Dec 24, 2:00 AM - 4:00 AM</span>
|
|
</div>
|
|
<div class="flex items-center gap-2 text-xs">
|
|
<div class="h-2 w-2 rounded-full bg-sky-400"></div>
|
|
<span class="text-gray-600">Jan 1, 1:00 AM - 3:00 AM</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 6: Announcements -->
|
|
<div class="group relative h-full bg-white rounded-2xl p-8 shadow-sm ring-1 ring-gray-200/60 hover:shadow-lg hover:ring-gray-300 transition-all duration-300">
|
|
<div class="relative h-full">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-pink-50 ring-1 ring-pink-200 mb-6">
|
|
<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="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-3">Announcements</h3>
|
|
<p class="text-gray-600 text-sm leading-relaxed">
|
|
Post announcements related to your monitors. Keep your customers, team or other stakeholders updated.
|
|
</p>
|
|
<!-- Decorative element -->
|
|
<div class="mt-6 p-3 bg-pink-50 rounded-lg border border-pink-100">
|
|
<div class="flex items-start gap-2">
|
|
<svg class="h-4 w-4 text-pink-500 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
<span class="text-xs text-gray-600">New feature: Custom dashboards now available!</span>
|
|
</div>
|
|
</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-blue-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 notifications in Slack and Microsoft Teams when issues are detected. No context switching required.
|
|
</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">Instant alerts with interactive actions</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>
|
|
Custom routing rules
|
|
</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>
|
|
Rich formatting
|
|
</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>
|
|
|
|
<!-- Illustration - Interactive Slack Notification -->
|
|
<div class="mt-16 lg:mt-0">
|
|
<div class="relative" id="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">incidents</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-blue-400 to-blue-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">S</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Messages area -->
|
|
<div class="bg-[#1a1d21] px-4 py-4" id="slack-messages">
|
|
<!-- Original incident 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">12:34 PM</span>
|
|
</div>
|
|
|
|
<!-- Incident 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
|
|
</span>
|
|
</div>
|
|
<h4 class="text-white font-semibold mt-2">API Server is not responding</h4>
|
|
<p class="text-gray-400 text-sm mt-1">Response time exceeded 30s threshold</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="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
|
|
</svg>
|
|
API Health Check
|
|
</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>
|
|
Started 2m ago
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action buttons -->
|
|
<div class="mt-3 flex flex-wrap gap-2" id="slack-buttons">
|
|
<button onclick="slackAcknowledge()" id="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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
|
|
</svg>
|
|
Acknowledge
|
|
</button>
|
|
<button onclick="slackExecuteOnCall()" id="btn-oncall" 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="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>
|
|
Execute On-Call
|
|
</button>
|
|
<button onclick="slackResolve()" id="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="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">3</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Thread replies container -->
|
|
<div id="slack-thread" class="mt-4 space-y-3"></div>
|
|
|
|
<!-- Thread count indicator -->
|
|
<div id="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="thread-avatars"></div>
|
|
<span id="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 #incidents</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 ackClicked = false;
|
|
let onCallClicked = false;
|
|
let resolveClicked = false;
|
|
let replyCount = 0;
|
|
const avatars = [];
|
|
|
|
function updateThreadIndicator() {
|
|
const indicator = document.getElementById('thread-indicator');
|
|
const countEl = document.getElementById('thread-count');
|
|
const avatarsEl = document.getElementById('thread-avatars');
|
|
|
|
if (replyCount > 0) {
|
|
indicator.classList.remove('hidden');
|
|
indicator.classList.add('flex');
|
|
countEl.textContent = replyCount + (replyCount === 1 ? ' reply' : ' replies');
|
|
avatarsEl.innerHTML = avatars.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 addReaction(emoji) {
|
|
const reactions = document.getElementById('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 addThreadReply(avatar, name, time, message, isBot) {
|
|
const thread = document.getElementById('slack-thread');
|
|
const reply = document.createElement('div');
|
|
reply.className = 'flex items-start gap-2.5 pl-3 border-l-2 border-blue-500/30';
|
|
reply.style.animation = 'fadeSlideIn 0.3s ease-out';
|
|
|
|
const avatarClass = avatar;
|
|
const initial = name.charAt(0);
|
|
|
|
if (!isBot) {
|
|
avatars.push({ bg: `bg-gradient-to-br ${avatar}`, initial: name.charAt(0) });
|
|
} else {
|
|
avatars.push({ bg: '', initial: 'O', isBot: true });
|
|
}
|
|
replyCount++;
|
|
updateThreadIndicator();
|
|
|
|
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.slackAcknowledge = function() {
|
|
if (ackClicked) return;
|
|
ackClicked = true;
|
|
|
|
const btn = document.getElementById('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');
|
|
|
|
addReaction('👍');
|
|
addThreadReply('from-blue-400 to-blue-600', 'Sarah Chen', '12:35 PM', 'Acknowledged! Looking into this now. Checking the API gateway logs.', false);
|
|
|
|
setTimeout(() => {
|
|
addThreadReply('from-green-400 to-green-600', 'OneUptime', '12:35 PM', '✅ Incident acknowledged by <strong class="text-white">Sarah Chen</strong>', true);
|
|
}, 1000);
|
|
}, 800);
|
|
};
|
|
|
|
window.slackExecuteOnCall = function() {
|
|
if (onCallClicked) return;
|
|
onCallClicked = true;
|
|
|
|
const btn = document.getElementById('btn-oncall');
|
|
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>Paging...</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>Team Paged</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');
|
|
|
|
addReaction('🚨');
|
|
addThreadReply('from-green-400 to-green-600', 'OneUptime', '12:36 PM', '📟 On-call policy <strong class="text-white">"Engineering Team"</strong> executed<br/><span class="text-gray-400">→ Notifying: Mike Johnson (primary), Sarah Chen (secondary)</span>', true);
|
|
}, 800);
|
|
};
|
|
|
|
window.slackResolve = function() {
|
|
if (resolveClicked) return;
|
|
resolveClicked = true;
|
|
|
|
const btn = document.getElementById('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');
|
|
|
|
addReaction('🎉');
|
|
addThreadReply('from-purple-400 to-purple-600', 'Mike Johnson', '12:41 PM', 'Found it! Connection pool was exhausted due to a leaked connection in the auth service. Deployed hotfix v2.3.1 🚀', false);
|
|
|
|
setTimeout(() => {
|
|
addThreadReply('from-green-400 to-green-600', 'OneUptime', '12:42 PM', '🎉 Incident resolved by <strong class="text-white">Mike Johnson</strong><br/><span class="text-gray-400">Total downtime: 8 minutes • MTTR: 8m</span>', true);
|
|
}, 1000);
|
|
}, 800);
|
|
};
|
|
})();
|
|
</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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<%- include('./Partials/enterprise-ready') -%>
|
|
<%- include('features-table') -%>
|
|
<%- include('cta') -%>
|
|
</main>
|
|
<%- include('footer') -%>
|
|
<%- include('./Partials/video-script') -%>
|
|
|
|
<script>
|
|
// Grid glow effect that follows cursor
|
|
(function() {
|
|
const heroSection = document.getElementById('monitoring-hero-section');
|
|
const gridGlowEffect = document.getElementById('monitoring-grid-glow');
|
|
|
|
if (!heroSection || !gridGlowEffect) return;
|
|
|
|
let isHovering = false;
|
|
let animationFrame = null;
|
|
let currentX = 0;
|
|
let currentY = 0;
|
|
let targetX = 0;
|
|
let targetY = 0;
|
|
|
|
function lerp(start, end, factor) {
|
|
return start + (end - start) * factor;
|
|
}
|
|
|
|
function animate() {
|
|
if (!isHovering) return;
|
|
|
|
currentX = lerp(currentX, targetX, 0.12);
|
|
currentY = lerp(currentY, targetY, 0.12);
|
|
|
|
gridGlowEffect.style.setProperty('--mouse-x', currentX + 'px');
|
|
gridGlowEffect.style.setProperty('--mouse-y', currentY + 'px');
|
|
|
|
animationFrame = requestAnimationFrame(animate);
|
|
}
|
|
|
|
heroSection.addEventListener('mouseenter', function() {
|
|
isHovering = true;
|
|
gridGlowEffect.style.opacity = '1';
|
|
animate();
|
|
});
|
|
|
|
heroSection.addEventListener('mousemove', function(e) {
|
|
const rect = heroSection.getBoundingClientRect();
|
|
targetX = e.clientX - rect.left;
|
|
targetY = e.clientY - rect.top;
|
|
|
|
if (!isHovering) {
|
|
currentX = targetX;
|
|
currentY = targetY;
|
|
}
|
|
});
|
|
|
|
heroSection.addEventListener('mouseleave', function() {
|
|
isHovering = false;
|
|
gridGlowEffect.style.opacity = '0';
|
|
if (animationFrame) {
|
|
cancelAnimationFrame(animationFrame);
|
|
animationFrame = null;
|
|
}
|
|
});
|
|
})();
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html> |