mirror of
https://github.com/OneUptime/oneuptime.git
synced 2026-04-06 00:32:12 +02:00
a41dfa8980
- Introduced a new hero card for AI Auto-Fix with a fuchsia theme, linking to the AI agent product page. - Added a hero card for AI Copilot with a violet theme, also linking to the AI agent product page, utilizing an icon for visual representation.
902 lines
72 KiB
Plaintext
902 lines
72 KiB
Plaintext
<style>
|
|
/* Feature Card Styles - Enhanced */
|
|
.feature-card-wrapper {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-radius: 1rem;
|
|
}
|
|
.feature-card-wrapper::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: -50px;
|
|
border-radius: 50%;
|
|
opacity: 0;
|
|
transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
.feature-card-wrapper:hover::before {
|
|
opacity: 1;
|
|
}
|
|
.feature-card {
|
|
position: relative;
|
|
z-index: 1;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.feature-card:hover {
|
|
transform: translateY(-4px);
|
|
}
|
|
|
|
/* Color Glow Styles */
|
|
.feature-glow-emerald-wrapper::before { background: radial-gradient(ellipse at center, rgb(16 185 129 / 0.12) 0%, rgb(16 185 129 / 0.04) 40%, transparent 70%); }
|
|
.feature-glow-emerald:hover { box-shadow: 0 0 0 2px rgb(16 185 129 / 0.3), 0 20px 40px -12px rgb(16 185 129 / 0.25); }
|
|
|
|
.feature-glow-rose-wrapper::before { background: radial-gradient(ellipse at center, rgb(244 63 94 / 0.12) 0%, rgb(244 63 94 / 0.04) 40%, transparent 70%); }
|
|
.feature-glow-rose:hover { box-shadow: 0 0 0 2px rgb(244 63 94 / 0.3), 0 20px 40px -12px rgb(244 63 94 / 0.25); }
|
|
|
|
.feature-glow-blue-wrapper::before { background: radial-gradient(ellipse at center, rgb(59 130 246 / 0.12) 0%, rgb(59 130 246 / 0.04) 40%, transparent 70%); }
|
|
.feature-glow-blue:hover { box-shadow: 0 0 0 2px rgb(59 130 246 / 0.3), 0 20px 40px -12px rgb(59 130 246 / 0.25); }
|
|
|
|
.feature-glow-stone-wrapper::before { background: radial-gradient(ellipse at center, rgb(120 113 108 / 0.12) 0%, rgb(120 113 108 / 0.04) 40%, transparent 70%); }
|
|
.feature-glow-stone:hover { box-shadow: 0 0 0 2px rgb(120 113 108 / 0.3), 0 20px 40px -12px rgb(120 113 108 / 0.25); }
|
|
|
|
.feature-glow-amber-wrapper::before { background: radial-gradient(ellipse at center, rgb(245 158 11 / 0.12) 0%, rgb(245 158 11 / 0.04) 40%, transparent 70%); }
|
|
.feature-glow-amber:hover { box-shadow: 0 0 0 2px rgb(245 158 11 / 0.3), 0 20px 40px -12px rgb(245 158 11 / 0.25); }
|
|
|
|
.feature-glow-purple-wrapper::before { background: radial-gradient(ellipse at center, rgb(168 85 247 / 0.12) 0%, rgb(168 85 247 / 0.04) 40%, transparent 70%); }
|
|
.feature-glow-purple:hover { box-shadow: 0 0 0 2px rgb(168 85 247 / 0.3), 0 20px 40px -12px rgb(168 85 247 / 0.25); }
|
|
|
|
.feature-glow-orange-wrapper::before { background: radial-gradient(ellipse at center, rgb(249 115 22 / 0.12) 0%, rgb(249 115 22 / 0.04) 40%, transparent 70%); }
|
|
.feature-glow-orange:hover { box-shadow: 0 0 0 2px rgb(249 115 22 / 0.3), 0 20px 40px -12px rgb(249 115 22 / 0.25); }
|
|
|
|
.feature-glow-violet-wrapper::before { background: radial-gradient(ellipse at center, rgb(139 92 246 / 0.12) 0%, rgb(139 92 246 / 0.04) 40%, transparent 70%); }
|
|
.feature-glow-violet:hover { box-shadow: 0 0 0 2px rgb(139 92 246 / 0.3), 0 20px 40px -12px rgb(139 92 246 / 0.25); }
|
|
|
|
.feature-glow-yellow-wrapper::before { background: radial-gradient(ellipse at center, rgb(234 179 8 / 0.12) 0%, rgb(234 179 8 / 0.04) 40%, transparent 70%); }
|
|
.feature-glow-yellow:hover { box-shadow: 0 0 0 2px rgb(234 179 8 / 0.3), 0 20px 40px -12px rgb(234 179 8 / 0.25); }
|
|
|
|
.feature-glow-sky-wrapper::before { background: radial-gradient(ellipse at center, rgb(14 165 233 / 0.12) 0%, rgb(14 165 233 / 0.04) 40%, transparent 70%); }
|
|
.feature-glow-sky:hover { box-shadow: 0 0 0 2px rgb(14 165 233 / 0.3), 0 20px 40px -12px rgb(14 165 233 / 0.25); }
|
|
|
|
.feature-glow-indigo-wrapper::before { background: radial-gradient(ellipse at center, rgb(99 102 241 / 0.12) 0%, rgb(99 102 241 / 0.04) 40%, transparent 70%); }
|
|
.feature-glow-indigo:hover { box-shadow: 0 0 0 2px rgb(99 102 241 / 0.3), 0 20px 40px -12px rgb(99 102 241 / 0.25); }
|
|
|
|
.feature-glow-teal-wrapper::before { background: radial-gradient(ellipse at center, rgb(20 184 166 / 0.12) 0%, rgb(20 184 166 / 0.04) 40%, transparent 70%); }
|
|
.feature-glow-teal:hover { box-shadow: 0 0 0 2px rgb(20 184 166 / 0.3), 0 20px 40px -12px rgb(20 184 166 / 0.25); }
|
|
|
|
.feature-glow-cyan-wrapper::before { background: radial-gradient(ellipse at center, rgb(6 182 212 / 0.12) 0%, rgb(6 182 212 / 0.04) 40%, transparent 70%); }
|
|
.feature-glow-cyan:hover { box-shadow: 0 0 0 2px rgb(6 182 212 / 0.3), 0 20px 40px -12px rgb(6 182 212 / 0.25); }
|
|
|
|
.feature-list-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 0.625rem;
|
|
}
|
|
.feature-list-item svg {
|
|
flex-shrink: 0;
|
|
margin-top: 0.125rem;
|
|
}
|
|
|
|
/* Stats counter animation */
|
|
.stat-number {
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* Learn more arrow animation */
|
|
.learn-more-arrow {
|
|
transition: transform 0.2s ease;
|
|
}
|
|
.feature-card:hover .learn-more-arrow {
|
|
transform: translateX(4px);
|
|
}
|
|
|
|
/* Highlight badge pulse */
|
|
@keyframes pulse-ring {
|
|
0% { transform: scale(1); opacity: 1; }
|
|
100% { transform: scale(1.5); opacity: 0; }
|
|
}
|
|
.highlight-badge::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: 9999px;
|
|
animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
}
|
|
</style>
|
|
|
|
<!-- Section Intro -->
|
|
<div class="relative isolate overflow-hidden bg-gray-50" id="features-intro">
|
|
<div class="py-20 sm:py-28">
|
|
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<div class="mx-auto max-w-3xl text-center">
|
|
<div class="mb-6 inline-flex items-center gap-2 rounded-full bg-gray-900 px-4 py-1.5 text-sm text-white">
|
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z" />
|
|
</svg>
|
|
<span>10+ Products in One Platform</span>
|
|
</div>
|
|
<h2 class="text-4xl font-medium tracking-tight text-gray-900 sm:text-5xl lg:text-6xl">
|
|
One platform.<br class="hidden sm:block" />Complete observability.
|
|
</h2>
|
|
<p class="mt-6 text-lg leading-8 text-gray-600 max-w-2xl mx-auto">
|
|
Replace your entire monitoring stack with a single open-source platform. Stop juggling multiple vendors, integration headaches, and spiraling costs.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- First Section: Core Platform -->
|
|
<div class="relative isolate overflow-hidden bg-white" id="features-section-1">
|
|
<div class="py-20 sm:py-28">
|
|
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<!-- Section Header -->
|
|
<div class="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-8 mb-16">
|
|
<div class="max-w-2xl">
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<div class="flex h-10 w-10 items-center justify-center rounded-xl bg-slate-100 ring-1 ring-slate-200">
|
|
<svg class="h-5 w-5 text-slate-600" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" />
|
|
</svg>
|
|
</div>
|
|
<span class="text-sm font-medium text-slate-600">Essentials</span>
|
|
</div>
|
|
<h2 class="text-3xl font-medium tracking-tight text-gray-900 sm:text-4xl">
|
|
Keep your services running
|
|
</h2>
|
|
<p class="mt-4 text-lg text-gray-600">
|
|
Monitor uptime, manage incidents, alert your team, and communicate with customers. The foundation of operational excellence.
|
|
</p>
|
|
</div>
|
|
<div class="flex items-center gap-6 text-sm text-gray-500">
|
|
<div class="flex items-center gap-2">
|
|
<svg class="h-5 w-5 text-slate-500" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
|
|
</svg>
|
|
<span>100% open source</span>
|
|
</div>
|
|
<div class="h-4 w-px bg-gray-200"></div>
|
|
<div class="flex items-center gap-2">
|
|
<svg class="h-5 w-5 text-slate-500" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
|
|
</svg>
|
|
<span>No vendor lock-in</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Feature Cards Carousel -->
|
|
<div class="relative">
|
|
<!-- Navigation Buttons -->
|
|
<div class="flex items-center justify-end gap-2 mb-6">
|
|
<button onclick="scrollEssentialsCarousel(-1)" id="essentials-prev" class="flex h-10 w-10 items-center justify-center rounded-full bg-gray-100 ring-1 ring-gray-200 text-gray-400 cursor-not-allowed transition-all" disabled>
|
|
<svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" /></svg>
|
|
</button>
|
|
<button onclick="scrollEssentialsCarousel(1)" id="essentials-next" class="flex h-10 w-10 items-center justify-center rounded-full bg-gray-200 ring-1 ring-gray-300 text-gray-600 transition-all hover:bg-gray-300">
|
|
<svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" /></svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Carousel Track -->
|
|
<div class="overflow-hidden rounded-2xl" id="essentials-carousel-viewport">
|
|
<div class="flex gap-8 transition-transform duration-500 ease-in-out" id="essentials-carousel-track">
|
|
|
|
<!-- Status Page - Emerald -->
|
|
<div class="w-full sm:w-[calc(50%-1rem)] lg:w-[calc(25%-1.5rem)] flex-shrink-0 feature-card-wrapper feature-glow-emerald-wrapper">
|
|
<a href="/product/status-page" class="feature-card feature-glow-emerald group flex flex-col rounded-2xl bg-white p-6 ring-1 ring-inset ring-gray-200 transition-all hover:ring-emerald-300 h-full">
|
|
<div class="flex items-start justify-between">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-emerald-50 to-emerald-100 ring-1 ring-emerald-200">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6 text-emerald-600">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="mt-4">
|
|
<h3 class="text-lg font-semibold text-gray-900">Status Page</h3>
|
|
<p class="mt-2 text-sm text-gray-600 leading-relaxed">Beautiful, customizable status pages that build trust with your customers.</p>
|
|
</div>
|
|
<ul class="mt-5 space-y-3 flex-1">
|
|
<li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Unlimited pages & subscribers</span></li>
|
|
<li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Public & private status pages</span></li>
|
|
<li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Custom domains & branding</span></li>
|
|
<li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Email, SMS & webhook alerts</span></li>
|
|
<li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Scheduled maintenance</span></li>
|
|
</ul>
|
|
<div class="mt-6 pt-4 border-t border-gray-100 flex items-center justify-between">
|
|
<p class="text-xs text-emerald-600 font-medium">Replaces Statuspage, Instatus</p>
|
|
<svg class="h-4 w-4 text-gray-400 learn-more-arrow" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" /></svg>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Incidents - Rose -->
|
|
<div class="w-full sm:w-[calc(50%-1rem)] lg:w-[calc(25%-1.5rem)] flex-shrink-0 feature-card-wrapper feature-glow-rose-wrapper">
|
|
<a href="/product/incident-management" class="feature-card feature-glow-rose group flex flex-col rounded-2xl bg-white p-6 ring-1 ring-inset ring-gray-200 transition-all hover:ring-rose-300 h-full">
|
|
<div class="flex items-start justify-between">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-rose-50 to-rose-100 ring-1 ring-rose-200">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6 text-rose-600">
|
|
<path stroke-linecap="round" stroke-linejoin="round" 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>
|
|
</div>
|
|
<div class="mt-4">
|
|
<h3 class="text-lg font-semibold text-gray-900">Incident Management</h3>
|
|
<p class="mt-2 text-sm text-gray-600 leading-relaxed">Detect, triage, and resolve incidents faster with automated workflows and clear ownership.</p>
|
|
</div>
|
|
<ul class="mt-5 space-y-3 flex-1">
|
|
<li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Automatic incident detection</span></li>
|
|
<li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Slack & Teams integration</span></li>
|
|
<li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Custom workflows</span></li>
|
|
<li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Severity levels & escalation</span></li>
|
|
<li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Blameless postmortems</span></li>
|
|
</ul>
|
|
<div class="mt-6 pt-4 border-t border-gray-100 flex items-center justify-between">
|
|
<p class="text-xs text-rose-600 font-medium">Replaces Incident.io, FireHydrant</p>
|
|
<svg class="h-4 w-4 text-gray-400 learn-more-arrow" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" /></svg>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Monitoring - Blue -->
|
|
<div class="w-full sm:w-[calc(50%-1rem)] lg:w-[calc(25%-1.5rem)] flex-shrink-0 feature-card-wrapper feature-glow-blue-wrapper">
|
|
<a href="/product/uptime-monitoring" class="feature-card feature-glow-blue group flex flex-col rounded-2xl bg-white p-6 ring-1 ring-inset ring-gray-200 transition-all hover:ring-blue-300 h-full">
|
|
<div class="flex items-start justify-between">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-blue-50 to-blue-100 ring-1 ring-blue-200">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6 text-blue-600">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="mt-4">
|
|
<h3 class="text-lg font-semibold text-gray-900">Uptime Monitoring</h3>
|
|
<p class="mt-2 text-sm text-gray-600 leading-relaxed">Know when your services go down before your customers do. Monitor from any global locations.</p>
|
|
</div>
|
|
<ul class="mt-5 space-y-3 flex-1">
|
|
<li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">HTTP, TCP, UDP, DNS, ICMP</span></li>
|
|
<li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Multi-step API monitoring</span></li>
|
|
<li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">User journey monitoring</span></li>
|
|
<li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Container, VM & Kubernetes</span></li>
|
|
<li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">SSL certificate monitoring</span></li>
|
|
</ul>
|
|
<div class="mt-6 pt-4 border-t border-gray-100 flex items-center justify-between">
|
|
<p class="text-xs text-blue-600 font-medium">Replaces Pingdom, UptimeRobot</p>
|
|
<svg class="h-4 w-4 text-gray-400 learn-more-arrow" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" /></svg>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- On-Call - Stone -->
|
|
<div class="w-full sm:w-[calc(50%-1rem)] lg:w-[calc(25%-1.5rem)] flex-shrink-0 feature-card-wrapper feature-glow-stone-wrapper">
|
|
<a href="/product/on-call" class="feature-card feature-glow-stone group flex flex-col rounded-2xl bg-white p-6 ring-1 ring-inset ring-gray-200 transition-all hover:ring-stone-300 h-full">
|
|
<div class="flex items-start justify-between">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-stone-50 to-stone-100 ring-1 ring-stone-200">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6 text-stone-600">
|
|
<path stroke-linecap="round" stroke-linejoin="round" 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>
|
|
</div>
|
|
<div class="mt-4">
|
|
<h3 class="text-lg font-semibold text-gray-900">On-Call Scheduling</h3>
|
|
<p class="mt-2 text-sm text-gray-600 leading-relaxed">Get the right person notified at the right time. Fair rotations, smart escalations, zero burnout.</p>
|
|
</div>
|
|
<ul class="mt-5 space-y-3 flex-1">
|
|
<li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Call, SMS, Push + More</span></li>
|
|
<li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Multi-tier escalation policies</span></li>
|
|
<li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Flexible rotation schedules</span></li>
|
|
<li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">User Vacation and OOO Policy</span></li>
|
|
<li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Slack and Teams Integration</span></li>
|
|
</ul>
|
|
<div class="mt-6 pt-4 border-t border-gray-100 flex items-center justify-between">
|
|
<p class="text-xs text-stone-600 font-medium">Replaces PagerDuty, Opsgenie</p>
|
|
<svg class="h-4 w-4 text-gray-400 learn-more-arrow" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" /></svg>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Maintenance - Teal -->
|
|
<div class="w-full sm:w-[calc(50%-1rem)] lg:w-[calc(25%-1.5rem)] flex-shrink-0 feature-card-wrapper feature-glow-teal-wrapper">
|
|
<a href="/product/scheduled-maintenance" class="feature-card feature-glow-teal group flex flex-col rounded-2xl bg-white p-6 ring-1 ring-inset ring-gray-200 transition-all hover:ring-teal-300 h-full">
|
|
<div class="flex items-start justify-between">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-teal-50 to-teal-100 ring-1 ring-teal-200">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6 text-teal-600">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="mt-4">
|
|
<h3 class="text-lg font-semibold text-gray-900">Maintenance</h3>
|
|
<p class="mt-2 text-sm text-gray-600 leading-relaxed">Plan downtime before it plans itself. Keep users informed, not surprised.</p>
|
|
</div>
|
|
<ul class="mt-5 space-y-3 flex-1">
|
|
<li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Maintenance windows with start & end</span></li>
|
|
<li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Auto-notify subscribers</span></li>
|
|
<li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Status page integration</span></li>
|
|
<li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Suppress alerts during maintenance</span></li>
|
|
<li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Recurring maintenance schedules</span></li>
|
|
</ul>
|
|
<div class="mt-6 pt-4 border-t border-gray-100 flex items-center justify-between">
|
|
<p class="text-xs text-teal-600 font-medium">Built-in, no extra tools needed</p>
|
|
<svg class="h-4 w-4 text-gray-400 learn-more-arrow" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" /></svg>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Progress Dots -->
|
|
<div class="flex items-center justify-center gap-2 mt-8" id="essentials-dots"></div>
|
|
</div>
|
|
|
|
<script>
|
|
(function() {
|
|
const track = document.getElementById('essentials-carousel-track');
|
|
const viewport = document.getElementById('essentials-carousel-viewport');
|
|
const prevBtn = document.getElementById('essentials-prev');
|
|
const nextBtn = document.getElementById('essentials-next');
|
|
const dotsContainer = document.getElementById('essentials-dots');
|
|
const cards = track.children;
|
|
let currentIndex = 0;
|
|
|
|
function getVisibleCount() {
|
|
if (window.innerWidth >= 1024) return 4;
|
|
if (window.innerWidth >= 640) return 2;
|
|
return 1;
|
|
}
|
|
|
|
function getMaxIndex() {
|
|
return Math.max(0, cards.length - getVisibleCount());
|
|
}
|
|
|
|
function updateCarousel() {
|
|
const visibleCount = getVisibleCount();
|
|
const gap = 32; // gap-8 = 2rem = 32px
|
|
const cardWidth = (viewport.offsetWidth - gap * (visibleCount - 1)) / visibleCount;
|
|
const offset = currentIndex * (cardWidth + gap);
|
|
track.style.transform = 'translateX(-' + offset + 'px)';
|
|
|
|
// Update buttons
|
|
const maxIdx = getMaxIndex();
|
|
prevBtn.disabled = currentIndex === 0;
|
|
prevBtn.classList.toggle('cursor-not-allowed', currentIndex === 0);
|
|
prevBtn.classList.toggle('text-gray-400', currentIndex === 0);
|
|
prevBtn.classList.toggle('bg-gray-100', currentIndex === 0);
|
|
prevBtn.classList.toggle('bg-gray-200', currentIndex !== 0);
|
|
prevBtn.classList.toggle('text-gray-600', currentIndex !== 0);
|
|
prevBtn.classList.toggle('hover:bg-gray-300', currentIndex !== 0);
|
|
|
|
nextBtn.disabled = currentIndex >= maxIdx;
|
|
nextBtn.classList.toggle('cursor-not-allowed', currentIndex >= maxIdx);
|
|
nextBtn.classList.toggle('text-gray-400', currentIndex >= maxIdx);
|
|
nextBtn.classList.toggle('bg-gray-100', currentIndex >= maxIdx);
|
|
nextBtn.classList.toggle('bg-gray-200', currentIndex < maxIdx);
|
|
nextBtn.classList.toggle('ring-1', currentIndex >= maxIdx);
|
|
nextBtn.classList.toggle('ring-gray-200', currentIndex >= maxIdx);
|
|
nextBtn.classList.toggle('ring-gray-300', currentIndex < maxIdx);
|
|
nextBtn.classList.toggle('text-gray-600', currentIndex < maxIdx);
|
|
nextBtn.classList.toggle('hover:bg-gray-300', currentIndex < maxIdx);
|
|
|
|
// Update dots
|
|
const totalPages = maxIdx + 1;
|
|
dotsContainer.innerHTML = '';
|
|
for (let i = 0; i < totalPages; i++) {
|
|
const dot = document.createElement('button');
|
|
dot.className = 'h-2 rounded-full transition-all duration-300 ' + (i === currentIndex ? 'w-6 bg-gray-400' : 'w-2 bg-gray-200 hover:bg-gray-300');
|
|
dot.onclick = function() { currentIndex = i; updateCarousel(); };
|
|
dotsContainer.appendChild(dot);
|
|
}
|
|
}
|
|
|
|
window.scrollEssentialsCarousel = function(dir) {
|
|
const maxIdx = getMaxIndex();
|
|
currentIndex = Math.max(0, Math.min(maxIdx, currentIndex + dir));
|
|
updateCarousel();
|
|
};
|
|
|
|
window.addEventListener('resize', function() {
|
|
currentIndex = Math.min(currentIndex, getMaxIndex());
|
|
updateCarousel();
|
|
});
|
|
|
|
updateCarousel();
|
|
})();
|
|
</script>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Second Section: Observability -->
|
|
<div class="relative isolate overflow-hidden bg-gray-50" id="features-section-2">
|
|
<div class="py-20 sm:py-28">
|
|
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<!-- Section Header -->
|
|
<div class="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-8 mb-16">
|
|
<div class="max-w-2xl">
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<div class="flex h-10 w-10 items-center justify-center rounded-xl bg-purple-100 ring-1 ring-purple-200">
|
|
<svg class="h-5 w-5 text-purple-600" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
</svg>
|
|
</div>
|
|
<span class="text-sm font-medium text-purple-600">Full-Stack Observability</span>
|
|
</div>
|
|
<h2 class="text-3xl font-medium tracking-tight text-gray-900 sm:text-4xl">
|
|
Observe and Debug any stack
|
|
</h2>
|
|
<p class="mt-4 text-lg text-gray-600">
|
|
Centralized logs, performance metrics, distributed traces, and error tracking. Find and fix issues in minutes, not hours.
|
|
</p>
|
|
</div>
|
|
<div class="flex items-center gap-6 text-sm text-gray-500">
|
|
<div class="flex items-center gap-2">
|
|
<svg class="h-5 w-5 text-purple-500" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
|
|
</svg>
|
|
<span>OpenTelemetry native</span>
|
|
</div>
|
|
<div class="h-4 w-px bg-gray-300"></div>
|
|
<div class="flex items-center gap-2">
|
|
<svg class="h-5 w-5 text-purple-500" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
|
|
</svg>
|
|
<span>No per-host pricing</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Feature Cards Carousel -->
|
|
<div class="relative">
|
|
<div class="flex items-center justify-end gap-2 mb-6">
|
|
<button onclick="scrollObservabilityCarousel(-1)" id="observability-prev" class="flex h-10 w-10 items-center justify-center rounded-full bg-gray-100 ring-1 ring-gray-200 text-gray-400 cursor-not-allowed transition-all" disabled>
|
|
<svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" /></svg>
|
|
</button>
|
|
<button onclick="scrollObservabilityCarousel(1)" id="observability-next" class="flex h-10 w-10 items-center justify-center rounded-full bg-gray-200 ring-1 ring-gray-300 text-gray-600 transition-all hover:bg-gray-300">
|
|
<svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" /></svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="overflow-hidden rounded-2xl" id="observability-carousel-viewport">
|
|
<div class="flex gap-8 transition-transform duration-500 ease-in-out" id="observability-carousel-track">
|
|
|
|
<!-- Logs - Amber -->
|
|
<div class="w-full sm:w-[calc(50%-1rem)] lg:w-[calc(25%-1.5rem)] flex-shrink-0 feature-card-wrapper feature-glow-amber-wrapper">
|
|
<a href="/product/logs-management" class="feature-card feature-glow-amber group flex flex-col rounded-2xl bg-white p-6 ring-1 ring-inset ring-gray-200 transition-all hover:ring-amber-300 h-full">
|
|
<div class="flex items-start justify-between">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-amber-50 to-amber-100 ring-1 ring-amber-200">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6 text-amber-600">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 010 3.75H5.625a1.875 1.875 0 010-3.75z" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="mt-4">
|
|
<h3 class="text-lg font-semibold text-gray-900">Log Management</h3>
|
|
<p class="mt-2 text-sm text-gray-600 leading-relaxed">Centralize, search, and analyze logs from all your services at any scale.</p>
|
|
</div>
|
|
<ul class="mt-5 space-y-3 flex-1">
|
|
<li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">OpenTelemetry support</span></li>
|
|
<li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Lightning-fast full-text search</span></li>
|
|
<li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Real-time log tailing</span></li>
|
|
<li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Log-based alerting rules</span></li>
|
|
<li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Any source, stack, or app</span></li>
|
|
</ul>
|
|
<div class="mt-6 pt-4 border-t border-gray-100 flex items-center justify-between">
|
|
<p class="text-xs text-amber-600 font-medium">Replaces Splunk, Datadog Logs</p>
|
|
<svg class="h-4 w-4 text-gray-400 learn-more-arrow" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" /></svg>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Traces - Yellow -->
|
|
<div class="w-full sm:w-[calc(50%-1rem)] lg:w-[calc(25%-1.5rem)] flex-shrink-0 feature-card-wrapper feature-glow-yellow-wrapper">
|
|
<a href="/product/traces" class="feature-card feature-glow-yellow group flex flex-col rounded-2xl bg-white p-6 ring-1 ring-inset ring-gray-200 transition-all hover:ring-yellow-300 h-full">
|
|
<div class="flex items-start justify-between">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-yellow-50 to-yellow-100 ring-1 ring-yellow-200">
|
|
<svg class="h-6 w-6 text-yellow-600" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
|
|
<rect x="2" y="3" width="20" height="4" rx="0.5"></rect>
|
|
<rect x="2" y="10" width="10" height="4" rx="0.5"></rect>
|
|
<rect x="2" y="17" width="5" height="4" rx="0.5"></rect>
|
|
<rect x="17" y="17" width="5" height="4" rx="0.5"></rect>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="mt-4">
|
|
<h3 class="text-lg font-semibold text-gray-900">Distributed Traces</h3>
|
|
<p class="mt-2 text-sm text-gray-600 leading-relaxed">Follow requests across your stack. See where time is spent and what's causing slowdowns.</p>
|
|
</div>
|
|
<ul class="mt-5 space-y-3 flex-1">
|
|
<li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">End-to-end request tracing</span></li>
|
|
<li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Auto-generated service maps</span></li>
|
|
<li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Span-level analysis</span></li>
|
|
<li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Latency percentile tracking</span></li>
|
|
<li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Trace microservices</span></li>
|
|
</ul>
|
|
<div class="mt-6 pt-4 border-t border-gray-100 flex items-center justify-between">
|
|
<p class="text-xs text-yellow-600 font-medium">Replaces Jaeger, Zipkin</p>
|
|
<svg class="h-4 w-4 text-gray-400 learn-more-arrow" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" /></svg>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Exceptions - Orange -->
|
|
<div class="w-full sm:w-[calc(50%-1rem)] lg:w-[calc(25%-1.5rem)] flex-shrink-0 feature-card-wrapper feature-glow-orange-wrapper">
|
|
<a href="/product/exceptions" class="feature-card feature-glow-orange group flex flex-col rounded-2xl bg-white p-6 ring-1 ring-inset ring-gray-200 transition-all hover:ring-orange-300 h-full">
|
|
<div class="flex items-start justify-between">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-orange-50 to-orange-100 ring-1 ring-orange-200">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6 text-orange-600">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="mt-4">
|
|
<h3 class="text-lg font-semibold text-gray-900">Error Tracking</h3>
|
|
<p class="mt-2 text-sm text-gray-600 leading-relaxed">Capture, group, and track every exception. Get the context you need to fix bugs faster.</p>
|
|
</div>
|
|
<ul class="mt-5 space-y-3 flex-1">
|
|
<li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Full stack traces with context</span></li>
|
|
<li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Intelligent error grouping</span></li>
|
|
<li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Release & deployment tracking</span></li>
|
|
<li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Issue assignment & workflows</span></li>
|
|
<li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">AI-powered auto-fix</span></li>
|
|
</ul>
|
|
<div class="mt-6 pt-4 border-t border-gray-100 flex items-center justify-between">
|
|
<p class="text-xs text-orange-600 font-medium">Replaces Sentry, Bugsnag</p>
|
|
<svg class="h-4 w-4 text-gray-400 learn-more-arrow" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" /></svg>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Kubernetes - Cyan -->
|
|
<div class="w-full sm:w-[calc(50%-1rem)] lg:w-[calc(25%-1.5rem)] flex-shrink-0 feature-card-wrapper feature-glow-cyan-wrapper">
|
|
<a href="/product/kubernetes" class="feature-card feature-glow-cyan group flex flex-col rounded-2xl bg-white p-6 ring-1 ring-inset ring-gray-200 transition-all hover:ring-cyan-300 h-full">
|
|
<div class="flex items-start justify-between">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-cyan-50 to-cyan-100 ring-1 ring-cyan-200">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6 text-cyan-600">
|
|
<polygon stroke-linecap="round" stroke-linejoin="round" points="12,2.5 19.43,6.08 21.26,14.11 15.95,20.64 8.05,20.56 2.74,14.27 4.57,6.22"></polygon>
|
|
<circle cx="12" cy="12" r="2.2" stroke-linecap="round" stroke-linejoin="round"></circle>
|
|
<line x1="12" y1="9.8" x2="12" y2="4" stroke-linecap="round"></line>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="mt-4">
|
|
<h3 class="text-lg font-semibold text-gray-900">Kubernetes</h3>
|
|
<p class="mt-2 text-sm text-gray-600 leading-relaxed">Monitor Kubernetes clusters, pods, and workloads in real-time with full visibility.</p>
|
|
</div>
|
|
<ul class="mt-5 space-y-3 flex-1">
|
|
<li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Cluster & node monitoring</span></li>
|
|
<li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Pod & container metrics</span></li>
|
|
<li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Deployment tracking</span></li>
|
|
<li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Resource utilization alerts</span></li>
|
|
<li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Namespace-level insights</span></li>
|
|
</ul>
|
|
<div class="mt-6 pt-4 border-t border-gray-100 flex items-center justify-between">
|
|
<p class="text-xs text-cyan-600 font-medium">Replaces Lens, K9s</p>
|
|
<svg class="h-4 w-4 text-gray-400 learn-more-arrow" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" /></svg>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Profiles - Rose -->
|
|
<div class="w-full sm:w-[calc(50%-1rem)] lg:w-[calc(25%-1.5rem)] flex-shrink-0 feature-card-wrapper feature-glow-rose-wrapper">
|
|
<a href="/product/profiles" class="feature-card feature-glow-rose group flex flex-col rounded-2xl bg-white p-6 ring-1 ring-inset ring-gray-200 transition-all hover:ring-rose-300 h-full">
|
|
<div class="flex items-start justify-between">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-rose-50 to-rose-100 ring-1 ring-rose-200">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6 text-rose-600">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15.362 5.214A8.252 8.252 0 0112 21 8.25 8.25 0 016.038 7.048 8.287 8.287 0 009 9.6a8.983 8.983 0 013.361-6.867 8.21 8.21 0 003 2.48z"></path>
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 18a3.75 3.75 0 00.495-7.467 5.99 5.99 0 00-1.925 3.546 5.974 5.974 0 01-2.133-1.001A3.75 3.75 0 0012 18z"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="mt-4">
|
|
<h3 class="text-lg font-semibold text-gray-900">Profiling</h3>
|
|
<p class="mt-2 text-sm text-gray-600 leading-relaxed">CPU and memory profiling with flamegraphs to find and fix performance bottlenecks.</p>
|
|
</div>
|
|
<ul class="mt-5 space-y-3 flex-1">
|
|
<li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">CPU & memory flamegraphs</span></li>
|
|
<li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Continuous profiling</span></li>
|
|
<li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Compare profiles over time</span></li>
|
|
<li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Language-agnostic support</span></li>
|
|
<li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Correlate with traces & logs</span></li>
|
|
</ul>
|
|
<div class="mt-6 pt-4 border-t border-gray-100 flex items-center justify-between">
|
|
<p class="text-xs text-rose-600 font-medium">Replaces Pyroscope, pprof</p>
|
|
<svg class="h-4 w-4 text-gray-400 learn-more-arrow" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" /></svg>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Metrics - Purple -->
|
|
<div class="w-full sm:w-[calc(50%-1rem)] lg:w-[calc(25%-1.5rem)] flex-shrink-0 feature-card-wrapper feature-glow-purple-wrapper">
|
|
<a href="/product/metrics" class="feature-card feature-glow-purple group flex flex-col rounded-2xl bg-white p-6 ring-1 ring-inset ring-gray-200 transition-all hover:ring-purple-300 h-full">
|
|
<div class="flex items-start justify-between">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-purple-50 to-purple-100 ring-1 ring-purple-200">
|
|
<svg class="h-6 w-6 text-purple-600" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M2 12h3l2-4 3 8 3-6 2 4h7"></path>
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M2 20h20"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="mt-4">
|
|
<h3 class="text-lg font-semibold text-gray-900">Metrics</h3>
|
|
<p class="mt-2 text-sm text-gray-600 leading-relaxed">Track system and application performance with high-resolution metrics.</p>
|
|
</div>
|
|
<ul class="mt-5 space-y-3 flex-1">
|
|
<li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">OpenTelemetry & Prometheus</span></li>
|
|
<li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Custom application metrics</span></li>
|
|
<li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Metric monitoring</span></li>
|
|
<li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Threshold & anomaly alerts</span></li>
|
|
<li class="feature-list-item"><%- include('./Partials/tick-icon') %><span class="text-sm text-gray-600">Visualize in dashboards</span></li>
|
|
</ul>
|
|
<div class="mt-6 pt-4 border-t border-gray-100 flex items-center justify-between">
|
|
<p class="text-xs text-purple-600 font-medium">Replaces Datadog, Prometheus</p>
|
|
<svg class="h-4 w-4 text-gray-400 learn-more-arrow" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" /></svg>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-center gap-2 mt-8" id="observability-dots"></div>
|
|
</div>
|
|
|
|
<script>
|
|
(function() {
|
|
const track = document.getElementById('observability-carousel-track');
|
|
const viewport = document.getElementById('observability-carousel-viewport');
|
|
const prevBtn = document.getElementById('observability-prev');
|
|
const nextBtn = document.getElementById('observability-next');
|
|
const dotsContainer = document.getElementById('observability-dots');
|
|
const cards = track.children;
|
|
let currentIndex = 0;
|
|
|
|
function getVisibleCount() {
|
|
if (window.innerWidth >= 1024) return 4;
|
|
if (window.innerWidth >= 640) return 2;
|
|
return 1;
|
|
}
|
|
|
|
function getMaxIndex() {
|
|
return Math.max(0, cards.length - getVisibleCount());
|
|
}
|
|
|
|
function updateCarousel() {
|
|
const visibleCount = getVisibleCount();
|
|
const gap = 32;
|
|
const cardWidth = (viewport.offsetWidth - gap * (visibleCount - 1)) / visibleCount;
|
|
const offset = currentIndex * (cardWidth + gap);
|
|
track.style.transform = 'translateX(-' + offset + 'px)';
|
|
|
|
const maxIdx = getMaxIndex();
|
|
prevBtn.disabled = currentIndex === 0;
|
|
prevBtn.classList.toggle('cursor-not-allowed', currentIndex === 0);
|
|
prevBtn.classList.toggle('text-gray-400', currentIndex === 0);
|
|
prevBtn.classList.toggle('bg-gray-100', currentIndex === 0);
|
|
prevBtn.classList.toggle('bg-gray-200', currentIndex !== 0);
|
|
prevBtn.classList.toggle('text-gray-600', currentIndex !== 0);
|
|
prevBtn.classList.toggle('hover:bg-gray-300', currentIndex !== 0);
|
|
|
|
nextBtn.disabled = currentIndex >= maxIdx;
|
|
nextBtn.classList.toggle('cursor-not-allowed', currentIndex >= maxIdx);
|
|
nextBtn.classList.toggle('text-gray-400', currentIndex >= maxIdx);
|
|
nextBtn.classList.toggle('bg-gray-100', currentIndex >= maxIdx);
|
|
nextBtn.classList.toggle('bg-gray-200', currentIndex < maxIdx);
|
|
nextBtn.classList.toggle('ring-1', currentIndex >= maxIdx);
|
|
nextBtn.classList.toggle('ring-gray-200', currentIndex >= maxIdx);
|
|
nextBtn.classList.toggle('ring-gray-300', currentIndex < maxIdx);
|
|
nextBtn.classList.toggle('text-gray-600', currentIndex < maxIdx);
|
|
nextBtn.classList.toggle('hover:bg-gray-300', currentIndex < maxIdx);
|
|
|
|
const totalPages = maxIdx + 1;
|
|
dotsContainer.innerHTML = '';
|
|
for (let i = 0; i < totalPages; i++) {
|
|
const dot = document.createElement('button');
|
|
dot.className = 'h-2 rounded-full transition-all duration-300 ' + (i === currentIndex ? 'w-6 bg-gray-400' : 'w-2 bg-gray-200 hover:bg-gray-300');
|
|
dot.onclick = function() { currentIndex = i; updateCarousel(); };
|
|
dotsContainer.appendChild(dot);
|
|
}
|
|
}
|
|
|
|
window.scrollObservabilityCarousel = function(dir) {
|
|
const maxIdx = getMaxIndex();
|
|
currentIndex = Math.max(0, Math.min(maxIdx, currentIndex + dir));
|
|
updateCarousel();
|
|
};
|
|
|
|
window.addEventListener('resize', function() {
|
|
currentIndex = Math.min(currentIndex, getMaxIndex());
|
|
updateCarousel();
|
|
});
|
|
|
|
updateCarousel();
|
|
})();
|
|
</script>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Third Section: Automation & Intelligence -->
|
|
<div class="relative isolate overflow-hidden bg-white" id="features-section-3">
|
|
<div class="py-20 sm:py-28">
|
|
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<!-- Section Header -->
|
|
<div class="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-8 mb-16">
|
|
<div class="max-w-2xl">
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<div class="flex h-10 w-10 items-center justify-center rounded-xl bg-violet-100 ring-1 ring-violet-200">
|
|
<svg class="h-5 w-5 text-violet-600" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z" />
|
|
</svg>
|
|
</div>
|
|
<span class="text-sm font-medium text-violet-600">Automation & Intelligence</span>
|
|
</div>
|
|
<h2 class="text-3xl font-medium tracking-tight text-gray-900 sm:text-4xl">
|
|
Analytics and Automations built in
|
|
</h2>
|
|
<p class="mt-4 text-lg text-gray-600">
|
|
Automate repetitive tasks, visualize everything in custom dashboards, and let AI handle the heavy lifting.
|
|
</p>
|
|
</div>
|
|
<div class="flex items-center gap-6 text-sm text-gray-500">
|
|
<div class="flex items-center gap-2">
|
|
<svg class="h-5 w-5 text-violet-500" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
|
|
</svg>
|
|
<span>5000+ integrations</span>
|
|
</div>
|
|
<div class="h-4 w-px bg-gray-200"></div>
|
|
<div class="flex items-center gap-2">
|
|
<svg class="h-5 w-5 text-violet-500" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
|
|
</svg>
|
|
<span>No-code workflows</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Feature Cards Grid -->
|
|
<div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
|
|
|
|
<!-- Workflows - Sky -->
|
|
<div class="feature-card-wrapper feature-glow-sky-wrapper">
|
|
<a href="/product/workflows" class="feature-card feature-glow-sky group flex flex-col rounded-2xl bg-white p-6 ring-1 ring-inset ring-gray-200 transition-all hover:ring-sky-300 h-full">
|
|
<div class="flex items-start justify-between">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-sky-50 to-sky-100 ring-1 ring-sky-200">
|
|
<svg class="h-6 w-6 text-sky-600" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" style="transform: rotate(180deg)">
|
|
<rect x="3" y="3" width="6" height="4" rx="1" stroke-width="1.5"></rect>
|
|
<rect x="15" y="3" width="6" height="4" rx="1" stroke-width="1.5"></rect>
|
|
<rect x="9" y="17" width="6" height="4" rx="1" stroke-width="1.5"></rect>
|
|
<path stroke-linecap="round" d="M6 7v3a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7M12 12v5"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="mt-4">
|
|
<h3 class="text-lg font-semibold text-gray-900">Workflows</h3>
|
|
<p class="mt-2 text-sm text-gray-600 leading-relaxed">Build powerful automations with a visual drag-and-drop builder. Connect any service, trigger any action.</p>
|
|
</div>
|
|
<ul class="mt-5 space-y-3 flex-1">
|
|
<li class="feature-list-item">
|
|
<%- include('./Partials/tick-icon') %>
|
|
<span class="text-sm text-gray-600">Visual workflow builder</span>
|
|
</li>
|
|
<li class="feature-list-item">
|
|
<%- include('./Partials/tick-icon') %>
|
|
<span class="text-sm text-gray-600">Event & schedule triggers</span>
|
|
</li>
|
|
<li class="feature-list-item">
|
|
<%- include('./Partials/tick-icon') %>
|
|
<span class="text-sm text-gray-600">5000+ integrations</span>
|
|
</li>
|
|
<li class="feature-list-item">
|
|
<%- include('./Partials/tick-icon') %>
|
|
<span class="text-sm text-gray-600">Integrate with any tool</span>
|
|
</li>
|
|
<li class="feature-list-item">
|
|
<%- include('./Partials/tick-icon') %>
|
|
<span class="text-sm text-gray-600">Automate any process</span>
|
|
</li>
|
|
</ul>
|
|
<div class="mt-6 pt-4 border-t border-gray-100 flex items-center justify-between">
|
|
<p class="text-xs text-sky-600 font-medium">Replaces Zapier, n8n</p>
|
|
<svg class="h-4 w-4 text-gray-400 learn-more-arrow" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
|
|
</svg>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Dashboards - Indigo -->
|
|
<div class="feature-card-wrapper feature-glow-indigo-wrapper">
|
|
<a href="/product/dashboards" class="feature-card feature-glow-indigo group flex flex-col rounded-2xl bg-white p-6 ring-1 ring-inset ring-gray-200 transition-all hover:ring-indigo-300 h-full">
|
|
<div class="flex items-start justify-between">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-indigo-50 to-indigo-100 ring-1 ring-indigo-200">
|
|
<svg class="h-6 w-6 text-indigo-600" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6a7.5 7.5 0 107.5 7.5h-7.5V6z"></path>
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 10.5H21A7.5 7.5 0 0013.5 3v7.5z"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="mt-4">
|
|
<h3 class="text-lg font-semibold text-gray-900">Dashboards</h3>
|
|
<p class="mt-2 text-sm text-gray-600 leading-relaxed">Create beautiful, real-time dashboards that bring all your data together in one place. Share with your team or embed anywhere.</p>
|
|
</div>
|
|
<ul class="mt-5 space-y-3 flex-1">
|
|
<li class="feature-list-item">
|
|
<%- include('./Partials/tick-icon') %>
|
|
<span class="text-sm text-gray-600">Drag-and-drop builder</span>
|
|
</li>
|
|
<li class="feature-list-item">
|
|
<%- include('./Partials/tick-icon') %>
|
|
<span class="text-sm text-gray-600">Real-time data streaming</span>
|
|
</li>
|
|
<li class="feature-list-item">
|
|
<%- include('./Partials/tick-icon') %>
|
|
<span class="text-sm text-gray-600">Shareable public links</span>
|
|
</li>
|
|
<li class="feature-list-item">
|
|
<%- include('./Partials/tick-icon') %>
|
|
<span class="text-sm text-gray-600">Add any metric or chart</span>
|
|
</li>
|
|
<li class="feature-list-item">
|
|
<%- include('./Partials/tick-icon') %>
|
|
<span class="text-sm text-gray-600">Password protected & private</span>
|
|
</li>
|
|
</ul>
|
|
<div class="mt-6 pt-4 border-t border-gray-100 flex items-center justify-between">
|
|
<p class="text-xs text-indigo-600 font-medium">Replaces Grafana, Kibana</p>
|
|
<svg class="h-4 w-4 text-gray-400 learn-more-arrow" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
|
|
</svg>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- AI Agent - Violet -->
|
|
<div class="feature-card-wrapper feature-glow-violet-wrapper">
|
|
<a href="/product/ai-agent" class="feature-card feature-glow-violet group flex flex-col rounded-2xl bg-white p-6 ring-1 ring-inset ring-gray-200 transition-all hover:ring-violet-300 h-full">
|
|
<div class="flex items-start justify-between">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-violet-50 to-violet-100 ring-1 ring-violet-200">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6 text-violet-600">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456z" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="mt-4">
|
|
<h3 class="text-lg font-semibold text-gray-900">AI Agent</h3>
|
|
<p class="mt-2 text-sm text-gray-600 leading-relaxed">From detection to fix, automatically. AI monitors, analyzes root cause, and opens PRs for your review.</p>
|
|
</div>
|
|
<ul class="mt-5 space-y-3 flex-1">
|
|
<li class="feature-list-item">
|
|
<%- include('./Partials/tick-icon') %>
|
|
<span class="text-sm text-gray-600">Auto-fix exceptions in production</span>
|
|
</li>
|
|
<li class="feature-list-item">
|
|
<%- include('./Partials/tick-icon') %>
|
|
<span class="text-sm text-gray-600">Optimize slow traces & queries</span>
|
|
</li>
|
|
<li class="feature-list-item">
|
|
<%- include('./Partials/tick-icon') %>
|
|
<span class="text-sm text-gray-600">Fix flaky tests automatically</span>
|
|
</li>
|
|
<li class="feature-list-item">
|
|
<%- include('./Partials/tick-icon') %>
|
|
<span class="text-sm text-gray-600">Security patches & upgrades</span>
|
|
</li>
|
|
<li class="feature-list-item">
|
|
<%- include('./Partials/tick-icon') %>
|
|
<span class="text-sm text-gray-600">Auto-create GitHub PRs</span>
|
|
</li>
|
|
</ul>
|
|
<div class="mt-6 pt-4 border-t border-gray-100 flex items-center justify-between">
|
|
<p class="text-xs text-violet-600 font-medium">Bring your own LLM</p>
|
|
<svg class="h-4 w-4 text-gray-400 learn-more-arrow" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
|
|
</svg>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|