github/oneuptime
1
1
Fork 0
mirror of https://github.com/OneUptime/oneuptime.git synced 2026-04-06 00:32:12 +02:00
Code Issues 193 Packages Projects Releases Wiki Activity
Files
781455abb52fc9122bcf0f34bafdd61e0046cdd5
oneuptime/Home/Views/status-page.ejs
Nawaz Dhandala 781455abb5 Enhance status, traces, and workflows pages with new notification sections and interactive grid effects 
- Added a "Subscriber Notifications" section to the status page, detailing real-time incident updates, maintenance announcements, and resolution confirmations.
- Introduced a Slack demo with animated message notifications for the status page.
- Implemented a grid glow effect that follows the cursor on the status page.
- Added a "Trace Alerts" section to the traces page, highlighting alerts for slow requests and error rates, along with a Slack demo for trace notifications.
- Enhanced the workflows page with a "Workflow Notifications" section, providing details on execution status, error logs, and custom triggers, along with a Slack-like notification demo.
- Implemented grid glow effects for traces and workflows pages, enhancing user interaction.
- Added CSS animations for Slack message notifications across all pages.
2026-01-06 21:15:16 +00:00

850 lines
58 KiB
Plaintext
Raw Blame History

<!DOCTYPE html>
<html lang="en" id="home">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<head>
<title>OneUptime | Unlimited Public or Private Status Page. </title>
<meta name="description"
content="OneUptime monitors websites, APIs, and servers and alerts your team if something goes wrong. It also keeps your customers updated about any downtime.">
<%- include('head', {
enableGoogleTagManager: typeof enableGoogleTagManager !== 'undefined' ? enableGoogleTagManager : false
}) -%>
</head>
<body>
<%- include('nav') -%>
<main id="main-content">
<div class="">
<!-- Hero Section -->
<div class="relative isolate overflow-hidden bg-white" id="status-page-hero-section">
<!-- Subtle grid pattern background -->
<div class="absolute inset-0 -z-10 h-full w-full bg-white bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_110%)]"></div>
<!-- Grid glow effect that follows cursor - emerald color -->
<div id="status-page-grid-glow" class="absolute inset-0 -z-9 pointer-events-none" style="opacity: 0; transition: opacity 0.3s ease-out; background: linear-gradient(to right, rgba(16, 185, 129, 0.3) 1px, transparent 1px), linear-gradient(to bottom, rgba(16, 185, 129, 0.3) 1px, transparent 1px); background-size: 4rem 4rem; -webkit-mask-image: radial-gradient(circle 250px at var(--mouse-x, 50%) var(--mouse-y, 50%), black 0%, transparent 100%); mask-image: radial-gradient(circle 250px at var(--mouse-x, 50%) var(--mouse-y, 50%), black 0%, transparent 100%);"></div>
<div class="py-20 sm:py-28 lg:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-3xl text-center">
<!-- Minimal badge -->
<p class="text-sm font-medium text-emerald-600 mb-4">Trusted by 1000+ companies worldwide</p>
<h1 class="text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl lg:text-6xl">
Communicate incidents beautifully
</h1>
<p class="mt-6 text-lg leading-8 text-gray-600 max-w-2xl mx-auto">
Build stunning status pages that keep your customers informed. Showcase your reliability, communicate transparently, and turn incidents into trust-building moments.
</p>
<div class="mt-10 flex items-center justify-center gap-x-6">
<a href="/accounts/register"
class="rounded-lg bg-gray-900 px-5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-800 transition-colors">
Get started
</a>
<a href="/enterprise/demo" class="text-sm font-semibold text-gray-900 hover:text-gray-600 transition-colors">
Request demo <span aria-hidden="true">&rarr;</span>
</a>
</div>
<!-- Subtle feature list -->
<div class="mt-12 flex flex-wrap items-center justify-center gap-x-8 gap-y-3 text-sm text-gray-500">
<span>Unlimited status pages</span>
<span class="hidden sm:inline text-gray-300">|</span>
<span>Custom branding</span>
<span class="hidden sm:inline text-gray-300">|</span>
<span>Free SSL certificates</span>
<span class="hidden sm:inline text-gray-300">|</span>
<span>99.99% uptime SLA</span>
</div>
</div>
<!-- Clean hero image -->
<div class="mt-16 sm:mt-20">
<div class="relative mx-auto max-w-5xl">
<div class="relative rounded-xl bg-gray-900/5 p-1.5 ring-1 ring-gray-900/10">
<img src="/img/status-pages.png" alt="OneUptime status page" width="2432" height="1442"
class="rounded-lg shadow-lg">
<%- include('./Partials/watch-demo.ejs', {videoId: "F6BNipy5VCk" }) -%>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Stats Section -->
<div class="bg-gray-50 py-16 sm:py-20">
<div class="mx-auto max-w-5xl px-6 lg:px-8">
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4 sm:gap-6">
<div class="text-center p-6 sm:p-8 rounded-2xl bg-white border border-gray-200/60 shadow-sm transition-all duration-300 hover:shadow-md hover:border-gray-300">
<div class="text-3xl sm:text-4xl font-semibold text-gray-900 mb-1">99.99%</div>
<div class="text-sm text-gray-500">Uptime SLA</div>
</div>
<div class="text-center p-6 sm:p-8 rounded-2xl bg-white border border-gray-200/60 shadow-sm transition-all duration-300 hover:shadow-md hover:border-gray-300">
<div class="text-3xl sm:text-4xl font-semibold text-gray-900 mb-1">∞</div>
<div class="text-sm text-gray-500">Status Pages</div>
</div>
<div class="text-center p-6 sm:p-8 rounded-2xl bg-white border border-gray-200/60 shadow-sm transition-all duration-300 hover:shadow-md hover:border-gray-300">
<div class="text-3xl sm:text-4xl font-semibold text-gray-900 mb-1">∞</div>
<div class="text-sm text-gray-500">Subscribers</div>
</div>
<div class="text-center p-6 sm:p-8 rounded-2xl bg-white border border-gray-200/60 shadow-sm transition-all duration-300 hover:shadow-md hover:border-gray-300">
<div class="text-3xl sm:text-4xl font-semibold text-gray-900 mb-1">Free</div>
<div class="text-sm text-gray-500">SSL Certificates</div>
</div>
</div>
</div>
</div>
<%- include('logo-roll') -%>
<!-- How It Works Section -->
<div class="relative bg-gray-50 py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl text-center mb-16">
<p class="text-sm font-medium text-emerald-600 uppercase tracking-wide mb-3">How It Works</p>
<h2 class="text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl">
Launch your status page in minutes
</h2>
<p class="mt-4 text-lg text-gray-600">
Get your branded status page up and running in four simple steps. No coding required.
</p>
</div>
<div class="mx-auto max-w-5xl">
<!-- Connecting line for desktop -->
<div class="hidden lg:block relative">
<div class="absolute top-8 left-[calc(12.5%+24px)] right-[calc(12.5%+24px)] h-px bg-emerald-200"></div>
</div>
<div class="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-4">
<!-- Step 1 -->
<div class="text-center">
<div class="relative inline-flex items-center justify-center h-16 w-16 rounded-full bg-emerald-600 text-white mb-6 shadow-sm">
<svg class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
</svg>
<span class="absolute -bottom-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full bg-white text-xs font-semibold text-emerald-600 ring-2 ring-emerald-600">1</span>
</div>
<h3 class="text-base font-semibold text-gray-900 mb-2">Create Page</h3>
<p class="text-sm text-gray-600 leading-relaxed">Set up your branded status page with custom domain and styling.</p>
</div>
<!-- Step 2 -->
<div class="text-center">
<div class="relative inline-flex items-center justify-center h-16 w-16 rounded-full bg-emerald-600 text-white mb-6 shadow-sm">
<svg class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
</svg>
<span class="absolute -bottom-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full bg-white text-xs font-semibold text-emerald-600 ring-2 ring-emerald-600">2</span>
</div>
<h3 class="text-base font-semibold text-gray-900 mb-2">Add Resources</h3>
<p class="text-sm text-gray-600 leading-relaxed">Add services, APIs, and components you want to display.</p>
</div>
<!-- Step 3 -->
<div class="text-center">
<div class="relative inline-flex items-center justify-center h-16 w-16 rounded-full bg-emerald-600 text-white mb-6 shadow-sm">
<svg class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
</svg>
<span class="absolute -bottom-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full bg-white text-xs font-semibold text-emerald-600 ring-2 ring-emerald-600">3</span>
</div>
<h3 class="text-base font-semibold text-gray-900 mb-2">Connect Monitors</h3>
<p class="text-sm text-gray-600 leading-relaxed">Link monitors for automatic status updates in real-time.</p>
</div>
<!-- Step 4 -->
<div class="text-center">
<div class="relative inline-flex items-center justify-center h-16 w-16 rounded-full bg-emerald-600 text-white mb-6 shadow-sm">
<svg class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span class="absolute -bottom-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full bg-white text-xs font-semibold text-emerald-600 ring-2 ring-emerald-600">4</span>
</div>
<h3 class="text-base font-semibold text-gray-900 mb-2">Go Live</h3>
<p class="text-sm text-gray-600 leading-relaxed">Publish and start building trust with your customers.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Why OneUptime Section -->
<div class="relative overflow-hidden bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<!-- Section Header -->
<div class="mx-auto max-w-3xl text-center mb-20">
<div class="inline-flex items-center gap-2 rounded-full bg-emerald-50 px-4 py-2 text-sm font-medium text-emerald-700 ring-1 ring-inset ring-emerald-600/20 mb-6">
<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 10V3L4 14h7v7l9-11h-7z" />
</svg>
Why OneUptime
</div>
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl lg:text-5xl">
The status page platform
<span class="block mt-2 text-emerald-600">built for modern teams</span>
</h2>
<p class="mt-6 text-lg leading-8 text-gray-600">
Everything you need to keep your customers informed. Unlimited pages, unlimited subscribers, complete customization, and powerful incident communication tools.
</p>
</div>
<!-- Feature 1: Unlimited Status Pages -->
<div class="relative mb-24 lg:mb-32">
<div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
<div class="relative z-10">
<div class="inline-flex items-center justify-center h-14 w-14 rounded-2xl bg-emerald-50 ring-1 ring-emerald-200 mb-6">
<svg class="h-7 w-7 text-emerald-600" 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>
</div>
<h3 class="text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl">
Unlimited Public & Private Status Pages
</h3>
<p class="mt-4 text-lg text-gray-600 leading-relaxed">
Create as many status pages as you need - one for each product, team, or customer segment. Show exactly the right information to the right audience with public or private pages.
</p>
<!-- Feature bullets -->
<ul class="mt-8 space-y-4">
<li class="flex items-start gap-3">
<div class="flex-shrink-0 h-6 w-6 rounded-full bg-emerald-100 flex items-center justify-center mt-0.5">
<svg class="h-4 w-4 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</div>
<span class="text-gray-600">No limits on the number of status pages</span>
</li>
<li class="flex items-start gap-3">
<div class="flex-shrink-0 h-6 w-6 rounded-full bg-emerald-100 flex items-center justify-center mt-0.5">
<svg class="h-4 w-4 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</div>
<span class="text-gray-600">Password-protected private pages for internal teams</span>
</li>
<li class="flex items-start gap-3">
<div class="flex-shrink-0 h-6 w-6 rounded-full bg-emerald-100 flex items-center justify-center mt-0.5">
<svg class="h-4 w-4 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</div>
<span class="text-gray-600">Group resources by service, region, or team</span>
</li>
</ul>
<div class="mt-8">
<a href="/accounts/register" class="group inline-flex items-center gap-2 text-base font-semibold text-emerald-600 hover:text-emerald-700 transition-colors">
Get started free
<svg class="h-5 w-5 transition-transform group-hover:trangray-x-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
</svg>
</a>
</div>
</div>
<!-- Image -->
<div class="mt-12 lg:mt-0 relative">
<div class="relative rounded-2xl bg-gray-100 p-2 shadow-lg ring-1 ring-gray-200/60">
<img class="w-full rounded-xl" src="/img/status-pages.png" alt="Status Pages Dashboard">
</div>
</div>
</div>
</div>
<!-- Feature 2: Unlimited Subscribers -->
<div class="relative mb-24 lg:mb-32">
<div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
<!-- Image (left on desktop) -->
<div class="order-2 lg:order-1 mt-12 lg:mt-0 relative">
<div class="relative rounded-2xl bg-gray-100 p-2 shadow-lg ring-1 ring-gray-200/60">
<img class="w-full rounded-xl" src="/img/subscribers.png" alt="Subscriber Management">
</div>
</div>
<div class="order-1 lg:order-2 relative z-10">
<div class="inline-flex items-center justify-center h-14 w-14 rounded-2xl bg-blue-50 ring-1 ring-blue-200 mb-6">
<svg class="h-7 w-7 text-blue-600" 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="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" />
</svg>
</div>
<h3 class="text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl">
Unlimited Subscribers, Zero Extra Cost
</h3>
<p class="mt-4 text-lg text-gray-600 leading-relaxed">
Never worry about subscriber limits. Your entire organization can stay informed without per-seat charges. Reach everyone through their preferred channel.
</p>
<!-- Channel badges -->
<div class="mt-8 flex flex-wrap gap-3">
<div class="inline-flex items-center gap-2 rounded-full bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700">
<svg class="h-4 w-4 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
Email
</div>
<div class="inline-flex items-center gap-2 rounded-full bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700">
<svg class="h-4 w-4 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" />
</svg>
SMS
</div>
<div class="inline-flex items-center gap-2 rounded-full bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700">
<svg class="h-4 w-4 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
</svg>
Webhooks
</div>
<div class="inline-flex items-center gap-2 rounded-full bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700">
<svg class="h-4 w-4 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 5c7.18 0 13 5.82 13 13M6 11a7 7 0 017 7m-6 0a1 1 0 11-2 0 1 1 0 012 0z" />
</svg>
RSS
</div>
<div class="inline-flex items-center gap-2 rounded-full bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700">
<svg class="h-4 w-4 text-gray-500" viewBox="0 0 24 24" fill="currentColor">
<path d="M22.46 6c-.85.38-1.78.64-2.75.76 1-.6 1.76-1.55 2.12-2.68-.93.55-1.96.95-3.06 1.17-.88-.94-2.13-1.53-3.51-1.53-2.66 0-4.81 2.16-4.81 4.81 0 .38.04.75.13 1.1-4-.2-7.58-2.11-9.96-5.02-.42.72-.66 1.56-.66 2.46 0 1.68.85 3.16 2.14 4.02-.79-.02-1.53-.24-2.18-.6v.06c0 2.35 1.67 4.31 3.88 4.76-.4.1-.83.16-1.27.16-.31 0-.62-.03-.92-.08.63 1.96 2.45 3.39 4.61 3.43-1.69 1.32-3.83 2.1-6.15 2.1-.4 0-.8-.02-1.19-.07 2.19 1.4 4.78 2.22 7.57 2.22 9.07 0 14.02-7.52 14.02-14.02 0-.21 0-.43-.01-.64.96-.69 1.79-1.56 2.45-2.55z"/>
</svg>
Slack
</div>
</div>
<div class="mt-8">
<a href="/accounts/register" class="group inline-flex items-center gap-2 text-base font-semibold text-blue-600 hover:text-blue-700 transition-colors">
Start notifying subscribers
<svg class="h-5 w-5 transition-transform group-hover:trangray-x-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
</svg>
</a>
</div>
</div>
</div>
</div>
<!-- Feature 3: Branding & Customization -->
<div class="relative mb-24 lg:mb-32">
<div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
<div class="relative z-10">
<div class="inline-flex items-center justify-center h-14 w-14 rounded-2xl bg-violet-50 ring-1 ring-violet-200 mb-6">
<svg class="h-7 w-7 text-violet-600" 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="M4.098 19.902a3.75 3.75 0 005.304 0l6.401-6.402M6.75 21A3.75 3.75 0 013 17.25V4.125C3 3.504 3.504 3 4.125 3h5.25c.621 0 1.125.504 1.125 1.125v4.072M6.75 21a3.75 3.75 0 003.75-3.75V8.197M6.75 21h13.125c.621 0 1.125-.504 1.125-1.125v-5.25c0-.621-.504-1.125-1.125-1.125h-4.072M10.5 8.197l2.88-2.88c.438-.439 1.15-.439 1.59 0l3.712 3.713c.44.44.44 1.152 0 1.59l-2.879 2.88M6.75 17.25h.008v.008H6.75v-.008z" />
</svg>
</div>
<h3 class="text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl">
Complete Brand Customization
</h3>
<p class="mt-4 text-lg text-gray-600 leading-relaxed">
Make your status page an extension of your brand. Full control over colors, logos, custom domains, and even inject your own HTML, CSS, or JavaScript.
</p>
<!-- Customization options -->
<div class="mt-8 grid grid-cols-2 gap-4">
<div class="flex items-center gap-3 p-3 rounded-xl bg-white shadow-sm ring-1 ring-gray-100">
<div class="flex-shrink-0 h-10 w-10 rounded-lg bg-pink-500"></div>
<span class="text-sm font-medium text-gray-700">Custom Colors</span>
</div>
<div class="flex items-center gap-3 p-3 rounded-xl bg-white shadow-sm ring-1 ring-gray-100">
<div class="flex-shrink-0 h-10 w-10 rounded-lg bg-gray-100 flex items-center justify-center">
<svg class="h-5 w-5 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
</div>
<span class="text-sm font-medium text-gray-700">Logo & Favicon</span>
</div>
<div class="flex items-center gap-3 p-3 rounded-xl bg-white shadow-sm ring-1 ring-gray-100">
<div class="flex-shrink-0 h-10 w-10 rounded-lg bg-gray-100 flex items-center justify-center">
<svg class="h-5 w-5 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
</svg>
</div>
<span class="text-sm font-medium text-gray-700">Custom Domain</span>
</div>
<div class="flex items-center gap-3 p-3 rounded-xl bg-white shadow-sm ring-1 ring-gray-100">
<div class="flex-shrink-0 h-10 w-10 rounded-lg bg-gray-100 flex items-center justify-center">
<svg class="h-5 w-5 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
</svg>
</div>
<span class="text-sm font-medium text-gray-700">Custom Code</span>
</div>
</div>
<div class="mt-8">
<a href="/accounts/register" class="group inline-flex items-center gap-2 text-base font-semibold text-violet-600 hover:text-violet-700 transition-colors">
Customize your page
<svg class="h-5 w-5 transition-transform group-hover:trangray-x-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
</svg>
</a>
</div>
</div>
<!-- Image -->
<div class="mt-12 lg:mt-0 relative">
<div class="relative rounded-2xl bg-gray-100 p-2 shadow-lg ring-1 ring-gray-200/60">
<img class="w-full rounded-xl" src="/img/branding.png" alt="Branding Customization">
</div>
</div>
</div>
</div>
<!-- Feature 4: Incident Communication -->
<div class="relative">
<div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
<!-- Image (left on desktop) -->
<div class="order-2 lg:order-1 mt-12 lg:mt-0 relative">
<div class="relative rounded-2xl bg-gray-100 p-2 shadow-lg ring-1 ring-gray-200/60">
<img class="w-full rounded-xl" src="/img/incident-report.png" alt="Incident Communication">
</div>
</div>
<div class="order-1 lg:order-2 relative z-10">
<div class="inline-flex items-center justify-center h-14 w-14 rounded-2xl bg-amber-50 ring-1 ring-amber-200 mb-6">
<svg class="h-7 w-7 text-amber-600" 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="M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 01-2.555-.337A5.972 5.972 0 015.41 20.97a5.969 5.969 0 01-.474-.065 4.48 4.48 0 00.978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25z" />
</svg>
</div>
<h3 class="text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl">
Incident Notes & Postmortems
</h3>
<p class="mt-4 text-lg text-gray-600 leading-relaxed">
Keep everyone informed with real-time incident updates. Post notes, share resolution progress, and publish detailed postmortems to build trust and reduce support load.
</p>
<!-- Timeline preview -->
<div class="mt-8 space-y-4">
<div class="flex gap-4">
<div class="flex flex-col items-center">
<div class="h-3 w-3 rounded-full bg-red-500 ring-4 ring-red-100"></div>
<div class="flex-1 w-px bg-gray-200"></div>
</div>
<div class="pb-4">
<p class="text-sm font-medium text-gray-900">Incident Identified</p>
<p class="text-sm text-gray-500">API latency increased significantly</p>
</div>
</div>
<div class="flex gap-4">
<div class="flex flex-col items-center">
<div class="h-3 w-3 rounded-full bg-amber-500 ring-4 ring-amber-100"></div>
<div class="flex-1 w-px bg-gray-200"></div>
</div>
<div class="pb-4">
<p class="text-sm font-medium text-gray-900">Investigating</p>
<p class="text-sm text-gray-500">Team identified database bottleneck</p>
</div>
</div>
<div class="flex gap-4">
<div class="flex flex-col items-center">
<div class="h-3 w-3 rounded-full bg-emerald-500 ring-4 ring-emerald-100"></div>
</div>
<div>
<p class="text-sm font-medium text-gray-900">Resolved</p>
<p class="text-sm text-gray-500">All systems back to normal</p>
</div>
</div>
</div>
<div class="mt-8">
<a href="/accounts/register" class="group inline-flex items-center gap-2 text-base font-semibold text-amber-600 hover:text-amber-700 transition-colors">
Improve incident communication
<svg class="h-5 w-5 transition-transform group-hover:trangray-x-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- More Features Section -->
<div class="relative bg-white py-24 sm:py-32 lg:py-40 overflow-hidden">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<!-- Section Header -->
<div class="mx-auto max-w-3xl text-center mb-20">
<div class="inline-flex items-center gap-2 rounded-full bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 ring-1 ring-inset ring-gray-200 mb-6">
<svg class="h-4 w-4 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
</svg>
Powerful Capabilities
</div>
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl lg:text-5xl">
Everything you need,
<span class="block mt-2 text-gray-800">nothing you don't</span>
</h2>
<p class="mt-6 text-lg leading-8 text-gray-600">
From enterprise-grade reliability to seamless integrations, we've built every feature you need to communicate status effectively.
</p>
</div>
<!-- Feature Cards Grid -->
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
<!-- Feature 1: Reliability -->
<div class="group relative">
<div class="relative h-full rounded-2xl bg-white p-8 shadow-sm ring-1 ring-gray-200/60 transition-all duration-300 hover:shadow-lg hover:ring-gray-300/60">
<div class="flex items-center gap-4 mb-6">
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-emerald-50 ring-1 ring-emerald-200">
<svg class="h-6 w-6 text-emerald-600" 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 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0112 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 01-3.296-1.043 3.745 3.745 0 01-1.043-3.296A3.745 3.745 0 013 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 011.043-3.296 3.746 3.746 0 013.296-1.043A3.746 3.746 0 0112 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 013.296 1.043 3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z" />
</svg>
</div>
<div class="flex items-center gap-2">
<span class="inline-flex items-center rounded-full bg-emerald-50 px-2.5 py-1 text-xs font-medium text-emerald-700 ring-1 ring-inset ring-emerald-600/20">
99.99% SLA
</span>
</div>
</div>
<h3 class="text-xl font-semibold text-gray-900 mb-3">Enterprise Reliability</h3>
<p class="text-gray-600 leading-relaxed">
Distributed across multiple clouds and continents. Your status page stays up even when major providers go down.
</p>
<div class="mt-6 flex items-center gap-4 text-sm text-gray-500">
<div class="flex items-center gap-1.5">
<div class="h-2 w-2 rounded-full bg-emerald-500"></div>
<span>Multi-cloud</span>
</div>
<div class="flex items-center gap-1.5">
<div class="h-2 w-2 rounded-full bg-emerald-500"></div>
<span>Global CDN</span>
</div>
</div>
</div>
</div>
<!-- Feature 2: Integrations -->
<div class="group relative">
<div class="relative h-full rounded-2xl bg-white p-8 shadow-sm ring-1 ring-gray-200/60 transition-all duration-300 hover:shadow-lg hover:ring-gray-300/60">
<div class="flex items-center gap-4 mb-6">
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-50 ring-1 ring-blue-200">
<svg class="h-6 w-6 text-blue-600" 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="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>
<div class="flex items-center gap-2">
<span class="inline-flex items-center rounded-full bg-blue-50 px-2.5 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-600/20">
5000+ Apps
</span>
</div>
</div>
<h3 class="text-xl font-semibold text-gray-900 mb-3">Seamless Integrations</h3>
<p class="text-gray-600 leading-relaxed">
Connect with Slack, PagerDuty, Jira, and thousands more. Update status pages without leaving your tools.
</p>
<div class="mt-6 flex -space-x-2">
<div class="h-8 w-8 rounded-full bg-gray-100 ring-2 ring-white flex items-center justify-center">
<svg class="h-4 w-4 text-gray-600" viewBox="0 0 24 24" fill="currentColor"><path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z"/></svg>
</div>
<div class="h-8 w-8 rounded-full bg-gray-100 ring-2 ring-white flex items-center justify-center">
<svg class="h-4 w-4 text-gray-600" viewBox="0 0 24 24" fill="currentColor"><path d="M11.998 0C5.366 0 0 5.367 0 12a11.992 11.992 0 0 0 8.203 11.385c.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12.002-12"/></svg>
</div>
<div class="h-8 w-8 rounded-full bg-gray-100 ring-2 ring-white flex items-center justify-center">
<svg class="h-4 w-4 text-gray-600" viewBox="0 0 24 24" fill="currentColor"><path d="M11.571 11.513H0a5.218 5.218 0 0 0 5.232 5.215h2.13v2.057A5.215 5.215 0 0 0 12.575 24V12.518a1.005 1.005 0 0 0-1.005-1.005zm5.723-5.756H5.736a5.215 5.215 0 0 0 5.215 5.214h2.129v2.058a5.218 5.218 0 0 0 5.215 5.214V6.758a1.001 1.001 0 0 0-1.001-1.001zM23.013 0H11.455a5.215 5.215 0 0 0 5.215 5.215h2.129v2.057A5.215 5.215 0 0 0 24 12.483V1.005A1.001 1.001 0 0 0 23.013 0Z"/></svg>
</div>
<div class="h-8 w-8 rounded-full bg-gray-100 ring-2 ring-white flex items-center justify-center text-xs font-medium text-gray-500">
+
</div>
</div>
</div>
</div>
<!-- Feature 3: Workflows -->
<div class="group relative">
<div class="relative h-full rounded-2xl bg-white p-8 shadow-sm ring-1 ring-gray-200/60 transition-all duration-300 hover:shadow-lg hover:ring-gray-300/60">
<div class="flex items-center gap-4 mb-6">
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-violet-50 ring-1 ring-violet-200">
<svg class="h-6 w-6 text-violet-600" 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 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>
<div class="flex items-center gap-2">
<span class="inline-flex items-center rounded-full bg-violet-50 px-2.5 py-1 text-xs font-medium text-violet-700 ring-1 ring-inset ring-violet-600/20">
No-code
</span>
</div>
</div>
<h3 class="text-xl font-semibold text-gray-900 mb-3">Automated Workflows</h3>
<p class="text-gray-600 leading-relaxed">
Build complex automation without code. Auto-update status pages, trigger notifications, and streamline incident response.
</p>
<div class="mt-6 flex items-center gap-2">
<div class="h-8 rounded-full bg-violet-100 px-3 flex items-center text-xs font-medium text-violet-700">
Trigger
</div>
<svg class="h-4 w-4 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
<div class="h-8 rounded-full bg-violet-100 px-3 flex items-center text-xs font-medium text-violet-700">
Action
</div>
<svg class="h-4 w-4 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
<div class="h-8 rounded-full bg-violet-100 px-3 flex items-center text-xs font-medium text-violet-700">
Notify
</div>
</div>
</div>
</div>
<!-- Feature 4: Custom Domains -->
<div class="group relative">
<div class="relative h-full rounded-2xl bg-white p-8 shadow-sm ring-1 ring-gray-200/60 transition-all duration-300 hover:shadow-lg hover:ring-gray-300/60">
<div class="flex items-center gap-4 mb-6">
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-cyan-50 ring-1 ring-cyan-200">
<svg class="h-6 w-6 text-cyan-600" 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>
</div>
<div class="flex items-center gap-2">
<span class="inline-flex items-center rounded-full bg-cyan-50 px-2.5 py-1 text-xs font-medium text-cyan-700 ring-1 ring-inset ring-cyan-600/20">
Free SSL
</span>
</div>
</div>
<h3 class="text-xl font-semibold text-gray-900 mb-3">Custom Domains</h3>
<p class="text-gray-600 leading-relaxed">
Host on your own domain with automatic SSL provisioning. Multiple domains per status page supported.
</p>
<div class="mt-6 p-3 rounded-lg bg-gray-50 font-mono text-sm text-gray-600">
<span class="text-cyan-600">https://</span>status.yourcompany.com
</div>
</div>
</div>
<!-- Feature 5: Scheduled Maintenance -->
<div class="group relative">
<div class="relative h-full rounded-2xl bg-white p-8 shadow-sm ring-1 ring-gray-200/60 transition-all duration-300 hover:shadow-lg hover:ring-gray-300/60">
<div class="flex items-center gap-4 mb-6">
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-amber-50 ring-1 ring-amber-200">
<svg class="h-6 w-6 text-amber-600" 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 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
</div>
<h3 class="text-xl font-semibold text-gray-900 mb-3">Scheduled Maintenance</h3>
<p class="text-gray-600 leading-relaxed">
Plan and communicate maintenance windows in advance. Auto-notify subscribers before, during, and after.
</p>
<div class="mt-6 flex items-center gap-3">
<div class="flex items-center gap-2 text-sm">
<div class="h-3 w-3 rounded-full bg-amber-400"></div>
<span class="text-gray-500">Dec 28, 2:00 AM</span>
</div>
<span class="text-gray-300">-</span>
<div class="flex items-center gap-2 text-sm">
<div class="h-3 w-3 rounded-full bg-emerald-400"></div>
<span class="text-gray-500">4:00 AM UTC</span>
</div>
</div>
</div>
</div>
<!-- Feature 6: Announcements -->
<div class="group relative">
<div class="relative h-full rounded-2xl bg-white p-8 shadow-sm ring-1 ring-gray-200/60 transition-all duration-300 hover:shadow-lg hover:ring-gray-300/60">
<div class="flex items-center gap-4 mb-6">
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-pink-50 ring-1 ring-pink-200">
<svg class="h-6 w-6 text-pink-600" 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.34 15.84c-.688-.06-1.386-.09-2.09-.09H7.5a4.5 4.5 0 110-9h.75c.704 0 1.402-.03 2.09-.09m0 9.18c.253.962.584 1.892.985 2.783.247.55.06 1.21-.463 1.511l-.657.38c-.551.318-1.26.117-1.527-.461a20.845 20.845 0 01-1.44-4.282m3.102.069a18.03 18.03 0 01-.59-4.59c0-1.586.205-3.124.59-4.59m0 9.18a23.848 23.848 0 018.835 2.535M10.34 6.66a23.847 23.847 0 008.835-2.535m0 0A23.74 23.74 0 0018.795 3m.38 1.125a23.91 23.91 0 011.014 5.395m-1.014 8.855c-.118.38-.245.754-.38 1.125m.38-1.125a23.91 23.91 0 001.014-5.395m0-3.46c.495.413.811 1.035.811 1.73 0 .695-.316 1.317-.811 1.73m0-3.46a24.347 24.347 0 010 3.46" />
</svg>
</div>
</div>
<h3 class="text-xl font-semibold text-gray-900 mb-3">Announcements</h3>
<p class="text-gray-600 leading-relaxed">
Share product updates, new features, and important news directly on your status page.
</p>
<div class="mt-6 p-3 rounded-lg bg-pink-50 border border-pink-100">
<div class="flex items-start gap-2">
<svg class="h-5 w-5 text-pink-500 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z" />
</svg>
<p class="text-sm text-gray-600">New API v2.0 is now available!</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Team Notifications Section -->
<div class="bg-gray-50 py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
<div class="relative">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-emerald-50 border border-emerald-100 mb-6">
<svg class="h-4 w-4 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
</svg>
<span class="text-sm font-medium text-emerald-700">Subscriber Notifications</span>
</div>
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
Keep everyone informed <span class="text-emerald-600">automatically</span>
</h2>
<p class="mt-6 text-lg text-gray-600">
Subscribers receive instant notifications through their preferred channel when status changes. Email, SMS, Slack, webhooks - reach your users wherever they are.
</p>
<ul class="mt-8 space-y-4">
<li class="flex items-start gap-4">
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-emerald-50 ring-1 ring-emerald-200">
<svg class="h-4 w-4 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</div>
<div>
<div class="font-semibold text-gray-900">Real-time incident updates</div>
<div class="text-gray-600">Subscribers notified immediately when incidents are created or updated</div>
</div>
</li>
<li class="flex items-start gap-4">
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-emerald-50 ring-1 ring-emerald-200">
<svg class="h-4 w-4 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</div>
<div>
<div class="font-semibold text-gray-900">Maintenance announcements</div>
<div class="text-gray-600">Advance notice before scheduled maintenance windows</div>
</div>
</li>
<li class="flex items-start gap-4">
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-emerald-50 ring-1 ring-emerald-200">
<svg class="h-4 w-4 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</div>
<div>
<div class="font-semibold text-gray-900">Resolution confirmations</div>
<div class="text-gray-600">Automatic notifications when issues are resolved</div>
</div>
</li>
</ul>
</div>
<!-- Slack Demo -->
<div class="mt-12 lg:mt-0 relative">
<div class="rounded-2xl bg-white shadow-xl ring-1 ring-gray-200 overflow-hidden">
<!-- Slack Header -->
<div class="bg-[#3F0F40] px-4 py-3 flex items-center gap-3">
<div class="flex items-center gap-2">
<svg class="h-5 w-5 text-white" viewBox="0 0 24 24" fill="currentColor">
<path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z"/>
</svg>
<span class="text-white font-semibold text-sm">Slack</span>
</div>
<div class="flex-1 text-center">
<span class="text-white/70 text-sm">#status-alerts</span>
</div>
</div>
<!-- Slack Messages -->
<div class="p-4 space-y-4 bg-white">
<!-- Message 1 -->
<div class="flex gap-3 slack-message-1" style="opacity: 0; animation: fadeInSlack 0.5s ease-out 0.5s forwards;">
<div class="h-9 w-9 rounded bg-emerald-500 flex items-center justify-center flex-shrink-0">
<svg class="h-5 w-5 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div class="flex-1 min-w-0">
<div class="flex items-baseline gap-2">
<span class="font-semibold text-gray-900 text-sm">OneUptime Status</span>
<span class="text-xs text-gray-500">2:34 PM</span>
</div>
<div class="mt-1 p-3 rounded-lg bg-emerald-50 border-l-4 border-emerald-500">
<div class="flex items-center gap-2 mb-1">
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-emerald-100 text-emerald-800">RESOLVED</span>
</div>
<p class="text-sm text-gray-700 font-medium">API Performance Degradation</p>
<p class="text-xs text-gray-500 mt-1">All systems are now operating normally.</p>
</div>
</div>
</div>
<!-- Message 2 -->
<div class="flex gap-3 slack-message-2" style="opacity: 0; animation: fadeInSlack 0.5s ease-out 1.5s forwards;">
<div class="h-9 w-9 rounded bg-emerald-500 flex items-center justify-center flex-shrink-0">
<svg class="h-5 w-5 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div class="flex-1 min-w-0">
<div class="flex items-baseline gap-2">
<span class="font-semibold text-gray-900 text-sm">OneUptime Status</span>
<span class="text-xs text-gray-500">2:35 PM</span>
</div>
<div class="mt-1 p-3 rounded-lg bg-amber-50 border-l-4 border-amber-500">
<div class="flex items-center gap-2 mb-1">
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-amber-100 text-amber-800">SCHEDULED</span>
</div>
<p class="text-sm text-gray-700 font-medium">Database Maintenance Window</p>
<p class="text-xs text-gray-500 mt-1">Planned maintenance: Jan 15, 2:00 AM - 4:00 AM UTC</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<%- include('./Partials/enterprise-ready') -%>
<%- include('features-table') -%>
<%- include('cta') -%>
</main>
<%- include('footer') -%>
<%- include('./Partials/video-script') -%>
<style>
@keyframes fadeInSlack {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style>
<script>
// Grid glow effect for status page hero section
(function() {
const heroSection = document.getElementById('status-page-hero-section');
const gridGlow = document.getElementById('status-page-grid-glow');
if (heroSection && gridGlow) {
heroSection.addEventListener('mousemove', (e) => {
const rect = heroSection.getBoundingClientRect();
const x = ((e.clientX - rect.left) / rect.width) * 100;
const y = ((e.clientY - rect.top) / rect.height) * 100;
gridGlow.style.setProperty('--mouse-x', x + '%');
gridGlow.style.setProperty('--mouse-y', y + '%');
gridGlow.style.opacity = '1';
});
heroSection.addEventListener('mouseleave', () => {
gridGlow.style.opacity = '0';
});
}
})();
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink