kgess-mirror/oneuptime
1
0
Fork 0
mirror of https://github.com/OneUptime/oneuptime.git synced 2026-01-11 19:56:44 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 16

Add metrics and traces pages with detailed features and branding updates

Browse source 
- Created new metrics.ejs view for performance insights and real-time monitoring.
- Created new traces.ejs view for distributed tracing and request visibility.
- Updated ProductBranding.md to reflect new links for metrics, traces, and dashboards.
This commit is contained in:
Nawaz Dhandala 2025-12-29 22:13:09 +00:00
parent 26e241802d
commit 3769e0d1a5
No known key found for this signature in database
GPG key ID: 96C5DCA24769DBCA
13 changed files with 904 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
Home/Routes.ts
View file

@ -1192,6 +1192,62 @@ const HomeFeatureSet: FeatureSet = {
},
);
app.get(
"/product/metrics",
(_req: ExpressRequest, res: ExpressResponse) => {
const seo: PageSEOData & { fullCanonicalUrl: string } = getSEOForPath(
"/product/metrics",
res.locals["homeUrl"] as string,
);
res.render(`${ViewsPath}/metrics`, {
enableGoogleTagManager: IsBillingEnabled,
seo,
});
},
);
app.get(
"/product/traces",
(_req: ExpressRequest, res: ExpressResponse) => {
const seo: PageSEOData & { fullCanonicalUrl: string } = getSEOForPath(
"/product/traces",
res.locals["homeUrl"] as string,
);
res.render(`${ViewsPath}/traces`, {
enableGoogleTagManager: IsBillingEnabled,
seo,
});
},
);
app.get(
"/product/exceptions",
(_req: ExpressRequest, res: ExpressResponse) => {
const seo: PageSEOData & { fullCanonicalUrl: string } = getSEOForPath(
"/product/exceptions",
res.locals["homeUrl"] as string,
);
res.render(`${ViewsPath}/exceptions`, {
enableGoogleTagManager: IsBillingEnabled,
seo,
});
},
);
app.get(
"/product/dashboards",
(_req: ExpressRequest, res: ExpressResponse) => {
const seo: PageSEOData & { fullCanonicalUrl: string } = getSEOForPath(
"/product/dashboards",
res.locals["homeUrl"] as string,
);
res.render(`${ViewsPath}/dashboards`, {
enableGoogleTagManager: IsBillingEnabled,
seo,
});
},
);
app.get(
"/incident-management",
(_req: ExpressRequest, res: ExpressResponse) => {

2
Home/Views/Partials/hero-cards/dashboards.ejs
View file

@ -1,6 +1,6 @@
<!-- Dashboards - Indigo -->
<div class="hero-card-wrapper hero-glow-indigo-wrapper h-full">
<a href="/product/coming-soon" class="hero-card hero-glow-indigo 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-gray-300 h-full">
<a href="/product/dashboards" class="hero-card hero-glow-indigo 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-indigo-300 h-full">
<div class="flex h-11 w-11 items-center justify-center rounded-xl bg-indigo-50 ring-1 ring-indigo-200">
<svg class="h-5 w-5 text-indigo-600" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6a7.5 7.5 0 107.5 7.5h-7.5V6z"></path><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 10.5H21A7.5 7.5 0 0013.5 3v7.5z"></path></svg>
</div>

2
Home/Views/Partials/hero-cards/exceptions.ejs
View file

@ -1,6 +1,6 @@
<!-- Exceptions - Orange -->
<div class="hero-card-wrapper hero-glow-rose-wrapper h-full">
<a href="/product/apm" class="hero-card hero-glow-rose 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-gray-300 h-full">
<a href="/product/exceptions" class="hero-card hero-glow-rose 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-orange-300 h-full">
<div class="flex h-11 w-11 items-center justify-center rounded-xl bg-orange-50 ring-1 ring-orange-200">
<svg class="h-5 w-5 text-orange-600" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><ellipse cx="12" cy="14" rx="5" ry="6"></ellipse><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"></path></svg>
</div>

2
Home/Views/Partials/hero-cards/incidents.ejs
View file

@ -1,6 +1,6 @@
<!-- Incident Management - Rose -->
<div class="hero-card-wrapper hero-glow-rose-wrapper h-full">
<a href="/product/incident-management" class="hero-card hero-glow-rose 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-gray-300 h-full">
<a href="/product/incident-management" class="hero-card hero-glow-rose 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-rose-300 h-full">
<div class="flex h-11 w-11 items-center justify-center rounded-xl bg-rose-50 ring-1 ring-rose-200">
<svg class="h-5 w-5 text-rose-600" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><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"></path></svg>
</div>

2
Home/Views/Partials/hero-cards/metrics.ejs
View file

@ -1,6 +1,6 @@
<!-- Metrics - Purple -->
<div class="hero-card-wrapper hero-glow-purple-wrapper h-full">
<a href="/product/apm" class="hero-card hero-glow-purple 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-purple-300 h-full">
<a href="/product/metrics" class="hero-card hero-glow-purple 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-purple-300 h-full">
<div class="flex h-11 w-11 items-center justify-center rounded-xl bg-purple-50 ring-1 ring-purple-200">
<svg class="h-5 w-5 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>

2
Home/Views/Partials/hero-cards/monitoring.ejs
View file

@ -1,6 +1,6 @@
<!-- Monitoring - Blue -->
<div class="hero-card-wrapper hero-glow-blue-wrapper h-full">
<a href="/product/monitoring" class="hero-card hero-glow-blue 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-gray-300 h-full">
<a href="/product/monitoring" class="hero-card hero-glow-blue 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-blue-300 h-full">
<div class="flex h-11 w-11 items-center justify-center rounded-xl bg-blue-50 ring-1 ring-blue-200">
<svg class="h-5 w-5 text-blue-600" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><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"></path></svg>
</div>

2
Home/Views/Partials/hero-cards/status-page.ejs
View file

@ -1,6 +1,6 @@
<!-- Status Page - Emerald -->
<div class="hero-card-wrapper hero-glow-emerald-wrapper h-full">
<a href="/product/status-page" class="hero-card hero-glow-emerald 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-gray-300 h-full">
<a href="/product/status-page" class="hero-card hero-glow-emerald 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-emerald-300 h-full">
<div class="flex h-11 w-11 items-center justify-center rounded-xl bg-emerald-50 ring-1 ring-emerald-200">
<svg class="h-5 w-5 text-emerald-600" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><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"></path></svg>
</div>

2
Home/Views/Partials/hero-cards/traces.ejs
View file

@ -1,6 +1,6 @@
<!-- Traces - Yellow -->
<div class="hero-card-wrapper hero-glow-yellow-wrapper h-full">
<a href="/product/apm" class="hero-card hero-glow-yellow 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-yellow-300 h-full">
<a href="/product/traces" class="hero-card hero-glow-yellow 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-yellow-300 h-full">
<div class="flex h-11 w-11 items-center justify-center rounded-xl bg-yellow-50 ring-1 ring-yellow-200">
<svg class="h-5 w-5 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>

209
Home/Views/dashboards.ejs Normal file
View file

@ -0,0 +1,209 @@
<!DOCTYPE html>
<html lang="en" id="home">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<head>
<title>OneUptime | Dashboards - Visualize All Your Data</title>
<meta name="description"
content="Build custom dashboards to visualize metrics, logs, and traces. Create real-time views tailored to your team's needs with OneUptime Dashboards.">
<%- include('head', {
enableGoogleTagManager: typeof enableGoogleTagManager !== 'undefined' ? enableGoogleTagManager : false
}) -%>
</head>
<body>
<%- include('nav') -%>
<main id="main-content">
<!-- Hero Section -->
<div class="relative isolate overflow-hidden bg-gradient-to-b from-gray-50 via-white to-white">
<!-- Background decorative elements -->
<div class="absolute inset-0 -z-10 overflow-hidden">
<div class="absolute -top-40 -right-32 h-[500px] w-[500px] rounded-full bg-gradient-to-br from-indigo-100/60 to-blue-100/40 blur-3xl"></div>
<div class="absolute -bottom-40 -left-32 h-[500px] w-[500px] rounded-full bg-gradient-to-br from-blue-100/60 to-indigo-100/40 blur-3xl"></div>
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-[600px] w-[600px] rounded-full bg-gradient-to-br from-indigo-50/40 to-blue-50/30 blur-3xl"></div>
</div>
<!-- Grid pattern overlay -->
<div class="absolute inset-0 -z-10 bg-[linear-gradient(to_right,#8882_1px,transparent_1px),linear-gradient(to_bottom,#8882_1px,transparent_1px)] bg-[size:14px_24px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]"></div>
<div class="py-24 sm:py-32 lg:py-40">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-4xl text-center">
<!-- Badge -->
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-indigo-50 border border-indigo-100 mb-8">
<span class="relative flex h-2 w-2">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-indigo-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-2 w-2 bg-indigo-500"></span>
</span>
<span class="text-sm font-medium text-indigo-700">Custom Dashboards</span>
</div>
<h1 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl lg:text-7xl">
Visualize <span class="bg-gradient-to-r from-indigo-600 to-blue-600 bg-clip-text text-transparent">all your data</span>
</h1>
<p class="mt-6 text-xl sm:text-2xl leading-8 text-gray-600 max-w-3xl mx-auto">
Build beautiful, real-time dashboards that bring together metrics, logs, traces, and status information in one unified view.
</p>
<!-- Feature highlights row -->
<div class="mt-8 flex flex-wrap items-center justify-center gap-x-8 gap-y-4 text-sm text-gray-600">
<div class="flex items-center gap-2">
<svg class="h-5 w-5 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Drag & drop builder
</div>
<div class="flex items-center gap-2">
<svg class="h-5 w-5 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Real-time updates
</div>
<div class="flex items-center gap-2">
<svg class="h-5 w-5 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Multiple data sources
</div>
<div class="flex items-center gap-2">
<svg class="h-5 w-5 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Shareable links
</div>
</div>
<div class="mt-10 flex items-center justify-center gap-x-6">
<a href="/accounts/register"
class="inline-flex items-center gap-2 px-6 py-3 bg-gray-900 text-white font-semibold rounded-xl hover:bg-gray-800 transition-all duration-300 shadow-lg shadow-gray-900/20 hover:shadow-xl hover:-translate-y-0.5">
Get started
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
</svg>
</a>
<a href="/enterprise/demo" class="group inline-flex items-center gap-2 text-sm font-semibold text-gray-900 hover:text-indigo-600 transition-colors">
Request Demo
<span aria-hidden="true" class="group-hover:translate-x-1 transition-transform">&rarr;</span>
</a>
</div>
</div>
<!-- Hero image -->
<div class="mt-16 flow-root sm:mt-24">
<div class="relative">
<div class="absolute -inset-4 bg-gradient-to-r from-indigo-500/20 via-blue-500/20 to-indigo-500/20 rounded-2xl blur-2xl"></div>
<div class="relative -m-2 rounded-xl bg-gray-900/5 p-2 ring-1 ring-inset ring-gray-900/10 lg:-m-4 lg:rounded-2xl lg:p-4">
<img src="/img/apm-3.png" alt="OneUptime custom dashboard builder" width="2432" height="1442"
class="rounded-md shadow-2xl ring-1 ring-gray-900/10">
</div>
</div>
</div>
</div>
</div>
</div>
<%- include('logo-roll') -%>
<!-- Features Section -->
<div class="relative bg-gradient-to-b from-white via-indigo-50/30 to-white py-24 sm:py-32 overflow-hidden">
<div class="absolute inset-0 -z-10">
<div class="absolute top-0 left-1/4 h-[400px] w-[400px] rounded-full bg-gradient-to-br from-indigo-100/40 to-blue-100/30 blur-3xl"></div>
<div class="absolute bottom-0 right-1/4 h-[400px] w-[400px] rounded-full bg-gradient-to-br from-blue-100/40 to-indigo-100/30 blur-3xl"></div>
</div>
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl text-center mb-20">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-indigo-50 border border-indigo-100 mb-6">
<svg class="h-4 w-4 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" />
</svg>
<span class="text-sm font-medium text-indigo-700">Dashboard Builder</span>
</div>
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl lg:text-5xl">
Build dashboards <span class="bg-gradient-to-r from-indigo-600 to-blue-600 bg-clip-text text-transparent">your way</span>
</h2>
<p class="mt-6 text-lg leading-8 text-gray-600">
Create custom dashboards with powerful widgets. Combine data from any source and share insights across your organization.
</p>
</div>
<!-- Feature Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Feature 1 -->
<div class="relative p-8 bg-white rounded-2xl shadow-sm ring-1 ring-gray-200 hover:shadow-lg transition-shadow">
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-indigo-50 ring-1 ring-indigo-200 mb-6">
<svg class="h-6 w-6 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 11-3 0m3 0a1.5 1.5 0 10-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-9.75 0h9.75" />
</svg>
</div>
<h3 class="text-xl font-semibold text-gray-900 mb-3">Drag & Drop Builder</h3>
<p class="text-gray-600">Easily create dashboards with our intuitive drag-and-drop interface. No coding required.</p>
</div>
<!-- Feature 2 -->
<div class="relative p-8 bg-white rounded-2xl shadow-sm ring-1 ring-gray-200 hover:shadow-lg transition-shadow">
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-indigo-50 ring-1 ring-indigo-200 mb-6">
<svg class="h-6 w-6 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" />
</svg>
</div>
<h3 class="text-xl font-semibold text-gray-900 mb-3">Rich Visualizations</h3>
<p class="text-gray-600">Choose from line charts, bar graphs, pie charts, tables, gauges, and more visualization types.</p>
</div>
<!-- Feature 3 -->
<div class="relative p-8 bg-white rounded-2xl shadow-sm ring-1 ring-gray-200 hover:shadow-lg transition-shadow">
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-indigo-50 ring-1 ring-indigo-200 mb-6">
<svg class="h-6 w-6 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<h3 class="text-xl font-semibold text-gray-900 mb-3">Real-time Updates</h3>
<p class="text-gray-600">Dashboards update in real-time as new data comes in. Always see the latest state of your systems.</p>
</div>
<!-- Feature 4 -->
<div class="relative p-8 bg-white rounded-2xl shadow-sm ring-1 ring-gray-200 hover:shadow-lg transition-shadow">
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-indigo-50 ring-1 ring-indigo-200 mb-6">
<svg class="h-6 w-6 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 002.25-2.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v2.25A2.25 2.25 0 006 10.5zm0 9.75h2.25A2.25 2.25 0 0010.5 18v-2.25a2.25 2.25 0 00-2.25-2.25H6a2.25 2.25 0 00-2.25 2.25V18A2.25 2.25 0 006 20.25zm9.75-9.75H18a2.25 2.25 0 002.25-2.25V6A2.25 2.25 0 0018 3.75h-2.25A2.25 2.25 0 0013.5 6v2.25a2.25 2.25 0 002.25 2.25z" />
</svg>
</div>
<h3 class="text-xl font-semibold text-gray-900 mb-3">Multiple Data Sources</h3>
<p class="text-gray-600">Combine metrics, logs, traces, and status data in a single dashboard. One view for everything.</p>
</div>
<!-- Feature 5 -->
<div class="relative p-8 bg-white rounded-2xl shadow-sm ring-1 ring-gray-200 hover:shadow-lg transition-shadow">
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-indigo-50 ring-1 ring-indigo-200 mb-6">
<svg class="h-6 w-6 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7.217 10.907a2.25 2.25 0 100 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186l9.566-5.314m-9.566 7.5l9.566 5.314m0 0a2.25 2.25 0 103.935 2.186 2.25 2.25 0 00-3.935-2.186zm0-12.814a2.25 2.25 0 103.933-2.185 2.25 2.25 0 00-3.933 2.185z" />
</svg>
</div>
<h3 class="text-xl font-semibold text-gray-900 mb-3">Easy Sharing</h3>
<p class="text-gray-600">Share dashboards with your team or create public links. Control access with fine-grained permissions.</p>
</div>
<!-- Feature 6 -->
<div class="relative p-8 bg-white rounded-2xl shadow-sm ring-1 ring-gray-200 hover:shadow-lg transition-shadow">
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-indigo-50 ring-1 ring-indigo-200 mb-6">
<svg class="h-6 w-6 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 18v-5.25m0 0a6.01 6.01 0 001.5-.189m-1.5.189a6.01 6.01 0 01-1.5-.189m3.75 7.478a12.06 12.06 0 01-4.5 0m3.75 2.383a14.406 14.406 0 01-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 10-7.517 0c.85.493 1.509 1.333 1.509 2.316V18" />
</svg>
</div>
<h3 class="text-xl font-semibold text-gray-900 mb-3">Templates</h3>
<p class="text-gray-600">Start from pre-built templates for common use cases. Customize them to fit your specific needs.</p>
</div>
</div>
</div>
</div>
<%- include('cta') -%>
</main>
<%- include('footer') -%>
</body>
</html>

210
Home/Views/exceptions.ejs Normal file
View file

@ -0,0 +1,210 @@
<!DOCTYPE html>
<html lang="en" id="home">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<head>
<title>OneUptime | Exception Tracking - Catch and Fix Bugs Early</title>
<meta name="description"
content="Track exceptions and errors across your applications. Get stack traces, context, and alerts to fix bugs before they impact users.">
<%- include('head', {
enableGoogleTagManager: typeof enableGoogleTagManager !== 'undefined' ? enableGoogleTagManager : false
}) -%>
</head>
<body>
<%- include('nav') -%>
<main id="main-content">
<!-- Hero Section -->
<div class="relative isolate overflow-hidden bg-gradient-to-b from-gray-50 via-white to-white">
<!-- Background decorative elements -->
<div class="absolute inset-0 -z-10 overflow-hidden">
<div class="absolute -top-40 -right-32 h-[500px] w-[500px] rounded-full bg-gradient-to-br from-orange-100/60 to-red-100/40 blur-3xl"></div>
<div class="absolute -bottom-40 -left-32 h-[500px] w-[500px] rounded-full bg-gradient-to-br from-red-100/60 to-orange-100/40 blur-3xl"></div>
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-[600px] w-[600px] rounded-full bg-gradient-to-br from-orange-50/40 to-red-50/30 blur-3xl"></div>
</div>
<!-- Grid pattern overlay -->
<div class="absolute inset-0 -z-10 bg-[linear-gradient(to_right,#8882_1px,transparent_1px),linear-gradient(to_bottom,#8882_1px,transparent_1px)] bg-[size:14px_24px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]"></div>
<div class="py-24 sm:py-32 lg:py-40">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-4xl text-center">
<!-- Badge -->
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-orange-50 border border-orange-100 mb-8">
<span class="relative flex h-2 w-2">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-orange-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-2 w-2 bg-orange-500"></span>
</span>
<span class="text-sm font-medium text-orange-700">Error Tracking</span>
</div>
<h1 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl lg:text-7xl">
Catch and fix <span class="bg-gradient-to-r from-orange-600 to-red-600 bg-clip-text text-transparent">bugs early</span>
</h1>
<p class="mt-6 text-xl sm:text-2xl leading-8 text-gray-600 max-w-3xl mx-auto">
Track exceptions across your entire stack. Get detailed stack traces, context, and intelligent grouping to fix issues faster.
</p>
<!-- Feature highlights row -->
<div class="mt-8 flex flex-wrap items-center justify-center gap-x-8 gap-y-4 text-sm text-gray-600">
<div class="flex items-center gap-2">
<svg class="h-5 w-5 text-orange-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Stack traces
</div>
<div class="flex items-center gap-2">
<svg class="h-5 w-5 text-orange-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Smart grouping
</div>
<div class="flex items-center gap-2">
<svg class="h-5 w-5 text-orange-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Release tracking
</div>
<div class="flex items-center gap-2">
<svg class="h-5 w-5 text-orange-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Real-time alerts
</div>
</div>
<div class="mt-10 flex items-center justify-center gap-x-6">
<a href="/accounts/register"
class="inline-flex items-center gap-2 px-6 py-3 bg-gray-900 text-white font-semibold rounded-xl hover:bg-gray-800 transition-all duration-300 shadow-lg shadow-gray-900/20 hover:shadow-xl hover:-translate-y-0.5">
Get started
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
</svg>
</a>
<a href="/enterprise/demo" class="group inline-flex items-center gap-2 text-sm font-semibold text-gray-900 hover:text-orange-600 transition-colors">
Request Demo
<span aria-hidden="true" class="group-hover:translate-x-1 transition-transform">&rarr;</span>
</a>
</div>
</div>
<!-- Hero image -->
<div class="mt-16 flow-root sm:mt-24">
<div class="relative">
<div class="absolute -inset-4 bg-gradient-to-r from-orange-500/20 via-red-500/20 to-orange-500/20 rounded-2xl blur-2xl"></div>
<div class="relative -m-2 rounded-xl bg-gray-900/5 p-2 ring-1 ring-inset ring-gray-900/10 lg:-m-4 lg:rounded-2xl lg:p-4">
<img src="/img/apm-3.png" alt="OneUptime Exception tracking dashboard" width="2432" height="1442"
class="rounded-md shadow-2xl ring-1 ring-gray-900/10">
</div>
</div>
</div>
</div>
</div>
</div>
<%- include('logo-roll') -%>
<!-- Features Section -->
<div class="relative bg-gradient-to-b from-white via-orange-50/30 to-white py-24 sm:py-32 overflow-hidden">
<div class="absolute inset-0 -z-10">
<div class="absolute top-0 left-1/4 h-[400px] w-[400px] rounded-full bg-gradient-to-br from-orange-100/40 to-red-100/30 blur-3xl"></div>
<div class="absolute bottom-0 right-1/4 h-[400px] w-[400px] rounded-full bg-gradient-to-br from-red-100/40 to-orange-100/30 blur-3xl"></div>
</div>
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl text-center mb-20">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-orange-50 border border-orange-100 mb-6">
<svg class="h-4 w-4 text-orange-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span class="text-sm font-medium text-orange-700">Exception Tracking</span>
</div>
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl lg:text-5xl">
Never miss a <span class="bg-gradient-to-r from-orange-600 to-red-600 bg-clip-text text-transparent">critical error</span>
</h2>
<p class="mt-6 text-lg leading-8 text-gray-600">
Get notified the moment errors occur. Understand the impact, identify the root cause, and deploy fixes with confidence.
</p>
</div>
<!-- Feature Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Feature 1 -->
<div class="relative p-8 bg-white rounded-2xl shadow-sm ring-1 ring-gray-200 hover:shadow-lg transition-shadow">
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-orange-50 ring-1 ring-orange-200 mb-6">
<svg class="h-6 w-6 text-orange-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z" />
</svg>
</div>
<h3 class="text-xl font-semibold text-gray-900 mb-3">Full Stack Traces</h3>
<p class="text-gray-600">Get complete stack traces with source code context. See exactly where errors occur and why.</p>
</div>
<!-- Feature 2 -->
<div class="relative p-8 bg-white rounded-2xl shadow-sm ring-1 ring-gray-200 hover:shadow-lg transition-shadow">
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-orange-50 ring-1 ring-orange-200 mb-6">
<svg class="h-6 w-6 text-orange-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.25 7.125C2.25 6.504 2.754 6 3.375 6h6c.621 0 1.125.504 1.125 1.125v3.75c0 .621-.504 1.125-1.125 1.125h-6a1.125 1.125 0 01-1.125-1.125v-3.75zM14.25 8.625c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v8.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 01-1.125-1.125v-8.25zM3.75 16.125c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 01-1.125-1.125v-2.25z" />
</svg>
</div>
<h3 class="text-xl font-semibold text-gray-900 mb-3">Intelligent Grouping</h3>
<p class="text-gray-600">Similar errors are automatically grouped together. Focus on unique issues, not duplicates.</p>
</div>
<!-- Feature 3 -->
<div class="relative p-8 bg-white rounded-2xl shadow-sm ring-1 ring-gray-200 hover:shadow-lg transition-shadow">
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-orange-50 ring-1 ring-orange-200 mb-6">
<svg class="h-6 w-6 text-orange-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 6h.008v.008H6V6z" />
</svg>
</div>
<h3 class="text-xl font-semibold text-gray-900 mb-3">Release Tracking</h3>
<p class="text-gray-600">Track which releases introduced new errors. Quickly identify and roll back problematic deployments.</p>
</div>
<!-- Feature 4 -->
<div class="relative p-8 bg-white rounded-2xl shadow-sm ring-1 ring-gray-200 hover:shadow-lg transition-shadow">
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-orange-50 ring-1 ring-orange-200 mb-6">
<svg class="h-6 w-6 text-orange-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
</svg>
</div>
<h3 class="text-xl font-semibold text-gray-900 mb-3">Real-time Alerts</h3>
<p class="text-gray-600">Get notified instantly when new errors occur or error rates spike. Never be caught off guard.</p>
</div>
<!-- Feature 5 -->
<div class="relative p-8 bg-white rounded-2xl shadow-sm ring-1 ring-gray-200 hover:shadow-lg transition-shadow">
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-orange-50 ring-1 ring-orange-200 mb-6">
<svg class="h-6 w-6 text-orange-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
</svg>
</div>
<h3 class="text-xl font-semibold text-gray-900 mb-3">User Context</h3>
<p class="text-gray-600">See which users are affected by errors. Understand impact and prioritize fixes accordingly.</p>
</div>
<!-- Feature 6 -->
<div class="relative p-8 bg-white rounded-2xl shadow-sm ring-1 ring-gray-200 hover:shadow-lg transition-shadow">
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-orange-50 ring-1 ring-orange-200 mb-6">
<svg class="h-6 w-6 text-orange-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456z" />
</svg>
</div>
<h3 class="text-xl font-semibold text-gray-900 mb-3">AI-Powered Insights</h3>
<p class="text-gray-600">Get AI-generated root cause analysis and fix suggestions. Resolve issues faster with intelligent assistance.</p>
</div>
</div>
</div>
</div>
<%- include('cta') -%>
</main>
<%- include('footer') -%>
</body>
</html>

209
Home/Views/metrics.ejs Normal file
View file

@ -0,0 +1,209 @@
<!DOCTYPE html>
<html lang="en" id="home">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<head>
<title>OneUptime | Metrics - Performance Insights & Real-time Monitoring</title>
<meta name="description"
content="Monitor application and infrastructure metrics in real-time. Track performance, identify bottlenecks, and optimize your systems with OneUptime Metrics.">
<%- include('head', {
enableGoogleTagManager: typeof enableGoogleTagManager !== 'undefined' ? enableGoogleTagManager : false
}) -%>
</head>
<body>
<%- include('nav') -%>
<main id="main-content">
<!-- Hero Section -->
<div class="relative isolate overflow-hidden bg-gradient-to-b from-gray-50 via-white to-white">
<!-- Background decorative elements -->
<div class="absolute inset-0 -z-10 overflow-hidden">
<div class="absolute -top-40 -right-32 h-[500px] w-[500px] rounded-full bg-gradient-to-br from-purple-100/60 to-violet-100/40 blur-3xl"></div>
<div class="absolute -bottom-40 -left-32 h-[500px] w-[500px] rounded-full bg-gradient-to-br from-violet-100/60 to-purple-100/40 blur-3xl"></div>
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-[600px] w-[600px] rounded-full bg-gradient-to-br from-purple-50/40 to-violet-50/30 blur-3xl"></div>
</div>
<!-- Grid pattern overlay -->
<div class="absolute inset-0 -z-10 bg-[linear-gradient(to_right,#8882_1px,transparent_1px),linear-gradient(to_bottom,#8882_1px,transparent_1px)] bg-[size:14px_24px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]"></div>
<div class="py-24 sm:py-32 lg:py-40">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-4xl text-center">
<!-- Badge -->
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-purple-50 border border-purple-100 mb-8">
<span class="relative flex h-2 w-2">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-purple-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-2 w-2 bg-purple-500"></span>
</span>
<span class="text-sm font-medium text-purple-700">OpenTelemetry Native</span>
</div>
<h1 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl lg:text-7xl">
Real-time <span class="bg-gradient-to-r from-purple-600 to-violet-600 bg-clip-text text-transparent">performance insights</span>
</h1>
<p class="mt-6 text-xl sm:text-2xl leading-8 text-gray-600 max-w-3xl mx-auto">
Collect, visualize, and analyze metrics from any source. Monitor application performance, infrastructure health, and custom business metrics.
</p>
<!-- Feature highlights row -->
<div class="mt-8 flex flex-wrap items-center justify-center gap-x-8 gap-y-4 text-sm text-gray-600">
<div class="flex items-center gap-2">
<svg class="h-5 w-5 text-purple-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Custom dashboards
</div>
<div class="flex items-center gap-2">
<svg class="h-5 w-5 text-purple-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Anomaly detection
</div>
<div class="flex items-center gap-2">
<svg class="h-5 w-5 text-purple-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Smart alerting
</div>
<div class="flex items-center gap-2">
<svg class="h-5 w-5 text-purple-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
PromQL compatible
</div>
</div>
<div class="mt-10 flex items-center justify-center gap-x-6">
<a href="/accounts/register"
class="inline-flex items-center gap-2 px-6 py-3 bg-gray-900 text-white font-semibold rounded-xl hover:bg-gray-800 transition-all duration-300 shadow-lg shadow-gray-900/20 hover:shadow-xl hover:-translate-y-0.5">
Get started
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
</svg>
</a>
<a href="/enterprise/demo" class="group inline-flex items-center gap-2 text-sm font-semibold text-gray-900 hover:text-purple-600 transition-colors">
Request Demo
<span aria-hidden="true" class="group-hover:translate-x-1 transition-transform">&rarr;</span>
</a>
</div>
</div>
<!-- Hero image -->
<div class="mt-16 flow-root sm:mt-24">
<div class="relative">
<div class="absolute -inset-4 bg-gradient-to-r from-purple-500/20 via-violet-500/20 to-purple-500/20 rounded-2xl blur-2xl"></div>
<div class="relative -m-2 rounded-xl bg-gray-900/5 p-2 ring-1 ring-inset ring-gray-900/10 lg:-m-4 lg:rounded-2xl lg:p-4">
<img src="/img/apm-3.png" alt="OneUptime Metrics dashboard displaying real-time performance data" width="2432" height="1442"
class="rounded-md shadow-2xl ring-1 ring-gray-900/10">
</div>
</div>
</div>
</div>
</div>
</div>
<%- include('logo-roll') -%>
<!-- Features Section -->
<div class="relative bg-gradient-to-b from-white via-purple-50/30 to-white py-24 sm:py-32 overflow-hidden">
<div class="absolute inset-0 -z-10">
<div class="absolute top-0 left-1/4 h-[400px] w-[400px] rounded-full bg-gradient-to-br from-purple-100/40 to-violet-100/30 blur-3xl"></div>
<div class="absolute bottom-0 right-1/4 h-[400px] w-[400px] rounded-full bg-gradient-to-br from-violet-100/40 to-purple-100/30 blur-3xl"></div>
</div>
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl text-center mb-20">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-purple-50 border border-purple-100 mb-6">
<svg class="h-4 w-4 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
</svg>
<span class="text-sm font-medium text-purple-700">Powerful Metrics</span>
</div>
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl lg:text-5xl">
Everything you need for <span class="bg-gradient-to-r from-purple-600 to-violet-600 bg-clip-text text-transparent">metrics monitoring</span>
</h2>
<p class="mt-6 text-lg leading-8 text-gray-600">
From infrastructure to application metrics, OneUptime provides comprehensive visibility into your entire stack.
</p>
</div>
<!-- Feature Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Feature 1 -->
<div class="relative p-8 bg-white rounded-2xl shadow-sm ring-1 ring-gray-200 hover:shadow-lg transition-shadow">
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-purple-50 ring-1 ring-purple-200 mb-6">
<svg class="h-6 w-6 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" />
</svg>
</div>
<h3 class="text-xl font-semibold text-gray-900 mb-3">Real-time Visualization</h3>
<p class="text-gray-600">Live charts and graphs that update in real-time, giving you instant visibility into your system's performance.</p>
</div>
<!-- Feature 2 -->
<div class="relative p-8 bg-white rounded-2xl shadow-sm ring-1 ring-gray-200 hover:shadow-lg transition-shadow">
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-purple-50 ring-1 ring-purple-200 mb-6">
<svg class="h-6 w-6 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
</svg>
</div>
<h3 class="text-xl font-semibold text-gray-900 mb-3">Intelligent Alerting</h3>
<p class="text-gray-600">Set up smart alerts based on thresholds, anomalies, or custom conditions. Get notified before issues impact users.</p>
</div>
<!-- Feature 3 -->
<div class="relative p-8 bg-white rounded-2xl shadow-sm ring-1 ring-gray-200 hover:shadow-lg transition-shadow">
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-purple-50 ring-1 ring-purple-200 mb-6">
<svg class="h-6 w-6 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125" />
</svg>
</div>
<h3 class="text-xl font-semibold text-gray-900 mb-3">Custom Retention</h3>
<p class="text-gray-600">Configure data retention per metric type. Keep critical data longer while optimizing storage costs.</p>
</div>
<!-- Feature 4 -->
<div class="relative p-8 bg-white rounded-2xl shadow-sm ring-1 ring-gray-200 hover:shadow-lg transition-shadow">
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-purple-50 ring-1 ring-purple-200 mb-6">
<svg class="h-6 w-6 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5" />
</svg>
</div>
<h3 class="text-xl font-semibold text-gray-900 mb-3">Any Data Source</h3>
<p class="text-gray-600">Ingest metrics from OpenTelemetry, Prometheus, StatsD, and custom sources. One platform for all your metrics.</p>
</div>
<!-- Feature 5 -->
<div class="relative p-8 bg-white rounded-2xl shadow-sm ring-1 ring-gray-200 hover:shadow-lg transition-shadow">
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-purple-50 ring-1 ring-purple-200 mb-6">
<svg class="h-6 w-6 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5m.75-9l3-3 2.148 2.148A12.061 12.061 0 0116.5 7.605" />
</svg>
</div>
<h3 class="text-xl font-semibold text-gray-900 mb-3">Trend Analysis</h3>
<p class="text-gray-600">Identify patterns and trends in your metrics over time. Make data-driven decisions with historical insights.</p>
</div>
<!-- Feature 6 -->
<div class="relative p-8 bg-white rounded-2xl shadow-sm ring-1 ring-gray-200 hover:shadow-lg transition-shadow">
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-purple-50 ring-1 ring-purple-200 mb-6">
<svg class="h-6 w-6 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 002.25-2.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v2.25A2.25 2.25 0 006 10.5zm0 9.75h2.25A2.25 2.25 0 0010.5 18v-2.25a2.25 2.25 0 00-2.25-2.25H6a2.25 2.25 0 00-2.25 2.25V18A2.25 2.25 0 006 20.25zm9.75-9.75H18a2.25 2.25 0 002.25-2.25V6A2.25 2.25 0 0018 3.75h-2.25A2.25 2.25 0 0013.5 6v2.25a2.25 2.25 0 002.25 2.25z" />
</svg>
</div>
<h3 class="text-xl font-semibold text-gray-900 mb-3">Custom Dashboards</h3>
<p class="text-gray-600">Build custom dashboards with drag-and-drop widgets. Create views tailored to your team's needs.</p>
</div>
</div>
</div>
</div>
<%- include('cta') -%>
</main>
<%- include('footer') -%>
</body>
</html>

209
Home/Views/traces.ejs Normal file
View file

@ -0,0 +1,209 @@
<!DOCTYPE html>
<html lang="en" id="home">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<head>
<title>OneUptime | Distributed Tracing - End-to-End Request Visibility</title>
<meta name="description"
content="Trace requests across microservices with distributed tracing. Identify bottlenecks, debug issues, and optimize performance with OneUptime Traces.">
<%- include('head', {
enableGoogleTagManager: typeof enableGoogleTagManager !== 'undefined' ? enableGoogleTagManager : false
}) -%>
</head>
<body>
<%- include('nav') -%>
<main id="main-content">
<!-- Hero Section -->
<div class="relative isolate overflow-hidden bg-gradient-to-b from-gray-50 via-white to-white">
<!-- Background decorative elements -->
<div class="absolute inset-0 -z-10 overflow-hidden">
<div class="absolute -top-40 -right-32 h-[500px] w-[500px] rounded-full bg-gradient-to-br from-yellow-100/60 to-amber-100/40 blur-3xl"></div>
<div class="absolute -bottom-40 -left-32 h-[500px] w-[500px] rounded-full bg-gradient-to-br from-amber-100/60 to-yellow-100/40 blur-3xl"></div>
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-[600px] w-[600px] rounded-full bg-gradient-to-br from-yellow-50/40 to-amber-50/30 blur-3xl"></div>
</div>
<!-- Grid pattern overlay -->
<div class="absolute inset-0 -z-10 bg-[linear-gradient(to_right,#8882_1px,transparent_1px),linear-gradient(to_bottom,#8882_1px,transparent_1px)] bg-[size:14px_24px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]"></div>
<div class="py-24 sm:py-32 lg:py-40">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-4xl text-center">
<!-- Badge -->
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-yellow-50 border border-yellow-100 mb-8">
<span class="relative flex h-2 w-2">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-yellow-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-2 w-2 bg-yellow-500"></span>
</span>
<span class="text-sm font-medium text-yellow-700">OpenTelemetry Native</span>
</div>
<h1 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl lg:text-7xl">
End-to-end <span class="bg-gradient-to-r from-yellow-600 to-amber-600 bg-clip-text text-transparent">distributed tracing</span>
</h1>
<p class="mt-6 text-xl sm:text-2xl leading-8 text-gray-600 max-w-3xl mx-auto">
Follow requests across services, identify bottlenecks, and debug issues faster with comprehensive distributed tracing.
</p>
<!-- Feature highlights row -->
<div class="mt-8 flex flex-wrap items-center justify-center gap-x-8 gap-y-4 text-sm text-gray-600">
<div class="flex items-center gap-2">
<svg class="h-5 w-5 text-yellow-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Span visualization
</div>
<div class="flex items-center gap-2">
<svg class="h-5 w-5 text-yellow-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Service maps
</div>
<div class="flex items-center gap-2">
<svg class="h-5 w-5 text-yellow-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Latency analysis
</div>
<div class="flex items-center gap-2">
<svg class="h-5 w-5 text-yellow-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Error correlation
</div>
</div>
<div class="mt-10 flex items-center justify-center gap-x-6">
<a href="/accounts/register"
class="inline-flex items-center gap-2 px-6 py-3 bg-gray-900 text-white font-semibold rounded-xl hover:bg-gray-800 transition-all duration-300 shadow-lg shadow-gray-900/20 hover:shadow-xl hover:-translate-y-0.5">
Get started
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
</svg>
</a>
<a href="/enterprise/demo" class="group inline-flex items-center gap-2 text-sm font-semibold text-gray-900 hover:text-yellow-600 transition-colors">
Request Demo
<span aria-hidden="true" class="group-hover:translate-x-1 transition-transform">&rarr;</span>
</a>
</div>
</div>
<!-- Hero image -->
<div class="mt-16 flow-root sm:mt-24">
<div class="relative">
<div class="absolute -inset-4 bg-gradient-to-r from-yellow-500/20 via-amber-500/20 to-yellow-500/20 rounded-2xl blur-2xl"></div>
<div class="relative -m-2 rounded-xl bg-gray-900/5 p-2 ring-1 ring-inset ring-gray-900/10 lg:-m-4 lg:rounded-2xl lg:p-4">
<img src="/img/apm-3.png" alt="OneUptime Traces showing distributed request flow" width="2432" height="1442"
class="rounded-md shadow-2xl ring-1 ring-gray-900/10">
</div>
</div>
</div>
</div>
</div>
</div>
<%- include('logo-roll') -%>
<!-- Features Section -->
<div class="relative bg-gradient-to-b from-white via-yellow-50/30 to-white py-24 sm:py-32 overflow-hidden">
<div class="absolute inset-0 -z-10">
<div class="absolute top-0 left-1/4 h-[400px] w-[400px] rounded-full bg-gradient-to-br from-yellow-100/40 to-amber-100/30 blur-3xl"></div>
<div class="absolute bottom-0 right-1/4 h-[400px] w-[400px] rounded-full bg-gradient-to-br from-amber-100/40 to-yellow-100/30 blur-3xl"></div>
</div>
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl text-center mb-20">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-yellow-50 border border-yellow-100 mb-6">
<svg class="h-4 w-4 text-yellow-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
<span class="text-sm font-medium text-yellow-700">Distributed Tracing</span>
</div>
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl lg:text-5xl">
See the complete <span class="bg-gradient-to-r from-yellow-600 to-amber-600 bg-clip-text text-transparent">request journey</span>
</h2>
<p class="mt-6 text-lg leading-8 text-gray-600">
Understand how requests flow through your distributed system. Identify slow services, failed calls, and optimization opportunities.
</p>
</div>
<!-- Feature Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Feature 1 -->
<div class="relative p-8 bg-white rounded-2xl shadow-sm ring-1 ring-gray-200 hover:shadow-lg transition-shadow">
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-yellow-50 ring-1 ring-yellow-200 mb-6">
<svg class="h-6 w-6 text-yellow-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z" />
</svg>
</div>
<h3 class="text-xl font-semibold text-gray-900 mb-3">Service Maps</h3>
<p class="text-gray-600">Visualize dependencies between services. Understand your architecture and identify critical paths at a glance.</p>
</div>
<!-- Feature 2 -->
<div class="relative p-8 bg-white rounded-2xl shadow-sm ring-1 ring-gray-200 hover:shadow-lg transition-shadow">
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-yellow-50 ring-1 ring-yellow-200 mb-6">
<svg class="h-6 w-6 text-yellow-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<h3 class="text-xl font-semibold text-gray-900 mb-3">Latency Breakdown</h3>
<p class="text-gray-600">See exactly where time is spent in each request. Drill down into spans to find performance bottlenecks.</p>
</div>
<!-- Feature 3 -->
<div class="relative p-8 bg-white rounded-2xl shadow-sm ring-1 ring-gray-200 hover:shadow-lg transition-shadow">
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-yellow-50 ring-1 ring-yellow-200 mb-6">
<svg class="h-6 w-6 text-yellow-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
</svg>
</div>
<h3 class="text-xl font-semibold text-gray-900 mb-3">Error Tracking</h3>
<p class="text-gray-600">Instantly identify which service caused an error. Get full context with stack traces and span attributes.</p>
</div>
<!-- Feature 4 -->
<div class="relative p-8 bg-white rounded-2xl shadow-sm ring-1 ring-gray-200 hover:shadow-lg transition-shadow">
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-yellow-50 ring-1 ring-yellow-200 mb-6">
<svg class="h-6 w-6 text-yellow-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
</svg>
</div>
<h3 class="text-xl font-semibold text-gray-900 mb-3">Powerful Search</h3>
<p class="text-gray-600">Find traces by service, operation, duration, status, or any custom attribute. Filter and analyze at scale.</p>
</div>
<!-- Feature 5 -->
<div class="relative p-8 bg-white rounded-2xl shadow-sm ring-1 ring-gray-200 hover:shadow-lg transition-shadow">
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-yellow-50 ring-1 ring-yellow-200 mb-6">
<svg class="h-6 w-6 text-yellow-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5" />
</svg>
</div>
<h3 class="text-xl font-semibold text-gray-900 mb-3">Cross-Service Context</h3>
<p class="text-gray-600">Automatically propagate trace context across services. See the full picture without manual correlation.</p>
</div>
<!-- Feature 6 -->
<div class="relative p-8 bg-white rounded-2xl shadow-sm ring-1 ring-gray-200 hover:shadow-lg transition-shadow">
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-yellow-50 ring-1 ring-yellow-200 mb-6">
<svg class="h-6 w-6 text-yellow-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" />
</svg>
</div>
<h3 class="text-xl font-semibold text-gray-900 mb-3">Logs & Metrics Correlation</h3>
<p class="text-gray-600">Link traces with related logs and metrics. Jump from a slow trace to the exact log lines that explain why.</p>
</div>
</div>
</div>
</div>
<%- include('cta') -%>
</main>
<%- include('footer') -%>
</body>
</html>

8
Internal/Docs/ProductBranding.md
View file

@ -86,7 +86,7 @@ This document details the colors, icons, and product information used in the hom
- **Color:** Purple
- **Tailwind Classes:** `bg-purple-50`, `ring-purple-200`, `text-purple-600`
- **Glow Class:** `hero-glow-purple`
- **Link:** `/product/apm`
- **Link:** `/product/metrics`
- **Icon:** Line chart / heartbeat
```html
<svg class="h-5 w-5 text-purple-600" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
@ -99,7 +99,7 @@ This document details the colors, icons, and product information used in the hom
- **Color:** Yellow
- **Tailwind Classes:** `bg-yellow-50`, `ring-yellow-200`, `text-yellow-600`
- **Glow Class:** `hero-glow-yellow`
- **Link:** `/product/apm`
- **Link:** `/product/traces`
- **Icon:** Waterfall / span diagram
```html
<svg class="h-5 w-5 text-yellow-600" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
@ -114,7 +114,7 @@ This document details the colors, icons, and product information used in the hom
- **Color:** Orange
- **Tailwind Classes:** `bg-orange-50`, `ring-orange-200`, `text-orange-600`
- **Glow Class:** `hero-glow-rose` (uses rose glow effect)
- **Link:** `/product/apm`
- **Link:** `/product/exceptions`
- **Icon:** Bug
```html
<svg class="h-5 w-5 text-orange-600" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
@ -142,7 +142,7 @@ This document details the colors, icons, and product information used in the hom
- **Color:** Indigo
- **Tailwind Classes:** `bg-indigo-50`, `ring-indigo-200`, `text-indigo-600`
- **Glow Class:** `hero-glow-indigo`
- **Link:** `/product/coming-soon`
- **Link:** `/product/dashboards`
- **Icon:** Pie chart
```html
<svg class="h-5 w-5 text-indigo-600" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">