mirror of
https://github.com/OneUptime/oneuptime.git
synced 2026-04-06 00:32:12 +02:00
refactor: remove stats section and enhance workflow builder UI with detailed action nodes and logs
This commit is contained in:
Nawaz Dhandala
@@ -72,30 +72,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stats Section -->
|
||||
<div class="bg-gray-50 py-16 sm:py-20">
|
||||
<div class="mx-auto max-w-5xl px-6 lg:px-8">
|
||||
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4 sm:gap-6">
|
||||
<div class="text-center p-6 sm:p-8 rounded-2xl bg-white border border-gray-200/60 shadow-sm transition-all duration-300 hover:shadow-md hover:border-gray-300">
|
||||
<div class="text-3xl sm:text-4xl font-semibold text-gray-900 mb-1">Auto</div>
|
||||
<div class="text-sm text-gray-500">Error Fixes</div>
|
||||
</div>
|
||||
<div class="text-center p-6 sm:p-8 rounded-2xl bg-white border border-gray-200/60 shadow-sm transition-all duration-300 hover:shadow-md hover:border-gray-300">
|
||||
<div class="text-3xl sm:text-4xl font-semibold text-gray-900 mb-1">Ready</div>
|
||||
<div class="text-sm text-gray-500">PRs to Merge</div>
|
||||
</div>
|
||||
<div class="text-center p-6 sm:p-8 rounded-2xl bg-white border border-gray-200/60 shadow-sm transition-all duration-300 hover:shadow-md hover:border-gray-300">
|
||||
<div class="text-3xl sm:text-4xl font-semibold text-gray-900 mb-1">Any</div>
|
||||
<div class="text-sm text-gray-500">LLM Provider</div>
|
||||
</div>
|
||||
<div class="text-center p-6 sm:p-8 rounded-2xl bg-white border border-gray-200/60 shadow-sm transition-all duration-300 hover:shadow-md hover:border-gray-300">
|
||||
<div class="text-3xl sm:text-4xl font-semibold text-gray-900 mb-1">Zero</div>
|
||||
<div class="text-sm text-gray-500">Code Storage</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%- include('logo-roll') -%>
|
||||
|
||||
<!-- How It Works -->
|
||||
@@ -170,6 +146,376 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Why OneUptime Section -->
|
||||
<div class="relative overflow-hidden bg-white py-24 sm:py-32">
|
||||
|
||||
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<!-- Section Header -->
|
||||
<div class="mx-auto max-w-2xl text-center mb-20">
|
||||
<div class="inline-flex items-center gap-2 rounded-full bg-violet-50 px-4 py-1.5 text-sm font-medium text-violet-700 ring-1 ring-inset ring-violet-600/20 mb-6">
|
||||
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.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>
|
||||
Why OneUptime
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl lg:text-5xl">
|
||||
AI-powered debugging that works
|
||||
</h2>
|
||||
<p class="mt-6 text-lg leading-8 text-gray-600">
|
||||
From error detection to pull request - our AI Agent handles the entire debugging workflow automatically.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Feature Blocks -->
|
||||
<div class="space-y-24 lg:space-y-32">
|
||||
<!-- Feature 1: AI Chat Interface -->
|
||||
<div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
|
||||
<div class="relative">
|
||||
<div class="flex items-center gap-4 mb-6">
|
||||
<div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-violet-50 ring-1 ring-violet-200">
|
||||
<svg class="h-7 w-7 text-violet-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
|
||||
</svg>
|
||||
</div>
|
||||
<span class="text-sm font-semibold text-violet-600 uppercase tracking-wide">Conversational AI</span>
|
||||
</div>
|
||||
<h3 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4">Chat with Your Codebase</h3>
|
||||
<p class="text-lg text-gray-600 mb-6">
|
||||
Ask questions about errors, get explanations for issues, and let AI Agent guide you through complex debugging scenarios with natural language conversations.
|
||||
</p>
|
||||
<ul class="space-y-3 mb-8">
|
||||
<li class="flex items-center gap-3 text-gray-600">
|
||||
<svg class="h-5 w-5 text-violet-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
Natural language error explanations
|
||||
</li>
|
||||
<li class="flex items-center gap-3 text-gray-600">
|
||||
<svg class="h-5 w-5 text-violet-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
Context-aware suggestions
|
||||
</li>
|
||||
<li class="flex items-center gap-3 text-gray-600">
|
||||
<svg class="h-5 w-5 text-violet-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
Root cause analysis
|
||||
</li>
|
||||
</ul>
|
||||
<a href="/accounts/register" class="inline-flex items-center gap-1.5 px-4 py-2 bg-gray-900 text-white text-sm font-medium rounded-lg hover:bg-gray-800 transition-colors">
|
||||
Get started
|
||||
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="mt-12 lg:mt-0">
|
||||
<div class="relative">
|
||||
<!-- Subtle background -->
|
||||
<div class="absolute -inset-4 bg-violet-100/50 rounded-3xl blur-2xl"></div>
|
||||
|
||||
<!-- AI Chat Interface Mockup -->
|
||||
<div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
|
||||
<!-- Chat header -->
|
||||
<div class="bg-violet-600 px-4 py-3 flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded-full bg-white/20 flex items-center justify-center">
|
||||
<svg class="w-5 h-5 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>
|
||||
<div class="text-white font-semibold text-sm">OneUptime AI Agent</div>
|
||||
<div class="text-violet-200 text-xs">Analyzing your codebase</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Chat messages -->
|
||||
<div class="p-4 space-y-4 bg-gray-50">
|
||||
<!-- User message -->
|
||||
<div class="flex justify-end">
|
||||
<div class="bg-violet-600 text-white px-4 py-2 rounded-2xl rounded-br-md max-w-[80%] text-sm">
|
||||
Why is my API returning 500 errors?
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- AI response -->
|
||||
<div class="flex justify-start">
|
||||
<div class="bg-white border border-gray-200 px-4 py-3 rounded-2xl rounded-bl-md max-w-[85%] shadow-sm">
|
||||
<div class="text-sm text-gray-700 space-y-2">
|
||||
<p>I found the issue in <span class="font-mono text-violet-600 bg-violet-50 px-1 rounded">auth-service</span>:</p>
|
||||
<div class="bg-gray-50 rounded-lg p-2 font-mono text-xs text-gray-600 border border-gray-100">
|
||||
NullPointerException at UserSession.java:47
|
||||
</div>
|
||||
<p class="text-gray-600">The <span class="font-medium">getUser()</span> method returns null when the session expires. I can create a PR to add null checks.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- AI action -->
|
||||
<div class="flex justify-start">
|
||||
<div class="bg-emerald-50 border border-emerald-200 px-4 py-2 rounded-2xl rounded-bl-md max-w-[85%]">
|
||||
<div class="flex items-center gap-2 text-sm text-emerald-700">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span>PR #1247 created with fix</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Input area -->
|
||||
<div class="px-4 py-3 border-t border-gray-100 bg-white">
|
||||
<div class="flex items-center gap-2 bg-gray-50 rounded-full px-4 py-2 border border-gray-200">
|
||||
<input type="text" placeholder="Ask about an error..." class="flex-1 bg-transparent text-sm text-gray-600 outline-none" disabled>
|
||||
<button class="w-8 h-8 rounded-full bg-violet-600 flex items-center justify-center">
|
||||
<svg class="w-4 h-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Feature 2: Automated Diagnosis -->
|
||||
<div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
|
||||
<div class="relative order-2 lg:order-1 mt-12 lg:mt-0">
|
||||
<div class="relative">
|
||||
<!-- Subtle background -->
|
||||
<div class="absolute -inset-4 bg-violet-100/50 rounded-3xl blur-2xl"></div>
|
||||
|
||||
<!-- Diagnosis Visualization -->
|
||||
<div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
|
||||
<!-- Header -->
|
||||
<div class="bg-gray-50 px-4 py-2.5 flex items-center gap-3 border-b border-gray-100">
|
||||
<div class="flex gap-1.5">
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-red-400"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-yellow-400"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-green-400"></div>
|
||||
</div>
|
||||
<span class="text-xs text-gray-500 font-medium">AI Diagnosis Report</span>
|
||||
</div>
|
||||
|
||||
<!-- Diagnosis content -->
|
||||
<div class="p-4">
|
||||
<!-- Error summary -->
|
||||
<div class="flex items-start gap-3 mb-4">
|
||||
<div class="w-10 h-10 rounded-lg bg-red-100 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-5 h-5 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-gray-900 font-semibold text-sm">Performance Bottleneck Detected</div>
|
||||
<div class="text-gray-500 text-xs mt-0.5">payment-service / processOrder()</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Trace visualization -->
|
||||
<div class="bg-gray-50 rounded-lg p-3 mb-4 border border-gray-100">
|
||||
<div class="text-xs text-gray-500 mb-2 font-medium">Trace Analysis</div>
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-emerald-500"></div>
|
||||
<div class="flex-1 h-2 bg-emerald-200 rounded-full">
|
||||
<div class="h-full bg-emerald-500 rounded-full" style="width: 15%"></div>
|
||||
</div>
|
||||
<span class="text-[10px] text-gray-400 w-12">15ms</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-emerald-500"></div>
|
||||
<div class="flex-1 h-2 bg-emerald-200 rounded-full">
|
||||
<div class="h-full bg-emerald-500 rounded-full" style="width: 8%"></div>
|
||||
</div>
|
||||
<span class="text-[10px] text-gray-400 w-12">8ms</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-red-500"></div>
|
||||
<div class="flex-1 h-2 bg-red-200 rounded-full">
|
||||
<div class="h-full bg-red-500 rounded-full" style="width: 85%"></div>
|
||||
</div>
|
||||
<span class="text-[10px] text-red-500 w-12 font-medium">2.4s</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-emerald-500"></div>
|
||||
<div class="flex-1 h-2 bg-emerald-200 rounded-full">
|
||||
<div class="h-full bg-emerald-500 rounded-full" style="width: 5%"></div>
|
||||
</div>
|
||||
<span class="text-[10px] text-gray-400 w-12">5ms</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Root cause -->
|
||||
<div class="bg-violet-50 rounded-lg p-3 border border-violet-100">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<svg class="w-4 h-4 text-violet-600" 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>
|
||||
<span class="text-xs font-semibold text-violet-700">AI Root Cause Analysis</span>
|
||||
</div>
|
||||
<p class="text-xs text-violet-600">N+1 query in <span class="font-mono bg-violet-100 px-1 rounded">fetchOrderItems()</span>. Missing eager loading for order items relationship.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative order-1 lg:order-2">
|
||||
<div class="flex items-center gap-4 mb-6">
|
||||
<div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-violet-50 ring-1 ring-violet-200">
|
||||
<svg class="h-7 w-7 text-violet-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
|
||||
</svg>
|
||||
</div>
|
||||
<span class="text-sm font-semibold text-violet-600 uppercase tracking-wide">Automated Analysis</span>
|
||||
</div>
|
||||
<h3 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4">Instant Root Cause Analysis</h3>
|
||||
<p class="text-lg text-gray-600 mb-6">
|
||||
AI Agent analyzes traces, logs, and metrics to pinpoint exactly where issues originate. No more hours spent digging through logs - get instant diagnosis with actionable insights.
|
||||
</p>
|
||||
<ul class="space-y-3 mb-8">
|
||||
<li class="flex items-center gap-3 text-gray-600">
|
||||
<svg class="h-5 w-5 text-violet-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
Trace-level performance analysis
|
||||
</li>
|
||||
<li class="flex items-center gap-3 text-gray-600">
|
||||
<svg class="h-5 w-5 text-violet-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
Automatic bottleneck detection
|
||||
</li>
|
||||
<li class="flex items-center gap-3 text-gray-600">
|
||||
<svg class="h-5 w-5 text-violet-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
Correlated log analysis
|
||||
</li>
|
||||
</ul>
|
||||
<a href="/accounts/register" class="inline-flex items-center gap-1.5 px-4 py-2 bg-gray-900 text-white text-sm font-medium rounded-lg hover:bg-gray-800 transition-colors">
|
||||
Get started
|
||||
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Feature 3: Code Fix Suggestions -->
|
||||
<div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
|
||||
<div class="relative">
|
||||
<div class="flex items-center gap-4 mb-6">
|
||||
<div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-violet-50 ring-1 ring-violet-200">
|
||||
<svg class="h-7 w-7 text-violet-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
|
||||
</svg>
|
||||
</div>
|
||||
<span class="text-sm font-semibold text-violet-600 uppercase tracking-wide">Ready-to-Merge</span>
|
||||
</div>
|
||||
<h3 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4">Code Fixes, Not Just Alerts</h3>
|
||||
<p class="text-lg text-gray-600 mb-6">
|
||||
Unlike traditional monitoring tools that just alert you, AI Agent generates actual code fixes with detailed explanations. Review the diff, understand the change, and merge with confidence.
|
||||
</p>
|
||||
<ul class="space-y-3 mb-8">
|
||||
<li class="flex items-center gap-3 text-gray-600">
|
||||
<svg class="h-5 w-5 text-violet-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
Auto-generated pull requests
|
||||
</li>
|
||||
<li class="flex items-center gap-3 text-gray-600">
|
||||
<svg class="h-5 w-5 text-violet-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
Detailed change explanations
|
||||
</li>
|
||||
<li class="flex items-center gap-3 text-gray-600">
|
||||
<svg class="h-5 w-5 text-violet-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
CI/CD integration
|
||||
</li>
|
||||
</ul>
|
||||
<a href="/accounts/register" class="inline-flex items-center gap-1.5 px-4 py-2 bg-gray-900 text-white text-sm font-medium rounded-lg hover:bg-gray-800 transition-colors">
|
||||
Get started
|
||||
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="mt-12 lg:mt-0">
|
||||
<div class="relative">
|
||||
<!-- Subtle background -->
|
||||
<div class="absolute -inset-4 bg-violet-100/50 rounded-3xl blur-2xl"></div>
|
||||
|
||||
<!-- Code Fix Card -->
|
||||
<div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
|
||||
<!-- PR Header -->
|
||||
<div class="bg-gray-50 px-4 py-3 border-b border-gray-100">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded-full bg-violet-100 flex items-center justify-center">
|
||||
<svg class="w-4 h-4 text-violet-600" 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">
|
||||
<div class="text-gray-900 font-semibold text-sm">fix: Add null check in UserSession</div>
|
||||
<div class="text-gray-500 text-xs">#1247 opened by OneUptime AI</div>
|
||||
</div>
|
||||
<span class="px-2 py-1 bg-emerald-100 text-emerald-700 text-xs font-medium rounded-full">Ready to merge</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Diff view -->
|
||||
<div class="p-4">
|
||||
<div class="text-xs text-gray-500 mb-2 font-medium">UserSession.java</div>
|
||||
<div class="bg-gray-900 rounded-lg p-3 font-mono text-xs overflow-hidden">
|
||||
<div class="text-gray-400 mb-2">@@ -45,6 +45,9 @@</div>
|
||||
<div class="text-gray-300"> public User getActiveUser() {</div>
|
||||
<div class="text-gray-300"> Session session = getSession();</div>
|
||||
<div class="bg-red-900/30 text-red-300 -mx-3 px-3">- return session.getUser();</div>
|
||||
<div class="bg-emerald-900/30 text-emerald-300 -mx-3 px-3">+ if (session == null) {</div>
|
||||
<div class="bg-emerald-900/30 text-emerald-300 -mx-3 px-3">+ return null;</div>
|
||||
<div class="bg-emerald-900/30 text-emerald-300 -mx-3 px-3">+ }</div>
|
||||
<div class="bg-emerald-900/30 text-emerald-300 -mx-3 px-3">+ return session.getUser();</div>
|
||||
<div class="text-gray-300"> }</div>
|
||||
</div>
|
||||
|
||||
<!-- Explanation -->
|
||||
<div class="mt-4 bg-violet-50 rounded-lg p-3 border border-violet-100">
|
||||
<div class="flex items-start gap-2">
|
||||
<svg class="w-4 h-4 text-violet-600 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<div class="text-xs text-violet-700">
|
||||
<span class="font-semibold">Why this fix:</span> The session can be null when expired, causing NullPointerException. This adds a null check before accessing session methods.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="mt-4 flex gap-2">
|
||||
<button class="flex-1 px-3 py-2 bg-emerald-600 text-white text-xs font-medium rounded-lg hover:bg-emerald-700 transition-colors">
|
||||
Merge PR
|
||||
</button>
|
||||
<button class="px-3 py-2 bg-gray-100 text-gray-700 text-xs font-medium rounded-lg hover:bg-gray-200 transition-colors">
|
||||
View on GitHub
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Features Grid Section -->
|
||||
<div class="relative bg-white py-24 sm:py-32 overflow-hidden">
|
||||
|
||||
|
||||
@@ -72,30 +72,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stats Section -->
|
||||
<div class="bg-gray-50 py-16 sm:py-20">
|
||||
<div class="mx-auto max-w-5xl px-6 lg:px-8">
|
||||
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4 sm:gap-6">
|
||||
<div class="text-center p-6 sm:p-8 rounded-2xl bg-white border border-gray-200/60 shadow-sm transition-all duration-300 hover:shadow-md hover:border-gray-300">
|
||||
<div class="text-3xl sm:text-4xl font-semibold text-gray-900 mb-1">Visual</div>
|
||||
<div class="text-sm text-gray-500">Drag & Drop</div>
|
||||
</div>
|
||||
<div class="text-center p-6 sm:p-8 rounded-2xl bg-white border border-gray-200/60 shadow-sm transition-all duration-300 hover:shadow-md hover:border-gray-300">
|
||||
<div class="text-3xl sm:text-4xl font-semibold text-gray-900 mb-1">20+</div>
|
||||
<div class="text-sm text-gray-500">Widget Types</div>
|
||||
</div>
|
||||
<div class="text-center p-6 sm:p-8 rounded-2xl bg-white border border-gray-200/60 shadow-sm transition-all duration-300 hover:shadow-md hover:border-gray-300">
|
||||
<div class="text-3xl sm:text-4xl font-semibold text-gray-900 mb-1">Real-time</div>
|
||||
<div class="text-sm text-gray-500">Updates</div>
|
||||
</div>
|
||||
<div class="text-center p-6 sm:p-8 rounded-2xl bg-white border border-gray-200/60 shadow-sm transition-all duration-300 hover:shadow-md hover:border-gray-300">
|
||||
<div class="text-3xl sm:text-4xl font-semibold text-gray-900 mb-1">Share</div>
|
||||
<div class="text-sm text-gray-500">With Anyone</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%- include('logo-roll') -%>
|
||||
|
||||
<!-- How It Works -->
|
||||
@@ -224,8 +200,126 @@
|
||||
</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">
|
||||
<img src="/img/apm-3.png" alt="Drag and drop dashboard builder interface" class="rounded-xl shadow-lg">
|
||||
<div class="relative">
|
||||
<!-- Subtle background -->
|
||||
<div class="absolute -inset-4 bg-blue-100/50 rounded-3xl blur-2xl"></div>
|
||||
|
||||
<!-- Dashboard Grid Builder -->
|
||||
<div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
|
||||
<!-- Browser header -->
|
||||
<div class="bg-gray-50 px-4 py-2.5 flex items-center justify-between border-b border-gray-100">
|
||||
<div class="flex gap-1.5">
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-xs text-gray-500">Edit Mode</span>
|
||||
<div class="w-8 h-4 bg-blue-500 rounded-full relative">
|
||||
<div class="absolute right-0.5 top-0.5 w-3 h-3 bg-white rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dashboard grid content -->
|
||||
<div class="p-4 bg-gray-50">
|
||||
<!-- Toolbar -->
|
||||
<div class="flex items-center gap-2 mb-3 pb-3 border-b border-gray-200">
|
||||
<div class="flex items-center gap-1 px-2 py-1 bg-blue-50 rounded text-xs text-blue-600 border border-blue-200">
|
||||
<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||
</svg>
|
||||
Add Widget
|
||||
</div>
|
||||
<div class="flex items-center gap-1 px-2 py-1 bg-gray-100 rounded text-xs text-gray-600">
|
||||
<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5z" />
|
||||
</svg>
|
||||
Layout
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Grid layout -->
|
||||
<div class="grid grid-cols-4 gap-2">
|
||||
<!-- Large chart widget -->
|
||||
<div class="col-span-2 row-span-2 bg-white rounded-lg border-2 border-dashed border-blue-300 p-3 min-h-[100px] flex flex-col">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="text-xs font-medium text-gray-700">Request Rate</span>
|
||||
<svg class="w-3 h-3 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" />
|
||||
</svg>
|
||||
</div>
|
||||
<!-- Mini chart SVG -->
|
||||
<svg class="w-full flex-1" viewBox="0 0 100 40" preserveAspectRatio="none">
|
||||
<path d="M0 35 Q25 20, 50 25 T100 15" fill="none" stroke="#3b82f6" stroke-width="2"/>
|
||||
<path d="M0 35 Q25 20, 50 25 T100 15 L100 40 L0 40 Z" fill="url(#blueGrad)" opacity="0.2"/>
|
||||
<defs>
|
||||
<linearGradient id="blueGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#3b82f6;stop-opacity:0.3" />
|
||||
<stop offset="100%" style="stop-color:#3b82f6;stop-opacity:0" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Small stat widget -->
|
||||
<div class="bg-white rounded-lg border-2 border-dashed border-gray-200 p-2 flex flex-col items-center justify-center">
|
||||
<span class="text-lg font-bold text-gray-800">99.9%</span>
|
||||
<span class="text-[10px] text-gray-500">Uptime</span>
|
||||
</div>
|
||||
|
||||
<!-- Small stat widget -->
|
||||
<div class="bg-white rounded-lg border-2 border-dashed border-gray-200 p-2 flex flex-col items-center justify-center">
|
||||
<span class="text-lg font-bold text-blue-600">142ms</span>
|
||||
<span class="text-[10px] text-gray-500">Avg Latency</span>
|
||||
</div>
|
||||
|
||||
<!-- Small gauge widget -->
|
||||
<div class="bg-white rounded-lg border-2 border-dashed border-gray-200 p-2 flex flex-col items-center justify-center">
|
||||
<svg class="w-8 h-8" viewBox="0 0 36 36">
|
||||
<path d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="#e5e7eb" stroke-width="3"/>
|
||||
<path d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="#22c55e" stroke-width="3" stroke-dasharray="75, 100"/>
|
||||
</svg>
|
||||
<span class="text-[10px] text-gray-500">CPU</span>
|
||||
</div>
|
||||
|
||||
<!-- Small list widget -->
|
||||
<div class="bg-white rounded-lg border-2 border-dashed border-gray-200 p-2">
|
||||
<div class="space-y-1">
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-green-500"></span>
|
||||
<span class="text-[9px] text-gray-600 truncate">api-prod</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-green-500"></span>
|
||||
<span class="text-[9px] text-gray-600 truncate">web-app</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Wide bar chart -->
|
||||
<div class="col-span-2 bg-white rounded-lg border-2 border-dashed border-gray-200 p-2">
|
||||
<div class="flex items-end justify-around h-8 gap-1">
|
||||
<div class="w-3 bg-blue-200 rounded-t" style="height: 60%"></div>
|
||||
<div class="w-3 bg-blue-300 rounded-t" style="height: 80%"></div>
|
||||
<div class="w-3 bg-blue-400 rounded-t" style="height: 45%"></div>
|
||||
<div class="w-3 bg-blue-500 rounded-t" style="height: 90%"></div>
|
||||
<div class="w-3 bg-blue-600 rounded-t" style="height: 70%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Empty placeholder -->
|
||||
<div class="col-span-2 bg-gray-100 rounded-lg border-2 border-dashed border-gray-300 p-3 flex items-center justify-center">
|
||||
<div class="text-center">
|
||||
<svg class="w-5 h-5 text-gray-400 mx-auto mb-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||
</svg>
|
||||
<span class="text-[10px] text-gray-400">Drop widget here</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -237,8 +331,152 @@
|
||||
<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="relative lg:order-first">
|
||||
<div class="relative rounded-2xl bg-gray-100 p-2 ring-1 ring-inset ring-gray-900/10">
|
||||
<img src="/img/apm-3.png" alt="Rich visualization options" class="rounded-xl shadow-lg">
|
||||
<div class="relative">
|
||||
<!-- Subtle background -->
|
||||
<div class="absolute -inset-4 bg-blue-100/50 rounded-3xl blur-2xl"></div>
|
||||
|
||||
<!-- Chart Type Cards Grid -->
|
||||
<div class="relative max-w-md mx-auto">
|
||||
<div class="grid grid-cols-3 gap-3">
|
||||
<!-- Line Chart -->
|
||||
<div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm">
|
||||
<div class="w-full h-12 mb-3 flex items-end">
|
||||
<svg class="w-full h-full" viewBox="0 0 60 30" preserveAspectRatio="none">
|
||||
<path d="M0 25 L15 18 L30 22 L45 10 L60 15" fill="none" stroke="#3b82f6" stroke-width="2" stroke-linecap="round"/>
|
||||
<circle cx="15" cy="18" r="2" fill="#3b82f6"/>
|
||||
<circle cx="30" cy="22" r="2" fill="#3b82f6"/>
|
||||
<circle cx="45" cy="10" r="2" fill="#3b82f6"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="text-gray-700 text-xs font-medium text-center">Line Chart</div>
|
||||
</div>
|
||||
|
||||
<!-- Bar Chart -->
|
||||
<div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm">
|
||||
<div class="w-full h-12 mb-3 flex items-end justify-around gap-1">
|
||||
<div class="w-2 bg-blue-300 rounded-t" style="height: 50%"></div>
|
||||
<div class="w-2 bg-blue-400 rounded-t" style="height: 80%"></div>
|
||||
<div class="w-2 bg-blue-500 rounded-t" style="height: 60%"></div>
|
||||
<div class="w-2 bg-blue-600 rounded-t" style="height: 90%"></div>
|
||||
<div class="w-2 bg-blue-500 rounded-t" style="height: 70%"></div>
|
||||
</div>
|
||||
<div class="text-gray-700 text-xs font-medium text-center">Bar Chart</div>
|
||||
</div>
|
||||
|
||||
<!-- Area Chart -->
|
||||
<div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm">
|
||||
<div class="w-full h-12 mb-3">
|
||||
<svg class="w-full h-full" viewBox="0 0 60 30" preserveAspectRatio="none">
|
||||
<path d="M0 28 Q15 20, 30 22 T60 12 L60 30 L0 30 Z" fill="url(#areaGrad)" opacity="0.6"/>
|
||||
<path d="M0 28 Q15 20, 30 22 T60 12" fill="none" stroke="#3b82f6" stroke-width="1.5"/>
|
||||
<defs>
|
||||
<linearGradient id="areaGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#3b82f6;stop-opacity:0.4" />
|
||||
<stop offset="100%" style="stop-color:#3b82f6;stop-opacity:0.1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="text-gray-700 text-xs font-medium text-center">Area Chart</div>
|
||||
</div>
|
||||
|
||||
<!-- Gauge -->
|
||||
<div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm">
|
||||
<div class="w-full h-12 mb-3 flex items-center justify-center">
|
||||
<svg class="w-10 h-10" viewBox="0 0 36 36">
|
||||
<path d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="#e5e7eb" stroke-width="3"/>
|
||||
<path d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="#3b82f6" stroke-width="3" stroke-dasharray="72, 100"/>
|
||||
<text x="18" y="21" text-anchor="middle" class="text-[8px] fill-gray-600 font-medium">72%</text>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="text-gray-700 text-xs font-medium text-center">Gauge</div>
|
||||
</div>
|
||||
|
||||
<!-- Pie Chart -->
|
||||
<div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm">
|
||||
<div class="w-full h-12 mb-3 flex items-center justify-center">
|
||||
<svg class="w-10 h-10" viewBox="0 0 32 32">
|
||||
<circle cx="16" cy="16" r="12" fill="#dbeafe"/>
|
||||
<path d="M16 4 A12 12 0 0 1 28 16 L16 16 Z" fill="#3b82f6"/>
|
||||
<path d="M28 16 A12 12 0 0 1 16 28 L16 16 Z" fill="#60a5fa"/>
|
||||
<path d="M16 28 A12 12 0 0 1 4 16 L16 16 Z" fill="#93c5fd"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="text-gray-700 text-xs font-medium text-center">Pie Chart</div>
|
||||
</div>
|
||||
|
||||
<!-- Stat Card -->
|
||||
<div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm">
|
||||
<div class="w-full h-12 mb-3 flex flex-col items-center justify-center">
|
||||
<span class="text-xl font-bold text-blue-600">1.2K</span>
|
||||
<span class="text-[9px] text-green-500 flex items-center gap-0.5">
|
||||
<svg class="w-2 h-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 10l7-7m0 0l7 7m-7-7v18"/>
|
||||
</svg>
|
||||
12%
|
||||
</span>
|
||||
</div>
|
||||
<div class="text-gray-700 text-xs font-medium text-center">Stat Card</div>
|
||||
</div>
|
||||
|
||||
<!-- Table -->
|
||||
<div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm">
|
||||
<div class="w-full h-12 mb-3 flex flex-col justify-center gap-1">
|
||||
<div class="h-2 bg-gray-200 rounded w-full"></div>
|
||||
<div class="h-1.5 bg-blue-100 rounded w-full"></div>
|
||||
<div class="h-1.5 bg-blue-50 rounded w-full"></div>
|
||||
<div class="h-1.5 bg-blue-100 rounded w-full"></div>
|
||||
</div>
|
||||
<div class="text-gray-700 text-xs font-medium text-center">Table</div>
|
||||
</div>
|
||||
|
||||
<!-- Heatmap -->
|
||||
<div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm">
|
||||
<div class="w-full h-12 mb-3 grid grid-cols-5 grid-rows-3 gap-0.5">
|
||||
<div class="bg-blue-100 rounded-sm"></div>
|
||||
<div class="bg-blue-300 rounded-sm"></div>
|
||||
<div class="bg-blue-200 rounded-sm"></div>
|
||||
<div class="bg-blue-500 rounded-sm"></div>
|
||||
<div class="bg-blue-100 rounded-sm"></div>
|
||||
<div class="bg-blue-400 rounded-sm"></div>
|
||||
<div class="bg-blue-200 rounded-sm"></div>
|
||||
<div class="bg-blue-600 rounded-sm"></div>
|
||||
<div class="bg-blue-300 rounded-sm"></div>
|
||||
<div class="bg-blue-100 rounded-sm"></div>
|
||||
<div class="bg-blue-200 rounded-sm"></div>
|
||||
<div class="bg-blue-500 rounded-sm"></div>
|
||||
<div class="bg-blue-300 rounded-sm"></div>
|
||||
<div class="bg-blue-400 rounded-sm"></div>
|
||||
<div class="bg-blue-200 rounded-sm"></div>
|
||||
</div>
|
||||
<div class="text-gray-700 text-xs font-medium text-center">Heatmap</div>
|
||||
</div>
|
||||
|
||||
<!-- Log Stream -->
|
||||
<div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm">
|
||||
<div class="w-full h-12 mb-3 flex flex-col justify-center gap-0.5 font-mono">
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="w-1 h-1 rounded-full bg-green-500"></span>
|
||||
<span class="text-[7px] text-gray-500 truncate">INFO: OK</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="w-1 h-1 rounded-full bg-yellow-500"></span>
|
||||
<span class="text-[7px] text-gray-500 truncate">WARN: slow</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="w-1 h-1 rounded-full bg-green-500"></span>
|
||||
<span class="text-[7px] text-gray-500 truncate">INFO: done</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-gray-700 text-xs font-medium text-center">Log Stream</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer label -->
|
||||
<div class="mt-4 text-center text-xs text-gray-400">
|
||||
+ Scatter plots, sparklines, status grids & more
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:pl-8">
|
||||
@@ -348,8 +586,139 @@
|
||||
</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">
|
||||
<img src="/img/apm-3.png" alt="Multiple data sources on one dashboard" class="rounded-xl shadow-lg">
|
||||
<div class="relative">
|
||||
<!-- Subtle background -->
|
||||
<div class="absolute -inset-4 bg-blue-100/50 rounded-3xl blur-2xl"></div>
|
||||
|
||||
<!-- Data Sources Connection UI -->
|
||||
<div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
|
||||
<!-- Browser header -->
|
||||
<div class="bg-gray-50 px-4 py-2.5 flex items-center gap-3 border-b border-gray-100">
|
||||
<div class="flex gap-1.5">
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
|
||||
</div>
|
||||
<span class="text-xs text-gray-500">Data Sources</span>
|
||||
</div>
|
||||
|
||||
<!-- Content area -->
|
||||
<div class="p-4">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="text-gray-800 text-sm font-medium">Connected Sources</div>
|
||||
<span class="flex items-center gap-1 px-2 py-1 bg-blue-50 rounded text-xs text-blue-600 border border-blue-200">
|
||||
<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||
</svg>
|
||||
Add Source
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Data source cards -->
|
||||
<div class="space-y-2">
|
||||
<!-- Metrics -->
|
||||
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg border border-gray-100">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded-lg bg-blue-100 flex items-center justify-center">
|
||||
<svg class="w-4 h-4 text-blue-600" 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>
|
||||
<div class="text-gray-700 text-sm font-medium">Metrics</div>
|
||||
<div class="text-gray-400 text-xs">OpenTelemetry</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="flex items-center gap-1 text-xs text-green-600">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-green-500"></span>
|
||||
Active
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Logs -->
|
||||
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg border border-gray-100">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded-lg bg-amber-100 flex items-center justify-center">
|
||||
<svg class="w-4 h-4 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-gray-700 text-sm font-medium">Logs</div>
|
||||
<div class="text-gray-400 text-xs">Log Management</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="flex items-center gap-1 text-xs text-green-600">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-green-500"></span>
|
||||
Active
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Traces -->
|
||||
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg border border-gray-100">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded-lg bg-purple-100 flex items-center justify-center">
|
||||
<svg class="w-4 h-4 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-gray-700 text-sm font-medium">Traces</div>
|
||||
<div class="text-gray-400 text-xs">Distributed Tracing</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="flex items-center gap-1 text-xs text-green-600">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-green-500"></span>
|
||||
Active
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Status Page -->
|
||||
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg border border-gray-100">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded-lg bg-green-100 flex items-center justify-center">
|
||||
<svg class="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-gray-700 text-sm font-medium">Status</div>
|
||||
<div class="text-gray-400 text-xs">Status Page Data</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="flex items-center gap-1 text-xs text-green-600">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-green-500"></span>
|
||||
Active
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Monitors -->
|
||||
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg border border-gray-100">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded-lg bg-indigo-100 flex items-center justify-center">
|
||||
<svg class="w-4 h-4 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-gray-700 text-sm font-medium">Monitors</div>
|
||||
<div class="text-gray-400 text-xs">Uptime & Health</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="flex items-center gap-1 text-xs text-green-600">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-green-500"></span>
|
||||
Active
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="mt-3 pt-3 border-t border-gray-100 text-center text-xs text-gray-400">
|
||||
All data unified in one dashboard
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -361,8 +730,104 @@
|
||||
<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="relative lg:order-first">
|
||||
<div class="relative rounded-2xl bg-gray-100 p-2 ring-1 ring-inset ring-gray-900/10">
|
||||
<img src="/img/apm-3.png" alt="Dashboard sharing and collaboration" class="rounded-xl shadow-lg">
|
||||
<div class="relative">
|
||||
<!-- Subtle background -->
|
||||
<div class="absolute -inset-4 bg-blue-100/50 rounded-3xl blur-2xl"></div>
|
||||
|
||||
<!-- Sharing & Permissions UI -->
|
||||
<div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
|
||||
<!-- Browser header -->
|
||||
<div class="bg-gray-50 px-4 py-2.5 flex items-center gap-3 border-b border-gray-100">
|
||||
<div class="flex gap-1.5">
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
|
||||
</div>
|
||||
<span class="text-xs text-gray-500">Share Dashboard</span>
|
||||
</div>
|
||||
|
||||
<!-- Content area -->
|
||||
<div class="p-4">
|
||||
<!-- Share link section -->
|
||||
<div class="mb-4">
|
||||
<div class="text-gray-800 text-sm font-medium mb-2">Share Link</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="flex-1 bg-gray-50 rounded-lg px-3 py-2 text-xs text-gray-500 font-mono truncate border border-gray-200">
|
||||
https://oneuptime.com/dash/prod-overview
|
||||
</div>
|
||||
<button class="px-3 py-2 bg-blue-600 text-white text-xs font-medium rounded-lg hover:bg-blue-700">
|
||||
Copy
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Access control -->
|
||||
<div class="mb-4">
|
||||
<div class="text-gray-800 text-sm font-medium mb-2">Access Control</div>
|
||||
<div class="flex items-center gap-2 p-2 bg-gray-50 rounded-lg border border-gray-200">
|
||||
<svg class="w-4 h-4 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
||||
</svg>
|
||||
<span class="text-xs text-gray-600">Team members only</span>
|
||||
<svg class="w-3 h-3 text-gray-400 ml-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Team members with access -->
|
||||
<div class="mb-4">
|
||||
<div class="text-gray-800 text-sm font-medium mb-2">People with access</div>
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center justify-between p-2 bg-gray-50 rounded-lg">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-7 h-7 rounded-full bg-blue-500 flex items-center justify-center text-white text-xs font-medium">JD</div>
|
||||
<div>
|
||||
<div class="text-gray-700 text-xs font-medium">John Doe</div>
|
||||
<div class="text-gray-400 text-[10px]">john@company.com</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-xs text-gray-500 bg-white px-2 py-0.5 rounded border border-gray-200">Owner</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between p-2 bg-gray-50 rounded-lg">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-7 h-7 rounded-full bg-green-500 flex items-center justify-center text-white text-xs font-medium">SA</div>
|
||||
<div>
|
||||
<div class="text-gray-700 text-xs font-medium">Sarah Adams</div>
|
||||
<div class="text-gray-400 text-[10px]">sarah@company.com</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-xs text-gray-500 bg-white px-2 py-0.5 rounded border border-gray-200">Edit</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between p-2 bg-gray-50 rounded-lg">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-7 h-7 rounded-full bg-purple-500 flex items-center justify-center text-white text-xs font-medium">MK</div>
|
||||
<div>
|
||||
<div class="text-gray-700 text-xs font-medium">Mike Kim</div>
|
||||
<div class="text-gray-400 text-[10px]">mike@company.com</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-xs text-gray-500 bg-white px-2 py-0.5 rounded border border-gray-200">View</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TV Mode toggle -->
|
||||
<div class="flex items-center justify-between p-3 bg-blue-50 rounded-lg border border-blue-100">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
<span class="text-xs font-medium text-blue-700">TV Mode</span>
|
||||
</div>
|
||||
<div class="w-8 h-4 bg-blue-500 rounded-full relative">
|
||||
<div class="absolute right-0.5 top-0.5 w-3 h-3 bg-white rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:pl-8">
|
||||
|
||||
@@ -72,30 +72,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stats Section -->
|
||||
<div class="bg-gray-50 py-16 sm:py-20">
|
||||
<div class="mx-auto max-w-5xl px-6 lg:px-8">
|
||||
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4 sm:gap-6">
|
||||
<div class="text-center p-6 sm:p-8 rounded-2xl bg-white border border-gray-200/60 shadow-sm transition-all duration-300 hover:shadow-md hover:border-gray-300">
|
||||
<div class="text-3xl sm:text-4xl font-semibold text-gray-900 mb-1">Full</div>
|
||||
<div class="text-sm text-gray-500">Stack Traces</div>
|
||||
</div>
|
||||
<div class="text-center p-6 sm:p-8 rounded-2xl bg-white border border-gray-200/60 shadow-sm transition-all duration-300 hover:shadow-md hover:border-gray-300">
|
||||
<div class="text-3xl sm:text-4xl font-semibold text-gray-900 mb-1">Smart</div>
|
||||
<div class="text-sm text-gray-500">Grouping</div>
|
||||
</div>
|
||||
<div class="text-center p-6 sm:p-8 rounded-2xl bg-white border border-gray-200/60 shadow-sm transition-all duration-300 hover:shadow-md hover:border-gray-300">
|
||||
<div class="text-3xl sm:text-4xl font-semibold text-gray-900 mb-1">AI</div>
|
||||
<div class="text-sm text-gray-500">Analysis</div>
|
||||
</div>
|
||||
<div class="text-center p-6 sm:p-8 rounded-2xl bg-white border border-gray-200/60 shadow-sm transition-all duration-300 hover:shadow-md hover:border-gray-300">
|
||||
<div class="text-3xl sm:text-4xl font-semibold text-gray-900 mb-1">Instant</div>
|
||||
<div class="text-sm text-gray-500">Alerts</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%- include('logo-roll') -%>
|
||||
|
||||
<!-- How It Works -->
|
||||
@@ -224,8 +200,88 @@
|
||||
</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">
|
||||
<img src="/img/apm-3.png" alt="Full stack trace view showing error location and context" class="rounded-xl shadow-lg">
|
||||
<div class="relative">
|
||||
<!-- Subtle background -->
|
||||
<div class="absolute -inset-4 bg-rose-100/50 rounded-3xl blur-2xl"></div>
|
||||
|
||||
<!-- Stack Trace Viewer -->
|
||||
<div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
|
||||
<!-- Browser header -->
|
||||
<div class="bg-gray-900 px-4 py-2.5 flex items-center gap-3">
|
||||
<div class="flex gap-1.5">
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
|
||||
</div>
|
||||
<div class="flex-1 text-center">
|
||||
<span class="text-gray-400 text-xs font-mono">Stack Trace</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stack trace content -->
|
||||
<div class="p-4 bg-gray-50">
|
||||
<!-- Error header -->
|
||||
<div class="flex items-center gap-2 mb-3 p-2 bg-red-50 rounded-lg border border-red-200">
|
||||
<svg class="w-4 h-4 text-red-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
||||
</svg>
|
||||
<span class="text-red-700 text-xs font-medium">TypeError: Cannot read property 'id' of undefined</span>
|
||||
</div>
|
||||
|
||||
<!-- Stack frames -->
|
||||
<div class="space-y-1 font-mono text-xs">
|
||||
<!-- Frame 1 - highlighted -->
|
||||
<div class="p-2 bg-rose-100 rounded border-l-2 border-rose-500">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-rose-600 font-medium">at</span>
|
||||
<span class="text-gray-800">getUser</span>
|
||||
<span class="text-gray-400">(</span>
|
||||
<span class="text-rose-600">user.service.ts:42</span>
|
||||
<span class="text-gray-400">)</span>
|
||||
</div>
|
||||
<!-- Code preview -->
|
||||
<div class="mt-2 p-2 bg-white rounded text-[10px] border border-gray-200">
|
||||
<div class="text-gray-400">41 | const user = await db.findUser(id);</div>
|
||||
<div class="text-rose-600 bg-rose-50 -mx-2 px-2">42 | return user.id; // Error here</div>
|
||||
<div class="text-gray-400">43 |}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Frame 2 -->
|
||||
<div class="p-2 bg-white rounded border border-gray-100">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-gray-500">at</span>
|
||||
<span class="text-gray-700">handleRequest</span>
|
||||
<span class="text-gray-400">(api.controller.ts:128)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Frame 3 -->
|
||||
<div class="p-2 bg-white rounded border border-gray-100">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-gray-500">at</span>
|
||||
<span class="text-gray-700">processMiddleware</span>
|
||||
<span class="text-gray-400">(middleware.ts:56)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Frame 4 -->
|
||||
<div class="p-2 bg-white rounded border border-gray-100 opacity-60">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-gray-500">at</span>
|
||||
<span class="text-gray-700">Layer.handle</span>
|
||||
<span class="text-gray-400">(express/router.js:174)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="mt-3 pt-3 border-t border-gray-200 flex items-center justify-between text-xs text-gray-400">
|
||||
<span>Node.js v18.17.0</span>
|
||||
<span class="text-rose-500 font-medium">4 frames</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -237,8 +293,100 @@
|
||||
<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="relative lg:order-first">
|
||||
<div class="relative rounded-2xl bg-gray-100 p-2 ring-1 ring-inset ring-gray-900/10">
|
||||
<img src="/img/apm-3.png" alt="Intelligent error grouping dashboard" class="rounded-xl shadow-lg">
|
||||
<div class="relative">
|
||||
<!-- Subtle background -->
|
||||
<div class="absolute -inset-4 bg-rose-100/50 rounded-3xl blur-2xl"></div>
|
||||
|
||||
<!-- Error Grouping Dashboard -->
|
||||
<div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
|
||||
<!-- Browser header -->
|
||||
<div class="bg-gray-50 px-4 py-2.5 flex items-center gap-3 border-b border-gray-100">
|
||||
<div class="flex gap-1.5">
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
|
||||
</div>
|
||||
<div class="flex-1 text-center">
|
||||
<span class="text-gray-500 text-xs">Error Groups</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content area -->
|
||||
<div class="p-4">
|
||||
<!-- Header with stats -->
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="text-sm font-medium text-gray-700">Grouped Errors</div>
|
||||
<div class="flex items-center gap-2 text-xs text-gray-500">
|
||||
<span class="text-rose-600 font-medium">3 unique</span>
|
||||
<span class="text-gray-300">|</span>
|
||||
<span>847 total</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Error groups list -->
|
||||
<div class="space-y-2">
|
||||
<!-- Error group 1 -->
|
||||
<div class="p-3 bg-rose-50 rounded-lg border border-rose-200">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-rose-100 text-rose-700">TypeError</span>
|
||||
<span class="text-[10px] text-gray-400">user.service.ts</span>
|
||||
</div>
|
||||
<div class="text-xs text-gray-700 font-medium truncate">Cannot read property 'id' of undefined</div>
|
||||
<div class="text-[10px] text-gray-400 mt-1">First seen 2h ago</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-end gap-1">
|
||||
<span class="inline-flex items-center justify-center min-w-[32px] px-2 py-0.5 rounded-full text-xs font-bold bg-rose-500 text-white">423</span>
|
||||
<span class="text-[10px] text-gray-400">12 users</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Error group 2 -->
|
||||
<div class="p-3 bg-gray-50 rounded-lg border border-gray-200">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-amber-100 text-amber-700">NetworkError</span>
|
||||
<span class="text-[10px] text-gray-400">api.client.ts</span>
|
||||
</div>
|
||||
<div class="text-xs text-gray-700 font-medium truncate">Request timeout after 30000ms</div>
|
||||
<div class="text-[10px] text-gray-400 mt-1">First seen 1d ago</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-end gap-1">
|
||||
<span class="inline-flex items-center justify-center min-w-[32px] px-2 py-0.5 rounded-full text-xs font-bold bg-gray-400 text-white">312</span>
|
||||
<span class="text-[10px] text-gray-400">8 users</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Error group 3 -->
|
||||
<div class="p-3 bg-gray-50 rounded-lg border border-gray-200">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-red-100 text-red-700">ReferenceError</span>
|
||||
<span class="text-[10px] text-gray-400">checkout.ts</span>
|
||||
</div>
|
||||
<div class="text-xs text-gray-700 font-medium truncate">cart is not defined</div>
|
||||
<div class="text-[10px] text-gray-400 mt-1">First seen 3d ago</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-end gap-1">
|
||||
<span class="inline-flex items-center justify-center min-w-[32px] px-2 py-0.5 rounded-full text-xs font-bold bg-gray-400 text-white">112</span>
|
||||
<span class="text-[10px] text-gray-400">5 users</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="mt-3 pt-3 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400">
|
||||
<span>Fingerprint-based grouping</span>
|
||||
<span class="text-rose-500 font-medium">View all</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:pl-8">
|
||||
@@ -356,8 +504,86 @@
|
||||
</div>
|
||||
</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">
|
||||
<img src="/img/copilot.png" alt="AI-powered root cause analysis" class="rounded-xl shadow-lg">
|
||||
<div class="relative">
|
||||
<!-- Subtle background -->
|
||||
<div class="absolute -inset-4 bg-rose-100/50 rounded-3xl blur-2xl"></div>
|
||||
|
||||
<!-- AI Analysis Card -->
|
||||
<div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
|
||||
<!-- Header -->
|
||||
<div class="bg-gradient-to-r from-rose-500 to-rose-600 px-4 py-3 flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded-lg bg-white/20 flex items-center justify-center">
|
||||
<svg class="w-5 h-5 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>
|
||||
<div class="text-white font-medium text-sm">AI Root Cause Analysis</div>
|
||||
<div class="text-white/70 text-xs">Powered by OneUptime AI</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content area -->
|
||||
<div class="p-4">
|
||||
<!-- Error being analyzed -->
|
||||
<div class="mb-4 p-2 bg-red-50 rounded-lg border border-red-200">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-red-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
||||
</svg>
|
||||
<span class="text-red-700 text-xs font-medium">TypeError: Cannot read property 'id'</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Analysis sections -->
|
||||
<div class="space-y-3">
|
||||
<!-- Root Cause -->
|
||||
<div class="p-3 bg-rose-50 rounded-lg border border-rose-200">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<svg class="w-4 h-4 text-rose-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
<span class="text-xs font-semibold text-rose-700">Root Cause</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-700 leading-relaxed">The <code class="bg-rose-100 px-1 rounded text-rose-700">findUser()</code> function returns null when user is not found, but the code assumes it always returns a user object.</p>
|
||||
</div>
|
||||
|
||||
<!-- Suggested Fix -->
|
||||
<div class="p-3 bg-emerald-50 rounded-lg border border-emerald-200">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<svg class="w-4 h-4 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<span class="text-xs font-semibold text-emerald-700">Suggested Fix</span>
|
||||
</div>
|
||||
<div class="bg-white rounded p-2 font-mono text-[10px] border border-emerald-100">
|
||||
<div class="text-gray-500">// Add null check before accessing</div>
|
||||
<div class="text-gray-700">if (!user) throw new UserNotFoundError();</div>
|
||||
<div class="text-gray-700">return user.id;</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Impact -->
|
||||
<div class="flex items-center justify-between p-2 bg-gray-50 rounded-lg border border-gray-200">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-2 h-2 rounded-full bg-rose-500"></span>
|
||||
<span class="text-xs text-gray-600">Impact: High</span>
|
||||
</div>
|
||||
<span class="text-xs text-gray-500">423 occurrences</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action button -->
|
||||
<div class="mt-4 flex items-center gap-2">
|
||||
<button class="flex-1 px-3 py-2 bg-rose-500 text-white text-xs font-medium rounded-lg hover:bg-rose-600 transition-colors">
|
||||
Create Fix PR
|
||||
</button>
|
||||
<button class="px-3 py-2 bg-gray-100 text-gray-700 text-xs font-medium rounded-lg hover:bg-gray-200 transition-colors">
|
||||
View Details
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -369,8 +595,105 @@
|
||||
<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="relative lg:order-first">
|
||||
<div class="relative rounded-2xl bg-gray-100 p-2 ring-1 ring-inset ring-gray-900/10">
|
||||
<img src="/img/apm-3.png" alt="Release tracking and deployment correlation" class="rounded-xl shadow-lg">
|
||||
<div class="relative">
|
||||
<!-- Subtle background -->
|
||||
<div class="absolute -inset-4 bg-rose-100/50 rounded-3xl blur-2xl"></div>
|
||||
|
||||
<!-- Release Tracking Dashboard -->
|
||||
<div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
|
||||
<!-- Browser header -->
|
||||
<div class="bg-gray-50 px-4 py-2.5 flex items-center gap-3 border-b border-gray-100">
|
||||
<div class="flex gap-1.5">
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
|
||||
</div>
|
||||
<div class="flex-1 text-center">
|
||||
<span class="text-gray-500 text-xs">Releases</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content area -->
|
||||
<div class="p-4">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="text-sm font-medium text-gray-700">Release History</div>
|
||||
<span class="text-xs text-gray-400">Last 7 days</span>
|
||||
</div>
|
||||
|
||||
<!-- Release cards -->
|
||||
<div class="space-y-3">
|
||||
<!-- Release 1 - Current with error spike -->
|
||||
<div class="p-3 bg-rose-50 rounded-lg border border-rose-200">
|
||||
<div class="flex items-start justify-between mb-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-medium bg-rose-500 text-white">Current</span>
|
||||
<span class="text-xs font-mono text-gray-700 font-medium">v2.4.1</span>
|
||||
</div>
|
||||
<span class="text-[10px] text-gray-400">2h ago</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-xs text-gray-600 mb-2">
|
||||
<svg class="w-3 h-3 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
||||
</svg>
|
||||
<span>john@company.com</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 p-2 bg-white rounded border border-rose-200">
|
||||
<svg class="w-4 h-4 text-rose-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
|
||||
</svg>
|
||||
<span class="text-xs text-rose-600 font-medium">+423 new errors since deploy</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Release 2 - Stable -->
|
||||
<div class="p-3 bg-gray-50 rounded-lg border border-gray-200">
|
||||
<div class="flex items-start justify-between mb-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-medium bg-emerald-100 text-emerald-700">Stable</span>
|
||||
<span class="text-xs font-mono text-gray-700 font-medium">v2.4.0</span>
|
||||
</div>
|
||||
<span class="text-[10px] text-gray-400">3d ago</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-xs text-gray-600 mb-2">
|
||||
<svg class="w-3 h-3 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
||||
</svg>
|
||||
<span>jane@company.com</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 p-2 bg-white rounded border border-gray-200">
|
||||
<svg class="w-4 h-4 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<span class="text-xs text-emerald-600 font-medium">0 new errors during release</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Release 3 - Fixed -->
|
||||
<div class="p-3 bg-gray-50 rounded-lg border border-gray-200">
|
||||
<div class="flex items-start justify-between mb-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-medium bg-gray-200 text-gray-600">Fixed</span>
|
||||
<span class="text-xs font-mono text-gray-700 font-medium">v2.3.9</span>
|
||||
</div>
|
||||
<span class="text-[10px] text-gray-400">5d ago</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-xs text-gray-500">
|
||||
<svg class="w-3 h-3 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<span>Resolved 2 regressions</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="mt-3 pt-3 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400">
|
||||
<span>Auto-tracked from CI/CD</span>
|
||||
<span class="text-rose-500 font-medium">Rollback?</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:pl-8">
|
||||
|
||||
@@ -73,30 +73,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stats Section -->
|
||||
<div class="bg-gray-50 py-16 sm:py-20">
|
||||
<div class="mx-auto max-w-5xl px-6 lg:px-8">
|
||||
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4 sm:gap-6">
|
||||
<div class="text-center p-6 sm:p-8 rounded-2xl bg-white border border-gray-200/60 shadow-sm transition-all duration-300 hover:shadow-md hover:border-gray-300">
|
||||
<div class="text-3xl sm:text-4xl font-semibold text-gray-900 mb-1"><5s</div>
|
||||
<div class="text-sm text-gray-500">Detection Time</div>
|
||||
</div>
|
||||
<div class="text-center p-6 sm:p-8 rounded-2xl bg-white border border-gray-200/60 shadow-sm transition-all duration-300 hover:shadow-md hover:border-gray-300">
|
||||
<div class="text-3xl sm:text-4xl font-semibold text-gray-900 mb-1">73%</div>
|
||||
<div class="text-sm text-gray-500">Faster MTTR</div>
|
||||
</div>
|
||||
<div class="text-center p-6 sm:p-8 rounded-2xl bg-white border border-gray-200/60 shadow-sm transition-all duration-300 hover:shadow-md hover:border-gray-300">
|
||||
<div class="text-3xl sm:text-4xl font-semibold text-gray-900 mb-1">∞</div>
|
||||
<div class="text-sm text-gray-500">Team Members</div>
|
||||
</div>
|
||||
<div class="text-center p-6 sm:p-8 rounded-2xl bg-white border border-gray-200/60 shadow-sm transition-all duration-300 hover:shadow-md hover:border-gray-300">
|
||||
<div class="text-3xl sm:text-4xl font-semibold text-gray-900 mb-1">Instant</div>
|
||||
<div class="text-sm text-gray-500">Alerts</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%- include('logo-roll') -%>
|
||||
|
||||
<!-- How It Works Section -->
|
||||
@@ -237,24 +213,54 @@
|
||||
</div>
|
||||
<div class="mt-12 lg:mt-0">
|
||||
<div class="relative">
|
||||
<div class="relative rounded-2xl bg-gray-100 p-2 ring-1 ring-gray-200/80 shadow-lg">
|
||||
<img src="/img/incidents.png" alt="Incident dashboard" class="rounded-xl w-full">
|
||||
</div>
|
||||
<!-- Floating card -->
|
||||
<div class="absolute -bottom-6 -left-6 hidden lg:block">
|
||||
<div class="bg-white rounded-xl shadow-xl p-4 ring-1 ring-gray-100">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-red-100">
|
||||
<svg class="h-5 w-5 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<!-- Subtle background -->
|
||||
<div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
|
||||
|
||||
<!-- Incident Alert Card -->
|
||||
<div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
|
||||
<!-- Header -->
|
||||
<div class="bg-red-50 px-4 py-3 border-b border-red-100">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-red-500 animate-pulse"></div>
|
||||
<span class="text-red-800 text-sm font-medium">New Incident Detected</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-xs text-gray-500">Detection Time</div>
|
||||
<div class="text-lg font-bold text-gray-900"><5 sec</div>
|
||||
<span class="text-red-600 text-xs">Just now</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="p-4">
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
<span class="px-2 py-0.5 bg-red-100 text-red-700 rounded text-xs font-medium">P1 - Critical</span>
|
||||
<span class="px-2 py-0.5 bg-gray-100 text-gray-600 rounded text-xs">API</span>
|
||||
</div>
|
||||
<h4 class="text-gray-900 font-semibold mb-2">API Response Time Exceeded Threshold</h4>
|
||||
<p class="text-gray-600 text-sm mb-4">Response time increased from 120ms to 3500ms in the last 2 minutes.</p>
|
||||
|
||||
<!-- Alert details -->
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center justify-between p-2 bg-gray-50 rounded">
|
||||
<span class="text-gray-500 text-xs">Monitor</span>
|
||||
<span class="text-gray-700 text-xs font-medium">api.example.com/health</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between p-2 bg-gray-50 rounded">
|
||||
<span class="text-gray-500 text-xs">Triggered by</span>
|
||||
<span class="text-gray-700 text-xs font-medium">Response Time > 2000ms</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer with action -->
|
||||
<div class="px-4 py-3 bg-gray-50 border-t border-gray-100 flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-6 h-6 rounded-full bg-rose-100 flex items-center justify-center">
|
||||
<span class="text-xs font-medium text-rose-600">JD</span>
|
||||
</div>
|
||||
<span class="text-xs text-gray-500">Assigned to John Doe</span>
|
||||
</div>
|
||||
<span class="px-2 py-1 bg-red-600 text-white rounded text-xs font-medium">Acknowledge</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -264,26 +270,81 @@
|
||||
<div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
|
||||
<div class="relative order-2 lg:order-1 mt-12 lg:mt-0">
|
||||
<div class="relative">
|
||||
<div class="relative rounded-2xl bg-gray-100 p-2 ring-1 ring-gray-200/80 shadow-lg">
|
||||
<img src="/img/incident-severity.png" alt="Incident severity" class="rounded-xl w-full">
|
||||
</div>
|
||||
<!-- Floating card -->
|
||||
<div class="absolute -bottom-6 -right-6 hidden lg:block">
|
||||
<div class="bg-white rounded-xl shadow-xl p-4 ring-1 ring-gray-100">
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="h-2 w-2 rounded-full bg-red-500"></span>
|
||||
<span class="text-xs font-medium text-gray-600">P1 - Critical</span>
|
||||
<!-- Subtle background -->
|
||||
<div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
|
||||
|
||||
<!-- Severity Levels Card -->
|
||||
<div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
|
||||
<!-- Header -->
|
||||
<div class="bg-gray-50 px-4 py-3 border-b border-gray-100">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-gray-800 text-sm font-medium">Incident Severity Levels</span>
|
||||
<span class="text-gray-400 text-xs">Customizable</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Severity list -->
|
||||
<div class="p-4 space-y-3">
|
||||
<!-- P1 Critical -->
|
||||
<div class="flex items-center justify-between p-3 bg-red-50 rounded-lg border border-red-100">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-3 h-3 rounded-full bg-red-500"></div>
|
||||
<div>
|
||||
<div class="text-gray-900 text-sm font-medium">P1 - Critical</div>
|
||||
<div class="text-gray-500 text-xs">Service completely down</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="h-2 w-2 rounded-full bg-orange-500"></span>
|
||||
<span class="text-xs font-medium text-gray-600">P2 - High</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="h-2 w-2 rounded-full bg-amber-500"></span>
|
||||
<span class="text-xs font-medium text-gray-600">P3 - Medium</span>
|
||||
<div class="text-right">
|
||||
<div class="text-red-600 text-xs font-medium">5 min SLA</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- P2 High -->
|
||||
<div class="flex items-center justify-between p-3 bg-orange-50 rounded-lg border border-orange-100">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-3 h-3 rounded-full bg-orange-500"></div>
|
||||
<div>
|
||||
<div class="text-gray-900 text-sm font-medium">P2 - High</div>
|
||||
<div class="text-gray-500 text-xs">Major functionality impaired</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<div class="text-orange-600 text-xs font-medium">15 min SLA</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- P3 Medium -->
|
||||
<div class="flex items-center justify-between p-3 bg-amber-50 rounded-lg border border-amber-100">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-3 h-3 rounded-full bg-amber-500"></div>
|
||||
<div>
|
||||
<div class="text-gray-900 text-sm font-medium">P3 - Medium</div>
|
||||
<div class="text-gray-500 text-xs">Degraded performance</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<div class="text-amber-600 text-xs font-medium">1 hour SLA</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- P4 Low -->
|
||||
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg border border-gray-200">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-3 h-3 rounded-full bg-gray-400"></div>
|
||||
<div>
|
||||
<div class="text-gray-900 text-sm font-medium">P4 - Low</div>
|
||||
<div class="text-gray-500 text-xs">Minor issues</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<div class="text-gray-500 text-xs font-medium">24 hour SLA</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="px-4 py-3 bg-gray-50 border-t border-gray-100 text-center">
|
||||
<span class="text-gray-400 text-xs">+ Add custom severity level</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -374,28 +435,75 @@
|
||||
</div>
|
||||
<div class="mt-12 lg:mt-0">
|
||||
<div class="relative">
|
||||
<div class="relative rounded-2xl bg-gray-100 p-2 ring-1 ring-gray-200/80 shadow-lg">
|
||||
<img src="/img/incident-state.png" alt="Incident states" class="rounded-xl w-full">
|
||||
</div>
|
||||
<!-- Floating card -->
|
||||
<div class="absolute -top-6 -right-6 hidden lg:block">
|
||||
<div class="bg-white rounded-xl shadow-xl p-4 ring-1 ring-gray-100">
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex items-center gap-2 text-xs">
|
||||
<span class="h-2 w-2 rounded-full bg-red-500"></span>
|
||||
<span class="text-gray-600">Identified</span>
|
||||
<!-- Subtle background -->
|
||||
<div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
|
||||
|
||||
<!-- Incident State Flow Card -->
|
||||
<div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
|
||||
<!-- Header -->
|
||||
<div class="bg-violet-50 px-4 py-3 border-b border-violet-100">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-violet-800 text-sm font-medium">Incident State Flow</span>
|
||||
<span class="px-2 py-0.5 bg-violet-100 text-violet-600 rounded text-xs">Customizable</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- State flow -->
|
||||
<div class="p-4">
|
||||
<div class="space-y-3">
|
||||
<!-- Identified -->
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-8 h-8 rounded-full bg-red-100 flex items-center justify-center">
|
||||
<div class="w-3 h-3 rounded-full bg-red-500"></div>
|
||||
</div>
|
||||
<div class="w-0.5 h-6 bg-gray-200"></div>
|
||||
</div>
|
||||
<div class="flex-1 p-3 bg-red-50 rounded-lg border border-red-100">
|
||||
<div class="text-gray-900 text-sm font-medium">Identified</div>
|
||||
<div class="text-gray-500 text-xs">Issue detected and confirmed</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-xs">
|
||||
<span class="h-2 w-2 rounded-full bg-amber-500"></span>
|
||||
<span class="text-gray-600">Investigating</span>
|
||||
|
||||
<!-- Investigating -->
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-8 h-8 rounded-full bg-amber-100 flex items-center justify-center">
|
||||
<div class="w-3 h-3 rounded-full bg-amber-500"></div>
|
||||
</div>
|
||||
<div class="w-0.5 h-6 bg-gray-200"></div>
|
||||
</div>
|
||||
<div class="flex-1 p-3 bg-amber-50 rounded-lg border border-amber-100">
|
||||
<div class="text-gray-900 text-sm font-medium">Investigating</div>
|
||||
<div class="text-gray-500 text-xs">Team is analyzing root cause</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-xs">
|
||||
<span class="h-2 w-2 rounded-full bg-blue-500"></span>
|
||||
<span class="text-gray-600">Monitoring</span>
|
||||
|
||||
<!-- Monitoring -->
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center">
|
||||
<div class="w-3 h-3 rounded-full bg-blue-500"></div>
|
||||
</div>
|
||||
<div class="w-0.5 h-6 bg-gray-200"></div>
|
||||
</div>
|
||||
<div class="flex-1 p-3 bg-blue-50 rounded-lg border border-blue-100">
|
||||
<div class="text-gray-900 text-sm font-medium">Monitoring</div>
|
||||
<div class="text-gray-500 text-xs">Fix deployed, verifying stability</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-xs">
|
||||
<span class="h-2 w-2 rounded-full bg-emerald-500"></span>
|
||||
<span class="text-gray-600">Resolved</span>
|
||||
|
||||
<!-- Resolved -->
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-8 h-8 rounded-full bg-emerald-100 flex items-center justify-center">
|
||||
<div class="w-3 h-3 rounded-full bg-emerald-500"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 p-3 bg-emerald-50 rounded-lg border border-emerald-100">
|
||||
<div class="text-gray-900 text-sm font-medium">Resolved</div>
|
||||
<div class="text-gray-500 text-xs">Incident fully resolved</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -408,19 +516,78 @@
|
||||
<div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
|
||||
<div class="relative order-2 lg:order-1 mt-12 lg:mt-0">
|
||||
<div class="relative">
|
||||
<div class="relative rounded-2xl bg-gray-100 p-2 ring-1 ring-gray-200/80 shadow-lg">
|
||||
<img src="/img/incident-report.png" alt="Incident report" class="rounded-xl w-full">
|
||||
</div>
|
||||
<!-- Floating card -->
|
||||
<div class="absolute -bottom-6 -right-6 hidden lg:block">
|
||||
<div class="bg-white rounded-xl shadow-xl p-4 ring-1 ring-gray-100 max-w-[180px]">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<svg class="h-4 w-4 text-cyan-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
<span class="text-sm font-medium text-gray-700">Postmortem</span>
|
||||
<!-- Subtle background -->
|
||||
<div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
|
||||
|
||||
<!-- Postmortem Report Card -->
|
||||
<div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
|
||||
<!-- Header -->
|
||||
<div class="bg-cyan-50 px-4 py-3 border-b border-cyan-100">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="h-4 w-4 text-cyan-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
<span class="text-cyan-800 text-sm font-medium">Postmortem Report</span>
|
||||
</div>
|
||||
<span class="px-2 py-0.5 bg-emerald-100 text-emerald-600 rounded text-xs">Resolved</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="p-4">
|
||||
<h4 class="text-gray-900 font-semibold mb-2">API Latency Incident - Jan 5</h4>
|
||||
|
||||
<!-- Summary -->
|
||||
<div class="mb-4">
|
||||
<div class="text-gray-500 text-xs uppercase tracking-wide mb-1">Summary</div>
|
||||
<p class="text-gray-600 text-sm">Database connection pool exhaustion caused 45-minute API degradation.</p>
|
||||
</div>
|
||||
|
||||
<!-- Timeline -->
|
||||
<div class="mb-4 p-3 bg-gray-50 rounded-lg">
|
||||
<div class="flex justify-between text-xs mb-2">
|
||||
<span class="text-gray-500">Duration</span>
|
||||
<span class="text-gray-700 font-medium">45 minutes</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-xs">
|
||||
<span class="text-gray-500">Impact</span>
|
||||
<span class="text-gray-700 font-medium">2,340 affected requests</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Root Cause -->
|
||||
<div class="mb-4">
|
||||
<div class="text-gray-500 text-xs uppercase tracking-wide mb-1">Root Cause</div>
|
||||
<p class="text-gray-600 text-sm">Connection pool size was undersized for traffic spike.</p>
|
||||
</div>
|
||||
|
||||
<!-- Action Items -->
|
||||
<div>
|
||||
<div class="text-gray-500 text-xs uppercase tracking-wide mb-2">Action Items</div>
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-4 h-4 rounded border-2 border-emerald-500 flex items-center justify-center">
|
||||
<svg class="w-3 h-3 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="text-gray-600 text-xs">Increase connection pool size</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-4 h-4 rounded border-2 border-emerald-500 flex items-center justify-center">
|
||||
<svg class="w-3 h-3 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="text-gray-600 text-xs">Add connection pool metrics</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-4 h-4 rounded border-2 border-gray-300"></div>
|
||||
<span class="text-gray-600 text-xs">Set up auto-scaling for pool</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500">Root cause analysis & action items documented</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -74,30 +74,6 @@
|
||||
|
||||
<%- include('logo-roll') -%>
|
||||
|
||||
<!-- Stats Section -->
|
||||
<div class="bg-gray-50 py-16 sm:py-20">
|
||||
<div class="mx-auto max-w-5xl px-6 lg:px-8">
|
||||
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4 sm:gap-6">
|
||||
<div class="text-center p-6 sm:p-8 rounded-2xl bg-white border border-gray-200/60 shadow-sm transition-all duration-300 hover:shadow-md hover:border-gray-300">
|
||||
<div class="text-3xl sm:text-4xl font-semibold text-gray-900 mb-1">PB</div>
|
||||
<div class="text-sm text-gray-500">Scale Storage</div>
|
||||
</div>
|
||||
<div class="text-center p-6 sm:p-8 rounded-2xl bg-white border border-gray-200/60 shadow-sm transition-all duration-300 hover:shadow-md hover:border-gray-300">
|
||||
<div class="text-3xl sm:text-4xl font-semibold text-gray-900 mb-1"><100ms</div>
|
||||
<div class="text-sm text-gray-500">Search Speed</div>
|
||||
</div>
|
||||
<div class="text-center p-6 sm:p-8 rounded-2xl bg-white border border-gray-200/60 shadow-sm transition-all duration-300 hover:shadow-md hover:border-gray-300">
|
||||
<div class="text-3xl sm:text-4xl font-semibold text-gray-900 mb-1">8x</div>
|
||||
<div class="text-sm text-gray-500">Cost Savings</div>
|
||||
</div>
|
||||
<div class="text-center p-6 sm:p-8 rounded-2xl bg-white border border-gray-200/60 shadow-sm transition-all duration-300 hover:shadow-md hover:border-gray-300">
|
||||
<div class="text-3xl sm:text-4xl font-semibold text-gray-900 mb-1">No</div>
|
||||
<div class="text-sm text-gray-500">Rehydration</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- How It Works Section -->
|
||||
<div class="relative bg-gray-50 py-24 sm:py-32">
|
||||
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
@@ -232,7 +208,103 @@
|
||||
</div>
|
||||
<div class="mt-12 lg:mt-0">
|
||||
<div class="relative">
|
||||
<img class="relative w-full rounded-2xl shadow-lg ring-1 ring-gray-900/10" src="/img/custom-data-retention.png" alt="Custom data retention settings">
|
||||
<!-- Subtle background -->
|
||||
<div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
|
||||
|
||||
<!-- Data Retention Settings Card -->
|
||||
<div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
|
||||
<!-- Header -->
|
||||
<div class="px-4 py-3 border-b border-gray-100">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-8 h-8 rounded-lg bg-indigo-50 flex items-center justify-center">
|
||||
<svg class="w-4 h-4 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-gray-800 text-sm font-medium">Data Retention Settings</div>
|
||||
<div class="text-gray-400 text-xs">3 policies configured</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="flex items-center gap-1 px-2 py-1 bg-indigo-50 rounded text-xs text-indigo-600 border border-indigo-200 font-medium">
|
||||
Active
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Retention policies list -->
|
||||
<div class="p-4 space-y-3">
|
||||
<!-- Policy 1: Production -->
|
||||
<div class="p-3 bg-gray-50 rounded-lg border border-gray-100">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-2 h-2 rounded-full bg-emerald-500"></span>
|
||||
<span class="text-gray-800 text-sm font-medium">Production Logs</span>
|
||||
</div>
|
||||
<span class="text-indigo-600 text-xs font-medium">90 days</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 text-xs text-gray-500">
|
||||
<span class="flex items-center gap-1">
|
||||
<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
|
||||
</svg>
|
||||
US East
|
||||
</span>
|
||||
<span>|</span>
|
||||
<span>2.4 TB stored</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Policy 2: Staging -->
|
||||
<div class="p-3 bg-gray-50 rounded-lg border border-gray-100">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-2 h-2 rounded-full bg-amber-500"></span>
|
||||
<span class="text-gray-800 text-sm font-medium">Staging Logs</span>
|
||||
</div>
|
||||
<span class="text-indigo-600 text-xs font-medium">30 days</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 text-xs text-gray-500">
|
||||
<span class="flex items-center gap-1">
|
||||
<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
|
||||
</svg>
|
||||
EU West
|
||||
</span>
|
||||
<span>|</span>
|
||||
<span>890 GB stored</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Policy 3: Debug -->
|
||||
<div class="p-3 bg-gray-50 rounded-lg border border-gray-100">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-2 h-2 rounded-full bg-gray-400"></span>
|
||||
<span class="text-gray-800 text-sm font-medium">Debug Logs</span>
|
||||
</div>
|
||||
<span class="text-indigo-600 text-xs font-medium">7 days</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 text-xs text-gray-500">
|
||||
<span class="flex items-center gap-1">
|
||||
<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
|
||||
</svg>
|
||||
US East
|
||||
</span>
|
||||
<span>|</span>
|
||||
<span>156 GB stored</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="px-4 py-3 bg-gray-50 border-t border-gray-100 flex items-center justify-between">
|
||||
<span class="text-gray-400 text-xs">Total: 3.4 TB across 2 regions</span>
|
||||
<span class="text-indigo-600 text-xs font-medium cursor-pointer hover:text-indigo-700">+ Add Policy</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -241,7 +313,84 @@
|
||||
<div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
|
||||
<div class="order-2 lg:order-1 mt-12 lg:mt-0">
|
||||
<div class="relative">
|
||||
<img class="relative w-full rounded-2xl shadow-lg ring-1 ring-gray-900/10" src="/img/logs-sources.png" alt="Multiple log sources">
|
||||
<!-- Subtle background -->
|
||||
<div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
|
||||
|
||||
<!-- Grid of Log Source Cards -->
|
||||
<div class="relative max-w-md mx-auto">
|
||||
<div class="grid grid-cols-3 gap-3">
|
||||
<!-- Kubernetes -->
|
||||
<div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm text-center">
|
||||
<div class="w-10 h-10 rounded-lg bg-indigo-50 flex items-center justify-center mx-auto mb-2">
|
||||
<svg class="w-5 h-5 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="text-gray-700 text-xs font-medium">Kubernetes</div>
|
||||
<div class="text-gray-400 text-[10px]">Pods & Nodes</div>
|
||||
</div>
|
||||
|
||||
<!-- Docker -->
|
||||
<div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm text-center">
|
||||
<div class="w-10 h-10 rounded-lg bg-indigo-50 flex items-center justify-center mx-auto mb-2">
|
||||
<svg class="w-5 h-5 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="text-gray-700 text-xs font-medium">Docker</div>
|
||||
<div class="text-gray-400 text-[10px]">Containers</div>
|
||||
</div>
|
||||
|
||||
<!-- Application -->
|
||||
<div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm text-center">
|
||||
<div class="w-10 h-10 rounded-lg bg-indigo-50 flex items-center justify-center mx-auto mb-2">
|
||||
<svg class="w-5 h-5 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="text-gray-700 text-xs font-medium">Application</div>
|
||||
<div class="text-gray-400 text-[10px]">Any Language</div>
|
||||
</div>
|
||||
|
||||
<!-- Syslog -->
|
||||
<div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm text-center">
|
||||
<div class="w-10 h-10 rounded-lg bg-indigo-50 flex items-center justify-center mx-auto mb-2">
|
||||
<svg class="w-5 h-5 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="text-gray-700 text-xs font-medium">Syslog</div>
|
||||
<div class="text-gray-400 text-[10px]">RFC 5424</div>
|
||||
</div>
|
||||
|
||||
<!-- Files -->
|
||||
<div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm text-center">
|
||||
<div class="w-10 h-10 rounded-lg bg-indigo-50 flex items-center justify-center mx-auto mb-2">
|
||||
<svg class="w-5 h-5 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="text-gray-700 text-xs font-medium">Files</div>
|
||||
<div class="text-gray-400 text-[10px]">Log Files</div>
|
||||
</div>
|
||||
|
||||
<!-- Cloud -->
|
||||
<div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm text-center">
|
||||
<div class="w-10 h-10 rounded-lg bg-indigo-50 flex items-center justify-center mx-auto mb-2">
|
||||
<svg class="w-5 h-5 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="text-gray-700 text-xs font-medium">Cloud</div>
|
||||
<div class="text-gray-400 text-[10px]">AWS, GCP, Azure</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer label -->
|
||||
<div class="mt-4 text-center text-xs text-gray-400">
|
||||
OpenTelemetry native + any custom source
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="order-1 lg:order-2">
|
||||
@@ -320,7 +469,93 @@
|
||||
</div>
|
||||
<div class="mt-12 lg:mt-0">
|
||||
<div class="relative">
|
||||
<img class="relative w-full rounded-2xl shadow-lg ring-1 ring-gray-900/10" src="/img/search-with-sql.png" alt="SQL search interface">
|
||||
<!-- Subtle background -->
|
||||
<div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
|
||||
|
||||
<!-- SQL Query Interface Mockup -->
|
||||
<div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
|
||||
<!-- Browser header -->
|
||||
<div class="bg-gray-50 px-4 py-2.5 flex items-center gap-3 border-b border-gray-100">
|
||||
<div class="flex gap-1.5">
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
|
||||
</div>
|
||||
<div class="flex-1 flex items-center justify-center">
|
||||
<span class="text-gray-400 text-xs">Log Explorer</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Query area -->
|
||||
<div class="p-4">
|
||||
<!-- SQL Editor -->
|
||||
<div class="bg-gray-900 rounded-lg p-3 mb-4 font-mono text-xs">
|
||||
<div class="text-purple-400">SELECT</div>
|
||||
<div class="text-gray-300 pl-4">timestamp, level, message, service</div>
|
||||
<div class="text-purple-400">FROM</div>
|
||||
<div class="text-gray-300 pl-4">logs</div>
|
||||
<div class="text-purple-400">WHERE</div>
|
||||
<div class="text-gray-300 pl-4">level = <span class="text-amber-400">'ERROR'</span></div>
|
||||
<div class="text-gray-300 pl-4 flex items-center gap-1">
|
||||
<span class="text-purple-400">AND</span> service = <span class="text-amber-400">'api-server'</span>
|
||||
</div>
|
||||
<div class="text-purple-400">ORDER BY</div>
|
||||
<div class="text-gray-300 pl-4">timestamp <span class="text-purple-400">DESC</span></div>
|
||||
<div class="text-purple-400">LIMIT <span class="text-cyan-400">100</span></div>
|
||||
</div>
|
||||
|
||||
<!-- Run button and stats -->
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<button class="px-3 py-1.5 bg-purple-600 text-white text-xs font-medium rounded-lg flex items-center gap-1.5">
|
||||
<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/>
|
||||
</svg>
|
||||
Run Query
|
||||
</button>
|
||||
<div class="flex items-center gap-3 text-xs text-gray-500">
|
||||
<span class="flex items-center gap-1">
|
||||
<svg class="w-3 h-3 text-emerald-500" 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>
|
||||
48ms
|
||||
</span>
|
||||
<span>847 rows</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Results preview -->
|
||||
<div class="border border-gray-200 rounded-lg overflow-hidden">
|
||||
<div class="bg-gray-50 px-3 py-2 border-b border-gray-200">
|
||||
<div class="grid grid-cols-4 gap-2 text-[10px] font-medium text-gray-500 uppercase">
|
||||
<span>Time</span>
|
||||
<span>Level</span>
|
||||
<span>Service</span>
|
||||
<span>Message</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="divide-y divide-gray-100">
|
||||
<div class="px-3 py-2 grid grid-cols-4 gap-2 text-xs">
|
||||
<span class="text-gray-600">14:23:45</span>
|
||||
<span class="px-1.5 py-0.5 bg-red-100 text-red-700 rounded text-[10px] font-medium w-fit">ERROR</span>
|
||||
<span class="text-gray-600">api-server</span>
|
||||
<span class="text-gray-600 truncate">Connection timeout</span>
|
||||
</div>
|
||||
<div class="px-3 py-2 grid grid-cols-4 gap-2 text-xs">
|
||||
<span class="text-gray-600">14:23:41</span>
|
||||
<span class="px-1.5 py-0.5 bg-red-100 text-red-700 rounded text-[10px] font-medium w-fit">ERROR</span>
|
||||
<span class="text-gray-600">api-server</span>
|
||||
<span class="text-gray-600 truncate">Database error</span>
|
||||
</div>
|
||||
<div class="px-3 py-2 grid grid-cols-4 gap-2 text-xs">
|
||||
<span class="text-gray-600">14:23:38</span>
|
||||
<span class="px-1.5 py-0.5 bg-red-100 text-red-700 rounded text-[10px] font-medium w-fit">ERROR</span>
|
||||
<span class="text-gray-600">api-server</span>
|
||||
<span class="text-gray-600 truncate">Auth failed</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -329,7 +564,117 @@
|
||||
<div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
|
||||
<div class="order-2 lg:order-1 mt-12 lg:mt-0">
|
||||
<div class="relative">
|
||||
<img class="relative w-full rounded-2xl shadow-lg ring-1 ring-gray-900/10" src="/img/incident-report.png" alt="Alert configuration">
|
||||
<!-- Subtle background -->
|
||||
<div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
|
||||
|
||||
<!-- Alert Rules Card -->
|
||||
<div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
|
||||
<!-- Header -->
|
||||
<div class="px-4 py-3 border-b border-gray-100">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-8 h-8 rounded-lg bg-purple-50 flex items-center justify-center">
|
||||
<svg class="w-4 h-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>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-gray-800 text-sm font-medium">Log Alert Rules</div>
|
||||
<div class="text-gray-400 text-xs">3 active rules</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="px-2 py-1 bg-purple-50 rounded text-xs text-purple-600 border border-purple-200 font-medium">
|
||||
+ New Rule
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Alert rules list -->
|
||||
<div class="p-4 space-y-3">
|
||||
<!-- Rule 1: Error Spike -->
|
||||
<div class="p-3 bg-gray-50 rounded-lg border border-gray-100">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-2 h-2 rounded-full bg-red-500 animate-pulse"></span>
|
||||
<span class="text-gray-800 text-sm font-medium">Error Rate Spike</span>
|
||||
</div>
|
||||
<span class="px-1.5 py-0.5 bg-red-100 text-red-700 rounded text-[10px] font-medium">Critical</span>
|
||||
</div>
|
||||
<div class="text-xs text-gray-500 mb-2">
|
||||
<span class="font-mono bg-gray-100 px-1 py-0.5 rounded">level = ERROR</span> > 100 in 5 min
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-[10px] text-gray-400">
|
||||
<span class="flex items-center gap-1">
|
||||
<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/>
|
||||
</svg>
|
||||
On-call Team
|
||||
</span>
|
||||
<span>|</span>
|
||||
<span>Slack, PagerDuty, SMS</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Rule 2: Auth Failures -->
|
||||
<div class="p-3 bg-gray-50 rounded-lg border border-gray-100">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-2 h-2 rounded-full bg-amber-500"></span>
|
||||
<span class="text-gray-800 text-sm font-medium">Auth Failures</span>
|
||||
</div>
|
||||
<span class="px-1.5 py-0.5 bg-amber-100 text-amber-700 rounded text-[10px] font-medium">Warning</span>
|
||||
</div>
|
||||
<div class="text-xs text-gray-500 mb-2">
|
||||
<span class="font-mono bg-gray-100 px-1 py-0.5 rounded">message LIKE 'auth%failed'</span> > 50
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-[10px] text-gray-400">
|
||||
<span class="flex items-center gap-1">
|
||||
<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/>
|
||||
</svg>
|
||||
Security Team
|
||||
</span>
|
||||
<span>|</span>
|
||||
<span>Slack, Email</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Rule 3: Performance -->
|
||||
<div class="p-3 bg-gray-50 rounded-lg border border-gray-100">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-2 h-2 rounded-full bg-emerald-500"></span>
|
||||
<span class="text-gray-800 text-sm font-medium">Slow Queries</span>
|
||||
</div>
|
||||
<span class="px-1.5 py-0.5 bg-indigo-100 text-indigo-700 rounded text-[10px] font-medium">Info</span>
|
||||
</div>
|
||||
<div class="text-xs text-gray-500 mb-2">
|
||||
<span class="font-mono bg-gray-100 px-1 py-0.5 rounded">duration_ms > 5000</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-[10px] text-gray-400">
|
||||
<span class="flex items-center gap-1">
|
||||
<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/>
|
||||
</svg>
|
||||
Platform Team
|
||||
</span>
|
||||
<span>|</span>
|
||||
<span>Slack</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="px-4 py-3 bg-gray-50 border-t border-gray-100 flex items-center justify-between">
|
||||
<div class="flex items-center gap-3 text-xs text-gray-500">
|
||||
<span class="flex items-center gap-1">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
|
||||
2 triggered today
|
||||
</span>
|
||||
</div>
|
||||
<span class="text-purple-600 text-xs font-medium cursor-pointer hover:text-purple-700">View all alerts</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="order-1 lg:order-2">
|
||||
|
||||
@@ -72,30 +72,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stats Section -->
|
||||
<div class="bg-gray-50 py-16 sm:py-20">
|
||||
<div class="mx-auto max-w-5xl px-6 lg:px-8">
|
||||
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4 sm:gap-6">
|
||||
<div class="text-center p-6 sm:p-8 rounded-2xl bg-white border border-gray-200/60 shadow-sm transition-all duration-300 hover:shadow-md hover:border-gray-300">
|
||||
<div class="text-3xl sm:text-4xl font-semibold text-gray-900 mb-1">1M+</div>
|
||||
<div class="text-sm text-gray-500">Data Points / Sec</div>
|
||||
</div>
|
||||
<div class="text-center p-6 sm:p-8 rounded-2xl bg-white border border-gray-200/60 shadow-sm transition-all duration-300 hover:shadow-md hover:border-gray-300">
|
||||
<div class="text-3xl sm:text-4xl font-semibold text-gray-900 mb-1"><50ms</div>
|
||||
<div class="text-sm text-gray-500">Query Latency</div>
|
||||
</div>
|
||||
<div class="text-center p-6 sm:p-8 rounded-2xl bg-white border border-gray-200/60 shadow-sm transition-all duration-300 hover:shadow-md hover:border-gray-300">
|
||||
<div class="text-3xl sm:text-4xl font-semibold text-gray-900 mb-1">PromQL</div>
|
||||
<div class="text-sm text-gray-500">Compatible</div>
|
||||
</div>
|
||||
<div class="text-center p-6 sm:p-8 rounded-2xl bg-white border border-gray-200/60 shadow-sm transition-all duration-300 hover:shadow-md hover:border-gray-300">
|
||||
<div class="text-3xl sm:text-4xl font-semibold text-gray-900 mb-1">Custom</div>
|
||||
<div class="text-sm text-gray-500">Retention</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%- include('logo-roll') -%>
|
||||
|
||||
<!-- How It Works Section -->
|
||||
@@ -232,8 +208,85 @@
|
||||
</a>
|
||||
</div>
|
||||
<div class="mt-12 lg:mt-0">
|
||||
<div class="relative bg-gray-100 rounded-2xl p-4">
|
||||
<img class="relative w-full rounded-2xl shadow-lg ring-1 ring-gray-900/10" src="/img/apm-3.png" alt="Metrics ingestion from multiple sources">
|
||||
<div class="relative">
|
||||
<!-- Subtle background -->
|
||||
<div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
|
||||
|
||||
<!-- Grid of Metric Source Cards -->
|
||||
<div class="relative max-w-md mx-auto">
|
||||
<div class="grid grid-cols-3 gap-3">
|
||||
<!-- Prometheus -->
|
||||
<div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm text-center">
|
||||
<div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center mx-auto mb-2">
|
||||
<svg class="w-5 h-5 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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="text-gray-700 text-xs font-medium">Prometheus</div>
|
||||
<div class="text-gray-400 text-[10px]">Native</div>
|
||||
</div>
|
||||
|
||||
<!-- OpenTelemetry -->
|
||||
<div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm text-center">
|
||||
<div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center mx-auto mb-2">
|
||||
<svg class="w-5 h-5 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8.25 9V5.25A2.25 2.25 0 0110.5 3h6a2.25 2.25 0 012.25 2.25v13.5A2.25 2.25 0 0116.5 21h-6a2.25 2.25 0 01-2.25-2.25V15M12 9l3 3m0 0l-3 3m3-3H2.25"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="text-gray-700 text-xs font-medium">OTel</div>
|
||||
<div class="text-gray-400 text-[10px]">SDK</div>
|
||||
</div>
|
||||
|
||||
<!-- StatsD -->
|
||||
<div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm text-center">
|
||||
<div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center mx-auto mb-2">
|
||||
<svg class="w-5 h-5 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="text-gray-700 text-xs font-medium">StatsD</div>
|
||||
<div class="text-gray-400 text-[10px]">UDP</div>
|
||||
</div>
|
||||
|
||||
<!-- Graphite -->
|
||||
<div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm text-center">
|
||||
<div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center mx-auto mb-2">
|
||||
<svg class="w-5 h-5 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="text-gray-700 text-xs font-medium">Graphite</div>
|
||||
<div class="text-gray-400 text-[10px]">Carbon</div>
|
||||
</div>
|
||||
|
||||
<!-- InfluxDB -->
|
||||
<div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm text-center">
|
||||
<div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center mx-auto mb-2">
|
||||
<svg class="w-5 h-5 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="text-gray-700 text-xs font-medium">InfluxDB</div>
|
||||
<div class="text-gray-400 text-[10px]">Line Protocol</div>
|
||||
</div>
|
||||
|
||||
<!-- Custom -->
|
||||
<div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm text-center">
|
||||
<div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center mx-auto mb-2">
|
||||
<svg class="w-5 h-5 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="text-gray-700 text-xs font-medium">Custom</div>
|
||||
<div class="text-gray-400 text-[10px]">REST API</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer label -->
|
||||
<div class="mt-4 text-center text-xs text-gray-400">
|
||||
+ AWS CloudWatch, Datadog, and more integrations
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -241,8 +294,85 @@
|
||||
<!-- Feature 2: PromQL & Custom Queries -->
|
||||
<div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
|
||||
<div class="order-2 lg:order-1 mt-12 lg:mt-0">
|
||||
<div class="relative bg-gray-100 rounded-2xl p-4">
|
||||
<img class="relative w-full rounded-2xl shadow-lg ring-1 ring-gray-900/10" src="/img/apm-2.png" alt="PromQL query interface">
|
||||
<div class="relative">
|
||||
<!-- Subtle background -->
|
||||
<div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
|
||||
|
||||
<!-- Query Builder Browser Window -->
|
||||
<div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
|
||||
<!-- Browser header -->
|
||||
<div class="bg-gray-50 px-4 py-2.5 flex items-center gap-3 border-b border-gray-100">
|
||||
<div class="flex gap-1.5">
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
|
||||
</div>
|
||||
<div class="flex-1 text-center">
|
||||
<span class="text-xs text-gray-400">Query Builder</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content area -->
|
||||
<div class="p-4">
|
||||
<!-- Query input -->
|
||||
<div class="mb-4">
|
||||
<label class="text-xs text-gray-500 mb-1.5 block">PromQL Query</label>
|
||||
<div class="bg-gray-900 rounded-lg p-3 font-mono text-sm">
|
||||
<span class="text-emerald-400">sum</span><span class="text-gray-300">(</span><span class="text-amber-400">rate</span><span class="text-gray-300">(</span><span class="text-sky-400">http_requests_total</span><span class="text-gray-300">{</span><span class="text-purple-400">status</span><span class="text-gray-300">=~</span><span class="text-orange-300">"5.."</span><span class="text-gray-300">}[</span><span class="text-emerald-300">5m</span><span class="text-gray-300">]))</span> <span class="text-emerald-400">by</span> <span class="text-gray-300">(</span><span class="text-purple-400">service</span><span class="text-gray-300">)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Time range selector -->
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
<div class="flex-1 bg-gray-50 rounded-lg px-3 py-2 border border-gray-200">
|
||||
<div class="text-[10px] text-gray-400 mb-0.5">Time Range</div>
|
||||
<div class="text-xs text-gray-700 font-medium">Last 24 hours</div>
|
||||
</div>
|
||||
<div class="flex-1 bg-gray-50 rounded-lg px-3 py-2 border border-gray-200">
|
||||
<div class="text-[10px] text-gray-400 mb-0.5">Step</div>
|
||||
<div class="text-xs text-gray-700 font-medium">1 minute</div>
|
||||
</div>
|
||||
<button class="bg-emerald-600 text-white px-3 py-2.5 rounded-lg text-xs font-medium flex items-center gap-1">
|
||||
<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
Run
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Results preview -->
|
||||
<div class="border border-gray-200 rounded-lg overflow-hidden">
|
||||
<div class="bg-gray-50 px-3 py-2 border-b border-gray-200 flex items-center justify-between">
|
||||
<span class="text-xs text-gray-600 font-medium">Results</span>
|
||||
<span class="text-[10px] text-gray-400">3 series</span>
|
||||
</div>
|
||||
<div class="p-3 space-y-2">
|
||||
<div class="flex items-center justify-between text-xs">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-2 h-2 rounded-full bg-emerald-500"></span>
|
||||
<span class="text-gray-600 font-mono">api-gateway</span>
|
||||
</div>
|
||||
<span class="text-gray-900 font-medium">142.3 req/s</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-2 h-2 rounded-full bg-sky-500"></span>
|
||||
<span class="text-gray-600 font-mono">auth-service</span>
|
||||
</div>
|
||||
<span class="text-gray-900 font-medium">89.7 req/s</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-2 h-2 rounded-full bg-purple-500"></span>
|
||||
<span class="text-gray-600 font-mono">user-service</span>
|
||||
</div>
|
||||
<span class="text-gray-900 font-medium">56.1 req/s</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="order-1 lg:order-2">
|
||||
@@ -320,8 +450,98 @@
|
||||
</a>
|
||||
</div>
|
||||
<div class="mt-12 lg:mt-0">
|
||||
<div class="relative bg-gray-100 rounded-2xl p-4">
|
||||
<img class="relative w-full rounded-2xl shadow-lg ring-1 ring-gray-900/10" src="/img/dashboard.png" alt="Custom metrics dashboard">
|
||||
<div class="relative">
|
||||
<!-- Subtle background -->
|
||||
<div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
|
||||
|
||||
<!-- Dashboard Widgets Mockup -->
|
||||
<div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
|
||||
<!-- Browser header -->
|
||||
<div class="bg-gray-50 px-4 py-2.5 flex items-center gap-3 border-b border-gray-100">
|
||||
<div class="flex gap-1.5">
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
|
||||
</div>
|
||||
<div class="flex-1 text-center">
|
||||
<span class="text-xs text-gray-400">Production Dashboard</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dashboard content -->
|
||||
<div class="p-4">
|
||||
<!-- Stats row -->
|
||||
<div class="grid grid-cols-3 gap-2 mb-4">
|
||||
<div class="bg-emerald-50 rounded-lg p-3 border border-emerald-100">
|
||||
<div class="text-[10px] text-emerald-600 mb-1">Requests/sec</div>
|
||||
<div class="text-lg font-semibold text-emerald-700">2.4k</div>
|
||||
<div class="flex items-center gap-1 text-[10px] text-emerald-600">
|
||||
<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"/>
|
||||
</svg>
|
||||
+12%
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-sky-50 rounded-lg p-3 border border-sky-100">
|
||||
<div class="text-[10px] text-sky-600 mb-1">Latency P99</div>
|
||||
<div class="text-lg font-semibold text-sky-700">45ms</div>
|
||||
<div class="flex items-center gap-1 text-[10px] text-sky-600">
|
||||
<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/>
|
||||
</svg>
|
||||
-8ms
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-amber-50 rounded-lg p-3 border border-amber-100">
|
||||
<div class="text-[10px] text-amber-600 mb-1">Error Rate</div>
|
||||
<div class="text-lg font-semibold text-amber-700">0.02%</div>
|
||||
<div class="flex items-center gap-1 text-[10px] text-emerald-600">
|
||||
<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
||||
</svg>
|
||||
OK
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Chart area -->
|
||||
<div class="bg-gray-50 rounded-lg p-3 border border-gray-200 mb-3">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<span class="text-xs text-gray-600 font-medium">Request Throughput</span>
|
||||
<span class="text-[10px] text-gray-400">Last 1 hour</span>
|
||||
</div>
|
||||
<!-- SVG Chart -->
|
||||
<svg viewBox="0 0 200 60" class="w-full h-16">
|
||||
<defs>
|
||||
<linearGradient id="chartGradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#10b981;stop-opacity:0.3"/>
|
||||
<stop offset="100%" style="stop-color:#10b981;stop-opacity:0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path d="M0,45 L15,40 L30,42 L45,35 L60,30 L75,32 L90,25 L105,20 L120,22 L135,18 L150,15 L165,12 L180,10 L195,8 L200,8 L200,60 L0,60 Z" fill="url(#chartGradient)"/>
|
||||
<path d="M0,45 L15,40 L30,42 L45,35 L60,30 L75,32 L90,25 L105,20 L120,22 L135,18 L150,15 L165,12 L180,10 L195,8" fill="none" stroke="#10b981" stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Services list -->
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center justify-between p-2 bg-gray-50 rounded-lg">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
|
||||
<span class="text-gray-700 text-xs">api-server</span>
|
||||
</div>
|
||||
<span class="text-gray-400 text-[10px]">CPU 23%</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between p-2 bg-gray-50 rounded-lg">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
|
||||
<span class="text-gray-700 text-xs">postgres</span>
|
||||
</div>
|
||||
<span class="text-gray-400 text-[10px]">Mem 67%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -329,8 +549,112 @@
|
||||
<!-- Feature 4: Smart Alerting -->
|
||||
<div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
|
||||
<div class="order-2 lg:order-1 mt-12 lg:mt-0">
|
||||
<div class="relative bg-gray-100 rounded-2xl p-4">
|
||||
<img class="relative w-full rounded-2xl shadow-lg ring-1 ring-gray-900/10" src="/img/incident-report.png" alt="Metrics alerting configuration">
|
||||
<div class="relative">
|
||||
<!-- Subtle background -->
|
||||
<div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
|
||||
|
||||
<!-- Alert Configuration Mockup -->
|
||||
<div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
|
||||
<!-- Browser header -->
|
||||
<div class="bg-gray-50 px-4 py-2.5 flex items-center gap-3 border-b border-gray-100">
|
||||
<div class="flex gap-1.5">
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
|
||||
</div>
|
||||
<div class="flex-1 text-center">
|
||||
<span class="text-xs text-gray-400">Alert Configuration</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content area -->
|
||||
<div class="p-4">
|
||||
<!-- Alert header -->
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-8 h-8 rounded-lg bg-emerald-100 flex items-center justify-center">
|
||||
<svg class="w-4 h-4 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="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>
|
||||
<div class="text-gray-800 text-sm font-medium">CPU Usage Alert</div>
|
||||
<div class="text-gray-400 text-xs">Production Servers</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="flex items-center gap-1 px-2 py-1 bg-emerald-50 rounded text-xs text-emerald-600 border border-emerald-200">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
|
||||
Active
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Threshold visualization -->
|
||||
<div class="bg-gray-50 rounded-lg p-3 border border-gray-200 mb-4">
|
||||
<div class="text-[10px] text-gray-500 mb-2">Threshold Configuration</div>
|
||||
<div class="relative h-12">
|
||||
<!-- Background bar -->
|
||||
<div class="absolute inset-y-0 left-0 right-0 bg-gray-200 rounded-full"></div>
|
||||
<!-- Warning zone -->
|
||||
<div class="absolute inset-y-0 left-[70%] right-[10%] bg-amber-300 rounded-l-full"></div>
|
||||
<!-- Critical zone -->
|
||||
<div class="absolute inset-y-0 left-[90%] right-0 bg-red-400 rounded-r-full"></div>
|
||||
<!-- Current value indicator -->
|
||||
<div class="absolute top-1/2 left-[65%] -translate-y-1/2 w-4 h-4 bg-emerald-500 rounded-full border-2 border-white shadow-md"></div>
|
||||
<!-- Labels -->
|
||||
<div class="absolute -bottom-5 left-[70%] text-[9px] text-amber-600 font-medium">70%</div>
|
||||
<div class="absolute -bottom-5 left-[90%] text-[9px] text-red-600 font-medium">90%</div>
|
||||
<div class="absolute -top-5 left-[65%] text-[9px] text-emerald-600 font-medium">Current: 65%</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Alert conditions -->
|
||||
<div class="space-y-2 mb-4">
|
||||
<div class="flex items-center justify-between p-2.5 bg-amber-50 rounded-lg border border-amber-200">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-amber-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
|
||||
</svg>
|
||||
<span class="text-amber-700 text-xs font-medium">Warning</span>
|
||||
</div>
|
||||
<span class="text-amber-600 text-xs font-mono">> 70% for 5m</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between p-2.5 bg-red-50 rounded-lg border border-red-200">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
<span class="text-red-700 text-xs font-medium">Critical</span>
|
||||
</div>
|
||||
<span class="text-red-600 text-xs font-mono">> 90% for 2m</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Notification channels -->
|
||||
<div class="border-t border-gray-100 pt-3">
|
||||
<div class="text-[10px] text-gray-500 mb-2">Notify via</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="flex items-center gap-1 px-2 py-1 bg-gray-100 rounded text-xs text-gray-600">
|
||||
<svg class="w-3 h-3" 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.313z"/>
|
||||
</svg>
|
||||
Slack
|
||||
</span>
|
||||
<span class="flex items-center gap-1 px-2 py-1 bg-gray-100 rounded text-xs text-gray-600">
|
||||
<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
|
||||
</svg>
|
||||
Email
|
||||
</span>
|
||||
<span class="flex items-center gap-1 px-2 py-1 bg-gray-100 rounded text-xs text-gray-600">
|
||||
<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="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>
|
||||
PagerDuty
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="order-1 lg:order-2">
|
||||
|
||||
@@ -71,30 +71,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Stats Section -->
|
||||
<div class="bg-gray-50 py-16 sm:py-20">
|
||||
<div class="mx-auto max-w-5xl px-6 lg:px-8">
|
||||
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4 sm:gap-6">
|
||||
<div class="text-center p-6 sm:p-8 rounded-2xl bg-white border border-gray-200/60 shadow-sm transition-all duration-300 hover:shadow-md hover:border-gray-300">
|
||||
<div class="text-3xl sm:text-4xl font-semibold text-gray-900 mb-1">5+</div>
|
||||
<div class="text-sm text-gray-500">Alert Channels</div>
|
||||
</div>
|
||||
<div class="text-center p-6 sm:p-8 rounded-2xl bg-white border border-gray-200/60 shadow-sm transition-all duration-300 hover:shadow-md hover:border-gray-300">
|
||||
<div class="text-3xl sm:text-4xl font-semibold text-gray-900 mb-1"><30s</div>
|
||||
<div class="text-sm text-gray-500">Alert Delivery</div>
|
||||
</div>
|
||||
<div class="text-center p-6 sm:p-8 rounded-2xl bg-white border border-gray-200/60 shadow-sm transition-all duration-300 hover:shadow-md hover:border-gray-300">
|
||||
<div class="text-3xl sm:text-4xl font-semibold text-gray-900 mb-1">∞</div>
|
||||
<div class="text-sm text-gray-500">Escalation Rules</div>
|
||||
</div>
|
||||
<div class="text-center p-6 sm:p-8 rounded-2xl bg-white border border-gray-200/60 shadow-sm transition-all duration-300 hover:shadow-md hover:border-gray-300">
|
||||
<div class="text-3xl sm:text-4xl font-semibold text-gray-900 mb-1">24/7</div>
|
||||
<div class="text-sm text-gray-500">Rotation Schedules</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%- include('logo-roll') -%>
|
||||
|
||||
<!-- How It Works Section -->
|
||||
@@ -234,8 +210,104 @@
|
||||
</div>
|
||||
<div class="mt-12 lg:mt-0">
|
||||
<div class="relative">
|
||||
<div class="relative rounded-2xl bg-gray-100 p-2 ring-1 ring-gray-200/80 shadow-lg">
|
||||
<img src="/img/on-call-policies.png" alt="On-call policies" class="rounded-xl w-full">
|
||||
<!-- Subtle background -->
|
||||
<div class="absolute -inset-4 bg-orange-100/50 rounded-3xl blur-2xl"></div>
|
||||
|
||||
<!-- Calendar-style Rotation Schedule -->
|
||||
<div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
|
||||
<!-- Header -->
|
||||
<div class="bg-orange-50 px-4 py-3 border-b border-orange-100">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="w-5 h-5 text-orange-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
<span class="text-gray-800 text-sm font-semibold">On-Call Schedule</span>
|
||||
</div>
|
||||
<span class="text-xs text-gray-500">January 2024</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Week days header -->
|
||||
<div class="grid grid-cols-7 gap-px bg-gray-100 text-center text-xs text-gray-500 py-2">
|
||||
<div>Mon</div>
|
||||
<div>Tue</div>
|
||||
<div>Wed</div>
|
||||
<div>Thu</div>
|
||||
<div>Fri</div>
|
||||
<div>Sat</div>
|
||||
<div>Sun</div>
|
||||
</div>
|
||||
|
||||
<!-- Calendar grid -->
|
||||
<div class="p-3">
|
||||
<div class="grid grid-cols-7 gap-1">
|
||||
<!-- Week 1 -->
|
||||
<div class="aspect-square flex items-center justify-center text-xs text-gray-400 bg-gray-50 rounded">1</div>
|
||||
<div class="aspect-square flex items-center justify-center text-xs text-gray-400 bg-gray-50 rounded">2</div>
|
||||
<div class="aspect-square flex items-center justify-center text-xs text-gray-400 bg-gray-50 rounded">3</div>
|
||||
<div class="aspect-square flex items-center justify-center text-xs text-gray-400 bg-gray-50 rounded">4</div>
|
||||
<div class="aspect-square flex items-center justify-center text-xs text-gray-400 bg-gray-50 rounded">5</div>
|
||||
<div class="aspect-square flex items-center justify-center text-xs text-gray-400 bg-gray-50 rounded">6</div>
|
||||
<div class="aspect-square flex items-center justify-center text-xs text-gray-400 bg-gray-50 rounded">7</div>
|
||||
<!-- Week 2 - Team A (orange) -->
|
||||
<div class="aspect-square flex items-center justify-center text-xs text-white bg-orange-500 rounded font-medium">8</div>
|
||||
<div class="aspect-square flex items-center justify-center text-xs text-white bg-orange-500 rounded font-medium">9</div>
|
||||
<div class="aspect-square flex items-center justify-center text-xs text-white bg-orange-500 rounded font-medium">10</div>
|
||||
<div class="aspect-square flex items-center justify-center text-xs text-white bg-orange-500 rounded font-medium">11</div>
|
||||
<div class="aspect-square flex items-center justify-center text-xs text-white bg-orange-500 rounded font-medium">12</div>
|
||||
<div class="aspect-square flex items-center justify-center text-xs text-white bg-orange-500 rounded font-medium">13</div>
|
||||
<div class="aspect-square flex items-center justify-center text-xs text-white bg-orange-500 rounded font-medium">14</div>
|
||||
<!-- Week 3 - Team B (amber) -->
|
||||
<div class="aspect-square flex items-center justify-center text-xs text-white bg-amber-500 rounded font-medium">15</div>
|
||||
<div class="aspect-square flex items-center justify-center text-xs text-white bg-amber-500 rounded font-medium">16</div>
|
||||
<div class="aspect-square flex items-center justify-center text-xs text-white bg-amber-500 rounded font-medium">17</div>
|
||||
<div class="aspect-square flex items-center justify-center text-xs text-white bg-amber-500 rounded font-medium">18</div>
|
||||
<div class="aspect-square flex items-center justify-center text-xs text-white bg-amber-500 rounded font-medium">19</div>
|
||||
<div class="aspect-square flex items-center justify-center text-xs text-white bg-amber-500 rounded font-medium">20</div>
|
||||
<div class="aspect-square flex items-center justify-center text-xs text-white bg-amber-500 rounded font-medium">21</div>
|
||||
<!-- Week 4 - Team C (yellow) -->
|
||||
<div class="aspect-square flex items-center justify-center text-xs text-gray-800 bg-yellow-400 rounded font-medium">22</div>
|
||||
<div class="aspect-square flex items-center justify-center text-xs text-gray-800 bg-yellow-400 rounded font-medium">23</div>
|
||||
<div class="aspect-square flex items-center justify-center text-xs text-gray-800 bg-yellow-400 rounded font-medium">24</div>
|
||||
<div class="aspect-square flex items-center justify-center text-xs text-gray-800 bg-yellow-400 rounded font-medium">25</div>
|
||||
<div class="aspect-square flex items-center justify-center text-xs text-gray-800 bg-yellow-400 rounded font-medium">26</div>
|
||||
<div class="aspect-square flex items-center justify-center text-xs text-gray-800 bg-yellow-400 rounded font-medium">27</div>
|
||||
<div class="aspect-square flex items-center justify-center text-xs text-gray-800 bg-yellow-400 rounded font-medium">28</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Legend -->
|
||||
<div class="px-4 pb-4">
|
||||
<div class="flex items-center justify-center gap-4 text-xs">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<div class="w-3 h-3 rounded bg-orange-500"></div>
|
||||
<span class="text-gray-600">Team Alpha</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<div class="w-3 h-3 rounded bg-amber-500"></div>
|
||||
<span class="text-gray-600">Team Beta</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<div class="w-3 h-3 rounded bg-yellow-400"></div>
|
||||
<span class="text-gray-600">Team Gamma</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Current on-call footer -->
|
||||
<div class="bg-orange-50 px-4 py-3 border-t border-orange-100">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-6 h-6 rounded-full bg-orange-500 flex items-center justify-center text-white text-xs font-medium">JD</div>
|
||||
<div>
|
||||
<div class="text-gray-800 text-xs font-medium">John Doe</div>
|
||||
<div class="text-gray-500 text-[10px]">Currently on-call</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="px-2 py-1 bg-orange-100 text-orange-700 text-xs rounded-full font-medium">Team Alpha</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -245,8 +317,97 @@
|
||||
<div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
|
||||
<div class="relative order-2 lg:order-1 mt-12 lg:mt-0">
|
||||
<div class="relative">
|
||||
<div class="relative rounded-2xl bg-gray-100 p-2 ring-1 ring-gray-200/80 shadow-lg">
|
||||
<img src="/img/on-call-policies-logs.png" alt="Alert logs" class="rounded-xl w-full">
|
||||
<!-- Subtle background -->
|
||||
<div class="absolute -inset-4 bg-amber-100/50 rounded-3xl blur-2xl"></div>
|
||||
|
||||
<!-- Alert Log Timeline -->
|
||||
<div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
|
||||
<!-- Header -->
|
||||
<div class="bg-amber-50 px-4 py-3 border-b border-amber-100">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="w-5 h-5 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<span class="text-gray-800 text-sm font-semibold">Alert Timeline</span>
|
||||
</div>
|
||||
<span class="text-xs text-gray-500">Last 24 hours</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Alert log entries -->
|
||||
<div class="p-4 space-y-3">
|
||||
<!-- Alert 1 - Acknowledged -->
|
||||
<div class="flex gap-3">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-8 h-8 rounded-full bg-emerald-100 flex items-center justify-center">
|
||||
<svg class="w-4 h-4 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="w-px h-full bg-gray-200 mt-2"></div>
|
||||
</div>
|
||||
<div class="flex-1 pb-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm font-medium text-gray-800">Alert Acknowledged</span>
|
||||
<span class="text-xs text-gray-400">2 min ago</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500 mt-1">John Doe acknowledged via SMS</p>
|
||||
<div class="mt-2 px-2 py-1.5 bg-gray-50 rounded text-xs text-gray-600">
|
||||
Response time: <span class="font-medium text-emerald-600">47 seconds</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Alert 2 - Sent -->
|
||||
<div class="flex gap-3">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-8 h-8 rounded-full bg-amber-100 flex items-center justify-center">
|
||||
<svg class="w-4 h-4 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="w-px h-full bg-gray-200 mt-2"></div>
|
||||
</div>
|
||||
<div class="flex-1 pb-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm font-medium text-gray-800">SMS Alert Sent</span>
|
||||
<span class="text-xs text-gray-400">3 min ago</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500 mt-1">Sent to John Doe (+1 555-0123)</p>
|
||||
<div class="mt-2 flex gap-2">
|
||||
<span class="px-2 py-0.5 bg-amber-100 text-amber-700 text-xs rounded">SMS</span>
|
||||
<span class="px-2 py-0.5 bg-gray-100 text-gray-600 text-xs rounded">Delivered</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Alert 3 - Triggered -->
|
||||
<div class="flex gap-3">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-8 h-8 rounded-full bg-red-100 flex items-center justify-center">
|
||||
<svg class="w-4 h-4 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm font-medium text-gray-800">Incident Triggered</span>
|
||||
<span class="text-xs text-gray-400">3 min ago</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500 mt-1">Database connection timeout</p>
|
||||
<div class="mt-2 px-2 py-1.5 bg-red-50 rounded text-xs text-red-700 border border-red-100">
|
||||
Severity: Critical - API Service Down
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="bg-gray-50 px-4 py-2 border-t border-gray-100 text-center">
|
||||
<span class="text-xs text-gray-500">View full alert history</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -336,8 +497,107 @@
|
||||
</div>
|
||||
<div class="mt-12 lg:mt-0">
|
||||
<div class="relative">
|
||||
<div class="relative rounded-2xl bg-gray-100 p-2 ring-1 ring-gray-200/80 shadow-lg">
|
||||
<img src="/img/on-call-policy-escalation-rules.png" alt="Escalation rules" class="rounded-xl w-full">
|
||||
<!-- Subtle background -->
|
||||
<div class="absolute -inset-4 bg-orange-100/50 rounded-3xl blur-2xl"></div>
|
||||
|
||||
<!-- Escalation Chain Visualization -->
|
||||
<div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
|
||||
<!-- Header -->
|
||||
<div class="bg-orange-50 px-4 py-3 border-b border-orange-100">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="w-5 h-5 text-orange-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4h13M3 8h9m-9 4h9m5-4v12m0 0l-4-4m4 4l4-4" />
|
||||
</svg>
|
||||
<span class="text-gray-800 text-sm font-semibold">Escalation Policy</span>
|
||||
</div>
|
||||
<span class="px-2 py-0.5 bg-emerald-100 text-emerald-700 text-xs rounded-full">Active</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Escalation chain -->
|
||||
<div class="p-4">
|
||||
<!-- Level 1 -->
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-8 h-8 rounded-full bg-orange-500 flex items-center justify-center text-white text-xs font-bold">1</div>
|
||||
<div class="w-0.5 h-12 bg-orange-200 mt-2"></div>
|
||||
</div>
|
||||
<div class="flex-1 pb-4">
|
||||
<div class="bg-orange-50 rounded-lg p-3 border border-orange-100">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="text-sm font-medium text-gray-800">Primary On-Call</span>
|
||||
<span class="text-xs text-orange-600">Immediate</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-6 h-6 rounded-full bg-orange-500 flex items-center justify-center text-white text-xs">JD</div>
|
||||
<span class="text-xs text-gray-600">John Doe</span>
|
||||
</div>
|
||||
<div class="mt-2 flex gap-1">
|
||||
<span class="px-1.5 py-0.5 bg-white text-gray-500 text-[10px] rounded border border-gray-200">SMS</span>
|
||||
<span class="px-1.5 py-0.5 bg-white text-gray-500 text-[10px] rounded border border-gray-200">Call</span>
|
||||
<span class="px-1.5 py-0.5 bg-white text-gray-500 text-[10px] rounded border border-gray-200">Push</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Level 2 -->
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-8 h-8 rounded-full bg-amber-500 flex items-center justify-center text-white text-xs font-bold">2</div>
|
||||
<div class="w-0.5 h-12 bg-amber-200 mt-2"></div>
|
||||
</div>
|
||||
<div class="flex-1 pb-4">
|
||||
<div class="bg-amber-50 rounded-lg p-3 border border-amber-100">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="text-sm font-medium text-gray-800">Secondary On-Call</span>
|
||||
<span class="text-xs text-amber-600">After 5 min</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-6 h-6 rounded-full bg-amber-500 flex items-center justify-center text-white text-xs">SM</div>
|
||||
<span class="text-xs text-gray-600">Sarah Miller</span>
|
||||
</div>
|
||||
<div class="mt-2 flex gap-1">
|
||||
<span class="px-1.5 py-0.5 bg-white text-gray-500 text-[10px] rounded border border-gray-200">SMS</span>
|
||||
<span class="px-1.5 py-0.5 bg-white text-gray-500 text-[10px] rounded border border-gray-200">Email</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Level 3 -->
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-8 h-8 rounded-full bg-red-500 flex items-center justify-center text-white text-xs font-bold">3</div>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="bg-red-50 rounded-lg p-3 border border-red-100">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="text-sm font-medium text-gray-800">Engineering Manager</span>
|
||||
<span class="text-xs text-red-600">After 15 min</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-6 h-6 rounded-full bg-red-500 flex items-center justify-center text-white text-xs">MJ</div>
|
||||
<span class="text-xs text-gray-600">Mike Johnson</span>
|
||||
</div>
|
||||
<div class="mt-2 flex gap-1">
|
||||
<span class="px-1.5 py-0.5 bg-white text-gray-500 text-[10px] rounded border border-gray-200">Call</span>
|
||||
<span class="px-1.5 py-0.5 bg-white text-gray-500 text-[10px] rounded border border-gray-200">SMS</span>
|
||||
<span class="px-1.5 py-0.5 bg-white text-gray-500 text-[10px] rounded border border-gray-200">Slack</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="bg-gray-50 px-4 py-2 border-t border-gray-100">
|
||||
<div class="flex items-center justify-between text-xs text-gray-500">
|
||||
<span>Repeat cycle: 3 times</span>
|
||||
<span>Auto-resolve: 30 min</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -347,8 +607,111 @@
|
||||
<div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
|
||||
<div class="relative order-2 lg:order-1 mt-12 lg:mt-0">
|
||||
<div class="relative">
|
||||
<div class="relative rounded-2xl bg-gray-100 p-2 ring-1 ring-gray-200/80 shadow-lg">
|
||||
<img src="/img/call-sms-notifications.png" alt="Multi-channel notifications" class="rounded-xl w-full">
|
||||
<!-- Subtle background -->
|
||||
<div class="absolute -inset-4 bg-amber-100/50 rounded-3xl blur-2xl"></div>
|
||||
|
||||
<!-- Multi-channel Notification Cards -->
|
||||
<div class="relative max-w-md mx-auto space-y-3">
|
||||
<!-- Phone Call Card -->
|
||||
<div class="bg-white rounded-xl shadow-lg border border-gray-200 p-4 transform hover:-translate-y-1 transition-transform">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="w-12 h-12 rounded-xl bg-orange-100 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-6 h-6 text-orange-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="font-semibold text-gray-800">Phone Call</span>
|
||||
<span class="flex items-center gap-1 text-xs text-emerald-600">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></span>
|
||||
Calling...
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-500 mt-1">Calling John Doe at +1 (555) 123-4567</p>
|
||||
<div class="mt-2 flex gap-2">
|
||||
<span class="px-2 py-1 bg-orange-50 text-orange-700 text-xs rounded-lg font-medium">Critical Alert</span>
|
||||
<span class="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded-lg">Auto-retry: 3x</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SMS Card -->
|
||||
<div class="bg-white rounded-xl shadow-lg border border-gray-200 p-4 transform hover:-translate-y-1 transition-transform">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="w-12 h-12 rounded-xl bg-amber-100 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-6 h-6 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="font-semibold text-gray-800">SMS</span>
|
||||
<span class="flex items-center gap-1 text-xs text-emerald-600">
|
||||
<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
Delivered
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-500 mt-1 truncate">[OneUptime] Alert: Database connection timeout on prod-db-01</p>
|
||||
<div class="mt-2 text-xs text-gray-400">Sent 12 seconds ago</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Email Card -->
|
||||
<div class="bg-white rounded-xl shadow-lg border border-gray-200 p-4 transform hover:-translate-y-1 transition-transform">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="w-12 h-12 rounded-xl bg-yellow-100 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-6 h-6 text-yellow-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="font-semibold text-gray-800">Email</span>
|
||||
<span class="flex items-center gap-1 text-xs text-emerald-600">
|
||||
<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
Sent
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-500 mt-1">john.doe@company.com</p>
|
||||
<div class="mt-2 bg-gray-50 rounded p-2 text-xs text-gray-600 border border-gray-100">
|
||||
<span class="font-medium">Subject:</span> [Critical] Database connection timeout
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Push Notification Card -->
|
||||
<div class="bg-white rounded-xl shadow-lg border border-gray-200 p-4 transform hover:-translate-y-1 transition-transform">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="w-12 h-12 rounded-xl bg-orange-100 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-6 h-6 text-orange-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="font-semibold text-gray-800">Push Notification</span>
|
||||
<span class="flex items-center gap-1 text-xs text-amber-600">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-amber-500"></span>
|
||||
Pending
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-500 mt-1">Mobile app & browser notifications</p>
|
||||
<div class="mt-2 flex gap-2">
|
||||
<span class="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded-lg">iOS</span>
|
||||
<span class="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded-lg">Android</span>
|
||||
<span class="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded-lg">Web</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -77,30 +77,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stats Section -->
|
||||
<div class="bg-gray-50 py-16 sm:py-20">
|
||||
<div class="mx-auto max-w-5xl px-6 lg:px-8">
|
||||
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4 sm:gap-6">
|
||||
<div class="text-center p-6 sm:p-8 rounded-2xl bg-white border border-gray-200/60 shadow-sm transition-all duration-300 hover:shadow-md hover:border-gray-300">
|
||||
<div class="text-3xl sm:text-4xl font-semibold text-gray-900 mb-1">99.99%</div>
|
||||
<div class="text-sm text-gray-500">Uptime SLA</div>
|
||||
</div>
|
||||
<div class="text-center p-6 sm:p-8 rounded-2xl bg-white border border-gray-200/60 shadow-sm transition-all duration-300 hover:shadow-md hover:border-gray-300">
|
||||
<div class="text-3xl sm:text-4xl font-semibold text-gray-900 mb-1">∞</div>
|
||||
<div class="text-sm text-gray-500">Status Pages</div>
|
||||
</div>
|
||||
<div class="text-center p-6 sm:p-8 rounded-2xl bg-white border border-gray-200/60 shadow-sm transition-all duration-300 hover:shadow-md hover:border-gray-300">
|
||||
<div class="text-3xl sm:text-4xl font-semibold text-gray-900 mb-1">∞</div>
|
||||
<div class="text-sm text-gray-500">Subscribers</div>
|
||||
</div>
|
||||
<div class="text-center p-6 sm:p-8 rounded-2xl bg-white border border-gray-200/60 shadow-sm transition-all duration-300 hover:shadow-md hover:border-gray-300">
|
||||
<div class="text-3xl sm:text-4xl font-semibold text-gray-900 mb-1">Free</div>
|
||||
<div class="text-sm text-gray-500">SSL Certificates</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%- include('logo-roll') -%>
|
||||
|
||||
<!-- How It Works Section -->
|
||||
@@ -250,10 +226,93 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Image -->
|
||||
<!-- Custom Visual -->
|
||||
<div class="mt-12 lg:mt-0 relative">
|
||||
<div class="relative rounded-2xl bg-gray-100 p-2 shadow-lg ring-1 ring-gray-200/60">
|
||||
<img class="w-full rounded-xl" src="/img/status-pages.png" alt="Status Pages Dashboard">
|
||||
<div class="relative">
|
||||
<!-- Subtle background -->
|
||||
<div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
|
||||
|
||||
<!-- Status Page Grid -->
|
||||
<div class="relative max-w-md mx-auto">
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<!-- Public Status Page -->
|
||||
<div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm">
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
<div class="w-2 h-2 rounded-full bg-emerald-500"></div>
|
||||
<span class="text-xs font-medium text-gray-500">PUBLIC</span>
|
||||
</div>
|
||||
<div class="text-gray-800 text-sm font-medium mb-1">API Services</div>
|
||||
<div class="text-gray-400 text-xs">status.api.com</div>
|
||||
<div class="mt-3 flex items-center gap-1">
|
||||
<div class="h-1.5 w-3 rounded-full bg-emerald-500"></div>
|
||||
<div class="h-1.5 w-3 rounded-full bg-emerald-500"></div>
|
||||
<div class="h-1.5 w-3 rounded-full bg-emerald-500"></div>
|
||||
<div class="h-1.5 w-3 rounded-full bg-emerald-500"></div>
|
||||
<div class="h-1.5 w-3 rounded-full bg-emerald-500"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Private Status Page -->
|
||||
<div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm">
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
<svg class="w-3 h-3 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
|
||||
</svg>
|
||||
<span class="text-xs font-medium text-gray-500">PRIVATE</span>
|
||||
</div>
|
||||
<div class="text-gray-800 text-sm font-medium mb-1">Internal Tools</div>
|
||||
<div class="text-gray-400 text-xs">internal.ops.com</div>
|
||||
<div class="mt-3 flex items-center gap-1">
|
||||
<div class="h-1.5 w-3 rounded-full bg-emerald-500"></div>
|
||||
<div class="h-1.5 w-3 rounded-full bg-emerald-500"></div>
|
||||
<div class="h-1.5 w-3 rounded-full bg-amber-500"></div>
|
||||
<div class="h-1.5 w-3 rounded-full bg-emerald-500"></div>
|
||||
<div class="h-1.5 w-3 rounded-full bg-emerald-500"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Customer Status Page -->
|
||||
<div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm">
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
<div class="w-2 h-2 rounded-full bg-emerald-500"></div>
|
||||
<span class="text-xs font-medium text-gray-500">PUBLIC</span>
|
||||
</div>
|
||||
<div class="text-gray-800 text-sm font-medium mb-1">Platform Status</div>
|
||||
<div class="text-gray-400 text-xs">status.yourapp.io</div>
|
||||
<div class="mt-3 flex items-center gap-1">
|
||||
<div class="h-1.5 w-3 rounded-full bg-emerald-500"></div>
|
||||
<div class="h-1.5 w-3 rounded-full bg-emerald-500"></div>
|
||||
<div class="h-1.5 w-3 rounded-full bg-emerald-500"></div>
|
||||
<div class="h-1.5 w-3 rounded-full bg-emerald-500"></div>
|
||||
<div class="h-1.5 w-3 rounded-full bg-emerald-500"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Enterprise Status Page -->
|
||||
<div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm">
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
<svg class="w-3 h-3 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
|
||||
</svg>
|
||||
<span class="text-xs font-medium text-gray-500">PRIVATE</span>
|
||||
</div>
|
||||
<div class="text-gray-800 text-sm font-medium mb-1">Enterprise Ops</div>
|
||||
<div class="text-gray-400 text-xs">ops.enterprise.net</div>
|
||||
<div class="mt-3 flex items-center gap-1">
|
||||
<div class="h-1.5 w-3 rounded-full bg-emerald-500"></div>
|
||||
<div class="h-1.5 w-3 rounded-full bg-emerald-500"></div>
|
||||
<div class="h-1.5 w-3 rounded-full bg-emerald-500"></div>
|
||||
<div class="h-1.5 w-3 rounded-full bg-emerald-500"></div>
|
||||
<div class="h-1.5 w-3 rounded-full bg-emerald-500"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer label -->
|
||||
<div class="mt-4 text-center text-xs text-gray-400">
|
||||
+ Unlimited status pages, custom domains & more
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -262,10 +321,91 @@
|
||||
<!-- Feature 2: Unlimited Subscribers -->
|
||||
<div class="relative mb-24 lg:mb-32">
|
||||
<div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
|
||||
<!-- Image (left on desktop) -->
|
||||
<!-- Custom Visual (left on desktop) -->
|
||||
<div class="order-2 lg:order-1 mt-12 lg:mt-0 relative">
|
||||
<div class="relative rounded-2xl bg-gray-100 p-2 shadow-lg ring-1 ring-gray-200/60">
|
||||
<img class="w-full rounded-xl" src="/img/subscribers.png" alt="Subscriber Management">
|
||||
<div class="relative">
|
||||
<!-- Subtle background -->
|
||||
<div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
|
||||
|
||||
<!-- Subscriber Notifications Browser Window -->
|
||||
<div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
|
||||
<!-- Browser header -->
|
||||
<div class="bg-gray-50 px-4 py-2.5 flex items-center gap-3 border-b border-gray-100">
|
||||
<div class="flex gap-1.5">
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content area -->
|
||||
<div class="p-4">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-8 h-8 rounded-lg bg-blue-100 flex items-center justify-center">
|
||||
<svg class="w-4 h-4 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-gray-800 text-sm font-medium">Notifications Sent</div>
|
||||
<div class="text-gray-400 text-xs">Last 24 hours</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="px-2 py-1 bg-emerald-50 rounded text-xs text-emerald-600 font-medium">12,847</span>
|
||||
</div>
|
||||
|
||||
<!-- Notification channels -->
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
|
||||
</svg>
|
||||
<span class="text-gray-700 text-sm">Email</span>
|
||||
</div>
|
||||
<span class="text-gray-500 text-xs">8,234 sent</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/>
|
||||
</svg>
|
||||
<span class="text-gray-700 text-sm">SMS</span>
|
||||
</div>
|
||||
<span class="text-gray-500 text-xs">2,156 sent</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-[#4A154B]" 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.313z"/>
|
||||
</svg>
|
||||
<span class="text-gray-700 text-sm">Slack</span>
|
||||
</div>
|
||||
<span class="text-gray-500 text-xs">1,892 sent</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/>
|
||||
</svg>
|
||||
<span class="text-gray-700 text-sm">Webhooks</span>
|
||||
</div>
|
||||
<span class="text-gray-500 text-xs">565 sent</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="mt-3 pt-3 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400">
|
||||
<span>Total subscribers: 45,230</span>
|
||||
<span class="text-emerald-500">100% delivered</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -386,10 +526,75 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Image -->
|
||||
<!-- Custom Visual -->
|
||||
<div class="mt-12 lg:mt-0 relative">
|
||||
<div class="relative rounded-2xl bg-gray-100 p-2 shadow-lg ring-1 ring-gray-200/60">
|
||||
<img class="w-full rounded-xl" src="/img/branding.png" alt="Branding Customization">
|
||||
<div class="relative">
|
||||
<!-- Subtle background -->
|
||||
<div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
|
||||
|
||||
<!-- Branded Status Page Preview -->
|
||||
<div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
|
||||
<!-- Browser header -->
|
||||
<div class="bg-violet-600 px-4 py-2.5 flex items-center gap-3">
|
||||
<div class="flex gap-1.5">
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-white/30"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-white/30"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-white/30"></div>
|
||||
</div>
|
||||
<div class="flex-1 text-center">
|
||||
<span class="text-white/80 text-xs">status.yourcompany.com</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Page header with branding -->
|
||||
<div class="bg-violet-600 px-6 py-6">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-10 h-10 rounded-lg bg-white flex items-center justify-center">
|
||||
<svg class="w-6 h-6 text-violet-600" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-white font-semibold">YourCompany</div>
|
||||
<div class="text-white/60 text-xs">System Status</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-emerald-400"></div>
|
||||
<span class="text-white text-sm">All Systems Operational</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Status items -->
|
||||
<div class="p-4 space-y-2">
|
||||
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
|
||||
<span class="text-gray-700 text-sm">API</span>
|
||||
<span class="flex items-center gap-1.5 text-emerald-600 text-xs font-medium">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
|
||||
Operational
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
|
||||
<span class="text-gray-700 text-sm">Dashboard</span>
|
||||
<span class="flex items-center gap-1.5 text-emerald-600 text-xs font-medium">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
|
||||
Operational
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
|
||||
<span class="text-gray-700 text-sm">Database</span>
|
||||
<span class="flex items-center gap-1.5 text-emerald-600 text-xs font-medium">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
|
||||
Operational
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="px-4 py-3 border-t border-gray-100 text-center">
|
||||
<span class="text-gray-400 text-xs">Powered by OneUptime</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -398,10 +603,70 @@
|
||||
<!-- Feature 4: Incident Communication -->
|
||||
<div class="relative">
|
||||
<div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
|
||||
<!-- Image (left on desktop) -->
|
||||
<!-- Custom Visual (left on desktop) -->
|
||||
<div class="order-2 lg:order-1 mt-12 lg:mt-0 relative">
|
||||
<div class="relative rounded-2xl bg-gray-100 p-2 shadow-lg ring-1 ring-gray-200/60">
|
||||
<img class="w-full rounded-xl" src="/img/incident-report.png" alt="Incident Communication">
|
||||
<div class="relative">
|
||||
<!-- Subtle background -->
|
||||
<div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
|
||||
|
||||
<!-- Incident Update Card -->
|
||||
<div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
|
||||
<!-- Header -->
|
||||
<div class="bg-amber-50 px-4 py-3 border-b border-amber-100">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-amber-500 animate-pulse"></div>
|
||||
<span class="text-amber-800 text-sm font-medium">Active Incident</span>
|
||||
</div>
|
||||
<span class="text-amber-600 text-xs">Updated 2m ago</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Incident details -->
|
||||
<div class="p-4">
|
||||
<h4 class="text-gray-900 font-semibold mb-2">API Latency Degradation</h4>
|
||||
<p class="text-gray-600 text-sm mb-4">We are investigating elevated response times affecting the API.</p>
|
||||
|
||||
<!-- Timeline -->
|
||||
<div class="space-y-3">
|
||||
<div class="flex gap-3">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-2 h-2 rounded-full bg-amber-500"></div>
|
||||
<div class="flex-1 w-px bg-gray-200"></div>
|
||||
</div>
|
||||
<div class="pb-3">
|
||||
<div class="flex items-center gap-2 mb-0.5">
|
||||
<span class="text-xs font-medium text-gray-900">Investigating</span>
|
||||
<span class="text-xs text-gray-400">14:32 UTC</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500">Root cause identified as database connection pool exhaustion.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-3">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-2 h-2 rounded-full bg-red-500"></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center gap-2 mb-0.5">
|
||||
<span class="text-xs font-medium text-gray-900">Identified</span>
|
||||
<span class="text-xs text-gray-400">14:15 UTC</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500">Monitoring detected elevated p99 latency.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Affected services -->
|
||||
<div class="px-4 py-3 bg-gray-50 border-t border-gray-100">
|
||||
<div class="text-xs text-gray-500 mb-2">Affected Services</div>
|
||||
<div class="flex gap-2">
|
||||
<span class="px-2 py-1 bg-amber-100 text-amber-700 rounded text-xs">API</span>
|
||||
<span class="px-2 py-1 bg-amber-100 text-amber-700 rounded text-xs">Dashboard</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -72,30 +72,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stats Section -->
|
||||
<div class="bg-gray-50 py-16 sm:py-20">
|
||||
<div class="mx-auto max-w-5xl px-6 lg:px-8">
|
||||
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4 sm:gap-6">
|
||||
<div class="text-center p-6 sm:p-8 rounded-2xl bg-white border border-gray-200/60 shadow-sm transition-all duration-300 hover:shadow-md hover:border-gray-300">
|
||||
<div class="text-3xl sm:text-4xl font-semibold text-gray-900 mb-1">Sub-ms</div>
|
||||
<div class="text-sm text-gray-500">Span Precision</div>
|
||||
</div>
|
||||
<div class="text-center p-6 sm:p-8 rounded-2xl bg-white border border-gray-200/60 shadow-sm transition-all duration-300 hover:shadow-md hover:border-gray-300">
|
||||
<div class="text-3xl sm:text-4xl font-semibold text-gray-900 mb-1">Full</div>
|
||||
<div class="text-sm text-gray-500">Context Propagation</div>
|
||||
</div>
|
||||
<div class="text-center p-6 sm:p-8 rounded-2xl bg-white border border-gray-200/60 shadow-sm transition-all duration-300 hover:shadow-md hover:border-gray-300">
|
||||
<div class="text-3xl sm:text-4xl font-semibold text-gray-900 mb-1">3-in-1</div>
|
||||
<div class="text-sm text-gray-500">Logs & Metrics</div>
|
||||
</div>
|
||||
<div class="text-center p-6 sm:p-8 rounded-2xl bg-white border border-gray-200/60 shadow-sm transition-all duration-300 hover:shadow-md hover:border-gray-300">
|
||||
<div class="text-3xl sm:text-4xl font-semibold text-gray-900 mb-1">Auto</div>
|
||||
<div class="text-sm text-gray-500">Service Maps</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%- include('logo-roll') -%>
|
||||
|
||||
<!-- How It Works Section -->
|
||||
@@ -232,7 +208,107 @@
|
||||
</div>
|
||||
<div class="mt-12 lg:mt-0">
|
||||
<div class="relative">
|
||||
<img class="relative w-full rounded-2xl shadow-lg ring-1 ring-gray-900/10" src="/img/apm-3.png" alt="Service dependency map">
|
||||
<!-- Subtle background -->
|
||||
<div class="absolute -inset-4 bg-cyan-100/50 rounded-3xl blur-2xl"></div>
|
||||
|
||||
<!-- Service Map Visual -->
|
||||
<div class="relative bg-white rounded-2xl border border-gray-200 shadow-lg p-6">
|
||||
<!-- Browser mockup header -->
|
||||
<div class="flex items-center gap-2 pb-4 border-b border-gray-100 mb-6">
|
||||
<div class="flex gap-1.5">
|
||||
<div class="w-3 h-3 rounded-full bg-red-400"></div>
|
||||
<div class="w-3 h-3 rounded-full bg-yellow-400"></div>
|
||||
<div class="w-3 h-3 rounded-full bg-green-400"></div>
|
||||
</div>
|
||||
<div class="flex-1 mx-4">
|
||||
<div class="bg-gray-100 rounded-md px-3 py-1.5 text-xs text-gray-500 text-center">Service Dependency Map</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Service nodes with connections -->
|
||||
<div class="relative h-64">
|
||||
<!-- Connection lines (SVG) -->
|
||||
<svg class="absolute inset-0 w-full h-full" viewBox="0 0 400 220">
|
||||
<!-- API Gateway to Services -->
|
||||
<path d="M200 30 L100 100" stroke="#06b6d4" stroke-width="2" fill="none" stroke-dasharray="4,2" class="animate-pulse"/>
|
||||
<path d="M200 30 L300 100" stroke="#06b6d4" stroke-width="2" fill="none" stroke-dasharray="4,2" class="animate-pulse"/>
|
||||
<path d="M200 30 L200 100" stroke="#06b6d4" stroke-width="2" fill="none" stroke-dasharray="4,2" class="animate-pulse"/>
|
||||
<!-- Services to Database -->
|
||||
<path d="M100 130 L150 190" stroke="#06b6d4" stroke-width="2" fill="none" stroke-dasharray="4,2"/>
|
||||
<path d="M200 130 L200 190" stroke="#06b6d4" stroke-width="2" fill="none" stroke-dasharray="4,2"/>
|
||||
<path d="M300 130 L250 190" stroke="#06b6d4" stroke-width="2" fill="none" stroke-dasharray="4,2"/>
|
||||
</svg>
|
||||
|
||||
<!-- API Gateway Node (Top) -->
|
||||
<div class="absolute left-1/2 top-0 -translate-x-1/2">
|
||||
<div class="bg-cyan-500 text-white rounded-lg px-4 py-2 text-xs font-medium shadow-lg shadow-cyan-500/30">
|
||||
API Gateway
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Service Nodes (Middle Row) -->
|
||||
<div class="absolute left-[15%] top-[35%]">
|
||||
<div class="bg-white border-2 border-cyan-300 rounded-lg px-3 py-2 text-xs font-medium text-gray-700 shadow-md">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-green-500"></div>
|
||||
User Service
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="absolute left-1/2 top-[35%] -translate-x-1/2">
|
||||
<div class="bg-white border-2 border-cyan-300 rounded-lg px-3 py-2 text-xs font-medium text-gray-700 shadow-md">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-green-500"></div>
|
||||
Order Service
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="absolute right-[15%] top-[35%]">
|
||||
<div class="bg-white border-2 border-cyan-300 rounded-lg px-3 py-2 text-xs font-medium text-gray-700 shadow-md">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-yellow-500"></div>
|
||||
Payment Service
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Database Nodes (Bottom Row) -->
|
||||
<div class="absolute left-[25%] bottom-2">
|
||||
<div class="bg-gray-100 border border-gray-300 rounded-lg px-3 py-2 text-xs font-medium text-gray-600">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="w-3 h-3 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/>
|
||||
</svg>
|
||||
Users DB
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="absolute left-1/2 bottom-2 -translate-x-1/2">
|
||||
<div class="bg-gray-100 border border-gray-300 rounded-lg px-3 py-2 text-xs font-medium text-gray-600">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="w-3 h-3 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/>
|
||||
</svg>
|
||||
Orders DB
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="absolute right-[25%] bottom-2">
|
||||
<div class="bg-gray-100 border border-gray-300 rounded-lg px-3 py-2 text-xs font-medium text-gray-600">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="w-3 h-3 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/>
|
||||
</svg>
|
||||
Redis Cache
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -241,7 +317,92 @@
|
||||
<div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
|
||||
<div class="order-2 lg:order-1 mt-12 lg:mt-0">
|
||||
<div class="relative">
|
||||
<img class="relative w-full rounded-2xl shadow-lg ring-1 ring-gray-900/10" src="/img/apm-2.png" alt="Trace latency breakdown">
|
||||
<!-- Subtle background -->
|
||||
<div class="absolute -inset-4 bg-teal-100/50 rounded-3xl blur-2xl"></div>
|
||||
|
||||
<!-- Waterfall Trace View -->
|
||||
<div class="relative bg-white rounded-2xl border border-gray-200 shadow-lg p-6">
|
||||
<!-- Browser mockup header -->
|
||||
<div class="flex items-center gap-2 pb-4 border-b border-gray-100 mb-4">
|
||||
<div class="flex gap-1.5">
|
||||
<div class="w-3 h-3 rounded-full bg-red-400"></div>
|
||||
<div class="w-3 h-3 rounded-full bg-yellow-400"></div>
|
||||
<div class="w-3 h-3 rounded-full bg-green-400"></div>
|
||||
</div>
|
||||
<div class="flex-1 mx-4">
|
||||
<div class="bg-gray-100 rounded-md px-3 py-1.5 text-xs text-gray-500 text-center">Trace Waterfall - GET /api/orders</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Timeline header -->
|
||||
<div class="flex items-center justify-between text-xs text-gray-400 mb-3 px-2">
|
||||
<span>0ms</span>
|
||||
<span>100ms</span>
|
||||
<span>200ms</span>
|
||||
<span>300ms</span>
|
||||
<span>400ms</span>
|
||||
</div>
|
||||
|
||||
<!-- Trace spans -->
|
||||
<div class="space-y-2">
|
||||
<!-- Parent span -->
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-24 text-xs text-gray-600 truncate font-medium">api-gateway</div>
|
||||
<div class="flex-1 h-6 bg-gray-100 rounded relative">
|
||||
<div class="absolute left-0 top-0 h-full bg-cyan-500 rounded" style="width: 100%"></div>
|
||||
<span class="absolute right-2 top-1/2 -translate-y-1/2 text-[10px] text-white font-medium">385ms</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Child span 1 -->
|
||||
<div class="flex items-center gap-3 pl-4">
|
||||
<div class="w-20 text-xs text-gray-600 truncate">auth-service</div>
|
||||
<div class="flex-1 h-5 bg-gray-100 rounded relative">
|
||||
<div class="absolute left-[2%] top-0 h-full bg-teal-400 rounded" style="width: 15%"></div>
|
||||
<span class="absolute left-[5%] top-1/2 -translate-y-1/2 text-[10px] text-white font-medium">45ms</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Child span 2 -->
|
||||
<div class="flex items-center gap-3 pl-4">
|
||||
<div class="w-20 text-xs text-gray-600 truncate">order-service</div>
|
||||
<div class="flex-1 h-5 bg-gray-100 rounded relative">
|
||||
<div class="absolute left-[18%] top-0 h-full bg-cyan-400 rounded" style="width: 55%"></div>
|
||||
<span class="absolute left-[35%] top-1/2 -translate-y-1/2 text-[10px] text-white font-medium">210ms</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Grandchild span -->
|
||||
<div class="flex items-center gap-3 pl-8">
|
||||
<div class="w-16 text-xs text-gray-500 truncate">db-query</div>
|
||||
<div class="flex-1 h-4 bg-gray-100 rounded relative">
|
||||
<div class="absolute left-[25%] top-0 h-full bg-amber-400 rounded" style="width: 35%"></div>
|
||||
<span class="absolute left-[35%] top-1/2 -translate-y-1/2 text-[10px] text-gray-700 font-medium">142ms</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Child span 3 -->
|
||||
<div class="flex items-center gap-3 pl-4">
|
||||
<div class="w-20 text-xs text-gray-600 truncate">payment-svc</div>
|
||||
<div class="flex-1 h-5 bg-gray-100 rounded relative">
|
||||
<div class="absolute left-[75%] top-0 h-full bg-teal-500 rounded" style="width: 20%"></div>
|
||||
<span class="absolute left-[78%] top-1/2 -translate-y-1/2 text-[10px] text-white font-medium">78ms</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Summary footer -->
|
||||
<div class="mt-4 pt-3 border-t border-gray-100 flex items-center justify-between text-xs">
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="text-gray-500">Total: <span class="font-medium text-gray-700">385ms</span></span>
|
||||
<span class="text-gray-500">Spans: <span class="font-medium text-gray-700">5</span></span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-green-500"></div>
|
||||
<span class="text-gray-500">Success</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="order-1 lg:order-2">
|
||||
@@ -320,7 +481,87 @@
|
||||
</div>
|
||||
<div class="mt-12 lg:mt-0">
|
||||
<div class="relative">
|
||||
<img class="relative w-full rounded-2xl shadow-lg ring-1 ring-gray-900/10" src="/img/error-exception.png" alt="Error tracking in traces">
|
||||
<!-- Subtle background -->
|
||||
<div class="absolute -inset-4 bg-red-100/50 rounded-3xl blur-2xl"></div>
|
||||
|
||||
<!-- Error Spans in Trace View -->
|
||||
<div class="relative bg-white rounded-2xl border border-gray-200 shadow-lg p-6">
|
||||
<!-- Browser mockup header -->
|
||||
<div class="flex items-center gap-2 pb-4 border-b border-gray-100 mb-4">
|
||||
<div class="flex gap-1.5">
|
||||
<div class="w-3 h-3 rounded-full bg-red-400"></div>
|
||||
<div class="w-3 h-3 rounded-full bg-yellow-400"></div>
|
||||
<div class="w-3 h-3 rounded-full bg-green-400"></div>
|
||||
</div>
|
||||
<div class="flex-1 mx-4">
|
||||
<div class="bg-gray-100 rounded-md px-3 py-1.5 text-xs text-gray-500 text-center">Error Trace - POST /api/checkout</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Error trace spans -->
|
||||
<div class="space-y-2 mb-4">
|
||||
<!-- Parent span -->
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-24 text-xs text-gray-600 truncate font-medium">checkout-svc</div>
|
||||
<div class="flex-1 h-6 bg-gray-100 rounded relative">
|
||||
<div class="absolute left-0 top-0 h-full bg-cyan-500 rounded" style="width: 100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Child span - OK -->
|
||||
<div class="flex items-center gap-3 pl-4">
|
||||
<div class="w-20 text-xs text-gray-600 truncate">cart-service</div>
|
||||
<div class="flex-1 h-5 bg-gray-100 rounded relative">
|
||||
<div class="absolute left-[2%] top-0 h-full bg-teal-400 rounded" style="width: 20%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Child span - ERROR -->
|
||||
<div class="flex items-center gap-3 pl-4">
|
||||
<div class="w-20 text-xs text-red-600 truncate font-medium">payment-svc</div>
|
||||
<div class="flex-1 h-5 bg-gray-100 rounded relative">
|
||||
<div class="absolute left-[25%] top-0 h-full bg-red-500 rounded border-2 border-red-600" style="width: 45%"></div>
|
||||
<div class="absolute left-[27%] top-1/2 -translate-y-1/2 flex items-center gap-1">
|
||||
<svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
|
||||
</svg>
|
||||
<span class="text-[10px] text-white font-medium">ERROR</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Grandchild span - ERROR source -->
|
||||
<div class="flex items-center gap-3 pl-8">
|
||||
<div class="w-16 text-xs text-red-500 truncate">stripe-api</div>
|
||||
<div class="flex-1 h-4 bg-gray-100 rounded relative">
|
||||
<div class="absolute left-[30%] top-0 h-full bg-red-400 rounded" style="width: 35%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Error details panel -->
|
||||
<div class="bg-red-50 border border-red-200 rounded-lg p-3">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<svg class="w-4 h-4 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
|
||||
</svg>
|
||||
<span class="text-xs font-semibold text-red-800">PaymentDeclinedException</span>
|
||||
</div>
|
||||
<div class="text-[11px] text-red-700 font-mono bg-red-100 rounded px-2 py-1.5">
|
||||
Card declined: insufficient funds<br/>
|
||||
<span class="text-red-500">at StripeClient.charge() line 142</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Summary footer -->
|
||||
<div class="mt-3 pt-3 border-t border-gray-100 flex items-center justify-between text-xs">
|
||||
<span class="text-gray-500">Trace ID: <span class="font-mono text-gray-600">a1b2c3d4</span></span>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-red-500"></div>
|
||||
<span class="text-red-600 font-medium">Failed</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -329,7 +570,90 @@
|
||||
<div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
|
||||
<div class="order-2 lg:order-1 mt-12 lg:mt-0">
|
||||
<div class="relative">
|
||||
<img class="relative w-full rounded-2xl shadow-lg ring-1 ring-gray-900/10" src="/img/log-management.png" alt="Trace correlation">
|
||||
<!-- Subtle background -->
|
||||
<div class="absolute -inset-4 bg-indigo-100/50 rounded-3xl blur-2xl"></div>
|
||||
|
||||
<!-- Correlated Logs and Traces View -->
|
||||
<div class="relative bg-white rounded-2xl border border-gray-200 shadow-lg p-6">
|
||||
<!-- Browser mockup header -->
|
||||
<div class="flex items-center gap-2 pb-4 border-b border-gray-100 mb-4">
|
||||
<div class="flex gap-1.5">
|
||||
<div class="w-3 h-3 rounded-full bg-red-400"></div>
|
||||
<div class="w-3 h-3 rounded-full bg-yellow-400"></div>
|
||||
<div class="w-3 h-3 rounded-full bg-green-400"></div>
|
||||
</div>
|
||||
<div class="flex-1 mx-4">
|
||||
<div class="bg-gray-100 rounded-md px-3 py-1.5 text-xs text-gray-500 text-center">Trace & Log Correlation</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Split view: Trace on left, Logs on right -->
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<!-- Trace panel -->
|
||||
<div class="bg-gray-50 rounded-lg p-3">
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
<div class="w-5 h-5 rounded bg-cyan-500 flex items-center justify-center">
|
||||
<svg class="w-3 h-3 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>
|
||||
<span class="text-xs font-semibold text-gray-700">Trace Spans</span>
|
||||
</div>
|
||||
<div class="space-y-1.5">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-16 text-[10px] text-gray-500 truncate">api-gateway</div>
|
||||
<div class="flex-1 h-3 bg-gray-200 rounded">
|
||||
<div class="h-full bg-cyan-500 rounded" style="width: 100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 pl-2">
|
||||
<div class="w-14 text-[10px] text-gray-500 truncate">user-svc</div>
|
||||
<div class="flex-1 h-2.5 bg-gray-200 rounded">
|
||||
<div class="h-full bg-teal-400 rounded" style="width: 40%; margin-left: 5%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 pl-2">
|
||||
<div class="w-14 text-[10px] text-cyan-600 font-medium truncate">order-svc</div>
|
||||
<div class="flex-1 h-2.5 bg-gray-200 rounded relative">
|
||||
<div class="h-full bg-cyan-400 rounded border border-cyan-600" style="width: 50%; margin-left: 45%"></div>
|
||||
<div class="absolute right-1 top-1/2 -translate-y-1/2 w-1.5 h-1.5 bg-indigo-500 rounded-full animate-pulse"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Logs panel -->
|
||||
<div class="bg-gray-900 rounded-lg p-3">
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
<div class="w-5 h-5 rounded bg-indigo-500 flex items-center justify-center">
|
||||
<svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="text-xs font-semibold text-gray-300">Correlated Logs</span>
|
||||
</div>
|
||||
<div class="space-y-1 font-mono text-[9px]">
|
||||
<div class="text-gray-400"><span class="text-gray-500">10:42:01</span> <span class="text-green-400">INFO</span> Request received</div>
|
||||
<div class="text-gray-400"><span class="text-gray-500">10:42:01</span> <span class="text-green-400">INFO</span> Auth validated</div>
|
||||
<div class="bg-indigo-900/50 rounded px-1 py-0.5 text-indigo-300 border-l-2 border-indigo-500"><span class="text-gray-500">10:42:02</span> <span class="text-cyan-400">DEBUG</span> Order created #1234</div>
|
||||
<div class="bg-indigo-900/50 rounded px-1 py-0.5 text-indigo-300 border-l-2 border-indigo-500"><span class="text-gray-500">10:42:02</span> <span class="text-cyan-400">DEBUG</span> Inventory checked</div>
|
||||
<div class="text-gray-400"><span class="text-gray-500">10:42:03</span> <span class="text-green-400">INFO</span> Response sent</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Correlation indicator -->
|
||||
<div class="mt-4 pt-3 border-t border-gray-100">
|
||||
<div class="flex items-center justify-center gap-3">
|
||||
<div class="flex items-center gap-1.5 px-3 py-1.5 bg-indigo-50 rounded-full">
|
||||
<svg class="w-3.5 h-3.5 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/>
|
||||
</svg>
|
||||
<span class="text-[10px] font-medium text-indigo-700">Trace ID: a1b2c3d4 linked to 5 logs</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="order-1 lg:order-2">
|
||||
|
||||
@@ -74,30 +74,6 @@
|
||||
|
||||
<%- include('logo-roll') -%>
|
||||
|
||||
<!-- Stats Section -->
|
||||
<div class="bg-gray-50 py-16 sm:py-20">
|
||||
<div class="mx-auto max-w-5xl px-6 lg:px-8">
|
||||
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4 sm:gap-6">
|
||||
<div class="text-center p-6 sm:p-8 rounded-2xl bg-white border border-gray-200/60 shadow-sm transition-all duration-300 hover:shadow-md hover:border-gray-300">
|
||||
<div class="text-3xl sm:text-4xl font-semibold text-gray-900 mb-1">5000+</div>
|
||||
<div class="text-sm text-gray-500">Integrations</div>
|
||||
</div>
|
||||
<div class="text-center p-6 sm:p-8 rounded-2xl bg-white border border-gray-200/60 shadow-sm transition-all duration-300 hover:shadow-md hover:border-gray-300">
|
||||
<div class="text-3xl sm:text-4xl font-semibold text-gray-900 mb-1">∞</div>
|
||||
<div class="text-sm text-gray-500">Workflows</div>
|
||||
</div>
|
||||
<div class="text-center p-6 sm:p-8 rounded-2xl bg-white border border-gray-200/60 shadow-sm transition-all duration-300 hover:shadow-md hover:border-gray-300">
|
||||
<div class="text-3xl sm:text-4xl font-semibold text-gray-900 mb-1">No-Code</div>
|
||||
<div class="text-sm text-gray-500">Builder</div>
|
||||
</div>
|
||||
<div class="text-center p-6 sm:p-8 rounded-2xl bg-white border border-gray-200/60 shadow-sm transition-all duration-300 hover:shadow-md hover:border-gray-300">
|
||||
<div class="text-3xl sm:text-4xl font-semibold text-gray-900 mb-1">Secure</div>
|
||||
<div class="text-sm text-gray-500">Secrets</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- How It Works Section -->
|
||||
<div class="relative bg-gray-50 py-24 sm:py-32">
|
||||
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
@@ -232,7 +208,125 @@
|
||||
</div>
|
||||
<div class="mt-12 lg:mt-0">
|
||||
<div class="relative">
|
||||
<img class="relative w-full rounded-2xl shadow-lg ring-1 ring-gray-900/10" src="/img/workflow-builder.png" alt="Workflow builder">
|
||||
<!-- Subtle background -->
|
||||
<div class="absolute -inset-4 bg-violet-100/50 rounded-3xl blur-2xl"></div>
|
||||
|
||||
<!-- Workflow Builder Diagram -->
|
||||
<div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
|
||||
<!-- Header -->
|
||||
<div class="bg-gray-50 px-4 py-2.5 flex items-center gap-3 border-b border-gray-100">
|
||||
<div class="flex gap-1.5">
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
|
||||
</div>
|
||||
<span class="text-gray-500 text-xs">Workflow Builder</span>
|
||||
</div>
|
||||
|
||||
<!-- Workflow Canvas -->
|
||||
<div class="p-6 bg-gray-50/50">
|
||||
<div class="flex flex-col items-center gap-3">
|
||||
<!-- Trigger Node -->
|
||||
<div class="relative">
|
||||
<div class="bg-violet-600 text-white px-4 py-3 rounded-xl shadow-md flex items-center gap-2 min-w-[160px]">
|
||||
<div class="w-8 h-8 rounded-lg bg-violet-500 flex items-center justify-center">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-xs font-semibold">Trigger</div>
|
||||
<div class="text-[10px] text-violet-200">On Incident Created</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Connector Line -->
|
||||
<div class="w-0.5 h-6 bg-gray-300"></div>
|
||||
|
||||
<!-- Condition Node -->
|
||||
<div class="relative">
|
||||
<div class="bg-white border-2 border-amber-400 px-4 py-3 rounded-xl shadow-md flex items-center gap-2 min-w-[160px]">
|
||||
<div class="w-8 h-8 rounded-lg bg-amber-50 flex items-center justify-center">
|
||||
<svg class="w-4 h-4 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-xs font-semibold text-gray-800">Condition</div>
|
||||
<div class="text-[10px] text-gray-500">If severity = Critical</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Connector Lines (Split) -->
|
||||
<div class="flex items-start justify-center gap-12">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-0.5 h-4 bg-gray-300"></div>
|
||||
<div class="text-[9px] text-emerald-600 font-medium mb-1">Yes</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-0.5 h-4 bg-gray-300"></div>
|
||||
<div class="text-[9px] text-gray-400 font-medium mb-1">No</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action Nodes -->
|
||||
<div class="flex items-start justify-center gap-4">
|
||||
<!-- Slack Action -->
|
||||
<div class="bg-white border border-gray-200 px-3 py-2.5 rounded-lg shadow-sm flex items-center gap-2">
|
||||
<div class="w-6 h-6 rounded bg-[#4A154B] flex items-center justify-center">
|
||||
<svg class="w-3.5 h-3.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.313z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-[10px] font-medium text-gray-800">Send Slack</div>
|
||||
<div class="text-[9px] text-gray-400">#incidents</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Log Action -->
|
||||
<div class="bg-white border border-gray-200 px-3 py-2.5 rounded-lg shadow-sm flex items-center gap-2 opacity-50">
|
||||
<div class="w-6 h-6 rounded bg-gray-100 flex items-center justify-center">
|
||||
<svg class="w-3.5 h-3.5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-[10px] font-medium text-gray-500">Log Event</div>
|
||||
<div class="text-[9px] text-gray-400">Info level</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Final Connector -->
|
||||
<div class="w-0.5 h-4 bg-gray-300 -mt-1 ml-[-60px]"></div>
|
||||
|
||||
<!-- Email Action -->
|
||||
<div class="bg-white border border-gray-200 px-3 py-2.5 rounded-lg shadow-sm flex items-center gap-2 -mt-1 ml-[-60px]">
|
||||
<div class="w-6 h-6 rounded bg-violet-100 flex items-center justify-center">
|
||||
<svg class="w-3.5 h-3.5 text-violet-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-[10px] font-medium text-gray-800">Send Email</div>
|
||||
<div class="text-[9px] text-gray-400">On-call team</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="px-4 py-2.5 bg-white border-t border-gray-100 flex items-center justify-between">
|
||||
<span class="text-gray-400 text-xs">Incident Response Workflow</span>
|
||||
<span class="flex items-center gap-1 px-2 py-0.5 bg-emerald-50 rounded text-[10px] text-emerald-600 border border-emerald-200">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
|
||||
Active
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -241,7 +335,114 @@
|
||||
<div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
|
||||
<div class="order-2 lg:order-1 mt-12 lg:mt-0">
|
||||
<div class="relative">
|
||||
<img class="relative w-full rounded-2xl shadow-lg ring-1 ring-gray-900/10" src="/img/workflow-logs.png" alt="Workflow logs">
|
||||
<!-- Subtle background -->
|
||||
<div class="absolute -inset-4 bg-violet-100/50 rounded-3xl blur-2xl"></div>
|
||||
|
||||
<!-- Workflow Logs Panel -->
|
||||
<div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
|
||||
<!-- Header -->
|
||||
<div class="bg-gray-50 px-4 py-2.5 flex items-center justify-between border-b border-gray-100">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="flex gap-1.5">
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
|
||||
</div>
|
||||
<span class="text-gray-500 text-xs">Workflow Logs</span>
|
||||
</div>
|
||||
<span class="text-gray-400 text-xs">Today</span>
|
||||
</div>
|
||||
|
||||
<!-- Logs List -->
|
||||
<div class="p-4 space-y-2">
|
||||
<!-- Success Log -->
|
||||
<div class="flex items-start gap-3 p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
|
||||
<div class="w-6 h-6 rounded-full bg-emerald-100 flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<svg class="w-3.5 h-3.5 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm font-medium text-gray-800">Deploy Notification</span>
|
||||
<span class="text-xs text-gray-400">2m ago</span>
|
||||
</div>
|
||||
<div class="text-xs text-gray-500 mt-0.5">Completed in 1.2s - 4 steps executed</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Error Log -->
|
||||
<div class="flex items-start gap-3 p-3 bg-rose-50 rounded-lg border border-rose-100">
|
||||
<div class="w-6 h-6 rounded-full bg-rose-100 flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<svg class="w-3.5 h-3.5 text-rose-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm font-medium text-rose-800">Backup Database</span>
|
||||
<span class="text-xs text-rose-400">15m ago</span>
|
||||
</div>
|
||||
<div class="text-xs text-rose-600 mt-0.5">Failed at step 3 - Connection timeout</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Success Log -->
|
||||
<div class="flex items-start gap-3 p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
|
||||
<div class="w-6 h-6 rounded-full bg-emerald-100 flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<svg class="w-3.5 h-3.5 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm font-medium text-gray-800">Incident Alert</span>
|
||||
<span class="text-xs text-gray-400">32m ago</span>
|
||||
</div>
|
||||
<div class="text-xs text-gray-500 mt-0.5">Completed in 0.8s - 6 steps executed</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Running Log -->
|
||||
<div class="flex items-start gap-3 p-3 bg-violet-50 rounded-lg border border-violet-100">
|
||||
<div class="w-6 h-6 rounded-full bg-violet-100 flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<svg class="w-3.5 h-3.5 text-violet-600 animate-spin" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm font-medium text-violet-800">Sync User Data</span>
|
||||
<span class="text-xs text-violet-400">Running...</span>
|
||||
</div>
|
||||
<div class="text-xs text-violet-600 mt-0.5">Step 2 of 5 - Processing records</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Success Log -->
|
||||
<div class="flex items-start gap-3 p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
|
||||
<div class="w-6 h-6 rounded-full bg-emerald-100 flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<svg class="w-3.5 h-3.5 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm font-medium text-gray-800">Daily Report</span>
|
||||
<span class="text-xs text-gray-400">1h ago</span>
|
||||
</div>
|
||||
<div class="text-xs text-gray-500 mt-0.5">Completed in 3.4s - 8 steps executed</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="px-4 py-2.5 bg-gray-50 border-t border-gray-100 flex items-center justify-between">
|
||||
<span class="text-gray-400 text-xs">Showing 5 of 127 executions</span>
|
||||
<span class="text-violet-600 text-xs font-medium">View all</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="order-1 lg:order-2">
|
||||
@@ -320,7 +521,120 @@
|
||||
</div>
|
||||
<div class="mt-12 lg:mt-0">
|
||||
<div class="relative">
|
||||
<img class="relative w-full rounded-2xl shadow-lg ring-1 ring-gray-900/10" src="/img/workflow-variables.png" alt="Workflow variables">
|
||||
<!-- Subtle background -->
|
||||
<div class="absolute -inset-4 bg-violet-100/50 rounded-3xl blur-2xl"></div>
|
||||
|
||||
<!-- Variables Panel -->
|
||||
<div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
|
||||
<!-- Header -->
|
||||
<div class="bg-gray-50 px-4 py-2.5 flex items-center justify-between border-b border-gray-100">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="flex gap-1.5">
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
|
||||
</div>
|
||||
<span class="text-gray-500 text-xs">Workflow Variables</span>
|
||||
</div>
|
||||
<button class="text-violet-600 text-xs font-medium flex items-center gap-1">
|
||||
<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Variables List -->
|
||||
<div class="p-4 space-y-3">
|
||||
<!-- Variable 1 - Secret -->
|
||||
<div class="bg-gray-50 rounded-lg p-3 border border-gray-200">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-6 h-6 rounded bg-violet-100 flex items-center justify-center">
|
||||
<svg class="w-3.5 h-3.5 text-violet-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
||||
</svg>
|
||||
</div>
|
||||
<span class="text-sm font-medium text-gray-800">SLACK_WEBHOOK_URL</span>
|
||||
</div>
|
||||
<span class="px-2 py-0.5 bg-violet-100 text-violet-700 text-[10px] font-medium rounded">Secret</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 bg-white rounded border border-gray-200 px-3 py-2">
|
||||
<span class="text-gray-400 text-xs font-mono tracking-wider">************************</span>
|
||||
<svg class="w-3.5 h-3.5 text-gray-400 ml-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Variable 2 - API Key -->
|
||||
<div class="bg-gray-50 rounded-lg p-3 border border-gray-200">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-6 h-6 rounded bg-amber-100 flex items-center justify-center">
|
||||
<svg class="w-3.5 h-3.5 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
|
||||
</svg>
|
||||
</div>
|
||||
<span class="text-sm font-medium text-gray-800">API_KEY</span>
|
||||
</div>
|
||||
<span class="px-2 py-0.5 bg-amber-100 text-amber-700 text-[10px] font-medium rounded">Secret</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 bg-white rounded border border-gray-200 px-3 py-2">
|
||||
<span class="text-gray-400 text-xs font-mono tracking-wider">sk-*****************</span>
|
||||
<svg class="w-3.5 h-3.5 text-gray-400 ml-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Variable 3 - Environment -->
|
||||
<div class="bg-gray-50 rounded-lg p-3 border border-gray-200">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-6 h-6 rounded bg-emerald-100 flex items-center justify-center">
|
||||
<svg class="w-3.5 h-3.5 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
|
||||
</svg>
|
||||
</div>
|
||||
<span class="text-sm font-medium text-gray-800">ENVIRONMENT</span>
|
||||
</div>
|
||||
<span class="px-2 py-0.5 bg-emerald-100 text-emerald-700 text-[10px] font-medium rounded">Variable</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 bg-white rounded border border-gray-200 px-3 py-2">
|
||||
<span class="text-gray-700 text-xs font-mono">production</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Variable 4 - Team Email -->
|
||||
<div class="bg-gray-50 rounded-lg p-3 border border-gray-200">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-6 h-6 rounded bg-sky-100 flex items-center justify-center">
|
||||
<svg class="w-3.5 h-3.5 text-sky-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<span class="text-sm font-medium text-gray-800">TEAM_EMAIL</span>
|
||||
</div>
|
||||
<span class="px-2 py-0.5 bg-sky-100 text-sky-700 text-[10px] font-medium rounded">Variable</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 bg-white rounded border border-gray-200 px-3 py-2">
|
||||
<span class="text-gray-700 text-xs font-mono">oncall@company.com</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="px-4 py-2.5 bg-gray-50 border-t border-gray-100 flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="w-3.5 h-3.5 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||
</svg>
|
||||
<span class="text-gray-500 text-xs">Encrypted at rest & in transit</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -329,7 +643,103 @@
|
||||
<div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
|
||||
<div class="order-2 lg:order-1 mt-12 lg:mt-0">
|
||||
<div class="relative">
|
||||
<img class="relative w-full rounded-2xl shadow-lg ring-1 ring-gray-900/10" src="/img/workflow-custom-code.png" alt="Custom code in workflows">
|
||||
<!-- Subtle background -->
|
||||
<div class="absolute -inset-4 bg-violet-100/50 rounded-3xl blur-2xl"></div>
|
||||
|
||||
<!-- Code Editor Mockup -->
|
||||
<div class="relative bg-gray-900 rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-700">
|
||||
<!-- Editor Header -->
|
||||
<div class="bg-gray-800 px-4 py-2.5 flex items-center justify-between border-b border-gray-700">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex gap-1.5">
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
|
||||
</div>
|
||||
<span class="text-gray-400 text-xs">custom-action.js</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="px-2 py-0.5 bg-violet-600/20 text-violet-400 text-[10px] font-medium rounded">JavaScript</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Code Content -->
|
||||
<div class="p-4 font-mono text-xs leading-relaxed overflow-x-auto">
|
||||
<div class="flex">
|
||||
<div class="text-gray-600 select-none pr-4 text-right" style="min-width: 2rem;">1</div>
|
||||
<div><span class="text-violet-400">async</span> <span class="text-sky-400">function</span> <span class="text-yellow-300">execute</span><span class="text-gray-300">(</span><span class="text-orange-300">context</span><span class="text-gray-300">) {</span></div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="text-gray-600 select-none pr-4 text-right" style="min-width: 2rem;">2</div>
|
||||
<div><span class="text-gray-500"> // Get incident data from trigger</span></div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="text-gray-600 select-none pr-4 text-right" style="min-width: 2rem;">3</div>
|
||||
<div><span class="text-gray-300"> </span><span class="text-violet-400">const</span> <span class="text-gray-300">{ incident } = context.</span><span class="text-sky-300">data</span><span class="text-gray-300">;</span></div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="text-gray-600 select-none pr-4 text-right" style="min-width: 2rem;">4</div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="text-gray-600 select-none pr-4 text-right" style="min-width: 2rem;">5</div>
|
||||
<div><span class="text-gray-500"> // Send notification to Slack</span></div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="text-gray-600 select-none pr-4 text-right" style="min-width: 2rem;">6</div>
|
||||
<div><span class="text-gray-300"> </span><span class="text-violet-400">await</span> <span class="text-yellow-300">fetch</span><span class="text-gray-300">(</span><span class="text-emerald-400">process.env.SLACK_URL</span><span class="text-gray-300">, {</span></div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="text-gray-600 select-none pr-4 text-right" style="min-width: 2rem;">7</div>
|
||||
<div><span class="text-gray-300"> method: </span><span class="text-emerald-400">'POST'</span><span class="text-gray-300">,</span></div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="text-gray-600 select-none pr-4 text-right" style="min-width: 2rem;">8</div>
|
||||
<div><span class="text-gray-300"> body: </span><span class="text-sky-400">JSON</span><span class="text-gray-300">.</span><span class="text-yellow-300">stringify</span><span class="text-gray-300">({</span></div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="text-gray-600 select-none pr-4 text-right" style="min-width: 2rem;">9</div>
|
||||
<div><span class="text-gray-300"> text: </span><span class="text-emerald-400">`Alert: </span><span class="text-orange-300">${incident.title}</span><span class="text-emerald-400">`</span></div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="text-gray-600 select-none pr-4 text-right" style="min-width: 2rem;">10</div>
|
||||
<div><span class="text-gray-300"> })</span></div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="text-gray-600 select-none pr-4 text-right" style="min-width: 2rem;">11</div>
|
||||
<div><span class="text-gray-300"> });</span></div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="text-gray-600 select-none pr-4 text-right" style="min-width: 2rem;">12</div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="text-gray-600 select-none pr-4 text-right" style="min-width: 2rem;">13</div>
|
||||
<div><span class="text-gray-300"> </span><span class="text-violet-400">return</span><span class="text-gray-300"> { success: </span><span class="text-orange-400">true</span><span class="text-gray-300"> };</span></div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="text-gray-600 select-none pr-4 text-right" style="min-width: 2rem;">14</div>
|
||||
<div><span class="text-gray-300">}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Editor Footer -->
|
||||
<div class="bg-gray-800 px-4 py-2 border-t border-gray-700 flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-gray-500 text-[10px]">Ln 9, Col 24</span>
|
||||
<span class="text-gray-600">|</span>
|
||||
<span class="text-gray-500 text-[10px]">UTF-8</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="flex items-center gap-1 px-2 py-0.5 bg-emerald-600/20 rounded text-[10px] text-emerald-400">
|
||||
<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
Valid
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="order-1 lg:order-2">
|
||||
|
||||
Reference in New Issue
Block a user