mirror of
https://github.com/OneUptime/oneuptime.git
synced 2026-04-06 00:32:12 +02:00
Enhance status, traces, and workflows pages with new notification sections and interactive grid effects
- Added a "Subscriber Notifications" section to the status page, detailing real-time incident updates, maintenance announcements, and resolution confirmations. - Introduced a Slack demo with animated message notifications for the status page. - Implemented a grid glow effect that follows the cursor on the status page. - Added a "Trace Alerts" section to the traces page, highlighting alerts for slow requests and error rates, along with a Slack demo for trace notifications. - Enhanced the workflows page with a "Workflow Notifications" section, providing details on execution status, error logs, and custom triggers, along with a Slack-like notification demo. - Implemented grid glow effects for traces and workflows pages, enhancing user interaction. - Added CSS animations for Slack message notifications across all pages.
This commit is contained in:
Nawaz Dhandala
@@ -17,7 +17,12 @@
|
||||
<main id="main-content">
|
||||
|
||||
<!-- Hero Section -->
|
||||
<div class="relative isolate overflow-hidden bg-white">
|
||||
<div class="relative isolate overflow-hidden bg-white" id="ai-agent-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 - violet/pink color -->
|
||||
<div id="ai-agent-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(139, 92, 246, 0.3) 1px, transparent 1px), linear-gradient(to bottom, rgba(139, 92, 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">
|
||||
@@ -538,6 +543,137 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Team Notifications 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">
|
||||
<div class="mx-auto grid max-w-2xl grid-cols-1 gap-x-16 gap-y-16 lg:mx-0 lg:max-w-none lg:grid-cols-2 lg:items-center">
|
||||
<div class="lg:pr-8">
|
||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-violet-50 border border-violet-100 mb-6">
|
||||
<svg class="h-4 w-4 text-violet-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>
|
||||
<span class="text-sm font-medium text-violet-700">AI Notifications</span>
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl lg:text-5xl">
|
||||
Know when AI <span class="text-violet-600">fixes your code</span>
|
||||
</h2>
|
||||
<p class="mt-6 text-lg leading-8 text-gray-600">
|
||||
Get instant notifications when AI Agent detects issues and creates pull requests. Review and merge fixes from Slack, Teams, or your favorite channel.
|
||||
</p>
|
||||
<ul class="mt-8 space-y-4">
|
||||
<li class="flex items-start gap-4">
|
||||
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-violet-50 ring-1 ring-violet-200">
|
||||
<svg class="h-4 w-4 text-violet-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>
|
||||
<div class="font-semibold text-gray-900">PR notifications</div>
|
||||
<div class="text-gray-600">Know when AI creates a pull request for review</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-start gap-4">
|
||||
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-violet-50 ring-1 ring-violet-200">
|
||||
<svg class="h-4 w-4 text-violet-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>
|
||||
<div class="font-semibold text-gray-900">Issue detection</div>
|
||||
<div class="text-gray-600">Get alerts when AI finds errors or performance issues</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-start gap-4">
|
||||
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-violet-50 ring-1 ring-violet-200">
|
||||
<svg class="h-4 w-4 text-violet-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>
|
||||
<div class="font-semibold text-gray-900">Fix summaries</div>
|
||||
<div class="text-gray-600">Detailed explanations of what AI changed and why</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="relative lg:order-last">
|
||||
<div class="relative rounded-2xl bg-gray-100 p-2 ring-1 ring-inset ring-gray-900/10">
|
||||
<!-- Slack-like notification demo -->
|
||||
<div class="bg-white rounded-xl shadow-lg overflow-hidden">
|
||||
<div class="bg-[#4A154B] px-4 py-3 flex items-center gap-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="h-6 w-6 text-white" viewBox="0 0 24 24" fill="currentColor">
|
||||
<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.313zM8.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.312zM18.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.312zM15.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"/>
|
||||
</svg>
|
||||
<span class="text-white font-bold text-lg">Slack</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 space-y-4">
|
||||
<div class="flex items-start gap-3 animate-fadeInSlack" style="animation-delay: 0.2s;">
|
||||
<div class="h-10 w-10 rounded-lg bg-violet-600 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-baseline gap-2">
|
||||
<span class="font-bold text-gray-900">OneUptime AI</span>
|
||||
<span class="text-xs text-gray-500">3:45 PM</span>
|
||||
</div>
|
||||
<div class="mt-1 text-sm text-gray-700">
|
||||
<div class="bg-rose-50 border-l-4 border-rose-500 p-3 rounded-r-lg">
|
||||
<p class="font-medium text-rose-800">Error detected in production</p>
|
||||
<p class="text-rose-600 text-xs mt-1">NullPointerException • auth-service • 156 occurrences</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3 animate-fadeInSlack" style="animation-delay: 0.6s;">
|
||||
<div class="h-10 w-10 rounded-lg bg-violet-600 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-baseline gap-2">
|
||||
<span class="font-bold text-gray-900">OneUptime AI</span>
|
||||
<span class="text-xs text-gray-500">3:47 PM</span>
|
||||
</div>
|
||||
<div class="mt-1 text-sm text-gray-700">
|
||||
<div class="bg-violet-50 border-l-4 border-violet-500 p-3 rounded-r-lg">
|
||||
<p class="font-medium text-violet-800">Analyzing codebase for fix...</p>
|
||||
<p class="text-violet-600 text-xs mt-1">Checking auth-service • 47 files scanned</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3 animate-fadeInSlack" style="animation-delay: 1.0s;">
|
||||
<div class="h-10 w-10 rounded-lg bg-violet-600 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-baseline gap-2">
|
||||
<span class="font-bold text-gray-900">OneUptime AI</span>
|
||||
<span class="text-xs text-gray-500">3:49 PM</span>
|
||||
</div>
|
||||
<div class="mt-1 text-sm text-gray-700">
|
||||
<div class="bg-emerald-50 border-l-4 border-emerald-500 p-3 rounded-r-lg">
|
||||
<p class="font-medium text-emerald-800">Pull request created!</p>
|
||||
<p class="text-emerald-600 text-xs mt-1">fix: Add null check in UserSession.java • PR #1247</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%- include('./Partials/enterprise-ready') -%>
|
||||
<%- include('features-table') -%>
|
||||
<%- include('cta') -%>
|
||||
@@ -545,6 +681,47 @@
|
||||
<%- include('footer') -%>
|
||||
<%- include('./Partials/video-script') -%>
|
||||
|
||||
<style>
|
||||
@keyframes fadeInSlack {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
.animate-fadeInSlack {
|
||||
opacity: 0;
|
||||
animation: fadeInSlack 0.5s ease-out forwards;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// Grid glow effect for AI agent hero section
|
||||
(function() {
|
||||
const heroSection = document.getElementById('ai-agent-hero-section');
|
||||
const gridGlow = document.getElementById('ai-agent-grid-glow');
|
||||
|
||||
if (heroSection && gridGlow) {
|
||||
heroSection.addEventListener('mousemove', (e) => {
|
||||
const rect = heroSection.getBoundingClientRect();
|
||||
const x = e.clientX - rect.left;
|
||||
const y = e.clientY - rect.top;
|
||||
|
||||
gridGlow.style.setProperty('--mouse-x', `${x}px`);
|
||||
gridGlow.style.setProperty('--mouse-y', `${y}px`);
|
||||
gridGlow.style.opacity = '1';
|
||||
});
|
||||
|
||||
heroSection.addEventListener('mouseleave', () => {
|
||||
gridGlow.style.opacity = '0';
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
@@ -17,7 +17,13 @@
|
||||
|
||||
<main id="main-content">
|
||||
<!-- Hero Section -->
|
||||
<div class="relative isolate overflow-hidden bg-white">
|
||||
<div class="relative isolate overflow-hidden bg-white" id="dashboards-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 - indigo color -->
|
||||
<div id="dashboards-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(99, 102, 241, 0.3) 1px, transparent 1px), linear-gradient(to bottom, rgba(99, 102, 241, 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">
|
||||
@@ -576,12 +582,184 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Team Notifications 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">
|
||||
<div class="mx-auto grid max-w-2xl grid-cols-1 gap-x-16 gap-y-16 lg:mx-0 lg:max-w-none lg:grid-cols-2 lg:items-center">
|
||||
<div class="lg:pr-8">
|
||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-indigo-50 border border-indigo-100 mb-6">
|
||||
<svg class="h-4 w-4 text-indigo-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>
|
||||
<span class="text-sm font-medium text-indigo-700">Dashboard Alerts</span>
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl lg:text-5xl">
|
||||
Share insights with <span class="text-indigo-600">your team</span>
|
||||
</h2>
|
||||
<p class="mt-6 text-lg leading-8 text-gray-600">
|
||||
Get notified when metrics cross thresholds. Share dashboard snapshots and reports with your team via Slack, Teams, or email.
|
||||
</p>
|
||||
<ul class="mt-8 space-y-4">
|
||||
<li class="flex items-start gap-4">
|
||||
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-indigo-50 ring-1 ring-indigo-200">
|
||||
<svg class="h-4 w-4 text-indigo-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>
|
||||
<div class="font-semibold text-gray-900">Threshold alerts</div>
|
||||
<div class="text-gray-600">Get notified when metrics exceed defined thresholds</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-start gap-4">
|
||||
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-indigo-50 ring-1 ring-indigo-200">
|
||||
<svg class="h-4 w-4 text-indigo-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>
|
||||
<div class="font-semibold text-gray-900">Scheduled reports</div>
|
||||
<div class="text-gray-600">Send dashboard snapshots on a schedule</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-start gap-4">
|
||||
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-indigo-50 ring-1 ring-indigo-200">
|
||||
<svg class="h-4 w-4 text-indigo-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>
|
||||
<div class="font-semibold text-gray-900">Anomaly detection</div>
|
||||
<div class="text-gray-600">AI-powered alerts for unusual patterns</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="relative lg:order-last">
|
||||
<div class="relative rounded-2xl bg-gray-100 p-2 ring-1 ring-inset ring-gray-900/10">
|
||||
<!-- Slack-like notification demo -->
|
||||
<div class="bg-white rounded-xl shadow-lg overflow-hidden">
|
||||
<div class="bg-[#4A154B] px-4 py-3 flex items-center gap-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="h-6 w-6 text-white" viewBox="0 0 24 24" fill="currentColor">
|
||||
<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.313zM8.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.312zM18.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.312zM15.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"/>
|
||||
</svg>
|
||||
<span class="text-white font-bold text-lg">Slack</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 space-y-4">
|
||||
<div class="flex items-start gap-3 animate-fadeInSlack" style="animation-delay: 0.2s;">
|
||||
<div class="h-10 w-10 rounded-lg bg-indigo-600 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="h-6 w-6 text-white" 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>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-baseline gap-2">
|
||||
<span class="font-bold text-gray-900">OneUptime</span>
|
||||
<span class="text-xs text-gray-500">9:00 AM</span>
|
||||
</div>
|
||||
<div class="mt-1 text-sm text-gray-700">
|
||||
<div class="bg-indigo-50 border-l-4 border-indigo-500 p-3 rounded-r-lg">
|
||||
<p class="font-medium text-indigo-800">Daily Dashboard Report</p>
|
||||
<p class="text-indigo-600 text-xs mt-1">Production Overview • 15 widgets • PDF attached</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3 animate-fadeInSlack" style="animation-delay: 0.6s;">
|
||||
<div class="h-10 w-10 rounded-lg bg-indigo-600 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="h-6 w-6 text-white" 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>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-baseline gap-2">
|
||||
<span class="font-bold text-gray-900">OneUptime</span>
|
||||
<span class="text-xs text-gray-500">10:15 AM</span>
|
||||
</div>
|
||||
<div class="mt-1 text-sm text-gray-700">
|
||||
<div class="bg-amber-50 border-l-4 border-amber-500 p-3 rounded-r-lg">
|
||||
<p class="font-medium text-amber-800">Threshold Alert: CPU Usage</p>
|
||||
<p class="text-amber-600 text-xs mt-1">Production Servers • 85% (threshold: 80%)</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3 animate-fadeInSlack" style="animation-delay: 1.0s;">
|
||||
<div class="h-10 w-10 rounded-lg bg-indigo-600 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="h-6 w-6 text-white" 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>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-baseline gap-2">
|
||||
<span class="font-bold text-gray-900">OneUptime</span>
|
||||
<span class="text-xs text-gray-500">10:30 AM</span>
|
||||
</div>
|
||||
<div class="mt-1 text-sm text-gray-700">
|
||||
<div class="bg-emerald-50 border-l-4 border-emerald-500 p-3 rounded-r-lg">
|
||||
<p class="font-medium text-emerald-800">All metrics normal</p>
|
||||
<p class="text-emerald-600 text-xs mt-1">CPU back to 62% • Auto-resolved</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%- include('./Partials/enterprise-ready') -%>
|
||||
<%- include('features-table') -%>
|
||||
<%- include('cta') -%>
|
||||
</main>
|
||||
|
||||
<%- include('footer') -%>
|
||||
|
||||
<style>
|
||||
@keyframes fadeInSlack {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
.animate-fadeInSlack {
|
||||
opacity: 0;
|
||||
animation: fadeInSlack 0.5s ease-out forwards;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// Grid glow effect for dashboards hero section
|
||||
(function() {
|
||||
const heroSection = document.getElementById('dashboards-hero-section');
|
||||
const gridGlow = document.getElementById('dashboards-grid-glow');
|
||||
|
||||
if (heroSection && gridGlow) {
|
||||
heroSection.addEventListener('mousemove', (e) => {
|
||||
const rect = heroSection.getBoundingClientRect();
|
||||
const x = e.clientX - rect.left;
|
||||
const y = e.clientY - rect.top;
|
||||
|
||||
gridGlow.style.setProperty('--mouse-x', `${x}px`);
|
||||
gridGlow.style.setProperty('--mouse-y', `${y}px`);
|
||||
gridGlow.style.opacity = '1';
|
||||
});
|
||||
|
||||
heroSection.addEventListener('mouseleave', () => {
|
||||
gridGlow.style.opacity = '0';
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
@@ -17,7 +17,13 @@
|
||||
|
||||
<main id="main-content">
|
||||
<!-- Hero Section -->
|
||||
<div class="relative isolate overflow-hidden bg-white">
|
||||
<div class="relative isolate overflow-hidden bg-white" id="exceptions-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 - orange color -->
|
||||
<div id="exceptions-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(249, 115, 22, 0.3) 1px, transparent 1px), linear-gradient(to bottom, rgba(249, 115, 22, 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">
|
||||
@@ -582,12 +588,170 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Team Notifications Section -->
|
||||
<div class="bg-gray-50 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">
|
||||
<div class="relative">
|
||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-orange-50 border border-orange-100 mb-6">
|
||||
<svg class="h-4 w-4 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>
|
||||
<span class="text-sm font-medium text-orange-700">Exception Alerts</span>
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
|
||||
Instant alerts for <span class="text-orange-600">new errors</span>
|
||||
</h2>
|
||||
<p class="mt-6 text-lg text-gray-600">
|
||||
Get notified immediately when new exceptions occur or error rates spike. Alert through Slack, email, PagerDuty, or any webhook.
|
||||
</p>
|
||||
|
||||
<ul class="mt-8 space-y-4">
|
||||
<li class="flex items-start gap-4">
|
||||
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-orange-50 ring-1 ring-orange-200">
|
||||
<svg class="h-4 w-4 text-orange-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>
|
||||
<div class="font-semibold text-gray-900">New error alerts</div>
|
||||
<div class="text-gray-600">Notified when a new error type is detected</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-start gap-4">
|
||||
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-orange-50 ring-1 ring-orange-200">
|
||||
<svg class="h-4 w-4 text-orange-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>
|
||||
<div class="font-semibold text-gray-900">Regression alerts</div>
|
||||
<div class="text-gray-600">Know when previously fixed bugs resurface</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-start gap-4">
|
||||
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-orange-50 ring-1 ring-orange-200">
|
||||
<svg class="h-4 w-4 text-orange-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>
|
||||
<div class="font-semibold text-gray-900">Rate spike alerts</div>
|
||||
<div class="text-gray-600">Alert when error rates exceed normal levels</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Slack Demo -->
|
||||
<div class="mt-12 lg:mt-0 relative">
|
||||
<div class="rounded-2xl bg-white shadow-xl ring-1 ring-gray-200 overflow-hidden">
|
||||
<!-- Slack Header -->
|
||||
<div class="bg-[#3F0F40] px-4 py-3 flex items-center gap-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="h-5 w-5 text-white" viewBox="0 0 24 24" fill="currentColor">
|
||||
<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.313zM8.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.312zM18.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.312zM15.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"/>
|
||||
</svg>
|
||||
<span class="text-white font-semibold text-sm">Slack</span>
|
||||
</div>
|
||||
<div class="flex-1 text-center">
|
||||
<span class="text-white/70 text-sm">#error-alerts</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slack Messages -->
|
||||
<div class="p-4 space-y-4 bg-white">
|
||||
<!-- Message 1 -->
|
||||
<div class="flex gap-3 slack-message-1" style="opacity: 0; animation: fadeInSlack 0.5s ease-out 0.5s forwards;">
|
||||
<div class="h-9 w-9 rounded bg-orange-500 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="h-5 w-5 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" 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 class="flex-1 min-w-0">
|
||||
<div class="flex items-baseline gap-2">
|
||||
<span class="font-semibold text-gray-900 text-sm">OneUptime Exceptions</span>
|
||||
<span class="text-xs text-gray-500">9:15 AM</span>
|
||||
</div>
|
||||
<div class="mt-1 p-3 rounded-lg bg-red-50 border-l-4 border-red-500">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-800">NEW ERROR</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-700 font-medium">TypeError: Cannot read property 'id'</p>
|
||||
<p class="text-xs text-gray-500 mt-1">checkout-service | 47 occurrences</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Message 2 -->
|
||||
<div class="flex gap-3 slack-message-2" style="opacity: 0; animation: fadeInSlack 0.5s ease-out 1.5s forwards;">
|
||||
<div class="h-9 w-9 rounded bg-orange-500 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="h-5 w-5 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-baseline gap-2">
|
||||
<span class="font-semibold text-gray-900 text-sm">OneUptime AI</span>
|
||||
<span class="text-xs text-gray-500">9:15 AM</span>
|
||||
</div>
|
||||
<div class="mt-1 p-3 rounded-lg bg-orange-50 border-l-4 border-orange-500">
|
||||
<p class="text-sm text-gray-700 font-medium">Root cause: Null cart object in handleCheckout()</p>
|
||||
<p class="text-xs text-gray-500 mt-1">Suggested fix: Add null check at line 142</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%- include('./Partials/enterprise-ready') -%>
|
||||
<%- include('features-table') -%>
|
||||
<%- include('cta') -%>
|
||||
</main>
|
||||
|
||||
<%- include('footer') -%>
|
||||
<%- include('./Partials/video-script') -%>
|
||||
|
||||
<style>
|
||||
@keyframes fadeInSlack {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// Grid glow effect for exceptions hero section
|
||||
(function() {
|
||||
const heroSection = document.getElementById('exceptions-hero-section');
|
||||
const gridGlow = document.getElementById('exceptions-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>
|
||||
|
||||
@@ -17,7 +17,12 @@
|
||||
<%- include('nav') -%>
|
||||
<main id="main-content">
|
||||
<!-- Hero Section -->
|
||||
<div class="relative isolate overflow-hidden bg-white">
|
||||
<div class="relative isolate overflow-hidden bg-white" id="incident-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 - rose color -->
|
||||
<div id="incident-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(244, 63, 94, 0.3) 1px, transparent 1px), linear-gradient(to bottom, rgba(244, 63, 94, 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">
|
||||
@@ -647,13 +652,172 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Team Notifications Section -->
|
||||
<div class="bg-gray-50 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">
|
||||
<div class="relative">
|
||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-rose-50 border border-rose-100 mb-6">
|
||||
<svg class="h-4 w-4 text-rose-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>
|
||||
<span class="text-sm font-medium text-rose-700">Team Alerts</span>
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
|
||||
Keep your team <span class="text-rose-600">in the loop</span>
|
||||
</h2>
|
||||
<p class="mt-6 text-lg text-gray-600">
|
||||
Instant notifications ensure your team knows about incidents the moment they happen. Alert through Slack, email, SMS, phone calls, or any webhook.
|
||||
</p>
|
||||
|
||||
<ul class="mt-8 space-y-4">
|
||||
<li class="flex items-start gap-4">
|
||||
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-rose-50 ring-1 ring-rose-200">
|
||||
<svg class="h-4 w-4 text-rose-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>
|
||||
<div class="font-semibold text-gray-900">Instant incident alerts</div>
|
||||
<div class="text-gray-600">Get notified the moment an incident is created</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-start gap-4">
|
||||
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-rose-50 ring-1 ring-rose-200">
|
||||
<svg class="h-4 w-4 text-rose-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>
|
||||
<div class="font-semibold text-gray-900">Escalation notifications</div>
|
||||
<div class="text-gray-600">Automatic escalation if incidents aren't acknowledged</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-start gap-4">
|
||||
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-rose-50 ring-1 ring-rose-200">
|
||||
<svg class="h-4 w-4 text-rose-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>
|
||||
<div class="font-semibold text-gray-900">Resolution updates</div>
|
||||
<div class="text-gray-600">Team notified when incidents are resolved</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Slack Demo -->
|
||||
<div class="mt-12 lg:mt-0 relative">
|
||||
<div class="rounded-2xl bg-white shadow-xl ring-1 ring-gray-200 overflow-hidden">
|
||||
<!-- Slack Header -->
|
||||
<div class="bg-[#3F0F40] px-4 py-3 flex items-center gap-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="h-5 w-5 text-white" viewBox="0 0 24 24" fill="currentColor">
|
||||
<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.313zM8.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.312zM18.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.312zM15.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"/>
|
||||
</svg>
|
||||
<span class="text-white font-semibold text-sm">Slack</span>
|
||||
</div>
|
||||
<div class="flex-1 text-center">
|
||||
<span class="text-white/70 text-sm">#incident-alerts</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slack Messages -->
|
||||
<div class="p-4 space-y-4 bg-white">
|
||||
<!-- Message 1 -->
|
||||
<div class="flex gap-3 slack-message-1" style="opacity: 0; animation: fadeInSlack 0.5s ease-out 0.5s forwards;">
|
||||
<div class="h-9 w-9 rounded bg-rose-500 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="h-5 w-5 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" 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 class="flex-1 min-w-0">
|
||||
<div class="flex items-baseline gap-2">
|
||||
<span class="font-semibold text-gray-900 text-sm">OneUptime</span>
|
||||
<span class="text-xs text-gray-500">2:34 PM</span>
|
||||
</div>
|
||||
<div class="mt-1 p-3 rounded-lg bg-red-50 border-l-4 border-red-500">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-800">P1 INCIDENT</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-700 font-medium">API Server Down</p>
|
||||
<p class="text-xs text-gray-500 mt-1">Production API returning 500 errors</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Message 2 -->
|
||||
<div class="flex gap-3 slack-message-2" style="opacity: 0; animation: fadeInSlack 0.5s ease-out 1.5s forwards;">
|
||||
<div class="h-9 w-9 rounded bg-rose-500 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="h-5 w-5 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-baseline gap-2">
|
||||
<span class="font-semibold text-gray-900 text-sm">OneUptime</span>
|
||||
<span class="text-xs text-gray-500">2:45 PM</span>
|
||||
</div>
|
||||
<div class="mt-1 p-3 rounded-lg bg-emerald-50 border-l-4 border-emerald-500">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-emerald-100 text-emerald-800">RESOLVED</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-700 font-medium">API Server Down</p>
|
||||
<p class="text-xs text-gray-500 mt-1">Issue resolved - MTTR: 11 minutes</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%- include('./Partials/enterprise-ready') -%>
|
||||
<%- include('features-table') -%>
|
||||
<%- include('cta') -%>
|
||||
</main>
|
||||
<%- include('footer') -%>
|
||||
<%- include('./Partials/video-script') -%>
|
||||
|
||||
|
||||
<style>
|
||||
@keyframes fadeInSlack {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// Grid glow effect for incident management hero section
|
||||
(function() {
|
||||
const heroSection = document.getElementById('incident-hero-section');
|
||||
const gridGlow = document.getElementById('incident-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>
|
||||
|
||||
|
||||
@@ -17,7 +17,12 @@
|
||||
|
||||
<main id="main-content">
|
||||
<!-- Hero Section -->
|
||||
<div class="relative isolate overflow-hidden bg-white">
|
||||
<div class="relative isolate overflow-hidden bg-white" id="logs-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 - amber color -->
|
||||
<div id="logs-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(245, 158, 11, 0.3) 1px, transparent 1px), linear-gradient(to bottom, rgba(245, 158, 11, 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">
|
||||
@@ -476,6 +481,126 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Team Notifications Section -->
|
||||
<div class="bg-gray-50 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">
|
||||
<div class="relative">
|
||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-amber-50 border border-amber-100 mb-6">
|
||||
<svg class="h-4 w-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>
|
||||
<span class="text-sm font-medium text-amber-700">Log Alerts</span>
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
|
||||
Get alerted <span class="text-amber-600">in real-time</span>
|
||||
</h2>
|
||||
<p class="mt-6 text-lg text-gray-600">
|
||||
Create alerts based on log patterns and anomalies. Get notified through Slack, email, SMS, or any webhook when critical logs appear.
|
||||
</p>
|
||||
|
||||
<ul class="mt-8 space-y-4">
|
||||
<li class="flex items-start gap-4">
|
||||
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-amber-50 ring-1 ring-amber-200">
|
||||
<svg class="h-4 w-4 text-amber-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>
|
||||
<div class="font-semibold text-gray-900">Pattern-based alerts</div>
|
||||
<div class="text-gray-600">Trigger alerts when specific log patterns are detected</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-start gap-4">
|
||||
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-amber-50 ring-1 ring-amber-200">
|
||||
<svg class="h-4 w-4 text-amber-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>
|
||||
<div class="font-semibold text-gray-900">Anomaly detection</div>
|
||||
<div class="text-gray-600">AI-powered detection of unusual log activity</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-start gap-4">
|
||||
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-amber-50 ring-1 ring-amber-200">
|
||||
<svg class="h-4 w-4 text-amber-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>
|
||||
<div class="font-semibold text-gray-900">Incident creation</div>
|
||||
<div class="text-gray-600">Automatically create incidents from critical log events</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Slack Demo -->
|
||||
<div class="mt-12 lg:mt-0 relative">
|
||||
<div class="rounded-2xl bg-white shadow-xl ring-1 ring-gray-200 overflow-hidden">
|
||||
<!-- Slack Header -->
|
||||
<div class="bg-[#3F0F40] px-4 py-3 flex items-center gap-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="h-5 w-5 text-white" viewBox="0 0 24 24" fill="currentColor">
|
||||
<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.313zM8.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.312zM18.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.312zM15.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"/>
|
||||
</svg>
|
||||
<span class="text-white font-semibold text-sm">Slack</span>
|
||||
</div>
|
||||
<div class="flex-1 text-center">
|
||||
<span class="text-white/70 text-sm">#log-alerts</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slack Messages -->
|
||||
<div class="p-4 space-y-4 bg-white">
|
||||
<!-- Message 1 -->
|
||||
<div class="flex gap-3 slack-message-1" style="opacity: 0; animation: fadeInSlack 0.5s ease-out 0.5s forwards;">
|
||||
<div class="h-9 w-9 rounded bg-amber-500 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="h-5 w-5 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" 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 class="flex-1 min-w-0">
|
||||
<div class="flex items-baseline gap-2">
|
||||
<span class="font-semibold text-gray-900 text-sm">OneUptime Logs</span>
|
||||
<span class="text-xs text-gray-500">4:12 PM</span>
|
||||
</div>
|
||||
<div class="mt-1 p-3 rounded-lg bg-red-50 border-l-4 border-red-500">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-800">ERROR</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-700 font-medium">OutOfMemoryError detected</p>
|
||||
<p class="text-xs text-gray-500 mt-1">api-server | 847 occurrences in last 5 min</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Message 2 -->
|
||||
<div class="flex gap-3 slack-message-2" style="opacity: 0; animation: fadeInSlack 0.5s ease-out 1.5s forwards;">
|
||||
<div class="h-9 w-9 rounded bg-amber-500 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="h-5 w-5 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-baseline gap-2">
|
||||
<span class="font-semibold text-gray-900 text-sm">OneUptime Logs</span>
|
||||
<span class="text-xs text-gray-500">4:12 PM</span>
|
||||
</div>
|
||||
<div class="mt-1 p-3 rounded-lg bg-amber-50 border-l-4 border-amber-500">
|
||||
<p class="text-sm text-gray-700 font-medium">Incident created automatically</p>
|
||||
<p class="text-xs text-gray-500 mt-1">On-call team has been notified</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%- include('./Partials/enterprise-ready') -%>
|
||||
<%- include('features-table') -%>
|
||||
<%- include('cta') -%>
|
||||
@@ -483,6 +608,43 @@
|
||||
<%- include('footer') -%>
|
||||
<%- include('./Partials/video-script') -%>
|
||||
|
||||
<style>
|
||||
@keyframes fadeInSlack {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// Grid glow effect for logs hero section
|
||||
(function() {
|
||||
const heroSection = document.getElementById('logs-hero-section');
|
||||
const gridGlow = document.getElementById('logs-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>
|
||||
@@ -17,7 +17,12 @@
|
||||
|
||||
<main id="main-content">
|
||||
<!-- Hero Section -->
|
||||
<div class="relative isolate overflow-hidden bg-white">
|
||||
<div class="relative isolate overflow-hidden bg-white" id="metrics-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 - purple color -->
|
||||
<div id="metrics-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(147, 51, 234, 0.3) 1px, transparent 1px), linear-gradient(to bottom, rgba(147, 51, 234, 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">
|
||||
@@ -476,6 +481,126 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Team Notifications Section -->
|
||||
<div class="bg-gray-50 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">
|
||||
<div class="relative">
|
||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-purple-50 border border-purple-100 mb-6">
|
||||
<svg class="h-4 w-4 text-purple-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>
|
||||
<span class="text-sm font-medium text-purple-700">Metric Alerts</span>
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
|
||||
Smart alerts for <span class="text-purple-600">every metric</span>
|
||||
</h2>
|
||||
<p class="mt-6 text-lg text-gray-600">
|
||||
Set up threshold-based or anomaly detection alerts. Get notified through Slack, email, SMS, or any webhook when metrics exceed limits.
|
||||
</p>
|
||||
|
||||
<ul class="mt-8 space-y-4">
|
||||
<li class="flex items-start gap-4">
|
||||
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-purple-50 ring-1 ring-purple-200">
|
||||
<svg class="h-4 w-4 text-purple-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>
|
||||
<div class="font-semibold text-gray-900">Threshold alerts</div>
|
||||
<div class="text-gray-600">Alert when metrics exceed defined thresholds</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-start gap-4">
|
||||
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-purple-50 ring-1 ring-purple-200">
|
||||
<svg class="h-4 w-4 text-purple-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>
|
||||
<div class="font-semibold text-gray-900">Anomaly detection</div>
|
||||
<div class="text-gray-600">ML-powered detection of unusual patterns</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-start gap-4">
|
||||
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-purple-50 ring-1 ring-purple-200">
|
||||
<svg class="h-4 w-4 text-purple-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>
|
||||
<div class="font-semibold text-gray-900">PromQL alerts</div>
|
||||
<div class="text-gray-600">Create complex alert rules with PromQL queries</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Slack Demo -->
|
||||
<div class="mt-12 lg:mt-0 relative">
|
||||
<div class="rounded-2xl bg-white shadow-xl ring-1 ring-gray-200 overflow-hidden">
|
||||
<!-- Slack Header -->
|
||||
<div class="bg-[#3F0F40] px-4 py-3 flex items-center gap-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="h-5 w-5 text-white" viewBox="0 0 24 24" fill="currentColor">
|
||||
<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.313zM8.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.312zM18.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.312zM15.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"/>
|
||||
</svg>
|
||||
<span class="text-white font-semibold text-sm">Slack</span>
|
||||
</div>
|
||||
<div class="flex-1 text-center">
|
||||
<span class="text-white/70 text-sm">#metrics-alerts</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slack Messages -->
|
||||
<div class="p-4 space-y-4 bg-white">
|
||||
<!-- Message 1 -->
|
||||
<div class="flex gap-3 slack-message-1" style="opacity: 0; animation: fadeInSlack 0.5s ease-out 0.5s forwards;">
|
||||
<div class="h-9 w-9 rounded bg-purple-500 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="h-5 w-5 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" 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 class="flex-1 min-w-0">
|
||||
<div class="flex items-baseline gap-2">
|
||||
<span class="font-semibold text-gray-900 text-sm">OneUptime Metrics</span>
|
||||
<span class="text-xs text-gray-500">1:23 PM</span>
|
||||
</div>
|
||||
<div class="mt-1 p-3 rounded-lg bg-red-50 border-l-4 border-red-500">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-800">CRITICAL</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-700 font-medium">CPU Usage exceeded 95%</p>
|
||||
<p class="text-xs text-gray-500 mt-1">api-server-prod-01 | Current: 97.2%</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Message 2 -->
|
||||
<div class="flex gap-3 slack-message-2" style="opacity: 0; animation: fadeInSlack 0.5s ease-out 1.5s forwards;">
|
||||
<div class="h-9 w-9 rounded bg-purple-500 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="h-5 w-5 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" 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>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-baseline gap-2">
|
||||
<span class="font-semibold text-gray-900 text-sm">OneUptime Metrics</span>
|
||||
<span class="text-xs text-gray-500">1:23 PM</span>
|
||||
</div>
|
||||
<div class="mt-1 p-3 rounded-lg bg-purple-50 border-l-4 border-purple-500">
|
||||
<p class="text-sm text-gray-700 font-medium">Auto-scaling triggered</p>
|
||||
<p class="text-xs text-gray-500 mt-1">New instances spinning up to handle load</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%- include('./Partials/enterprise-ready') -%>
|
||||
<%- include('features-table') -%>
|
||||
<%- include('cta') -%>
|
||||
@@ -483,6 +608,43 @@
|
||||
|
||||
<%- include('footer') -%>
|
||||
<%- include('./Partials/video-script') -%>
|
||||
|
||||
<style>
|
||||
@keyframes fadeInSlack {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// Grid glow effect for metrics hero section
|
||||
(function() {
|
||||
const heroSection = document.getElementById('metrics-hero-section');
|
||||
const gridGlow = document.getElementById('metrics-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>
|
||||
|
||||
@@ -16,7 +16,13 @@
|
||||
<%- include('nav') -%>
|
||||
<main id="main-content">
|
||||
<!-- Hero Section -->
|
||||
<div class="relative isolate overflow-hidden bg-white">
|
||||
<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">
|
||||
@@ -498,13 +504,167 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Team Notifications Section -->
|
||||
<div class="bg-gray-50 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">
|
||||
<div class="relative">
|
||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-emerald-50 border border-emerald-100 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="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="text-sm font-medium text-emerald-700">Instant Delivery</span>
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
|
||||
Alerts delivered <span class="text-emerald-600">instantly</span>
|
||||
</h2>
|
||||
<p class="mt-6 text-lg text-gray-600">
|
||||
Never miss a critical alert. Get notified through multiple channels simultaneously to ensure the right person responds quickly.
|
||||
</p>
|
||||
|
||||
<ul class="mt-8 space-y-4">
|
||||
<li class="flex items-start gap-4">
|
||||
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-emerald-50 ring-1 ring-emerald-200">
|
||||
<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="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-semibold text-gray-900">Multi-channel alerts</div>
|
||||
<div class="text-gray-600">Phone, SMS, email, Slack, and push notifications</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-start gap-4">
|
||||
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-emerald-50 ring-1 ring-emerald-200">
|
||||
<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="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-semibold text-gray-900">Smart escalations</div>
|
||||
<div class="text-gray-600">Automatic escalation if alerts aren't acknowledged</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-start gap-4">
|
||||
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-emerald-50 ring-1 ring-emerald-200">
|
||||
<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="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-semibold text-gray-900">Acknowledgment tracking</div>
|
||||
<div class="text-gray-600">Know exactly who acknowledged and when</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Slack Demo -->
|
||||
<div class="mt-12 lg:mt-0 relative">
|
||||
<div class="rounded-2xl bg-white shadow-xl ring-1 ring-gray-200 overflow-hidden">
|
||||
<!-- Slack Header -->
|
||||
<div class="bg-[#3F0F40] px-4 py-3 flex items-center gap-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="h-5 w-5 text-white" viewBox="0 0 24 24" fill="currentColor">
|
||||
<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.313zM8.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.312zM18.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.312zM15.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"/>
|
||||
</svg>
|
||||
<span class="text-white font-semibold text-sm">Slack</span>
|
||||
</div>
|
||||
<div class="flex-1 text-center">
|
||||
<span class="text-white/70 text-sm">#on-call-alerts</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slack Messages -->
|
||||
<div class="p-4 space-y-4 bg-white">
|
||||
<!-- Message 1 -->
|
||||
<div class="flex gap-3 slack-message-1" style="opacity: 0; animation: fadeInSlack 0.5s ease-out 0.5s forwards;">
|
||||
<div class="h-9 w-9 rounded bg-emerald-500 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="h-5 w-5 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" 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-baseline gap-2">
|
||||
<span class="font-semibold text-gray-900 text-sm">OneUptime Alert</span>
|
||||
<span class="text-xs text-gray-500">3:42 PM</span>
|
||||
</div>
|
||||
<div class="mt-1 p-3 rounded-lg bg-red-50 border-l-4 border-red-500">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-800">CRITICAL</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-700 font-medium">Database connection timeout</p>
|
||||
<p class="text-xs text-gray-500 mt-1">On-call: @john.doe - Reply with "ack" to acknowledge</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Message 2 -->
|
||||
<div class="flex gap-3 slack-message-2" style="opacity: 0; animation: fadeInSlack 0.5s ease-out 1.5s forwards;">
|
||||
<div class="h-9 w-9 rounded bg-gray-200 flex items-center justify-center flex-shrink-0 text-gray-600 font-semibold text-sm">
|
||||
JD
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-baseline gap-2">
|
||||
<span class="font-semibold text-gray-900 text-sm">John Doe</span>
|
||||
<span class="text-xs text-gray-500">3:43 PM</span>
|
||||
</div>
|
||||
<div class="mt-1 p-3 rounded-lg bg-emerald-50 border-l-4 border-emerald-500">
|
||||
<p class="text-sm text-gray-700">ack - Investigating now</p>
|
||||
<p class="text-xs text-emerald-600 mt-1 font-medium">Alert acknowledged in 47 seconds</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%- include('./Partials/enterprise-ready') -%>
|
||||
<%- include('features-table') -%>
|
||||
<%- include('cta') -%>
|
||||
</main>
|
||||
<%- include('footer') -%>
|
||||
<%- include('./Partials/video-script') -%>
|
||||
|
||||
|
||||
<style>
|
||||
@keyframes fadeInSlack {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
</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>
|
||||
|
||||
|
||||
@@ -21,7 +21,12 @@
|
||||
|
||||
|
||||
<!-- Hero Section -->
|
||||
<div class="relative isolate overflow-hidden bg-white">
|
||||
<div class="relative isolate overflow-hidden bg-white" id="status-page-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="status-page-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">
|
||||
@@ -673,6 +678,129 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Team Notifications Section -->
|
||||
<div class="bg-gray-50 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">
|
||||
<div class="relative">
|
||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-emerald-50 border border-emerald-100 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="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="text-sm font-medium text-emerald-700">Subscriber Notifications</span>
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
|
||||
Keep everyone informed <span class="text-emerald-600">automatically</span>
|
||||
</h2>
|
||||
<p class="mt-6 text-lg text-gray-600">
|
||||
Subscribers receive instant notifications through their preferred channel when status changes. Email, SMS, Slack, webhooks - reach your users wherever they are.
|
||||
</p>
|
||||
|
||||
<ul class="mt-8 space-y-4">
|
||||
<li class="flex items-start gap-4">
|
||||
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-emerald-50 ring-1 ring-emerald-200">
|
||||
<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="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-semibold text-gray-900">Real-time incident updates</div>
|
||||
<div class="text-gray-600">Subscribers notified immediately when incidents are created or updated</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-start gap-4">
|
||||
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-emerald-50 ring-1 ring-emerald-200">
|
||||
<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="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-semibold text-gray-900">Maintenance announcements</div>
|
||||
<div class="text-gray-600">Advance notice before scheduled maintenance windows</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-start gap-4">
|
||||
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-emerald-50 ring-1 ring-emerald-200">
|
||||
<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="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-semibold text-gray-900">Resolution confirmations</div>
|
||||
<div class="text-gray-600">Automatic notifications when issues are resolved</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Slack Demo -->
|
||||
<div class="mt-12 lg:mt-0 relative">
|
||||
<div class="rounded-2xl bg-white shadow-xl ring-1 ring-gray-200 overflow-hidden">
|
||||
<!-- Slack Header -->
|
||||
<div class="bg-[#3F0F40] px-4 py-3 flex items-center gap-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="h-5 w-5 text-white" viewBox="0 0 24 24" fill="currentColor">
|
||||
<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.313zM8.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.312zM18.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.312zM15.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"/>
|
||||
</svg>
|
||||
<span class="text-white font-semibold text-sm">Slack</span>
|
||||
</div>
|
||||
<div class="flex-1 text-center">
|
||||
<span class="text-white/70 text-sm">#status-alerts</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slack Messages -->
|
||||
<div class="p-4 space-y-4 bg-white">
|
||||
<!-- Message 1 -->
|
||||
<div class="flex gap-3 slack-message-1" style="opacity: 0; animation: fadeInSlack 0.5s ease-out 0.5s forwards;">
|
||||
<div class="h-9 w-9 rounded bg-emerald-500 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="h-5 w-5 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-baseline gap-2">
|
||||
<span class="font-semibold text-gray-900 text-sm">OneUptime Status</span>
|
||||
<span class="text-xs text-gray-500">2:34 PM</span>
|
||||
</div>
|
||||
<div class="mt-1 p-3 rounded-lg bg-emerald-50 border-l-4 border-emerald-500">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-emerald-100 text-emerald-800">RESOLVED</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-700 font-medium">API Performance Degradation</p>
|
||||
<p class="text-xs text-gray-500 mt-1">All systems are now operating normally.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Message 2 -->
|
||||
<div class="flex gap-3 slack-message-2" style="opacity: 0; animation: fadeInSlack 0.5s ease-out 1.5s forwards;">
|
||||
<div class="h-9 w-9 rounded bg-emerald-500 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="h-5 w-5 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-baseline gap-2">
|
||||
<span class="font-semibold text-gray-900 text-sm">OneUptime Status</span>
|
||||
<span class="text-xs text-gray-500">2:35 PM</span>
|
||||
</div>
|
||||
<div class="mt-1 p-3 rounded-lg bg-amber-50 border-l-4 border-amber-500">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-amber-100 text-amber-800">SCHEDULED</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-700 font-medium">Database Maintenance Window</p>
|
||||
<p class="text-xs text-gray-500 mt-1">Planned maintenance: Jan 15, 2:00 AM - 4:00 AM UTC</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%- include('./Partials/enterprise-ready') -%>
|
||||
<%- include('features-table') -%>
|
||||
<%- include('cta') -%>
|
||||
@@ -680,6 +808,43 @@
|
||||
<%- include('footer') -%>
|
||||
<%- include('./Partials/video-script') -%>
|
||||
|
||||
<style>
|
||||
@keyframes fadeInSlack {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// Grid glow effect for status page hero section
|
||||
(function() {
|
||||
const heroSection = document.getElementById('status-page-hero-section');
|
||||
const gridGlow = document.getElementById('status-page-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>
|
||||
@@ -17,7 +17,13 @@
|
||||
|
||||
<main id="main-content">
|
||||
<!-- Hero Section -->
|
||||
<div class="relative isolate overflow-hidden bg-white">
|
||||
<div class="relative isolate overflow-hidden bg-white" id="traces-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 - yellow color -->
|
||||
<div id="traces-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(234, 179, 8, 0.3) 1px, transparent 1px), linear-gradient(to bottom, rgba(234, 179, 8, 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">
|
||||
@@ -473,6 +479,126 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Team Notifications Section -->
|
||||
<div class="bg-gray-50 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">
|
||||
<div class="relative">
|
||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-yellow-50 border border-yellow-100 mb-6">
|
||||
<svg class="h-4 w-4 text-yellow-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>
|
||||
<span class="text-sm font-medium text-yellow-700">Trace Alerts</span>
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
|
||||
Alert on <span class="text-yellow-500">slow traces</span>
|
||||
</h2>
|
||||
<p class="mt-6 text-lg text-gray-600">
|
||||
Set up alerts for slow requests, error rates, and latency anomalies. Get notified through Slack, email, or any webhook when performance degrades.
|
||||
</p>
|
||||
|
||||
<ul class="mt-8 space-y-4">
|
||||
<li class="flex items-start gap-4">
|
||||
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-yellow-50 ring-1 ring-yellow-200">
|
||||
<svg class="h-4 w-4 text-yellow-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>
|
||||
<div class="font-semibold text-gray-900">Latency alerts</div>
|
||||
<div class="text-gray-600">Alert when p95/p99 latency exceeds thresholds</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-start gap-4">
|
||||
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-yellow-50 ring-1 ring-yellow-200">
|
||||
<svg class="h-4 w-4 text-yellow-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>
|
||||
<div class="font-semibold text-gray-900">Error rate alerts</div>
|
||||
<div class="text-gray-600">Get notified when error rates spike</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-start gap-4">
|
||||
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-yellow-50 ring-1 ring-yellow-200">
|
||||
<svg class="h-4 w-4 text-yellow-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>
|
||||
<div class="font-semibold text-gray-900">Service health</div>
|
||||
<div class="text-gray-600">Monitor service-level latency and availability</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Slack Demo -->
|
||||
<div class="mt-12 lg:mt-0 relative">
|
||||
<div class="rounded-2xl bg-white shadow-xl ring-1 ring-gray-200 overflow-hidden">
|
||||
<!-- Slack Header -->
|
||||
<div class="bg-[#3F0F40] px-4 py-3 flex items-center gap-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="h-5 w-5 text-white" viewBox="0 0 24 24" fill="currentColor">
|
||||
<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.313zM8.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.312zM18.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.312zM15.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"/>
|
||||
</svg>
|
||||
<span class="text-white font-semibold text-sm">Slack</span>
|
||||
</div>
|
||||
<div class="flex-1 text-center">
|
||||
<span class="text-white/70 text-sm">#trace-alerts</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slack Messages -->
|
||||
<div class="p-4 space-y-4 bg-white">
|
||||
<!-- Message 1 -->
|
||||
<div class="flex gap-3 slack-message-1" style="opacity: 0; animation: fadeInSlack 0.5s ease-out 0.5s forwards;">
|
||||
<div class="h-9 w-9 rounded bg-yellow-500 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="h-5 w-5 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" 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 class="flex-1 min-w-0">
|
||||
<div class="flex items-baseline gap-2">
|
||||
<span class="font-semibold text-gray-900 text-sm">OneUptime Traces</span>
|
||||
<span class="text-xs text-gray-500">11:42 AM</span>
|
||||
</div>
|
||||
<div class="mt-1 p-3 rounded-lg bg-amber-50 border-l-4 border-amber-500">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-amber-100 text-amber-800">SLOW TRACE</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-700 font-medium">GET /api/orders p99 latency: 4.2s</p>
|
||||
<p class="text-xs text-gray-500 mt-1">Threshold: 2s | order-service</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Message 2 -->
|
||||
<div class="flex gap-3 slack-message-2" style="opacity: 0; animation: fadeInSlack 0.5s ease-out 1.5s forwards;">
|
||||
<div class="h-9 w-9 rounded bg-yellow-500 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="h-5 w-5 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-baseline gap-2">
|
||||
<span class="font-semibold text-gray-900 text-sm">OneUptime Traces</span>
|
||||
<span class="text-xs text-gray-500">11:42 AM</span>
|
||||
</div>
|
||||
<div class="mt-1 p-3 rounded-lg bg-yellow-50 border-l-4 border-yellow-500">
|
||||
<p class="text-sm text-gray-700 font-medium">Root cause: db-service slow query</p>
|
||||
<p class="text-xs text-gray-500 mt-1">SELECT * FROM orders WHERE... (3.8s)</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%- include('./Partials/enterprise-ready') -%>
|
||||
<%- include('features-table') -%>
|
||||
<%- include('cta') -%>
|
||||
@@ -480,6 +606,43 @@
|
||||
|
||||
<%- include('footer') -%>
|
||||
<%- include('./Partials/video-script') -%>
|
||||
|
||||
<style>
|
||||
@keyframes fadeInSlack {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// Grid glow effect for traces hero section
|
||||
(function() {
|
||||
const heroSection = document.getElementById('traces-hero-section');
|
||||
const gridGlow = document.getElementById('traces-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>
|
||||
|
||||
@@ -16,7 +16,13 @@
|
||||
<%- include('nav') -%>
|
||||
<main id="main-content">
|
||||
<!-- Hero Section -->
|
||||
<div class="relative isolate overflow-hidden bg-white">
|
||||
<div class="relative isolate overflow-hidden bg-white" id="workflows-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 - sky color -->
|
||||
<div id="workflows-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(14, 165, 233, 0.3) 1px, transparent 1px), linear-gradient(to bottom, rgba(14, 165, 233, 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">
|
||||
@@ -475,13 +481,184 @@
|
||||
|
||||
<%- include('./Partials/security') -%>
|
||||
|
||||
<!-- Team Notifications 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">
|
||||
<div class="mx-auto grid max-w-2xl grid-cols-1 gap-x-16 gap-y-16 lg:mx-0 lg:max-w-none lg:grid-cols-2 lg:items-center">
|
||||
<div class="lg:pr-8">
|
||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-sky-50 border border-sky-100 mb-6">
|
||||
<svg class="h-4 w-4 text-sky-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>
|
||||
<span class="text-sm font-medium text-sky-700">Workflow Notifications</span>
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl lg:text-5xl">
|
||||
Stay informed with <span class="text-sky-600">real-time alerts</span>
|
||||
</h2>
|
||||
<p class="mt-6 text-lg leading-8 text-gray-600">
|
||||
Get notified when workflows complete, fail, or need attention. Integrate with Slack, Microsoft Teams, email, or any channel your team uses.
|
||||
</p>
|
||||
<ul class="mt-8 space-y-4">
|
||||
<li class="flex items-start gap-4">
|
||||
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-sky-50 ring-1 ring-sky-200">
|
||||
<svg class="h-4 w-4 text-sky-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>
|
||||
<div class="font-semibold text-gray-900">Execution status</div>
|
||||
<div class="text-gray-600">Know instantly when workflows succeed or fail</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-start gap-4">
|
||||
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-sky-50 ring-1 ring-sky-200">
|
||||
<svg class="h-4 w-4 text-sky-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>
|
||||
<div class="font-semibold text-gray-900">Error details</div>
|
||||
<div class="text-gray-600">Get error logs and stack traces in your alerts</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-start gap-4">
|
||||
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-sky-50 ring-1 ring-sky-200">
|
||||
<svg class="h-4 w-4 text-sky-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>
|
||||
<div class="font-semibold text-gray-900">Custom triggers</div>
|
||||
<div class="text-gray-600">Send notifications from any step in your workflow</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="relative lg:order-last">
|
||||
<div class="relative rounded-2xl bg-gray-100 p-2 ring-1 ring-inset ring-gray-900/10">
|
||||
<!-- Slack-like notification demo -->
|
||||
<div class="bg-white rounded-xl shadow-lg overflow-hidden">
|
||||
<div class="bg-[#4A154B] px-4 py-3 flex items-center gap-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="h-6 w-6 text-white" viewBox="0 0 24 24" fill="currentColor">
|
||||
<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.313zM8.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.312zM18.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.312zM15.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"/>
|
||||
</svg>
|
||||
<span class="text-white font-bold text-lg">Slack</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 space-y-4">
|
||||
<div class="flex items-start gap-3 animate-fadeInSlack" style="animation-delay: 0.2s;">
|
||||
<div class="h-10 w-10 rounded-lg bg-sky-600 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="h-6 w-6 text-white" 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>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-baseline gap-2">
|
||||
<span class="font-bold text-gray-900">OneUptime</span>
|
||||
<span class="text-xs text-gray-500">2:34 PM</span>
|
||||
</div>
|
||||
<div class="mt-1 text-sm text-gray-700">
|
||||
<div class="bg-emerald-50 border-l-4 border-emerald-500 p-3 rounded-r-lg">
|
||||
<p class="font-medium text-emerald-800">Workflow completed successfully</p>
|
||||
<p class="text-emerald-600 text-xs mt-1">Deploy to Production • 47 steps • 2m 34s</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3 animate-fadeInSlack" style="animation-delay: 0.6s;">
|
||||
<div class="h-10 w-10 rounded-lg bg-sky-600 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="h-6 w-6 text-white" 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>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-baseline gap-2">
|
||||
<span class="font-bold text-gray-900">OneUptime</span>
|
||||
<span class="text-xs text-gray-500">2:35 PM</span>
|
||||
</div>
|
||||
<div class="mt-1 text-sm text-gray-700">
|
||||
<div class="bg-rose-50 border-l-4 border-rose-500 p-3 rounded-r-lg">
|
||||
<p class="font-medium text-rose-800">Workflow failed at step 12</p>
|
||||
<p class="text-rose-600 text-xs mt-1">Backup Database • API timeout error</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3 animate-fadeInSlack" style="animation-delay: 1.0s;">
|
||||
<div class="h-10 w-10 rounded-lg bg-sky-600 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="h-6 w-6 text-white" 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>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-baseline gap-2">
|
||||
<span class="font-bold text-gray-900">OneUptime</span>
|
||||
<span class="text-xs text-gray-500">2:36 PM</span>
|
||||
</div>
|
||||
<div class="mt-1 text-sm text-gray-700">
|
||||
<div class="bg-sky-50 border-l-4 border-sky-500 p-3 rounded-r-lg">
|
||||
<p class="font-medium text-sky-800">Scheduled workflow starting</p>
|
||||
<p class="text-sky-600 text-xs mt-1">Daily Report Generation • 12 steps</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%- include('./Partials/enterprise-ready') -%>
|
||||
<%- include('features-table') -%>
|
||||
<%- include('cta') -%>
|
||||
</main>
|
||||
<%- include('footer') -%>
|
||||
<%- include('./Partials/video-script') -%>
|
||||
|
||||
|
||||
<style>
|
||||
@keyframes fadeInSlack {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
.animate-fadeInSlack {
|
||||
opacity: 0;
|
||||
animation: fadeInSlack 0.5s ease-out forwards;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// Grid glow effect for workflows hero section
|
||||
(function() {
|
||||
const heroSection = document.getElementById('workflows-hero-section');
|
||||
const gridGlow = document.getElementById('workflows-grid-glow');
|
||||
|
||||
if (heroSection && gridGlow) {
|
||||
heroSection.addEventListener('mousemove', (e) => {
|
||||
const rect = heroSection.getBoundingClientRect();
|
||||
const x = e.clientX - rect.left;
|
||||
const y = e.clientY - rect.top;
|
||||
|
||||
gridGlow.style.setProperty('--mouse-x', `${x}px`);
|
||||
gridGlow.style.setProperty('--mouse-y', `${y}px`);
|
||||
gridGlow.style.opacity = '1';
|
||||
});
|
||||
|
||||
heroSection.addEventListener('mouseleave', () => {
|
||||
gridGlow.style.opacity = '0';
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user