mirror of
https://github.com/OneUptime/oneuptime.git
synced 2026-04-06 00:32:12 +02:00
781455abb5
- Added a "Subscriber Notifications" section to the status page, detailing real-time incident updates, maintenance announcements, and resolution confirmations. - Introduced a Slack demo with animated message notifications for the status page. - Implemented a grid glow effect that follows the cursor on the status page. - Added a "Trace Alerts" section to the traces page, highlighting alerts for slow requests and error rates, along with a Slack demo for trace notifications. - Enhanced the workflows page with a "Workflow Notifications" section, providing details on execution status, error logs, and custom triggers, along with a Slack-like notification demo. - Implemented grid glow effects for traces and workflows pages, enhancing user interaction. - Added CSS animations for Slack message notifications across all pages.
650 lines
41 KiB
Plaintext
650 lines
41 KiB
Plaintext
<!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-violet-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">→</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') -%>
|
|
|
|
<!-- Stats Section -->
|
|
<div class="bg-gray-50 py-16 sm:py-20">
|
|
<div class="mx-auto max-w-5xl px-6 lg:px-8">
|
|
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4 sm:gap-6">
|
|
<div class="text-center p-6 sm:p-8 rounded-2xl bg-white border border-gray-200/60 shadow-sm transition-all duration-300 hover:shadow-md hover:border-gray-300">
|
|
<div class="text-3xl sm:text-4xl font-semibold text-gray-900 mb-1">PB</div>
|
|
<div class="text-sm text-gray-500">Scale Storage</div>
|
|
</div>
|
|
<div class="text-center p-6 sm:p-8 rounded-2xl bg-white border border-gray-200/60 shadow-sm transition-all duration-300 hover:shadow-md hover:border-gray-300">
|
|
<div class="text-3xl sm:text-4xl font-semibold text-gray-900 mb-1"><100ms</div>
|
|
<div class="text-sm text-gray-500">Search Speed</div>
|
|
</div>
|
|
<div class="text-center p-6 sm:p-8 rounded-2xl bg-white border border-gray-200/60 shadow-sm transition-all duration-300 hover:shadow-md hover:border-gray-300">
|
|
<div class="text-3xl sm:text-4xl font-semibold text-gray-900 mb-1">8x</div>
|
|
<div class="text-sm text-gray-500">Cost Savings</div>
|
|
</div>
|
|
<div class="text-center p-6 sm:p-8 rounded-2xl bg-white border border-gray-200/60 shadow-sm transition-all duration-300 hover:shadow-md hover:border-gray-300">
|
|
<div class="text-3xl sm:text-4xl font-semibold text-gray-900 mb-1">No</div>
|
|
<div class="text-sm text-gray-500">Rehydration</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- How It Works Section -->
|
|
<div class="relative bg-gray-50 py-24 sm:py-32">
|
|
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<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-7 w-7" 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-7 w-7" 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-7 w-7" 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-7 w-7" 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 px-4 py-2 rounded-full bg-violet-50 border border-violet-100 mb-6">
|
|
<svg class="h-4 w-4 text-violet-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="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-violet-700">Why OneUptime</span>
|
|
</div>
|
|
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl lg:text-5xl">
|
|
Save <span class="text-amber-600">8x the cost</span> 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 h-14 w-14 items-center justify-center rounded-xl bg-violet-50 ring-1 ring-violet-200 mb-6">
|
|
<svg class="h-7 w-7 text-violet-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="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="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-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>
|
|
US and EU data centers
|
|
</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>
|
|
Per-service retention policies
|
|
</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>
|
|
GDPR & compliance ready
|
|
</li>
|
|
</ul>
|
|
<a href="/accounts/register" class="inline-flex items-center gap-2 px-6 py-3 bg-gray-900 text-white font-semibold rounded-xl hover:bg-gray-800 transition-all duration-300 shadow-lg shadow-gray-900/20 hover:shadow-xl hover:-trangray-y-0.5 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">
|
|
<img class="relative w-full rounded-2xl shadow-lg ring-1 ring-gray-900/10" src="/img/custom-data-retention.png" alt="Custom data retention settings">
|
|
</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">
|
|
<img class="relative w-full rounded-2xl shadow-lg ring-1 ring-gray-900/10" src="/img/logs-sources.png" alt="Multiple log sources">
|
|
</div>
|
|
</div>
|
|
<div class="order-1 lg:order-2">
|
|
<div class="flex h-14 w-14 items-center justify-center rounded-xl bg-indigo-50 ring-1 ring-indigo-200 mb-6">
|
|
<svg class="h-7 w-7 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8.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>
|
|
<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-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>
|
|
OpenTelemetry native
|
|
</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>
|
|
Docker & Kubernetes support
|
|
</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>
|
|
Syslog, files, and more
|
|
</li>
|
|
</ul>
|
|
<a href="/accounts/register" class="inline-flex items-center gap-2 px-6 py-3 bg-gray-900 text-white font-semibold rounded-xl hover:bg-gray-800 transition-all duration-300 shadow-lg shadow-gray-900/20 hover:shadow-xl hover:-trangray-y-0.5 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 h-14 w-14 items-center justify-center rounded-xl bg-purple-50 ring-1 ring-purple-200 mb-6">
|
|
<svg class="h-7 w-7 text-purple-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>
|
|
<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-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>
|
|
Full-text search
|
|
</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>
|
|
Clickhouse SQL queries
|
|
</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>
|
|
No rehydration needed
|
|
</li>
|
|
</ul>
|
|
<a href="/accounts/register" class="inline-flex items-center gap-2 px-6 py-3 bg-gray-900 text-white font-semibold rounded-xl hover:bg-gray-800 transition-all duration-300 shadow-lg shadow-gray-900/20 hover:shadow-xl hover:-trangray-y-0.5 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">
|
|
<img class="relative w-full rounded-2xl shadow-lg ring-1 ring-gray-900/10" src="/img/search-with-sql.png" alt="SQL search interface">
|
|
</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">
|
|
<img class="relative w-full rounded-2xl shadow-lg ring-1 ring-gray-900/10" src="/img/incident-report.png" alt="Alert configuration">
|
|
</div>
|
|
</div>
|
|
<div class="order-1 lg:order-2">
|
|
<div class="flex h-14 w-14 items-center justify-center rounded-xl bg-cyan-50 ring-1 ring-cyan-200 mb-6">
|
|
<svg class="h-7 w-7 text-cyan-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>
|
|
<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-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>
|
|
Log-based alerting
|
|
</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>
|
|
Integrated incident management
|
|
</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>
|
|
Multi-channel notifications
|
|
</li>
|
|
</ul>
|
|
<a href="/accounts/register" class="inline-flex items-center gap-2 px-6 py-3 bg-gray-900 text-white font-semibold rounded-xl hover:bg-gray-800 transition-all duration-300 shadow-lg shadow-gray-900/20 hover:shadow-xl hover:-trangray-y-0.5 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 px-4 py-2 rounded-full bg-violet-50 border border-violet-100 mb-6">
|
|
<svg class="h-4 w-4 text-violet-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
|
</svg>
|
|
<span class="text-sm font-medium text-violet-700">Advanced capabilities</span>
|
|
</div>
|
|
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl lg:text-5xl">
|
|
More features, <span class="text-amber-600">built for you</span>
|
|
</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-violet-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="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-indigo-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="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="bg-gray-50 py-24 sm:py-32">
|
|
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
|
|
<div class="relative">
|
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-amber-50 border border-amber-100 mb-6">
|
|
<svg class="h-4 w-4 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
|
|
</svg>
|
|
<span class="text-sm font-medium text-amber-700">Log Alerts</span>
|
|
</div>
|
|
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
|
|
Get alerted <span class="text-amber-600">in real-time</span>
|
|
</h2>
|
|
<p class="mt-6 text-lg text-gray-600">
|
|
Create alerts based on log patterns and anomalies. Get notified through Slack, email, SMS, or any webhook when critical logs appear.
|
|
</p>
|
|
|
|
<ul class="mt-8 space-y-4">
|
|
<li class="flex items-start gap-4">
|
|
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-amber-50 ring-1 ring-amber-200">
|
|
<svg class="h-4 w-4 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<div class="font-semibold text-gray-900">Pattern-based alerts</div>
|
|
<div class="text-gray-600">Trigger alerts when specific log patterns are detected</div>
|
|
</div>
|
|
</li>
|
|
<li class="flex items-start gap-4">
|
|
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-amber-50 ring-1 ring-amber-200">
|
|
<svg class="h-4 w-4 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<div class="font-semibold text-gray-900">Anomaly detection</div>
|
|
<div class="text-gray-600">AI-powered detection of unusual log activity</div>
|
|
</div>
|
|
</li>
|
|
<li class="flex items-start gap-4">
|
|
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-amber-50 ring-1 ring-amber-200">
|
|
<svg class="h-4 w-4 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<div class="font-semibold text-gray-900">Incident creation</div>
|
|
<div class="text-gray-600">Automatically create incidents from critical log events</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Slack Demo -->
|
|
<div class="mt-12 lg:mt-0 relative">
|
|
<div class="rounded-2xl bg-white shadow-xl ring-1 ring-gray-200 overflow-hidden">
|
|
<!-- Slack Header -->
|
|
<div class="bg-[#3F0F40] px-4 py-3 flex items-center gap-3">
|
|
<div class="flex items-center gap-2">
|
|
<svg class="h-5 w-5 text-white" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z"/>
|
|
</svg>
|
|
<span class="text-white font-semibold text-sm">Slack</span>
|
|
</div>
|
|
<div class="flex-1 text-center">
|
|
<span class="text-white/70 text-sm">#log-alerts</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slack Messages -->
|
|
<div class="p-4 space-y-4 bg-white">
|
|
<!-- Message 1 -->
|
|
<div class="flex gap-3 slack-message-1" style="opacity: 0; animation: fadeInSlack 0.5s ease-out 0.5s forwards;">
|
|
<div class="h-9 w-9 rounded bg-amber-500 flex items-center justify-center flex-shrink-0">
|
|
<svg class="h-5 w-5 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
|
</svg>
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex items-baseline gap-2">
|
|
<span class="font-semibold text-gray-900 text-sm">OneUptime Logs</span>
|
|
<span class="text-xs text-gray-500">4:12 PM</span>
|
|
</div>
|
|
<div class="mt-1 p-3 rounded-lg bg-red-50 border-l-4 border-red-500">
|
|
<div class="flex items-center gap-2 mb-1">
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-800">ERROR</span>
|
|
</div>
|
|
<p class="text-sm text-gray-700 font-medium">OutOfMemoryError detected</p>
|
|
<p class="text-xs text-gray-500 mt-1">api-server | 847 occurrences in last 5 min</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Message 2 -->
|
|
<div class="flex gap-3 slack-message-2" style="opacity: 0; animation: fadeInSlack 0.5s ease-out 1.5s forwards;">
|
|
<div class="h-9 w-9 rounded bg-amber-500 flex items-center justify-center flex-shrink-0">
|
|
<svg class="h-5 w-5 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex items-baseline gap-2">
|
|
<span class="font-semibold text-gray-900 text-sm">OneUptime Logs</span>
|
|
<span class="text-xs text-gray-500">4:12 PM</span>
|
|
</div>
|
|
<div class="mt-1 p-3 rounded-lg bg-amber-50 border-l-4 border-amber-500">
|
|
<p class="text-sm text-gray-700 font-medium">Incident created automatically</p>
|
|
<p class="text-xs text-gray-500 mt-1">On-call team has been notified</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<%- include('./Partials/enterprise-ready') -%>
|
|
<%- include('features-table') -%>
|
|
<%- include('cta') -%>
|
|
</main>
|
|
<%- include('footer') -%>
|
|
<%- include('./Partials/video-script') -%>
|
|
|
|
<style>
|
|
@keyframes fadeInSlack {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
// Grid glow effect for logs hero section
|
|
(function() {
|
|
const heroSection = document.getElementById('logs-hero-section');
|
|
const gridGlow = document.getElementById('logs-grid-glow');
|
|
|
|
if (heroSection && gridGlow) {
|
|
heroSection.addEventListener('mousemove', (e) => {
|
|
const rect = heroSection.getBoundingClientRect();
|
|
const x = ((e.clientX - rect.left) / rect.width) * 100;
|
|
const y = ((e.clientY - rect.top) / rect.height) * 100;
|
|
|
|
gridGlow.style.setProperty('--mouse-x', x + '%');
|
|
gridGlow.style.setProperty('--mouse-y', y + '%');
|
|
gridGlow.style.opacity = '1';
|
|
});
|
|
|
|
heroSection.addEventListener('mouseleave', () => {
|
|
gridGlow.style.opacity = '0';
|
|
});
|
|
}
|
|
})();
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html> |