github/oneuptime
1
1
Fork 0
mirror of https://github.com/OneUptime/oneuptime.git synced 2026-04-06 00:32:12 +02:00
Code Issues 193 Packages Projects Releases Wiki Activity
Files
master
oneuptime/Home/Views/logs-management.ejs
Nawaz Dhandala 5e04a8c13c Refactor icon sizes and styles across multiple views for consistency 
- Reduced the size of SVG icons from h-7 w-7 to h-5 w-5 in on-call.ejs, status-page.ejs, traces.ejs, workflows.ejs.
- Adjusted the container sizes for icons from h-14 w-14 to h-10 w-10 and changed rounded styles from rounded-2xl to rounded-xl for a more uniform appearance.
- Ensured that all relevant icons and their containers maintain a consistent design language throughout the application.
2026-01-07 13:54:27 +00:00

1163 lines
71 KiB
Plaintext
Raw Permalink Blame History

<!DOCTYPE html>
<html lang="en" id="home">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<head>
<title>OneUptime | Fastest log ingest and search on the planet. </title>
<meta name="description"
content="Powered by Ceph and Clickhouse. Ingest petabytes of logs and search in milliseconds. Ingest from any source, alert right team members when things go wrong.">
<%- 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="logs-hero-section">
<!-- Subtle grid pattern background -->
<div class="absolute inset-0 -z-10 h-full w-full bg-white bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_110%)]"></div>
<!-- Grid glow effect that follows cursor - amber color -->
<div id="logs-grid-glow" class="absolute inset-0 -z-9 pointer-events-none" style="opacity: 0; transition: opacity 0.3s ease-out; background: linear-gradient(to right, rgba(245, 158, 11, 0.3) 1px, transparent 1px), linear-gradient(to bottom, rgba(245, 158, 11, 0.3) 1px, transparent 1px); background-size: 4rem 4rem; -webkit-mask-image: radial-gradient(circle 250px at var(--mouse-x, 50%) var(--mouse-y, 50%), black 0%, transparent 100%); mask-image: radial-gradient(circle 250px at var(--mouse-x, 50%) var(--mouse-y, 50%), black 0%, transparent 100%);"></div>
<div class="py-20 sm:py-28 lg:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-3xl text-center">
<!-- Minimal badge -->
<p class="text-sm font-medium text-amber-600 mb-4">Powered by Ceph & Clickhouse</p>
<h1 class="text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl lg:text-6xl">
Fastest log ingest and search
</h1>
<p class="mt-6 text-lg leading-8 text-gray-600 max-w-2xl mx-auto">
Ingest petabytes of logs and search in milliseconds. Alert the right team members when things go wrong.
</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">&rarr;</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>Petabyte scale</span>
<span class="hidden sm:inline text-gray-300">|</span>
<span>Millisecond search</span>
<span class="hidden sm:inline text-gray-300">|</span>
<span>No rehydration</span>
<span class="hidden sm:inline text-gray-300">|</span>
<span>OpenTelemetry native</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/log-management.png" alt="OneUptime log management dashboard" width="2432" height="1442"
class="rounded-lg shadow-lg">
</div>
</div>
</div>
</div>
</div>
</div>
<%- include('logo-roll') -%>
<!-- How It Works Section -->
<div class="relative bg-gray-50 py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl text-center mb-16">
<p class="text-sm font-medium text-amber-600 uppercase tracking-wide mb-3">How It Works</p>
<h2 class="text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl">
Start ingesting logs in minutes
</h2>
<p class="mt-4 text-lg text-gray-600">
Get your logs flowing into OneUptime with our simple OpenTelemetry-native setup process.
</p>
</div>
<div class="mx-auto max-w-5xl">
<!-- Connecting line for desktop -->
<div class="hidden lg:block relative">
<div class="absolute top-8 left-[calc(12.5%+24px)] right-[calc(12.5%+24px)] h-px bg-amber-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-amber-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 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
</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-amber-600 ring-2 ring-amber-600">1</span>
</div>
<h3 class="text-base font-semibold text-gray-900 mb-2">Install Agent</h3>
<p class="text-sm text-gray-600 leading-relaxed">Add OpenTelemetry collector or use our lightweight agent.</p>
</div>
<!-- Step 2 -->
<div class="text-center">
<div class="relative inline-flex items-center justify-center h-16 w-16 rounded-full bg-amber-600 text-white mb-6 shadow-sm">
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
</svg>
<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-amber-600 ring-2 ring-amber-600">2</span>
</div>
<h3 class="text-base font-semibold text-gray-900 mb-2">Configure Sources</h3>
<p class="text-sm text-gray-600 leading-relaxed">Point your applications, containers, and systems to send logs.</p>
</div>
<!-- Step 3 -->
<div class="text-center">
<div class="relative inline-flex items-center justify-center h-16 w-16 rounded-full bg-amber-600 text-white mb-6 shadow-sm">
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
</svg>
<span class="absolute -bottom-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full bg-white text-xs font-semibold text-amber-600 ring-2 ring-amber-600">3</span>
</div>
<h3 class="text-base font-semibold text-gray-900 mb-2">Set Alerts</h3>
<p class="text-sm text-gray-600 leading-relaxed">Create log-based alerts to catch issues 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-amber-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-amber-600 ring-2 ring-amber-600">4</span>
</div>
<h3 class="text-base font-semibold text-gray-900 mb-2">Search & Debug</h3>
<p class="text-sm text-gray-600 leading-relaxed">Query petabytes of logs in milliseconds with SQL.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Why OneUptime Section -->
<div class="relative bg-white py-24 sm:py-32 overflow-hidden">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<!-- Section header -->
<div class="mx-auto max-w-2xl text-center mb-20">
<div class="inline-flex items-center gap-2 rounded-full bg-amber-50 px-4 py-1.5 text-sm font-medium text-amber-700 ring-1 ring-inset ring-amber-600/20 mb-6">
<svg class="h-4 w-4 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span class="text-sm font-medium text-amber-700">Why OneUptime</span>
</div>
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl lg:text-5xl">
Save 8x the cost on log management
</h2>
<p class="mt-6 text-lg leading-8 text-gray-600">
We offer the most cost effective log management software on the planet. Save 8x when you compare OneUptime to Datadog.
</p>
</div>
<!-- Feature blocks -->
<div class="space-y-24">
<!-- Feature 1: Custom Data Retention -->
<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-amber-50 ring-1 ring-amber-200">
<svg class="h-5 w-5 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="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>
<span class="text-sm font-semibold text-amber-600 uppercase tracking-wide">Data Retention</span>
</div>
<h3 class="text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl">Custom Data Retention and Data Residency</h3>
<p class="mt-4 text-lg text-gray-600">Set custom data retention and data residency. Have logs stored in US or EU data centers to be compliant. Lower data retention for non critical services to save costs.</p>
<ul class="mt-6 space-y-3">
<li class="flex items-center gap-3 text-gray-600">
<svg class="h-5 w-5 text-amber-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
US and EU data centers
</li>
<li class="flex items-center gap-3 text-gray-600">
<svg class="h-5 w-5 text-amber-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Per-service retention policies
</li>
<li class="flex items-center gap-3 text-gray-600">
<svg class="h-5 w-5 text-amber-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
GDPR & compliance ready
</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 mt-8">
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>
<!-- 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-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="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-amber-50 rounded text-xs text-amber-600 border border-amber-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-amber-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-amber-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-amber-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-amber-600 text-xs font-medium cursor-pointer hover:text-amber-700">+ Add Policy</span>
</div>
</div>
</div>
</div>
</div>
<!-- Feature 2: Ingest from Any Source -->
<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">
<!-- 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-amber-50 flex items-center justify-center mx-auto mb-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="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-amber-50 flex items-center justify-center mx-auto mb-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="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-amber-50 flex items-center justify-center mx-auto mb-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="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-amber-50 flex items-center justify-center mx-auto mb-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="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-amber-50 flex items-center justify-center mx-auto mb-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="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-amber-50 flex items-center justify-center mx-auto mb-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="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">
<div class="flex items-center gap-4 mb-6">
<div class="flex h-10 w-10 items-center justify-center rounded-xl bg-amber-50 ring-1 ring-amber-200">
<svg class="h-5 w-5 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="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>
<span class="text-sm font-semibold text-amber-600 uppercase tracking-wide">Any Source</span>
</div>
<h3 class="text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl">Ingest from any source - application, containers, syslog and more</h3>
<p class="mt-4 text-lg text-gray-600">Native OpenTelemetry support lets you ingest logs from any application. Ingest logs from Docker containers, syslog, and more. Any source is supported.</p>
<ul class="mt-6 space-y-3">
<li class="flex items-center gap-3 text-gray-600">
<svg class="h-5 w-5 text-amber-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
OpenTelemetry native
</li>
<li class="flex items-center gap-3 text-gray-600">
<svg class="h-5 w-5 text-amber-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Docker & Kubernetes support
</li>
<li class="flex items-center gap-3 text-gray-600">
<svg class="h-5 w-5 text-amber-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Syslog, files, and more
</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 mt-8">
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: Search with SQL -->
<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-amber-50 ring-1 ring-amber-200">
<svg class="h-5 w-5 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
</svg>
</div>
<span class="text-sm font-semibold text-amber-600 uppercase tracking-wide">Powerful Search</span>
</div>
<h3 class="text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl">Search in seconds or write a custom SQL query</h3>
<p class="mt-4 text-lg text-gray-600">Search logs with full text search or search with Clickhouse SQL. Search petabytes of data in seconds. No rehydration needed. One of the most cost effective log solutions in the market.</p>
<ul class="mt-6 space-y-3">
<li class="flex items-center gap-3 text-gray-600">
<svg class="h-5 w-5 text-amber-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Full-text search
</li>
<li class="flex items-center gap-3 text-gray-600">
<svg class="h-5 w-5 text-amber-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Clickhouse SQL queries
</li>
<li class="flex items-center gap-3 text-gray-600">
<svg class="h-5 w-5 text-amber-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
No rehydration needed
</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 mt-8">
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>
<!-- 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>
<!-- Feature 4: 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">
<!-- 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> &gt; 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> &gt; 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-amber-100 text-amber-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 &gt; 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">
<div class="flex items-center gap-4 mb-6">
<div class="flex h-10 w-10 items-center justify-center rounded-xl bg-amber-50 ring-1 ring-amber-200">
<svg class="h-5 w-5 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z" />
</svg>
</div>
<span class="text-sm font-semibold text-amber-600 uppercase tracking-wide">Smart Alerting</span>
</div>
<h3 class="text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl">Alert right team members at the right time</h3>
<p class="mt-4 text-lg text-gray-600">Call right team members during an incident. Post notes directly on your status page and communicate directly with your team, customers and users.</p>
<ul class="mt-6 space-y-3">
<li class="flex items-center gap-3 text-gray-600">
<svg class="h-5 w-5 text-amber-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Log-based alerting
</li>
<li class="flex items-center gap-3 text-gray-600">
<svg class="h-5 w-5 text-amber-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Integrated incident management
</li>
<li class="flex items-center gap-3 text-gray-600">
<svg class="h-5 w-5 text-amber-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Multi-channel notifications
</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 mt-8">
Get started
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- More Features Section -->
<div class="relative bg-white py-24 sm:py-32 overflow-hidden">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<!-- Section header -->
<div class="mx-auto max-w-2xl text-center">
<div class="inline-flex items-center gap-2 rounded-full bg-amber-50 px-4 py-1.5 text-sm font-medium text-amber-700 ring-1 ring-inset ring-amber-600/20 mb-6">
<svg class="h-4 w-4 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
<span class="text-sm font-medium text-amber-700">Advanced capabilities</span>
</div>
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
Advanced features, built for you
</h2>
<p class="mt-6 text-lg leading-8 text-gray-600">
Build custom workflows, integrate with anything you have, or more - you never run out of features. Batteries included.
</p>
</div>
<!-- Feature cards grid -->
<div class="mx-auto mt-16 max-w-7xl">
<div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
<!-- Card 1: Reliability Guaranteed -->
<div class="group relative">
<div class="relative h-full rounded-2xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:border-amber-200 hover:shadow-lg">
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-amber-50 ring-1 ring-amber-200">
<svg class="h-6 w-6 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0112 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 01-3.296-1.043 3.745 3.745 0 01-1.043-3.296A3.745 3.745 0 013 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 011.043-3.296 3.746 3.746 0 013.296-1.043A3.746 3.746 0 0112 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 013.296 1.043 3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z" />
</svg>
</div>
<h3 class="mt-6 text-xl font-semibold text-gray-900">Reliability Guaranteed</h3>
<p class="mt-4 text-gray-600 leading-relaxed">Hosted on a distributed high availability infrastructure across multiple clouds and continents so your log management is never down.</p>
</div>
</div>
<!-- Card 2: Integrations -->
<div class="group relative">
<div class="relative h-full rounded-2xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:border-blue-200 hover:shadow-lg">
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-50 ring-1 ring-blue-200">
<svg class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 002.25-2.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v2.25A2.25 2.25 0 006 10.5zm0 9.75h2.25A2.25 2.25 0 0010.5 18v-2.25a2.25 2.25 0 00-2.25-2.25H6a2.25 2.25 0 00-2.25 2.25V18A2.25 2.25 0 006 20.25zm9.75-9.75H18a2.25 2.25 0 002.25-2.25V6A2.25 2.25 0 0018 3.75h-2.25A2.25 2.25 0 0013.5 6v2.25a2.25 2.25 0 002.25 2.25z" />
</svg>
</div>
<h3 class="mt-6 text-xl font-semibold text-gray-900">Integrations</h3>
<p class="mt-4 text-gray-600 leading-relaxed">Choose from 5000+ integrations. Manage logs without leaving Slack. Build custom integrations with our powerful API.</p>
</div>
</div>
<!-- Card 3: Workflows -->
<div class="group relative">
<div class="relative h-full rounded-2xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:border-amber-200 hover:shadow-lg">
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-amber-50 ring-1 ring-amber-200">
<svg class="h-6 w-6 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" />
</svg>
</div>
<h3 class="mt-6 text-xl font-semibold text-gray-900">Workflows</h3>
<p class="mt-4 text-gray-600 leading-relaxed">Build complex workflows without code. Automate log processing, alerts, and incident creation with visual automation.</p>
</div>
</div>
<!-- Card 4: Incident Management -->
<div class="group relative">
<div class="relative h-full rounded-2xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:border-amber-200 hover:shadow-lg">
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-amber-50 ring-1 ring-amber-200">
<svg class="h-6 w-6 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
</svg>
</div>
<h3 class="mt-6 text-xl font-semibold text-gray-900">Incident Management</h3>
<p class="mt-4 text-gray-600 leading-relaxed">Keep stakeholders informed in real-time. Create incidents from log patterns and empower teams to respond proactively.</p>
</div>
</div>
<!-- Card 5: Compliance -->
<div class="group relative">
<div class="relative h-full rounded-2xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:border-emerald-200 hover:shadow-lg">
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-emerald-50 ring-1 ring-emerald-200">
<svg class="h-6 w-6 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12.75L11.25 15 15 9.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/3 & ISO Compliant</h3>
<p class="mt-4 text-gray-600 leading-relaxed">We're SOC 2/3, ISO, GDPR, HIPAA, CCPA compliant (and more). All boxes ticked so you're ready from Day 1.</p>
</div>
</div>
<!-- Card 6: Export to Data Warehouse -->
<div class="group relative">
<div class="relative h-full rounded-2xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:border-pink-200 hover:shadow-lg">
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-pink-50 ring-1 ring-pink-200">
<svg class="h-6 w-6 text-pink-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="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">Export to Data Warehouse</h3>
<p class="mt-4 text-gray-600 leading-relaxed">Export logs to BigQuery, S3 Buckets, anywhere. You have complete ownership of all your data generated at OneUptime.</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-amber-600 uppercase tracking-wide mb-3">Team Notifications</p>
<h2 class="text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl">
Alerts delivered where your team already works
</h2>
<p class="mt-4 text-lg text-gray-600 leading-relaxed">
Get instant log notifications in Slack and Microsoft Teams. Acknowledge alerts, view logs, and create incidents 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">Interactive log alert actions</p>
</div>
</div>
<!-- Microsoft Teams -->
<div class="flex items-center gap-4 p-4 rounded-xl bg-gray-50 border border-gray-100">
<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-white shadow-sm ring-1 ring-gray-200">
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none">
<path d="M20.16 7.8h-4.736c.103.317.159.654.159 1.005v7.029a3.588 3.588 0 01-3.583 3.583h-4.8v.777c0 .998.81 1.806 1.806 1.806h8.339l2.869 1.912a.452.452 0 00.703-.376V21.2h.646c.997 0 1.806-.809 1.806-1.806v-9.788A1.806 1.806 0 0020.16 7.8z" fill="#5059C9"/>
<circle cx="18.5" cy="4.5" r="2.5" fill="#5059C9"/>
<path d="M13.5 6H3.806A1.806 1.806 0 002 7.806v9.388c0 .997.81 1.806 1.806 1.806h2.611v3.336a.452.452 0 00.703.376L10.5 20h3a3.5 3.5 0 003.5-3.5v-7A3.5 3.5 0 0013.5 6z" fill="#7B83EB"/>
<circle cx="10" cy="3" r="3" fill="#7B83EB"/>
<path d="M6 11h6M6 14h4" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
</svg>
</div>
<div class="flex-1">
<h3 class="text-sm font-semibold text-gray-900">Microsoft Teams</h3>
<p class="text-sm text-gray-500">Native adaptive cards integration</p>
</div>
</div>
</div>
<!-- Features list -->
<div class="mt-8 grid grid-cols-2 gap-4">
<div class="flex items-center gap-2 text-sm text-gray-600">
<svg class="h-4 w-4 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Real-time delivery
</div>
<div class="flex items-center gap-2 text-sm text-gray-600">
<svg class="h-4 w-4 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Pattern matching
</div>
<div class="flex items-center gap-2 text-sm text-gray-600">
<svg class="h-4 w-4 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Rich formatting
</div>
<div class="flex items-center gap-2 text-sm text-gray-600">
<svg class="h-4 w-4 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Action buttons
</div>
</div>
</div>
<!-- Slack Demo -->
<div class="mt-12 lg:mt-0 relative">
<!-- Decorative gradient background -->
<div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
<div class="relative rounded-2xl bg-[#1a1d21] shadow-2xl ring-1 ring-white/10 overflow-hidden">
<!-- 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-2">
<div class="flex gap-1.5">
<div class="w-3 h-3 rounded-full bg-[#ff5f57]"></div>
<div class="w-3 h-3 rounded-full bg-[#febc2e]"></div>
<div class="w-3 h-3 rounded-full bg-[#28c840]"></div>
</div>
</div>
<div class="flex items-center gap-2">
<svg class="h-4 w-4 text-white/60" viewBox="0 0 24 24" fill="currentColor">
<path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z"/>
</svg>
<span class="text-white/60 text-sm font-medium">#log-alerts</span>
</div>
<div class="w-16"></div>
</div>
<!-- Slack Messages Area -->
<div class="p-4 space-y-4 min-h-[320px]" id="logs-slack-messages">
<!-- Main Alert Message -->
<div class="flex gap-3" style="animation: fadeSlideIn 0.5s ease-out forwards;">
<div class="h-10 w-10 rounded-lg bg-gradient-to-br from-amber-500 to-orange-600 flex items-center justify-center flex-shrink-0 shadow-lg">
<svg class="h-6 w-6 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" 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="flex-1 min-w-0">
<div class="flex items-baseline gap-2">
<span class="font-bold text-white text-sm">OneUptime Logs</span>
<span class="text-xs text-white/40">4:12 PM</span>
</div>
<!-- Alert Card -->
<div class="mt-2 rounded-lg bg-[#0f1114] border border-white/10 overflow-hidden">
<div class="p-3 border-l-4 border-red-500">
<div class="flex items-center gap-2 mb-2">
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-bold bg-red-500/20 text-red-400 ring-1 ring-red-500/30">ERROR</span>
<span class="text-white/40 text-xs">Pattern Match Alert</span>
</div>
<p class="text-white font-semibold">OutOfMemoryError detected</p>
<div class="mt-2 flex items-center gap-4 text-xs text-white/50">
<span class="flex items-center gap-1">
<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" 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>
api-server
</span>
<span class="flex items-center gap-1">
<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" 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>
847 in 5 min
</span>
</div>
<!-- Action Buttons -->
<div class="mt-3 flex gap-2">
<button id="logs-acknowledge-btn" class="px-3 py-1.5 rounded text-xs font-semibold bg-white/10 text-white hover:bg-white/20 transition-colors border border-white/10">
Acknowledge
</button>
<button id="logs-investigate-btn" class="px-3 py-1.5 rounded text-xs font-semibold bg-amber-600 text-white hover:bg-amber-700 transition-colors">
View Logs
</button>
<button id="logs-resolve-btn" class="px-3 py-1.5 rounded text-xs font-semibold bg-white/10 text-white hover:bg-white/20 transition-colors border border-white/10">
Create Incident
</button>
</div>
</div>
</div>
<!-- Reactions -->
<div class="mt-2 flex items-center gap-1">
<span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-white/5 text-xs border border-white/10 hover:bg-white/10 cursor-pointer transition-colors">
<span>👀</span>
<span class="text-white/60">2</span>
</span>
<span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-white/5 text-xs border border-white/10 hover:bg-white/10 cursor-pointer transition-colors">
<span>🔥</span>
<span class="text-white/60">1</span>
</span>
</div>
</div>
</div>
<!-- Thread Replies Container -->
<div id="logs-thread-container" class="ml-12 space-y-3 hidden">
<!-- Thread replies will be dynamically added here -->
</div>
</div>
<!-- Message Input Area -->
<div class="px-4 py-3 border-t border-white/5">
<div class="flex items-center gap-2 px-3 py-2 rounded-lg bg-[#0f1114] border border-white/10">
<svg class="h-5 w-5 text-white/30" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
</svg>
<span class="text-white/30 text-sm">Message #log-alerts</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<%- include('./Partials/enterprise-ready') -%>
<%- include('features-table') -%>
<%- include('cta') -%>
</main>
<%- include('footer') -%>
<%- include('./Partials/video-script') -%>
<style>
@keyframes fadeSlideIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes bounceIn {
0% {
opacity: 0;
transform: scale(0.3);
}
50% {
transform: scale(1.05);
}
70% {
transform: scale(0.9);
}
100% {
opacity: 1;
transform: scale(1);
}
}
</style>
<script>
// Grid glow effect for logs hero section
(function() {
const heroSection = document.getElementById('logs-hero-section');
const gridGlow = document.getElementById('logs-grid-glow');
if (heroSection && gridGlow) {
heroSection.addEventListener('mousemove', (e) => {
const rect = heroSection.getBoundingClientRect();
const x = ((e.clientX - rect.left) / rect.width) * 100;
const y = ((e.clientY - rect.top) / rect.height) * 100;
gridGlow.style.setProperty('--mouse-x', x + '%');
gridGlow.style.setProperty('--mouse-y', y + '%');
gridGlow.style.opacity = '1';
});
heroSection.addEventListener('mouseleave', () => {
gridGlow.style.opacity = '0';
});
}
})();
// Slack demo interactivity for logs page
(function() {
const threadContainer = document.getElementById('logs-thread-container');
const acknowledgeBtn = document.getElementById('logs-acknowledge-btn');
const investigateBtn = document.getElementById('logs-investigate-btn');
const resolveBtn = document.getElementById('logs-resolve-btn');
const teamAvatars = [
{ name: 'Sarah Chen', color: 'from-blue-500 to-cyan-500', initial: 'S' },
{ name: 'Mike Rodriguez', color: 'from-green-500 to-emerald-500', initial: 'M' },
{ name: 'Alex Kim', color: 'from-orange-500 to-amber-500', initial: 'A' }
];
let currentAvatarIndex = 0;
let repliesAdded = 0;
function getNextAvatar() {
const avatar = teamAvatars[currentAvatarIndex];
currentAvatarIndex = (currentAvatarIndex + 1) % teamAvatars.length;
return avatar;
}
function addThreadReply(message, isAction = false) {
if (repliesAdded >= 3) return;
threadContainer.classList.remove('hidden');
const avatar = getNextAvatar();
const replyHtml = `
<div class="flex gap-3 p-2 rounded-lg bg-amber-500/10 border border-amber-500/20" style="animation: bounceIn 0.4s ease-out forwards;">
<div class="h-8 w-8 rounded-lg bg-gradient-to-br ${avatar.color} flex items-center justify-center flex-shrink-0 text-white text-xs font-bold shadow-lg">
${avatar.initial}
</div>
<div class="flex-1 min-w-0">
<div class="flex items-baseline gap-2">
<span class="font-semibold text-white text-sm">${avatar.name}</span>
<span class="text-xs text-white/40">just now</span>
</div>
<p class="text-sm text-white/80 mt-0.5">${message}</p>
</div>
</div>
`;
threadContainer.insertAdjacentHTML('beforeend', replyHtml);
repliesAdded++;
}
if (acknowledgeBtn) {
acknowledgeBtn.addEventListener('click', () => {
acknowledgeBtn.disabled = true;
acknowledgeBtn.classList.add('opacity-50');
addThreadReply('Acknowledged. Looking into the memory spike now. 📋');
});
}
if (investigateBtn) {
investigateBtn.addEventListener('click', () => {
investigateBtn.disabled = true;
investigateBtn.classList.add('opacity-50');
addThreadReply('Found the root cause in the logs - a memory leak in the cache layer. Deploying hotfix. 🔍');
});
}
if (resolveBtn) {
resolveBtn.addEventListener('click', () => {
resolveBtn.disabled = true;
resolveBtn.classList.add('opacity-50');
addThreadReply('Incident INC-2847 created and assigned to the API team. ✅');
});
}
})();
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink