mirror of
https://github.com/OneUptime/oneuptime.git
synced 2026-04-06 00:32:12 +02:00
Add AI Auto-Fix and AI Copilot hero cards
- 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.
This commit is contained in:
Nawaz Dhandala
12
Home/Views/Partials/hero-cards/ai-autofix.ejs
Normal file
12
Home/Views/Partials/hero-cards/ai-autofix.ejs
Normal file
@@ -0,0 +1,12 @@
|
||||
<!-- AI Auto-Fix - Fuchsia -->
|
||||
<div class="hero-card-wrapper hero-glow-fuchsia-wrapper h-full">
|
||||
<a href="/product/ai-agent" class="hero-card hero-glow-fuchsia group flex flex-col items-center justify-center text-center rounded-2xl bg-white px-4 py-5 ring-1 ring-inset ring-gray-200 transition-all hover:ring-fuchsia-300 h-full">
|
||||
<div class="flex h-11 w-11 items-center justify-center rounded-xl bg-fuchsia-50 ring-1 ring-fuchsia-200">
|
||||
<svg class="h-5 w-5 text-fuchsia-600" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M11.42 15.17 17.25 21A2.652 2.652 0 0 0 21 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 1 1-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 0 0 4.486-6.336l-3.276 3.277a3.004 3.004 0 0 1-2.25-2.25l3.276-3.276a4.5 4.5 0 0 0-6.336 4.486c.091 1.076-.071 2.264-.904 2.95l-.102.085" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="mt-3 text-sm font-medium text-gray-900">AI Auto-Fix</div>
|
||||
<div class="mt-1 text-xs text-gray-500">Auto-fix code & create PRs</div>
|
||||
</a>
|
||||
</div>
|
||||
10
Home/Views/Partials/hero-cards/ai-copilot.ejs
Normal file
10
Home/Views/Partials/hero-cards/ai-copilot.ejs
Normal file
@@ -0,0 +1,10 @@
|
||||
<!-- AI Copilot - Violet -->
|
||||
<div class="hero-card-wrapper hero-glow-violet-wrapper h-full">
|
||||
<a href="/product/ai-agent" class="hero-card hero-glow-violet group flex flex-col items-center justify-center text-center rounded-2xl bg-white px-4 py-5 ring-1 ring-inset ring-gray-200 transition-all hover:ring-violet-300 h-full">
|
||||
<div class="flex h-11 w-11 items-center justify-center rounded-xl bg-violet-50 ring-1 ring-violet-200">
|
||||
<%- include('../icons/ai-agent') %>
|
||||
</div>
|
||||
<div class="mt-3 text-sm font-medium text-gray-900">AI Copilot</div>
|
||||
<div class="mt-1 text-xs text-gray-500">Detect & diagnose issues</div>
|
||||
</a>
|
||||
</div>
|
||||
@@ -13,6 +13,6 @@
|
||||
<%- include('./dashboards') -%>
|
||||
<%- include('./kubernetes') -%>
|
||||
<%- include('./profiles') -%>
|
||||
<%- include('./ai-copilot') -%>
|
||||
<%- include('./ai-autofix') -%>
|
||||
</div>
|
||||
|
||||
<%- include('./ai-agent') -%>
|
||||
|
||||
@@ -96,7 +96,7 @@
|
||||
background-color: rgb(255 255 255) !important;
|
||||
box-shadow: 0 0 0 2px rgb(99 102 241 / 0.3), 0 4px 12px -4px rgb(99 102 241 / 0.15), 0 0 30px -8px rgb(99 102 241 / 0.1);
|
||||
}
|
||||
/* Violet - AI Agent */
|
||||
/* Violet - AI Copilot */
|
||||
.hero-glow-violet-wrapper::before {
|
||||
background: radial-gradient(ellipse at center, rgb(139 92 246 / 0.06) 0%, rgb(139 92 246 / 0.02) 40%, transparent 70%);
|
||||
}
|
||||
@@ -104,6 +104,14 @@
|
||||
background-color: rgb(255 255 255) !important;
|
||||
box-shadow: 0 0 0 2px rgb(139 92 246 / 0.3), 0 4px 12px -4px rgb(139 92 246 / 0.15), 0 0 30px -8px rgb(139 92 246 / 0.1);
|
||||
}
|
||||
/* Fuchsia - AI Auto-Fix */
|
||||
.hero-glow-fuchsia-wrapper::before {
|
||||
background: radial-gradient(ellipse at center, rgb(217 70 239 / 0.06) 0%, rgb(217 70 239 / 0.02) 40%, transparent 70%);
|
||||
}
|
||||
.hero-glow-fuchsia:hover {
|
||||
background-color: rgb(255 255 255) !important;
|
||||
box-shadow: 0 0 0 2px rgb(217 70 239 / 0.3), 0 4px 12px -4px rgb(217 70 239 / 0.15), 0 0 30px -8px rgb(217 70 239 / 0.1);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="relative isolate bg-white overflow-hidden" id="hero-section">
|
||||
|
||||
@@ -27,163 +27,57 @@
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="hidden sm:block">
|
||||
<div class="">
|
||||
<nav class="-mb-px flex justify-center flex-wrap gap-x-8 gap-y-4 max-w-5xl mx-auto px-6" aria-label="Product feature tabs" role="tablist">
|
||||
<!-- Status Pages - Emerald -->
|
||||
<button type="button" onclick="showTab('status-pages')" id="tab-status-pages" role="tab" aria-selected="true" aria-controls="panel-status-pages"
|
||||
class="tab-status-pages-button tab-1-button cursor-pointer bg-gray-100 text-gray-900 shadow-sm ring-1 ring-gray-200 group inline-flex items-center rounded-full py-2.5 px-4 font-medium focus:outline-none transition-all duration-200" tabindex="0" aria-label="Status Pages - communicates service availability to users">
|
||||
<span class="flex items-center justify-center w-7 h-7 rounded-full bg-emerald-50 ring-1 ring-emerald-200 mr-2">
|
||||
<svg class="icon-tab-1 text-emerald-600 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<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>
|
||||
</span>
|
||||
<span>Status Pages</span>
|
||||
</button>
|
||||
<!-- Monitoring - Blue -->
|
||||
<button type="button" onclick="showTab('monitoring')" id="tab-monitoring" role="tab" aria-selected="false" aria-controls="panel-monitoring"
|
||||
class="tab-monitoring-button tab-2-button cursor-pointer text-gray-500 hover:bg-gray-100 hover:text-gray-700 group inline-flex items-center rounded-full py-2.5 px-4 font-medium focus:outline-none transition-all duration-200" tabindex="-1" aria-label="Monitoring - uptime, performance and synthetic checks">
|
||||
<span class="flex items-center justify-center w-7 h-7 rounded-full bg-blue-50 ring-1 ring-blue-200 mr-2">
|
||||
<svg class="icon-tab-2 text-blue-600 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<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>
|
||||
</span>
|
||||
<span>Monitoring</span>
|
||||
</button>
|
||||
<!-- Incidents - Rose -->
|
||||
<button type="button" onclick="showTab('incidents')" id="tab-incidents" role="tab" aria-selected="false" aria-controls="panel-incidents"
|
||||
class="tab-incidents-button tab-3-button cursor-pointer text-gray-500 hover:bg-gray-100 hover:text-gray-700 group inline-flex items-center rounded-full py-2.5 px-4 font-medium focus:outline-none transition-all duration-200" tabindex="-1" aria-label="Incidents - detect, respond and learn from outages">
|
||||
<span class="flex items-center justify-center w-7 h-7 rounded-full bg-rose-50 ring-1 ring-rose-200 mr-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon-tab-3 text-rose-600 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<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>
|
||||
</span>
|
||||
<span>Incidents</span>
|
||||
</button>
|
||||
<!-- On-Call - Stone -->
|
||||
<button type="button" onclick="showTab('on-call')" id="tab-on-call" role="tab" aria-selected="false" aria-controls="panel-on-call"
|
||||
class="tab-on-call-button tab-4-button cursor-pointer text-gray-500 hover:bg-gray-100 hover:text-gray-700 group inline-flex items-center rounded-full py-2.5 px-4 font-medium focus:outline-none transition-all duration-200" tabindex="-1" aria-label="On Call Alerts - intelligent alert routing and scheduling">
|
||||
<span class="flex items-center justify-center w-7 h-7 rounded-full bg-stone-100 ring-1 ring-stone-200 mr-2">
|
||||
<svg class="icon-tab-4 text-stone-600 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<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>
|
||||
</span>
|
||||
<span>On-Call</span>
|
||||
</button>
|
||||
<!-- Logs - Amber -->
|
||||
<button type="button" onclick="showTab('logs')" id="tab-logs" role="tab" aria-selected="false" aria-controls="panel-logs"
|
||||
class="tab-logs-button tab-5-button cursor-pointer text-gray-500 hover:bg-gray-100 hover:text-gray-700 group inline-flex items-center rounded-full py-2.5 px-4 font-medium focus:outline-none transition-all duration-200" tabindex="-1" aria-label="Logs - centralized log management and analytics">
|
||||
<span class="flex items-center justify-center w-7 h-7 rounded-full bg-amber-50 ring-1 ring-amber-200 mr-2">
|
||||
<svg class="icon-tab-5 text-amber-600 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<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 0 1 0 3.75H5.625a1.875 1.875 0 0 1 0-3.75Z" />
|
||||
</svg>
|
||||
</span>
|
||||
<span>Logs</span>
|
||||
</button>
|
||||
<!-- Metrics - Purple -->
|
||||
<button type="button" onclick="showTab('metrics')" id="tab-metrics" role="tab" aria-selected="false" aria-controls="panel-metrics"
|
||||
class="tab-metrics-button tab-6-button cursor-pointer text-gray-500 hover:bg-gray-100 hover:text-gray-700 group inline-flex items-center rounded-full py-2.5 px-4 font-medium focus:outline-none transition-all duration-200" tabindex="-1" aria-label="Metrics - application and infrastructure metrics">
|
||||
<span class="flex items-center justify-center w-7 h-7 rounded-full bg-purple-50 ring-1 ring-purple-200 mr-2">
|
||||
<svg class="icon-tab-6 text-purple-600 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M2 12h3l2-4 3 8 3-6 2 4h7" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M2 20h20" />
|
||||
</svg>
|
||||
</span>
|
||||
<span>Metrics</span>
|
||||
</button>
|
||||
<!-- Traces - Yellow -->
|
||||
<button type="button" onclick="showTab('traces')" id="tab-traces" role="tab" aria-selected="false" aria-controls="panel-traces"
|
||||
class="tab-traces-button tab-7-button cursor-pointer text-gray-500 hover:bg-gray-100 hover:text-gray-700 group inline-flex items-center rounded-full py-2.5 px-4 font-medium focus:outline-none transition-all duration-200" tabindex="-1" aria-label="Traces - distributed request tracing">
|
||||
<span class="flex items-center justify-center w-7 h-7 rounded-full bg-yellow-50 ring-1 ring-yellow-200 mr-2">
|
||||
<svg class="icon-tab-7 text-yellow-600 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<rect x="2" y="3" width="20" height="4" rx="0.5" />
|
||||
<rect x="2" y="10" width="10" height="4" rx="0.5" />
|
||||
<rect x="2" y="17" width="5" height="4" rx="0.5" />
|
||||
<rect x="17" y="17" width="5" height="4" rx="0.5" />
|
||||
</svg>
|
||||
</span>
|
||||
<span>Traces</span>
|
||||
</button>
|
||||
<!-- Exceptions - Orange -->
|
||||
<button type="button" onclick="showTab('exceptions')" id="tab-exceptions" role="tab" aria-selected="false" aria-controls="panel-exceptions"
|
||||
class="tab-exceptions-button tab-8-button cursor-pointer text-gray-500 hover:bg-gray-100 hover:text-gray-700 group inline-flex items-center rounded-full py-2.5 px-4 font-medium focus:outline-none transition-all duration-200" tabindex="-1" aria-label="Exceptions - error tracking and debugging">
|
||||
<span class="flex items-center justify-center w-7 h-7 rounded-full bg-orange-50 ring-1 ring-orange-200 mr-2">
|
||||
<svg class="icon-tab-8 text-orange-600 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<ellipse cx="12" cy="14" rx="5" ry="6" />
|
||||
<path stroke-linecap="round" d="M9 8.5C9 6.5 10.5 5 12 5s3 1.5 3 3.5M4 11l3 1m10-1 3 1M4 17l3-1m10 1 3-1M12 8v12M9 14h6" />
|
||||
</svg>
|
||||
</span>
|
||||
<span>Exceptions</span>
|
||||
</button>
|
||||
<!-- Workflows - Sky -->
|
||||
<button type="button" onclick="showTab('workflows')" id="tab-workflows" role="tab" aria-selected="false" aria-controls="panel-workflows"
|
||||
class="tab-workflows-button tab-9-button cursor-pointer text-gray-500 hover:bg-gray-100 hover:text-gray-700 group inline-flex items-center rounded-full py-2.5 px-4 font-medium focus:outline-none transition-all duration-200" tabindex="-1" aria-label="Workflows - automate reliability operations and responses">
|
||||
<span class="flex items-center justify-center w-7 h-7 rounded-full bg-sky-50 ring-1 ring-sky-200 mr-2">
|
||||
<svg class="icon-tab-9 text-sky-600 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="transform: rotate(180deg)">
|
||||
<rect x="3" y="3" width="6" height="4" rx="1" stroke-width="1.5" />
|
||||
<rect x="15" y="3" width="6" height="4" rx="1" stroke-width="1.5" />
|
||||
<rect x="9" y="17" width="6" height="4" rx="1" stroke-width="1.5" />
|
||||
<path stroke-linecap="round" d="M6 7v3a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7M12 12v5" />
|
||||
</svg>
|
||||
</span>
|
||||
<span>Workflows</span>
|
||||
</button>
|
||||
<!-- Dashboards - Indigo -->
|
||||
<button type="button" onclick="showTab('dashboards')" id="tab-dashboards" role="tab" aria-selected="false" aria-controls="panel-dashboards"
|
||||
class="tab-dashboards-button tab-10-button cursor-pointer text-gray-500 hover:bg-gray-100 hover:text-gray-700 group inline-flex items-center rounded-full py-2.5 px-4 font-medium focus:outline-none transition-all duration-200" tabindex="-1" aria-label="Dashboards - custom data visualizations">
|
||||
<span class="flex items-center justify-center w-7 h-7 rounded-full bg-indigo-50 ring-1 ring-indigo-200 mr-2">
|
||||
<svg class="icon-tab-10 text-indigo-600 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6a7.5 7.5 0 107.5 7.5h-7.5V6z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 10.5H21A7.5 7.5 0 0013.5 3v7.5z" />
|
||||
</svg>
|
||||
</span>
|
||||
<span>Dashboards</span>
|
||||
</button>
|
||||
<!-- Kubernetes - Cyan -->
|
||||
<button type="button" onclick="showTab('kubernetes')" id="tab-kubernetes" role="tab" aria-selected="false" aria-controls="panel-kubernetes"
|
||||
class="tab-kubernetes-button tab-11-button cursor-pointer text-gray-500 hover:bg-gray-100 hover:text-gray-700 group inline-flex items-center rounded-full py-2.5 px-4 font-medium focus:outline-none transition-all duration-200" tabindex="-1" aria-label="Kubernetes - monitor Kubernetes clusters and workloads">
|
||||
<span class="flex items-center justify-center w-7 h-7 rounded-full bg-cyan-50 ring-1 ring-cyan-200 mr-2">
|
||||
<svg class="icon-tab-11 text-cyan-600 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<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>
|
||||
</span>
|
||||
<span>Kubernetes</span>
|
||||
</button>
|
||||
<!-- Profiles - Rose -->
|
||||
<button type="button" onclick="showTab('profiles')" id="tab-profiles" role="tab" aria-selected="false" aria-controls="panel-profiles"
|
||||
class="tab-profiles-button tab-12-button cursor-pointer text-gray-500 hover:bg-gray-100 hover:text-gray-700 group inline-flex items-center rounded-full py-2.5 px-4 font-medium focus:outline-none transition-all duration-200" tabindex="-1" aria-label="Profiles - CPU and memory profiling with flamegraphs">
|
||||
<span class="flex items-center justify-center w-7 h-7 rounded-full bg-rose-50 ring-1 ring-rose-200 mr-2">
|
||||
<svg class="icon-tab-12 text-rose-600 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<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>
|
||||
</span>
|
||||
<span>Profiles</span>
|
||||
</button>
|
||||
<!-- AI Agent - Violet -->
|
||||
<button type="button" onclick="showTab('ai-agent')" id="tab-ai-agent" role="tab" aria-selected="false" aria-controls="panel-ai-agent"
|
||||
class="tab-ai-agent-button tab-13-button cursor-pointer text-gray-500 hover:bg-gray-100 hover:text-gray-700 group inline-flex items-center rounded-full py-2.5 px-4 font-medium focus:outline-none transition-all duration-200" tabindex="-1" aria-label="AI Agent - intelligent automation powered by AI">
|
||||
<span class="flex items-center justify-center w-7 h-7 rounded-full bg-violet-50 ring-1 ring-violet-200 mr-2">
|
||||
<svg class="icon-tab-13 text-violet-600 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z" />
|
||||
</svg>
|
||||
</span>
|
||||
<span>AI Agent</span>
|
||||
</button>
|
||||
<!-- Scheduled Maintenance - Teal -->
|
||||
<button type="button" onclick="showTab('scheduled-maintenance')" id="tab-scheduled-maintenance" role="tab" aria-selected="false" aria-controls="panel-scheduled-maintenance"
|
||||
class="tab-scheduled-maintenance-button tab-14-button cursor-pointer text-gray-500 hover:bg-gray-100 hover:text-gray-700 group inline-flex items-center rounded-full py-2.5 px-4 font-medium focus:outline-none transition-all duration-200" tabindex="-1" aria-label="Scheduled Maintenance - plan and communicate maintenance windows">
|
||||
<span class="flex items-center justify-center w-7 h-7 rounded-full bg-teal-50 ring-1 ring-teal-200 mr-2">
|
||||
<svg class="icon-tab-14 text-teal-600 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<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.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
|
||||
</svg>
|
||||
</span>
|
||||
<span>Maintenance</span>
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="hidden sm:block max-w-5xl mx-auto px-6">
|
||||
<nav aria-label="Product feature tabs" role="tablist">
|
||||
<!-- Reliability & Response -->
|
||||
<div class="mb-6">
|
||||
<p class="text-xs font-semibold uppercase tracking-wider text-gray-400 mb-3 text-center">Reliability & Response</p>
|
||||
<div class="flex justify-center flex-wrap gap-x-4 gap-y-3">
|
||||
<!-- Status Pages -->
|
||||
<button type="button" onclick="showTab('status-pages')" id="tab-status-pages" role="tab" aria-selected="true" aria-controls="panel-status-pages" class="tab-status-pages-button tab-1-button cursor-pointer bg-gray-100 text-gray-900 shadow-sm ring-1 ring-gray-200 group inline-flex items-center rounded-full py-2.5 px-4 font-medium focus:outline-none transition-all duration-200" tabindex="0" aria-label="Status Pages"><span class="flex items-center justify-center w-7 h-7 rounded-full bg-emerald-50 ring-1 ring-emerald-200 mr-2"><svg class="icon-tab-1 text-emerald-600 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><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></span><span>Status Pages</span></button>
|
||||
<!-- Monitoring -->
|
||||
<button type="button" onclick="showTab('monitoring')" id="tab-monitoring" role="tab" aria-selected="false" aria-controls="panel-monitoring" class="tab-monitoring-button tab-2-button cursor-pointer text-gray-500 hover:bg-gray-100 hover:text-gray-700 group inline-flex items-center rounded-full py-2.5 px-4 font-medium focus:outline-none transition-all duration-200" tabindex="-1" aria-label="Monitoring"><span class="flex items-center justify-center w-7 h-7 rounded-full bg-blue-50 ring-1 ring-blue-200 mr-2"><svg class="icon-tab-2 text-blue-600 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><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></span><span>Monitoring</span></button>
|
||||
<!-- Incidents -->
|
||||
<button type="button" onclick="showTab('incidents')" id="tab-incidents" role="tab" aria-selected="false" aria-controls="panel-incidents" class="tab-incidents-button tab-3-button cursor-pointer text-gray-500 hover:bg-gray-100 hover:text-gray-700 group inline-flex items-center rounded-full py-2.5 px-4 font-medium focus:outline-none transition-all duration-200" tabindex="-1" aria-label="Incidents"><span class="flex items-center justify-center w-7 h-7 rounded-full bg-rose-50 ring-1 ring-rose-200 mr-2"><svg xmlns="http://www.w3.org/2000/svg" class="icon-tab-3 text-rose-600 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><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></span><span>Incidents</span></button>
|
||||
<!-- On-Call -->
|
||||
<button type="button" onclick="showTab('on-call')" id="tab-on-call" role="tab" aria-selected="false" aria-controls="panel-on-call" class="tab-on-call-button tab-4-button cursor-pointer text-gray-500 hover:bg-gray-100 hover:text-gray-700 group inline-flex items-center rounded-full py-2.5 px-4 font-medium focus:outline-none transition-all duration-200" tabindex="-1" aria-label="On-Call"><span class="flex items-center justify-center w-7 h-7 rounded-full bg-stone-100 ring-1 ring-stone-200 mr-2"><svg class="icon-tab-4 text-stone-600 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><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></span><span>On-Call</span></button>
|
||||
<!-- Maintenance -->
|
||||
<button type="button" onclick="showTab('scheduled-maintenance')" id="tab-scheduled-maintenance" role="tab" aria-selected="false" aria-controls="panel-scheduled-maintenance" class="tab-scheduled-maintenance-button tab-14-button cursor-pointer text-gray-500 hover:bg-gray-100 hover:text-gray-700 group inline-flex items-center rounded-full py-2.5 px-4 font-medium focus:outline-none transition-all duration-200" tabindex="-1" aria-label="Maintenance"><span class="flex items-center justify-center w-7 h-7 rounded-full bg-teal-50 ring-1 ring-teal-200 mr-2"><svg class="icon-tab-14 text-teal-600 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><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></span><span>Maintenance</span></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Observability -->
|
||||
<div class="mb-6">
|
||||
<p class="text-xs font-semibold uppercase tracking-wider text-gray-400 mb-3 text-center">Observability</p>
|
||||
<div class="flex justify-center flex-wrap gap-x-4 gap-y-3">
|
||||
<!-- Logs -->
|
||||
<button type="button" onclick="showTab('logs')" id="tab-logs" role="tab" aria-selected="false" aria-controls="panel-logs" class="tab-logs-button tab-5-button cursor-pointer text-gray-500 hover:bg-gray-100 hover:text-gray-700 group inline-flex items-center rounded-full py-2.5 px-4 font-medium focus:outline-none transition-all duration-200" tabindex="-1" aria-label="Logs"><span class="flex items-center justify-center w-7 h-7 rounded-full bg-amber-50 ring-1 ring-amber-200 mr-2"><svg class="icon-tab-5 text-amber-600 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><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 0 1 0 3.75H5.625a1.875 1.875 0 0 1 0-3.75Z" /></svg></span><span>Logs</span></button>
|
||||
<!-- Metrics -->
|
||||
<button type="button" onclick="showTab('metrics')" id="tab-metrics" role="tab" aria-selected="false" aria-controls="panel-metrics" class="tab-metrics-button tab-6-button cursor-pointer text-gray-500 hover:bg-gray-100 hover:text-gray-700 group inline-flex items-center rounded-full py-2.5 px-4 font-medium focus:outline-none transition-all duration-200" tabindex="-1" aria-label="Metrics"><span class="flex items-center justify-center w-7 h-7 rounded-full bg-purple-50 ring-1 ring-purple-200 mr-2"><svg class="icon-tab-6 text-purple-600 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2 12h3l2-4 3 8 3-6 2 4h7" /><path stroke-linecap="round" stroke-linejoin="round" d="M2 20h20" /></svg></span><span>Metrics</span></button>
|
||||
<!-- Traces -->
|
||||
<button type="button" onclick="showTab('traces')" id="tab-traces" role="tab" aria-selected="false" aria-controls="panel-traces" class="tab-traces-button tab-7-button cursor-pointer text-gray-500 hover:bg-gray-100 hover:text-gray-700 group inline-flex items-center rounded-full py-2.5 px-4 font-medium focus:outline-none transition-all duration-200" tabindex="-1" aria-label="Traces"><span class="flex items-center justify-center w-7 h-7 rounded-full bg-yellow-50 ring-1 ring-yellow-200 mr-2"><svg class="icon-tab-7 text-yellow-600 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><rect x="2" y="3" width="20" height="4" rx="0.5" /><rect x="2" y="10" width="10" height="4" rx="0.5" /><rect x="2" y="17" width="5" height="4" rx="0.5" /><rect x="17" y="17" width="5" height="4" rx="0.5" /></svg></span><span>Traces</span></button>
|
||||
<!-- Exceptions -->
|
||||
<button type="button" onclick="showTab('exceptions')" id="tab-exceptions" role="tab" aria-selected="false" aria-controls="panel-exceptions" class="tab-exceptions-button tab-8-button cursor-pointer text-gray-500 hover:bg-gray-100 hover:text-gray-700 group inline-flex items-center rounded-full py-2.5 px-4 font-medium focus:outline-none transition-all duration-200" tabindex="-1" aria-label="Exceptions"><span class="flex items-center justify-center w-7 h-7 rounded-full bg-orange-50 ring-1 ring-orange-200 mr-2"><svg class="icon-tab-8 text-orange-600 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><ellipse cx="12" cy="14" rx="5" ry="6" /><path stroke-linecap="round" d="M9 8.5C9 6.5 10.5 5 12 5s3 1.5 3 3.5M4 11l3 1m10-1 3 1M4 17l3-1m10 1 3-1M12 8v12M9 14h6" /></svg></span><span>Exceptions</span></button>
|
||||
<!-- Kubernetes -->
|
||||
<button type="button" onclick="showTab('kubernetes')" id="tab-kubernetes" role="tab" aria-selected="false" aria-controls="panel-kubernetes" class="tab-kubernetes-button tab-11-button cursor-pointer text-gray-500 hover:bg-gray-100 hover:text-gray-700 group inline-flex items-center rounded-full py-2.5 px-4 font-medium focus:outline-none transition-all duration-200" tabindex="-1" aria-label="Kubernetes"><span class="flex items-center justify-center w-7 h-7 rounded-full bg-cyan-50 ring-1 ring-cyan-200 mr-2"><svg class="icon-tab-11 text-cyan-600 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><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></span><span>Kubernetes</span></button>
|
||||
<!-- Profiles -->
|
||||
<button type="button" onclick="showTab('profiles')" id="tab-profiles" role="tab" aria-selected="false" aria-controls="panel-profiles" class="tab-profiles-button tab-12-button cursor-pointer text-gray-500 hover:bg-gray-100 hover:text-gray-700 group inline-flex items-center rounded-full py-2.5 px-4 font-medium focus:outline-none transition-all duration-200" tabindex="-1" aria-label="Profiles"><span class="flex items-center justify-center w-7 h-7 rounded-full bg-rose-50 ring-1 ring-rose-200 mr-2"><svg class="icon-tab-12 text-rose-600 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><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></span><span>Profiles</span></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Automation & Intelligence -->
|
||||
<div>
|
||||
<p class="text-xs font-semibold uppercase tracking-wider text-gray-400 mb-3 text-center">Automation & Intelligence</p>
|
||||
<div class="flex justify-center flex-wrap gap-x-4 gap-y-3">
|
||||
<!-- Workflows -->
|
||||
<button type="button" onclick="showTab('workflows')" id="tab-workflows" role="tab" aria-selected="false" aria-controls="panel-workflows" class="tab-workflows-button tab-9-button cursor-pointer text-gray-500 hover:bg-gray-100 hover:text-gray-700 group inline-flex items-center rounded-full py-2.5 px-4 font-medium focus:outline-none transition-all duration-200" tabindex="-1" aria-label="Workflows"><span class="flex items-center justify-center w-7 h-7 rounded-full bg-sky-50 ring-1 ring-sky-200 mr-2"><svg class="icon-tab-9 text-sky-600 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="transform: rotate(180deg)"><rect x="3" y="3" width="6" height="4" rx="1" stroke-width="1.5" /><rect x="15" y="3" width="6" height="4" rx="1" stroke-width="1.5" /><rect x="9" y="17" width="6" height="4" rx="1" stroke-width="1.5" /><path stroke-linecap="round" d="M6 7v3a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7M12 12v5" /></svg></span><span>Workflows</span></button>
|
||||
<!-- Dashboards -->
|
||||
<button type="button" onclick="showTab('dashboards')" id="tab-dashboards" role="tab" aria-selected="false" aria-controls="panel-dashboards" class="tab-dashboards-button tab-10-button cursor-pointer text-gray-500 hover:bg-gray-100 hover:text-gray-700 group inline-flex items-center rounded-full py-2.5 px-4 font-medium focus:outline-none transition-all duration-200" tabindex="-1" aria-label="Dashboards"><span class="flex items-center justify-center w-7 h-7 rounded-full bg-indigo-50 ring-1 ring-indigo-200 mr-2"><svg class="icon-tab-10 text-indigo-600 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6a7.5 7.5 0 107.5 7.5h-7.5V6z" /><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 10.5H21A7.5 7.5 0 0013.5 3v7.5z" /></svg></span><span>Dashboards</span></button>
|
||||
<!-- AI Agent -->
|
||||
<button type="button" onclick="showTab('ai-agent')" id="tab-ai-agent" role="tab" aria-selected="false" aria-controls="panel-ai-agent" class="tab-ai-agent-button tab-13-button cursor-pointer text-gray-500 hover:bg-gray-100 hover:text-gray-700 group inline-flex items-center rounded-full py-2.5 px-4 font-medium focus:outline-none transition-all duration-200" tabindex="-1" aria-label="AI Agent"><span class="flex items-center justify-center w-7 h-7 rounded-full bg-violet-50 ring-1 ring-violet-200 mr-2"><svg class="icon-tab-13 text-violet-600 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z" /></svg></span><span>AI Agent</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -2,6 +2,8 @@
|
||||
/* Feature Card Styles - Enhanced */
|
||||
.feature-card-wrapper {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
.feature-card-wrapper::before {
|
||||
content: '';
|
||||
@@ -59,6 +61,12 @@
|
||||
.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;
|
||||
@@ -157,234 +165,242 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Feature Cards Grid -->
|
||||
<div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
|
||||
|
||||
<!-- Status Page - Emerald -->
|
||||
<div class="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>
|
||||
<!-- 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>
|
||||
|
||||
<!-- Incidents - Rose -->
|
||||
<div class="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>
|
||||
<!-- 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>
|
||||
<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>
|
||||
|
||||
<!-- 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>
|
||||
<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>
|
||||
|
||||
<!-- 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>
|
||||
</a>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- Monitoring - Blue -->
|
||||
<div class="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="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>
|
||||
|
||||
<!-- Scheduled Maintenance - Teal -->
|
||||
<div class="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.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
|
||||
</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>
|
||||
<!-- 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>
|
||||
@@ -429,193 +445,272 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Feature Cards Grid -->
|
||||
<div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
|
||||
|
||||
<!-- Logs - Amber -->
|
||||
<div class="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>
|
||||
<!-- 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>
|
||||
|
||||
<!-- Metrics - Purple -->
|
||||
<div class="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 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>
|
||||
<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>
|
||||
|
||||
<!-- 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>
|
||||
<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>
|
||||
|
||||
<!-- 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>
|
||||
</a>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- Traces - Yellow -->
|
||||
<div class="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="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>
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user