mirror of
https://github.com/OneUptime/oneuptime.git
synced 2026-04-06 00:32:12 +02:00
1289 lines
82 KiB
Plaintext
1289 lines
82 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="en" id="home">
|
|
|
|
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
|
|
|
|
<head>
|
|
<title>OneUptime | AI Agent - Automatically Fix Code Issues</title>
|
|
<meta name="description"
|
|
content="AI Agent automatically fixes errors, performance issues, and database queries in your code. Powered by OpenTelemetry observability data. Get pull requests with fixes, not just alerts.">
|
|
<%- include('head', {
|
|
enableGoogleTagManager: typeof enableGoogleTagManager !== 'undefined' ? enableGoogleTagManager : false
|
|
}) -%>
|
|
</head>
|
|
|
|
<body>
|
|
<%- include('nav') -%>
|
|
<main id="main-content">
|
|
|
|
<!-- Hero Section -->
|
|
<div class="relative isolate overflow-hidden bg-white" id="ai-agent-hero-section">
|
|
<!-- Subtle grid pattern background -->
|
|
<div class="absolute inset-0 -z-10 h-full w-full bg-white bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_110%)]"></div>
|
|
|
|
<!-- Grid glow effect that follows cursor - violet/pink color -->
|
|
<div id="ai-agent-grid-glow" class="absolute inset-0 -z-9 pointer-events-none" style="opacity: 0; transition: opacity 0.3s ease-out; background: linear-gradient(to right, rgba(139, 92, 246, 0.3) 1px, transparent 1px), linear-gradient(to bottom, rgba(139, 92, 246, 0.3) 1px, transparent 1px); background-size: 4rem 4rem; -webkit-mask-image: radial-gradient(circle 250px at var(--mouse-x, 50%) var(--mouse-y, 50%), black 0%, transparent 100%); mask-image: radial-gradient(circle 250px at var(--mouse-x, 50%) var(--mouse-y, 50%), black 0%, transparent 100%);"></div>
|
|
|
|
<div class="py-20 sm:py-28 lg:py-32">
|
|
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<div class="mx-auto max-w-3xl text-center">
|
|
<!-- Minimal badge -->
|
|
<p class="text-sm font-medium text-violet-600 mb-4">Powered by OpenTelemetry</p>
|
|
|
|
<h1 class="text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl lg:text-6xl">
|
|
Stop debugging. Start merging fixes
|
|
</h1>
|
|
<p class="mt-6 text-lg leading-8 text-gray-600 max-w-2xl mx-auto">
|
|
AI Agent automatically fixes errors, performance issues, and database queries in your code. Get pull requests with fixes, not just alerts.
|
|
</p>
|
|
|
|
<div class="mt-10 flex items-center justify-center gap-x-6">
|
|
<a href="/accounts/register"
|
|
class="rounded-lg bg-gray-900 px-5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-800 transition-colors">
|
|
Get started
|
|
</a>
|
|
<a href="/enterprise/demo" class="text-sm font-semibold text-gray-900 hover:text-gray-600 transition-colors">
|
|
Request demo <span aria-hidden="true">→</span>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Subtle feature list -->
|
|
<div class="mt-12 flex flex-wrap items-center justify-center gap-x-8 gap-y-3 text-sm text-gray-500">
|
|
<span>Auto-fix errors</span>
|
|
<span class="hidden sm:inline text-gray-300">|</span>
|
|
<span>Ready-to-merge PRs</span>
|
|
<span class="hidden sm:inline text-gray-300">|</span>
|
|
<span>Any LLM provider</span>
|
|
<span class="hidden sm:inline text-gray-300">|</span>
|
|
<span>Zero code storage</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Clean hero image -->
|
|
<div class="mt-16 sm:mt-20">
|
|
<div class="relative mx-auto max-w-5xl">
|
|
<div class="rounded-xl bg-gray-900/5 p-1.5 ring-1 ring-gray-900/10">
|
|
<img src="/img/copilot.png" alt="OneUptime AI Agent" width="2432" height="1442"
|
|
class="rounded-lg shadow-lg">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<%- include('logo-roll') -%>
|
|
|
|
<!-- How It Works -->
|
|
<div class="relative bg-gray-50 py-24 sm:py-32">
|
|
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<div class="mx-auto max-w-2xl text-center mb-16">
|
|
<p class="text-sm font-medium text-violet-600 uppercase tracking-wide mb-3">How It Works</p>
|
|
<h2 class="text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl">
|
|
From detection to pull request
|
|
</h2>
|
|
<p class="mt-4 text-lg text-gray-600">
|
|
AI Agent works autonomously to identify issues and create ready-to-merge fixes.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mx-auto max-w-5xl">
|
|
<!-- Connecting line for desktop -->
|
|
<div class="hidden lg:block relative">
|
|
<div class="absolute top-8 left-[calc(12.5%+24px)] right-[calc(12.5%+24px)] h-px bg-violet-200"></div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-4">
|
|
<!-- Step 1 -->
|
|
<div class="text-center">
|
|
<div class="relative inline-flex items-center justify-center h-16 w-16 rounded-full bg-violet-600 text-white mb-6 shadow-sm">
|
|
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="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>
|
|
<span class="absolute -bottom-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full bg-white text-xs font-semibold text-violet-600 ring-2 ring-violet-600">1</span>
|
|
</div>
|
|
<h3 class="text-base font-semibold text-gray-900 mb-2">Collect Data</h3>
|
|
<p class="text-sm text-gray-600 leading-relaxed">OpenTelemetry collects traces, logs, and metrics from your application.</p>
|
|
</div>
|
|
|
|
<!-- Step 2 -->
|
|
<div class="text-center">
|
|
<div class="relative inline-flex items-center justify-center h-16 w-16 rounded-full bg-violet-600 text-white mb-6 shadow-sm">
|
|
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
|
</svg>
|
|
<span class="absolute -bottom-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full bg-white text-xs font-semibold text-violet-600 ring-2 ring-violet-600">2</span>
|
|
</div>
|
|
<h3 class="text-base font-semibold text-gray-900 mb-2">Detect Issues</h3>
|
|
<p class="text-sm text-gray-600 leading-relaxed">AI identifies errors, performance bottlenecks, and slow queries.</p>
|
|
</div>
|
|
|
|
<!-- Step 3 -->
|
|
<div class="text-center">
|
|
<div class="relative inline-flex items-center justify-center h-16 w-16 rounded-full bg-violet-600 text-white mb-6 shadow-sm">
|
|
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.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="absolute -bottom-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full bg-white text-xs font-semibold text-violet-600 ring-2 ring-violet-600">3</span>
|
|
</div>
|
|
<h3 class="text-base font-semibold text-gray-900 mb-2">Generate Fix</h3>
|
|
<p class="text-sm text-gray-600 leading-relaxed">AI analyzes your codebase and creates the fix automatically.</p>
|
|
</div>
|
|
|
|
<!-- Step 4 -->
|
|
<div class="text-center">
|
|
<div class="relative inline-flex items-center justify-center h-16 w-16 rounded-full bg-violet-600 text-white mb-6 shadow-sm">
|
|
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
|
|
</svg>
|
|
<span class="absolute -bottom-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full bg-white text-xs font-semibold text-violet-600 ring-2 ring-violet-600">4</span>
|
|
</div>
|
|
<h3 class="text-base font-semibold text-gray-900 mb-2">Create PR</h3>
|
|
<p class="text-sm text-gray-600 leading-relaxed">Pull request with fix and detailed report ready for review.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Why OneUptime Section -->
|
|
<div class="relative overflow-hidden bg-white py-24 sm:py-32">
|
|
|
|
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<!-- Section Header -->
|
|
<div class="mx-auto max-w-2xl text-center mb-20">
|
|
<div class="inline-flex items-center gap-2 rounded-full bg-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-10 w-10 items-center justify-center rounded-xl bg-violet-50 ring-1 ring-violet-200">
|
|
<svg class="h-5 w-5 text-violet-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="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="mt-6 inline-flex items-center gap-1.5 px-4 py-2 bg-gray-900 text-white text-sm font-medium rounded-lg hover:bg-gray-800 transition-colors">
|
|
Get started
|
|
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
<div class="mt-12 lg:mt-0">
|
|
<div class="relative">
|
|
<!-- Subtle background -->
|
|
<div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
|
|
|
|
<!-- 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-gray-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-10 w-10 items-center justify-center rounded-xl bg-violet-50 ring-1 ring-violet-200">
|
|
<svg class="h-5 w-5 text-violet-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="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="mt-6 inline-flex items-center gap-1.5 px-4 py-2 bg-gray-900 text-white text-sm font-medium rounded-lg hover:bg-gray-800 transition-colors">
|
|
Get started
|
|
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Feature 3: 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-10 w-10 items-center justify-center rounded-xl bg-violet-50 ring-1 ring-violet-200">
|
|
<svg class="h-5 w-5 text-violet-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="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="mt-6 inline-flex items-center gap-1.5 px-4 py-2 bg-gray-900 text-white text-sm font-medium rounded-lg hover:bg-gray-800 transition-colors">
|
|
Get started
|
|
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
<div class="mt-12 lg:mt-0">
|
|
<div class="relative">
|
|
<!-- Subtle background -->
|
|
<div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
|
|
|
|
<!-- 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">
|
|
|
|
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<div class="mx-auto max-w-2xl text-center mb-16">
|
|
<div class="inline-flex items-center gap-2 rounded-full bg-pink-50 px-4 py-1.5 text-sm font-medium text-pink-700 ring-1 ring-inset ring-pink-600/20 mb-6">
|
|
<svg class="h-4 w-4 text-pink-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-sm font-medium text-pink-700">Capabilities</span>
|
|
</div>
|
|
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
|
|
Automatically fix issues in your codebase
|
|
</h2>
|
|
<p class="mt-6 text-lg leading-8 text-gray-600">
|
|
Stop spending days debugging. AI Agent analyzes your observability data and creates pull requests with fixes.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mx-auto max-w-7xl">
|
|
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
|
<!-- Feature 1: Fix Errors -->
|
|
<div class="group relative">
|
|
<div class="relative h-full rounded-2xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:border-pink-200 hover:shadow-lg">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-pink-50 ring-1 ring-pink-200">
|
|
<svg class="h-6 w-6 text-pink-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="mt-6 text-xl font-semibold text-gray-900">Fix Errors Automatically</h3>
|
|
<p class="mt-4 text-gray-600 leading-relaxed">When AI Agent notices exceptions in your traces or logs, it automatically fixes the issue and creates a PR.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Feature 2: Performance -->
|
|
<div class="group relative">
|
|
<div class="relative h-full rounded-2xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:border-rose-200 hover:shadow-lg">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-rose-50 ring-1 ring-rose-200">
|
|
<svg class="h-6 w-6 text-rose-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="mt-6 text-xl font-semibold text-gray-900">Fix Performance Issues</h3>
|
|
<p class="mt-4 text-gray-600 leading-relaxed">Analyzes traces that take the longest to execute and creates pull requests with performance optimizations.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Feature 3: Database -->
|
|
<div class="group relative">
|
|
<div class="relative h-full rounded-2xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:border-fuchsia-200 hover:shadow-lg">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-fuchsia-50 ring-1 ring-fuchsia-200">
|
|
<svg class="h-6 w-6 text-fuchsia-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="mt-6 text-xl font-semibold text-gray-900">Fix Database Queries</h3>
|
|
<p class="mt-4 text-gray-600 leading-relaxed">Identifies slow or inefficient database queries and optimizes them with proper indexing and query rewrites.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Feature 4: Frontend -->
|
|
<div class="group relative">
|
|
<div class="relative h-full rounded-2xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:border-purple-200 hover:shadow-lg">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-purple-50 ring-1 ring-purple-200">
|
|
<svg class="h-6 w-6 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="mt-6 text-xl font-semibold text-gray-900">Fix Frontend Issues</h3>
|
|
<p class="mt-4 text-gray-600 leading-relaxed">Addresses frontend-specific performance problems, rendering issues, and JavaScript errors automatically.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Feature 5: Telemetry -->
|
|
<div class="group relative">
|
|
<div class="relative h-full rounded-2xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:border-pink-200 hover:shadow-lg">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-emerald-50 ring-1 ring-emerald-200">
|
|
<svg class="h-6 w-6 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="mt-6 text-xl font-semibold text-gray-900">Add Telemetry Automatically</h3>
|
|
<p class="mt-4 text-gray-600 leading-relaxed">Add tracing, metrics, and logs to your codebase with a single click. No manual instrumentation needed.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Feature 6: Git Integration -->
|
|
<div class="group relative">
|
|
<div class="relative h-full rounded-2xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:border-rose-200 hover:shadow-lg">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-indigo-50 ring-1 ring-indigo-200">
|
|
<svg class="h-6 w-6 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="mt-6 text-xl font-semibold text-gray-900">GitHub & GitLab Integration</h3>
|
|
<p class="mt-4 text-gray-600 leading-relaxed">Seamlessly integrates with your existing repositories. PRs are created directly in your workflow.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Feature 7: CI/CD -->
|
|
<div class="group relative">
|
|
<div class="relative h-full rounded-2xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:border-fuchsia-200 hover:shadow-lg">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-slate-100 ring-1 ring-slate-300">
|
|
<svg class="h-6 w-6 text-slate-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="mt-6 text-xl font-semibold text-gray-900">CI/CD Integration</h3>
|
|
<p class="mt-4 text-gray-600 leading-relaxed">Integrates with your existing CI/CD pipelines. Fixes are tested and validated before PR creation.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Feature 8: Terraform -->
|
|
<div class="group relative">
|
|
<div class="relative h-full rounded-2xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:border-pink-200 hover:shadow-lg">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-violet-50 ring-1 ring-violet-200">
|
|
<svg class="h-6 w-6 text-violet-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 7.5l-2.25-1.313M21 7.5v2.25m0-2.25l-2.25 1.313M3 7.5l2.25-1.313M3 7.5l2.25 1.313M3 7.5v2.25m9 3l2.25-1.313M12 12.75l-2.25-1.313M12 12.75V15m0 6.75l2.25-1.313M12 21.75V19.5m0 2.25l-2.25-1.313m0-16.875L12 2.25l2.25 1.313M21 14.25v2.25l-2.25 1.313m-13.5 0L3 16.5v-2.25" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="mt-6 text-xl font-semibold text-gray-900">Terraform Support</h3>
|
|
<p class="mt-4 text-gray-600 leading-relaxed">Fix infrastructure issues automatically. Supports Terraform and OpenTofu for infrastructure-as-code.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Feature 9: Issue Tracker -->
|
|
<div class="group relative">
|
|
<div class="relative h-full rounded-2xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:border-rose-200 hover:shadow-lg">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-amber-50 ring-1 ring-amber-200">
|
|
<svg class="h-6 w-6 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16.5 6v.75m0 3v.75m0 3v.75m0 3V18m-9-5.25h5.25M7.5 15h3M3.375 5.25c-.621 0-1.125.504-1.125 1.125v3.026a2.999 2.999 0 010 5.198v3.026c0 .621.504 1.125 1.125 1.125h17.25c.621 0 1.125-.504 1.125-1.125v-3.026a2.999 2.999 0 010-5.198V6.375c0-.621-.504-1.125-1.125-1.125H3.375z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="mt-6 text-xl font-semibold text-gray-900">Issue Tracker Integration</h3>
|
|
<p class="mt-4 text-gray-600 leading-relaxed">Connects with Jira, Linear, and other issue trackers. Automatically links fixes to relevant issues.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- LLM Provider Section -->
|
|
<div class="relative bg-white py-24 sm:py-32 overflow-hidden">
|
|
|
|
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<div class="mx-auto max-w-2xl text-center mb-16">
|
|
<div class="inline-flex items-center gap-2 rounded-full bg-pink-50 px-4 py-1.5 text-sm font-medium text-pink-700 ring-1 ring-inset ring-pink-600/20 mb-6">
|
|
<svg class="h-4 w-4 text-pink-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0112 15a9.065 9.065 0 00-6.23.693L5 14.5m14.8.8l1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0112 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5" />
|
|
</svg>
|
|
<span class="text-sm font-medium text-pink-700">Flexible AI</span>
|
|
</div>
|
|
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl lg:text-5xl">
|
|
Use any AI model you want
|
|
</h2>
|
|
<p class="mt-6 text-lg leading-8 text-gray-600">
|
|
OneUptime works with any LLM provider. Self-host your AI model and keep your code completely private.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mx-auto max-w-4xl">
|
|
<div class="grid grid-cols-2 gap-6 sm:grid-cols-4">
|
|
<div class="group relative">
|
|
<div class="relative flex flex-col items-center p-8 rounded-2xl bg-white border border-gray-200 transition-all duration-300 hover:border-emerald-200 hover:shadow-lg">
|
|
<div class="text-xl font-bold text-gray-900">GPT</div>
|
|
<span class="text-sm text-gray-500 mt-1">OpenAI</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="group relative">
|
|
<div class="relative flex flex-col items-center p-8 rounded-2xl bg-white border border-gray-200 transition-all duration-300 hover:border-orange-200 hover:shadow-lg">
|
|
<div class="text-xl font-bold text-gray-900">Claude</div>
|
|
<span class="text-sm text-gray-500 mt-1">Anthropic</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="group relative">
|
|
<div class="relative flex flex-col items-center p-8 rounded-2xl bg-white border border-gray-200 transition-all duration-300 hover:border-blue-200 hover:shadow-lg">
|
|
<div class="text-xl font-bold text-gray-900">Llama</div>
|
|
<span class="text-sm text-gray-500 mt-1">Meta / Ollama</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="group relative">
|
|
<div class="relative flex flex-col items-center p-8 rounded-2xl bg-white border border-gray-200 transition-all duration-300 hover:border-pink-200 hover:shadow-lg">
|
|
<div class="text-xl font-bold text-gray-900">Custom</div>
|
|
<span class="text-sm text-gray-500 mt-1">Self-hosted</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Privacy Section -->
|
|
<div class="relative bg-gray-900 py-24 sm:py-32 overflow-hidden">
|
|
|
|
<div class="relative mx-auto max-w-7xl px-6 lg:px-8">
|
|
<div class="mx-auto max-w-2xl text-center mb-16">
|
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/10 backdrop-blur border border-white/20 mb-6">
|
|
<svg class="h-4 w-4 text-pink-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
|
|
</svg>
|
|
<span class="text-sm font-medium text-white">Privacy First</span>
|
|
</div>
|
|
<h2 class="text-3xl font-bold tracking-tight text-white sm:text-4xl lg:text-5xl">
|
|
We never see, store, or train on your code
|
|
</h2>
|
|
<p class="mt-6 text-lg leading-8 text-gray-300">
|
|
Regardless of your plan, no part of your code is sent to or stored by us. Use your own AI provider for complete privacy.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mx-auto max-w-4xl">
|
|
<div class="grid grid-cols-1 gap-6 sm:grid-cols-3">
|
|
<div class="group relative h-full">
|
|
<div class="relative h-full rounded-2xl bg-white/10 backdrop-blur border border-white/20 p-8 text-center transition-all duration-300 hover:bg-white/15">
|
|
<h3 class="text-xl font-semibold text-white">No Code Access</h3>
|
|
<p class="mt-3 text-gray-300 leading-relaxed">Your code stays on your infrastructure</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="group relative h-full">
|
|
<div class="relative h-full rounded-2xl bg-white/10 backdrop-blur border border-white/20 p-8 text-center transition-all duration-300 hover:bg-white/15">
|
|
<h3 class="text-xl font-semibold text-white">No Data Storage</h3>
|
|
<p class="mt-3 text-gray-300 leading-relaxed">Zero data retention policy</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="group relative h-full">
|
|
<div class="relative h-full rounded-2xl bg-white/10 backdrop-blur border border-white/20 p-8 text-center transition-all duration-300 hover:bg-white/15">
|
|
<h3 class="text-xl font-semibold text-white">No Training</h3>
|
|
<p class="mt-3 text-gray-300 leading-relaxed">Your code is never used for training</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Enterprise Features -->
|
|
<div class="relative bg-white py-24 sm:py-32 overflow-hidden">
|
|
|
|
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<div class="mx-auto max-w-2xl text-center mb-16">
|
|
<div class="inline-flex items-center gap-2 rounded-full bg-pink-50 px-4 py-1.5 text-sm font-medium text-pink-700 ring-1 ring-inset ring-pink-600/20 mb-6">
|
|
<svg class="h-4 w-4 text-pink-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
|
|
</svg>
|
|
<span class="text-sm font-medium text-pink-700">Enterprise Ready</span>
|
|
</div>
|
|
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl lg:text-5xl">
|
|
Advanced features for teams
|
|
</h2>
|
|
<p class="mt-6 text-lg leading-8 text-gray-600">
|
|
Built to scale with your organization.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mx-auto max-w-5xl">
|
|
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
|
<div class="group relative">
|
|
<div class="relative h-full rounded-2xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:border-pink-200 hover:shadow-lg">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-pink-50 ring-1 ring-pink-200">
|
|
<svg class="h-6 w-6 text-pink-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="mt-6 text-xl font-semibold text-gray-900">AI Billing Management</h3>
|
|
<p class="mt-4 text-gray-600 leading-relaxed">Track AI usage and costs. Set up auto-recharge thresholds to never run out of credits.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="group relative">
|
|
<div class="relative h-full rounded-2xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:border-rose-200 hover:shadow-lg">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-rose-50 ring-1 ring-rose-200">
|
|
<svg class="h-6 w-6 text-rose-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m5.231 13.481L15 17.25m-4.5-15H5.625c-.621 0-1.125.504-1.125 1.125v16.5c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9zm3.75 11.625a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="mt-6 text-xl font-semibold text-gray-900">AI Logs & Audit</h3>
|
|
<p class="mt-4 text-gray-600 leading-relaxed">Complete audit trail of all AI operations. Track token usage, costs, and requests.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="group relative">
|
|
<div class="relative h-full rounded-2xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:border-fuchsia-200 hover:shadow-lg">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-fuchsia-50 ring-1 ring-fuchsia-200">
|
|
<svg class="h-6 w-6 text-fuchsia-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 01-2.555-.337A5.972 5.972 0 015.41 20.97a5.969 5.969 0 01-.474-.065 4.48 4.48 0 00.978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="mt-6 text-xl font-semibold text-gray-900">Slack & Teams</h3>
|
|
<p class="mt-4 text-gray-600 leading-relaxed">Get notified when AI creates pull requests. Review and approve fixes from chat.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="group relative">
|
|
<div class="relative h-full rounded-2xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:border-purple-200 hover:shadow-lg">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-emerald-50 ring-1 ring-emerald-200">
|
|
<svg class="h-6 w-6 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="mt-6 text-xl font-semibold text-gray-900">SOC 2 & ISO Compliant</h3>
|
|
<p class="mt-4 text-gray-600 leading-relaxed">SOC 2/3, ISO 27001, GDPR, HIPAA compliant. Enterprise security from day one.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="group relative">
|
|
<div class="relative h-full rounded-2xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:border-pink-200 hover:shadow-lg">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-indigo-50 ring-1 ring-indigo-200">
|
|
<svg class="h-6 w-6 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.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="mt-6 text-xl font-semibold text-gray-900">Advanced Workflows</h3>
|
|
<p class="mt-4 text-gray-600 leading-relaxed">Build custom automation based on AI findings. Trigger workflows when issues are detected.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="group relative">
|
|
<div class="relative h-full rounded-2xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:border-rose-200 hover:shadow-lg">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-50 ring-1 ring-blue-200">
|
|
<svg class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="mt-6 text-xl font-semibold text-gray-900">Team Management</h3>
|
|
<p class="mt-4 text-gray-600 leading-relaxed">Configure AI settings per project. Manage LLM providers and credits across your organization.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Team Notifications Section -->
|
|
<div class="relative overflow-hidden bg-white py-24 sm:py-32">
|
|
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
|
|
<!-- Content -->
|
|
<div class="relative">
|
|
<p class="text-sm font-medium text-violet-600 uppercase tracking-wide mb-3">Team Notifications</p>
|
|
<h2 class="text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl">
|
|
AI fix alerts where your team already works
|
|
</h2>
|
|
<p class="mt-4 text-lg text-gray-600 leading-relaxed">
|
|
Get instant notifications in Slack and Microsoft Teams when AI Agent detects issues and creates pull requests. Review and merge fixes without context switching.
|
|
</p>
|
|
|
|
<!-- Integration cards -->
|
|
<div class="mt-10 space-y-3">
|
|
<!-- Slack -->
|
|
<div class="flex items-center gap-4 p-4 rounded-xl bg-gray-50 border border-gray-100">
|
|
<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-white shadow-sm ring-1 ring-gray-200">
|
|
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none">
|
|
<path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313z" fill="#E01E5A"/>
|
|
<path d="M8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312z" fill="#36C5F0"/>
|
|
<path d="M18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312z" fill="#2EB67D"/>
|
|
<path d="M15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z" fill="#ECB22E"/>
|
|
</svg>
|
|
</div>
|
|
<div class="flex-1">
|
|
<h3 class="text-sm font-semibold text-gray-900">Slack</h3>
|
|
<p class="text-sm text-gray-500">Instant alerts with interactive actions</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Microsoft Teams -->
|
|
<div class="flex items-center gap-4 p-4 rounded-xl bg-gray-50 border border-gray-100">
|
|
<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-white shadow-sm ring-1 ring-gray-200">
|
|
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none">
|
|
<path d="M20.16 7.8h-4.736c.103.317.159.654.159 1.005v7.029a3.588 3.588 0 01-3.583 3.583h-4.8v.777c0 .998.81 1.806 1.806 1.806h8.339l2.869 1.912a.452.452 0 00.703-.376V21.2h.646c.997 0 1.806-.809 1.806-1.806v-9.788A1.806 1.806 0 0020.16 7.8z" fill="#5059C9"/>
|
|
<circle cx="18.5" cy="4.5" r="2.5" fill="#5059C9"/>
|
|
<path d="M13.5 6H3.806A1.806 1.806 0 002 7.806v9.388c0 .997.81 1.806 1.806 1.806h2.611v3.336a.452.452 0 00.703.376L10.5 20h3a3.5 3.5 0 003.5-3.5v-7A3.5 3.5 0 0013.5 6z" fill="#7B83EB"/>
|
|
<circle cx="10" cy="3" r="3" fill="#7B83EB"/>
|
|
<path d="M6 11h6M6 14h4" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
|
|
</svg>
|
|
</div>
|
|
<div class="flex-1">
|
|
<h3 class="text-sm font-semibold text-gray-900">Microsoft Teams</h3>
|
|
<p class="text-sm text-gray-500">Native adaptive cards integration</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Features list -->
|
|
<div class="mt-8 grid grid-cols-2 gap-4">
|
|
<div class="flex items-center gap-2 text-sm text-gray-600">
|
|
<svg class="h-4 w-4 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
PR notifications
|
|
</div>
|
|
<div class="flex items-center gap-2 text-sm text-gray-600">
|
|
<svg class="h-4 w-4 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Issue detection
|
|
</div>
|
|
<div class="flex items-center gap-2 text-sm text-gray-600">
|
|
<svg class="h-4 w-4 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Fix summaries
|
|
</div>
|
|
<div class="flex items-center gap-2 text-sm text-gray-600">
|
|
<svg class="h-4 w-4 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Action buttons
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Illustration - Interactive Slack Notification -->
|
|
<div class="mt-16 lg:mt-0">
|
|
<div class="relative" id="ai-slack-demo">
|
|
<!-- Decorative background elements -->
|
|
<div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
|
|
|
|
<!-- Slack Window -->
|
|
<div class="relative bg-[#1a1d21] rounded-2xl shadow-2xl overflow-hidden max-w-md mx-auto ring-1 ring-white/10">
|
|
<!-- Slack window header -->
|
|
<div class="bg-[#0f1114] px-4 py-3 flex items-center justify-between border-b border-white/5">
|
|
<div class="flex items-center gap-3">
|
|
<div class="flex gap-2">
|
|
<div class="w-3 h-3 rounded-full bg-[#ff5f57] shadow-sm shadow-red-500/50"></div>
|
|
<div class="w-3 h-3 rounded-full bg-[#febc2e] shadow-sm shadow-yellow-500/50"></div>
|
|
<div class="w-3 h-3 rounded-full bg-[#28c840] shadow-sm shadow-green-500/50"></div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-2 bg-[#1a1d21] px-3 py-1 rounded-md">
|
|
<svg class="w-4 h-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14"/>
|
|
</svg>
|
|
<span class="text-white text-sm font-semibold">ai-fixes</span>
|
|
<svg class="w-4 h-4 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
|
</svg>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-7 h-7 rounded-full bg-gradient-to-br from-violet-400 to-violet-600 flex items-center justify-center ring-2 ring-green-500 ring-offset-1 ring-offset-[#0f1114]">
|
|
<span class="text-white text-xs font-bold">S</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Messages area -->
|
|
<div class="bg-[#1a1d21] px-4 py-4" id="ai-slack-messages">
|
|
<!-- Original AI agent message -->
|
|
<div class="group relative">
|
|
<div class="flex items-start gap-3">
|
|
<img src="/img/OneUptimePNG/1.png" alt="OneUptime" class="w-10 h-10 rounded-lg flex-shrink-0 shadow-lg" />
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex items-center gap-2">
|
|
<span class="font-bold text-white text-sm hover:underline cursor-pointer">OneUptime AI</span>
|
|
<span class="bg-[#4a3f7a] text-purple-200 text-[10px] px-1.5 py-0.5 rounded font-medium">APP</span>
|
|
<span class="text-gray-500 text-xs">3:47 PM</span>
|
|
</div>
|
|
|
|
<!-- AI Fix card -->
|
|
<div class="mt-3 bg-[#0f1114] rounded-lg overflow-hidden ring-1 ring-white/5">
|
|
<div class="h-1 bg-gradient-to-r from-emerald-500 to-teal-500"></div>
|
|
<div class="p-4">
|
|
<div class="flex items-start justify-between">
|
|
<div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-emerald-500/20 text-emerald-400 text-xs font-medium">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
|
|
PR Ready
|
|
</span>
|
|
</div>
|
|
<h4 class="text-white font-semibold mt-2">Fix: Add null check in UserSession.java</h4>
|
|
<p class="text-gray-400 text-sm mt-1">NullPointerException in auth-service fixed</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-4 mt-3 pt-3 border-t border-white/5">
|
|
<div class="flex items-center gap-1.5 text-xs text-gray-500">
|
|
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
|
|
</svg>
|
|
PR #1247
|
|
</div>
|
|
<div class="flex items-center gap-1.5 text-xs text-gray-500">
|
|
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
Created 2m ago
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action buttons -->
|
|
<div class="mt-3 flex flex-wrap gap-2" id="ai-slack-buttons">
|
|
<button onclick="aiViewPR()" id="ai-btn-view" class="inline-flex items-center gap-2 px-3 py-2 bg-[#007a5a] hover:bg-[#148567] rounded-md text-xs font-semibold text-white transition-all shadow-lg shadow-green-900/20">
|
|
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
|
|
</svg>
|
|
View PR
|
|
</button>
|
|
<button onclick="aiApproveMerge()" id="ai-btn-merge" class="inline-flex items-center gap-2 px-3 py-2 bg-[#1264a3] hover:bg-[#1d74b8] rounded-md text-xs font-semibold text-white transition-all shadow-lg shadow-blue-900/20">
|
|
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
|
</svg>
|
|
Approve & Merge
|
|
</button>
|
|
<button onclick="aiRequestChanges()" id="ai-btn-changes" class="inline-flex items-center gap-2 px-3 py-2 bg-[#2e3136] hover:bg-[#3a3d42] border border-gray-600 rounded-md text-xs font-semibold text-white transition-all">
|
|
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
|
|
</svg>
|
|
Request Changes
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Reactions -->
|
|
<div class="mt-3 flex items-center gap-2" id="ai-slack-reactions">
|
|
<div class="inline-flex items-center gap-1 px-2 py-1 bg-[#2e3136] rounded-full text-xs border border-gray-600 hover:border-gray-500 cursor-pointer transition-colors">
|
|
<span>👀</span>
|
|
<span class="text-gray-300">3</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Thread replies container -->
|
|
<div id="ai-slack-thread" class="mt-4 space-y-3"></div>
|
|
|
|
<!-- Thread count indicator -->
|
|
<div id="ai-thread-indicator" class="hidden mt-3 flex items-center gap-2 text-xs text-blue-400 hover:text-blue-300 cursor-pointer">
|
|
<div class="flex -space-x-1" id="ai-thread-avatars"></div>
|
|
<span id="ai-thread-count"></span>
|
|
<span class="text-gray-500">Last reply 1m ago</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Message input -->
|
|
<div class="bg-[#1a1d21] px-4 pb-4">
|
|
<div class="bg-[#2e3136] rounded-lg px-4 py-3 flex items-center gap-3 ring-1 ring-white/5">
|
|
<svg class="w-5 h-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
|
|
</svg>
|
|
<span class="text-gray-500 text-sm">Message #ai-fixes</span>
|
|
<div class="ml-auto flex items-center gap-2">
|
|
<svg class="w-5 h-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
<svg class="w-5 h-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
(function() {
|
|
let aiViewClicked = false;
|
|
let aiMergeClicked = false;
|
|
let aiChangesClicked = false;
|
|
let aiReplyCount = 0;
|
|
const aiAvatars = [];
|
|
|
|
function updateAIThreadIndicator() {
|
|
const indicator = document.getElementById('ai-thread-indicator');
|
|
const countEl = document.getElementById('ai-thread-count');
|
|
const avatarsEl = document.getElementById('ai-thread-avatars');
|
|
|
|
if (aiReplyCount > 0) {
|
|
indicator.classList.remove('hidden');
|
|
indicator.classList.add('flex');
|
|
countEl.textContent = aiReplyCount + (aiReplyCount === 1 ? ' reply' : ' replies');
|
|
avatarsEl.innerHTML = aiAvatars.slice(-3).map(a =>
|
|
a.isBot
|
|
? `<img src="/img/OneUptimePNG/1.png" alt="O" class="w-5 h-5 rounded-full ring-2 ring-[#1a1d21]" />`
|
|
: `<div class="w-5 h-5 rounded-full ${a.bg} flex items-center justify-center ring-2 ring-[#1a1d21]">
|
|
<span class="text-white text-[8px] font-bold">${a.initial}</span>
|
|
</div>`
|
|
).join('');
|
|
}
|
|
}
|
|
|
|
function addAIReaction(emoji) {
|
|
const reactions = document.getElementById('ai-slack-reactions');
|
|
const newReaction = document.createElement('div');
|
|
newReaction.className = 'inline-flex items-center gap-1 px-2 py-1 bg-blue-500/20 rounded-full text-xs border border-blue-500/50 cursor-pointer transition-colors';
|
|
newReaction.innerHTML = `<span>${emoji}</span><span class="text-blue-300">1</span>`;
|
|
newReaction.style.animation = 'bounceIn 0.3s ease-out';
|
|
reactions.appendChild(newReaction);
|
|
}
|
|
|
|
function addAIThreadReply(avatar, name, time, message, isBot) {
|
|
const thread = document.getElementById('ai-slack-thread');
|
|
const reply = document.createElement('div');
|
|
reply.className = 'flex items-start gap-2.5 pl-3 border-l-2 border-blue-500/30';
|
|
reply.style.animation = 'fadeSlideIn 0.3s ease-out';
|
|
|
|
const avatarClass = avatar;
|
|
const initial = name.charAt(0);
|
|
|
|
if (!isBot) {
|
|
aiAvatars.push({ bg: `bg-gradient-to-br ${avatar}`, initial: name.charAt(0) });
|
|
} else {
|
|
aiAvatars.push({ bg: '', initial: 'O', isBot: true });
|
|
}
|
|
aiReplyCount++;
|
|
updateAIThreadIndicator();
|
|
|
|
const avatarHtml = isBot
|
|
? `<img src="/img/OneUptimePNG/1.png" alt="OneUptime" class="w-8 h-8 rounded-lg flex-shrink-0 shadow-md" />`
|
|
: `<div class="w-8 h-8 rounded-lg bg-gradient-to-br ${avatarClass} flex items-center justify-center flex-shrink-0 shadow-md"><span class="text-white text-xs font-bold">${initial}</span></div>`;
|
|
|
|
reply.innerHTML = `
|
|
${avatarHtml}
|
|
<div class="flex-1 bg-[#0f1114] rounded-lg p-3 ring-1 ring-white/5">
|
|
<div class="flex items-center gap-2">
|
|
<span class="font-semibold text-white text-sm">${name}</span>
|
|
${isBot ? '<span class="bg-[#4a3f7a] text-purple-200 text-[9px] px-1 py-0.5 rounded font-medium">APP</span>' : ''}
|
|
<span class="text-gray-500 text-[11px]">${time}</span>
|
|
</div>
|
|
<p class="text-gray-300 text-sm mt-1 leading-relaxed">${message}</p>
|
|
</div>
|
|
`;
|
|
thread.appendChild(reply);
|
|
}
|
|
|
|
window.aiViewPR = function() {
|
|
if (aiViewClicked) return;
|
|
aiViewClicked = true;
|
|
|
|
const btn = document.getElementById('ai-btn-view');
|
|
btn.disabled = true;
|
|
btn.classList.add('opacity-70');
|
|
btn.innerHTML = '<svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg><span>Opening...</span>';
|
|
|
|
setTimeout(() => {
|
|
btn.innerHTML = '<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg><span>Viewed</span>';
|
|
btn.classList.remove('bg-[#007a5a]', 'hover:bg-[#148567]', 'shadow-green-900/20');
|
|
btn.classList.add('bg-[#2e3136]', 'border', 'border-green-500/50', 'text-green-400');
|
|
|
|
addAIReaction('👁️');
|
|
addAIThreadReply('from-violet-400 to-violet-600', 'Sarah Chen', '3:48 PM', 'Reviewing the changes now. The fix looks good!', false);
|
|
|
|
setTimeout(() => {
|
|
addAIThreadReply('from-green-400 to-green-600', 'OneUptime AI', '3:48 PM', '📝 <strong class="text-white">AI Analysis</strong><br/><span class="text-gray-400">• Added null check at line 47<br/>• Added test coverage (2 new tests)<br/>• No breaking changes detected</span>', true);
|
|
}, 1200);
|
|
}, 800);
|
|
};
|
|
|
|
window.aiApproveMerge = function() {
|
|
if (aiMergeClicked) return;
|
|
aiMergeClicked = true;
|
|
|
|
const btn = document.getElementById('ai-btn-merge');
|
|
btn.disabled = true;
|
|
btn.classList.add('opacity-70');
|
|
btn.innerHTML = '<svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg><span>Merging...</span>';
|
|
|
|
setTimeout(() => {
|
|
btn.innerHTML = '<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg><span>Merged</span>';
|
|
btn.classList.remove('bg-[#1264a3]', 'hover:bg-[#1d74b8]', 'shadow-blue-900/20');
|
|
btn.classList.add('bg-[#2e3136]', 'border', 'border-emerald-500/50', 'text-emerald-400');
|
|
|
|
addAIReaction('✅');
|
|
addAIReaction('🎉');
|
|
addAIThreadReply('from-green-400 to-green-600', 'OneUptime AI', '3:50 PM', '🚀 <strong class="text-white">PR #1247 merged to main</strong><br/><span class="text-gray-400">Deployment to production started...</span>', true);
|
|
|
|
setTimeout(() => {
|
|
addAIThreadReply('from-green-400 to-green-600', 'OneUptime AI', '3:52 PM', '✅ <strong class="text-emerald-400">Deployed successfully!</strong><br/><span class="text-gray-400">Error rate dropped from 2.3% to 0.01%<br/>156 occurrences resolved</span>', true);
|
|
}, 1500);
|
|
}, 800);
|
|
};
|
|
|
|
window.aiRequestChanges = function() {
|
|
if (aiChangesClicked) return;
|
|
aiChangesClicked = true;
|
|
|
|
const btn = document.getElementById('ai-btn-changes');
|
|
btn.disabled = true;
|
|
btn.classList.add('opacity-70');
|
|
btn.innerHTML = '<svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg><span>Requesting...</span>';
|
|
|
|
setTimeout(() => {
|
|
btn.innerHTML = '<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg><span>Requested</span>';
|
|
btn.classList.remove('bg-[#2e3136]', 'border-gray-600', 'hover:bg-[#3a3d42]');
|
|
btn.classList.add('bg-amber-600/20', 'border', 'border-amber-500/50', 'text-amber-400');
|
|
|
|
addAIReaction('📝');
|
|
addAIThreadReply('from-amber-400 to-amber-600', 'Sarah Chen', '3:49 PM', 'Could we also add logging for debugging? Let me know and I\'ll approve.', false);
|
|
|
|
setTimeout(() => {
|
|
addAIThreadReply('from-green-400 to-green-600', 'OneUptime AI', '3:51 PM', '🔄 <strong class="text-white">Updated PR #1247</strong><br/><span class="text-gray-400">Added DEBUG level logging at line 48<br/>Ready for re-review</span>', true);
|
|
}, 1500);
|
|
}, 800);
|
|
};
|
|
})();
|
|
</script>
|
|
|
|
<style>
|
|
@keyframes fadeSlideIn {
|
|
from { opacity: 0; transform: translateY(10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
@keyframes bounceIn {
|
|
0% { opacity: 0; transform: scale(0.8); }
|
|
50% { transform: scale(1.1); }
|
|
100% { opacity: 1; transform: scale(1); }
|
|
}
|
|
</style>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<%- include('./Partials/enterprise-ready') -%>
|
|
<%- include('features-table') -%>
|
|
<%- include('cta') -%>
|
|
</main>
|
|
<%- include('footer') -%>
|
|
<%- include('./Partials/video-script') -%>
|
|
|
|
<style>
|
|
@keyframes fadeInSlack {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
.animate-fadeInSlack {
|
|
opacity: 0;
|
|
animation: fadeInSlack 0.5s ease-out forwards;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
// Grid glow effect for AI agent hero section
|
|
(function() {
|
|
const heroSection = document.getElementById('ai-agent-hero-section');
|
|
const gridGlow = document.getElementById('ai-agent-grid-glow');
|
|
|
|
if (heroSection && gridGlow) {
|
|
heroSection.addEventListener('mousemove', (e) => {
|
|
const rect = heroSection.getBoundingClientRect();
|
|
const x = e.clientX - rect.left;
|
|
const y = e.clientY - rect.top;
|
|
|
|
gridGlow.style.setProperty('--mouse-x', `${x}px`);
|
|
gridGlow.style.setProperty('--mouse-y', `${y}px`);
|
|
gridGlow.style.opacity = '1';
|
|
});
|
|
|
|
heroSection.addEventListener('mouseleave', () => {
|
|
gridGlow.style.opacity = '0';
|
|
});
|
|
}
|
|
})();
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html>
|