<!DOCTYPE html>
<html lang="en" id="home">

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<head>
    <title>OneUptime | Monitor any resource in real-time. </title>
    <meta name="description"
        content="Monitor websites, APIs, servers, and containers from 7+ global locations. Get alerts via SMS, email, Slack, and phone. Free tier available. Open source Datadog alternative.">
        <%- include('head', {
    enableGoogleTagManager: typeof enableGoogleTagManager !== 'undefined' ? enableGoogleTagManager : false
}) -%>

</head>

<body>
  <%- include('nav') -%>
  <main id="main-content">
  <!-- Hero Section -->
  <div class="relative isolate overflow-hidden bg-white" id="monitoring-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 - blue color -->
    <div id="monitoring-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(59, 130, 246, 0.3) 1px, transparent 1px), linear-gradient(to bottom, rgba(59, 130, 246, 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-blue-600 mb-4">Real-time monitoring from 7 global locations</p>

          <h1 class="text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl lg:text-6xl">
            Monitor everything, miss nothing
          </h1>
          <p class="mt-6 text-lg leading-8 text-gray-600 max-w-2xl mx-auto">
            Monitor websites, APIs, servers, and containers from anywhere. Get instant alerts when things go wrong and keep your services running smoothly.
          </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>1-second checks</span>
            <span class="hidden sm:inline text-gray-300">|</span>
            <span>Unlimited monitors</span>
            <span class="hidden sm:inline text-gray-300">|</span>
            <span>Multi-channel alerts</span>
            <span class="hidden sm:inline text-gray-300">|</span>
            <span>Internal monitoring</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/monitor.png" alt="OneUptime monitoring dashboard" width="2432" height="1442"
                class="rounded-lg shadow-lg">
              <%- include('./Partials/watch-demo.ejs', {videoId: "_fQ_F4EisBQ" }) -%>
            </div>
          </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-blue-600 uppercase tracking-wide mb-3">How It Works</p>
        <h2 class="text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl">
          Set up monitoring in seconds
        </h2>
        <p class="mt-4 text-lg text-gray-600">
          Get real-time visibility into your infrastructure with our simple four-step setup process.
        </p>
      </div>

      <div class="mx-auto max-w-5xl">
        <!-- Connecting line for desktop -->
        <div class="hidden lg:block relative">
          <div class="absolute top-8 left-[calc(12.5%+24px)] right-[calc(12.5%+24px)] h-px bg-blue-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-blue-600 text-white mb-6 shadow-sm">
              <svg class="h-5 w-5" 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-blue-600 ring-2 ring-blue-600">1</span>
            </div>
            <h3 class="text-base font-semibold text-gray-900 mb-2">Add Monitor</h3>
            <p class="text-sm text-gray-600 leading-relaxed">Create a monitor for any resource - website, API, server, or container.</p>
          </div>

          <!-- Step 2 -->
          <div class="text-center">
            <div class="relative inline-flex items-center justify-center h-16 w-16 rounded-full bg-blue-600 text-white mb-6 shadow-sm">
              <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 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-blue-600 ring-2 ring-blue-600">2</span>
            </div>
            <h3 class="text-base font-semibold text-gray-900 mb-2">Configure Checks</h3>
            <p class="text-sm text-gray-600 leading-relaxed">Set check intervals, locations, and custom success criteria.</p>
          </div>

          <!-- Step 3 -->
          <div class="text-center">
            <div class="relative inline-flex items-center justify-center h-16 w-16 rounded-full bg-blue-600 text-white mb-6 shadow-sm">
              <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
              </svg>
              <span class="absolute -bottom-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full bg-white text-xs font-semibold text-blue-600 ring-2 ring-blue-600">3</span>
            </div>
            <h3 class="text-base font-semibold text-gray-900 mb-2">Set Up Alerts</h3>
            <p class="text-sm text-gray-600 leading-relaxed">Choose notification channels and escalation policies.</p>
          </div>

          <!-- Step 4 -->
          <div class="text-center">
            <div class="relative inline-flex items-center justify-center h-16 w-16 rounded-full bg-blue-600 text-white mb-6 shadow-sm">
              <svg class="h-5 w-5" 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-blue-600 ring-2 ring-blue-600">4</span>
            </div>
            <h3 class="text-base font-semibold text-gray-900 mb-2">Stay Informed</h3>
            <p class="text-sm text-gray-600 leading-relaxed">Get real-time alerts and detailed performance insights.</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-2xl text-center mb-20">
        <div class="inline-flex items-center gap-2 rounded-full bg-blue-50 px-4 py-1.5 text-sm font-medium text-blue-700 ring-1 ring-inset ring-blue-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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
          Why OneUptime
        </div>
        <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl lg:text-5xl">
          An unbeatable monitoring product built for you
        </h2>
        <p class="mt-6 text-lg leading-8 text-gray-600">
          Monitor anything - Websites, API, IPv4, IPv6, or send data inbound. Create alerts on any metrics and alert the right team.
        </p>
      </div>

      <!-- Feature Blocks -->
      <div class="space-y-24 lg:space-y-32">
        <!-- Feature 1: Monitor Anything -->
        <div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
          <div class="relative">
            <div class="flex items-center gap-4 mb-6">
              <div class="flex h-10 w-10 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" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
              </div>
              <span class="text-sm font-semibold text-blue-600 uppercase tracking-wide">Comprehensive Coverage</span>
            </div>
            <h3 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4">Monitor Anything</h3>
            <p class="text-lg text-gray-600 mb-6">
              Websites, API, IPv4, IPv6, Docker containers, Servers, VMs or send data inbound. OneUptime can monitor any resource you have.
            </p>
            <ul class="space-y-3 mb-8">
              <li class="flex items-center gap-3 text-gray-600">
                <svg class="h-5 w-5 text-blue-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                </svg>
                HTTP/HTTPS monitoring with SSL checks
              </li>
              <li class="flex items-center gap-3 text-gray-600">
                <svg class="h-5 w-5 text-blue-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                </svg>
                Server & container monitoring
              </li>
              <li class="flex items-center gap-3 text-gray-600">
                <svg class="h-5 w-5 text-blue-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                </svg>
                TCP, UDP, and custom port checks
              </li>
            </ul>
            <a href="/accounts/register" class="inline-flex items-center gap-1.5 px-4 py-2 bg-gray-900 text-white text-sm font-medium rounded-lg hover:bg-gray-800 transition-colors">
              Get started
              <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
              </svg>
            </a>
          </div>
          <div class="mt-12 lg:mt-0">
            <div class="relative">
              <!-- Subtle background -->
              <div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>

              <!-- Grid of Monitor Type Cards -->
              <div class="relative max-w-md mx-auto">
                <div class="grid grid-cols-3 gap-3">
                  <!-- Website -->
                  <div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm text-center">
                    <div class="w-10 h-10 rounded-lg bg-gray-50 flex items-center justify-center mx-auto mb-2">
                      <svg class="w-5 h-5 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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>
                    <div class="text-gray-700 text-xs font-medium">Website</div>
                    <div class="text-gray-400 text-[10px]">HTTP/HTTPS</div>
                  </div>

                  <!-- API -->
                  <div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm text-center">
                    <div class="w-10 h-10 rounded-lg bg-gray-50 flex items-center justify-center mx-auto mb-2">
                      <svg class="w-5 h-5 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                      </svg>
                    </div>
                    <div class="text-gray-700 text-xs font-medium">API</div>
                    <div class="text-gray-400 text-[10px]">REST/GraphQL</div>
                  </div>

                  <!-- Server -->
                  <div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm text-center">
                    <div class="w-10 h-10 rounded-lg bg-gray-50 flex items-center justify-center mx-auto mb-2">
                      <svg class="w-5 h-5 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"/>
                      </svg>
                    </div>
                    <div class="text-gray-700 text-xs font-medium">Server</div>
                    <div class="text-gray-400 text-[10px]">SSH/Ping</div>
                  </div>

                  <!-- Database -->
                  <div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm text-center">
                    <div class="w-10 h-10 rounded-lg bg-gray-50 flex items-center justify-center mx-auto mb-2">
                      <svg class="w-5 h-5 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"/>
                      </svg>
                    </div>
                    <div class="text-gray-700 text-xs font-medium">Database</div>
                    <div class="text-gray-400 text-[10px]">SQL/NoSQL</div>
                  </div>

                  <!-- Container -->
                  <div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm text-center">
                    <div class="w-10 h-10 rounded-lg bg-gray-50 flex items-center justify-center mx-auto mb-2">
                      <svg class="w-5 h-5 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/>
                      </svg>
                    </div>
                    <div class="text-gray-700 text-xs font-medium">Container</div>
                    <div class="text-gray-400 text-[10px]">Docker/K8s</div>
                  </div>

                  <!-- Port -->
                  <div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm text-center">
                    <div class="w-10 h-10 rounded-lg bg-gray-50 flex items-center justify-center mx-auto mb-2">
                      <svg class="w-5 h-5 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.857 15.355-5.857 21.213 0"/>
                      </svg>
                    </div>
                    <div class="text-gray-700 text-xs font-medium">Port</div>
                    <div class="text-gray-400 text-[10px]">TCP/UDP</div>
                  </div>
                </div>

                <!-- Footer label -->
                <div class="mt-4 text-center text-xs text-gray-400">
                  + SSL, IPv4, IPv6, Inbound Data & more
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Feature 2: Private Network Monitoring -->
        <div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
          <div class="relative order-2 lg:order-1 mt-12 lg:mt-0">
            <div class="relative">
              <!-- Subtle background -->
              <div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>

              <!-- Clean Browser Window -->
              <div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
                <!-- Browser header -->
                <div class="bg-gray-50 px-4 py-2.5 flex items-center gap-3 border-b border-gray-100">
                  <div class="flex gap-1.5">
                    <div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
                    <div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
                    <div class="w-2.5 h-2.5 rounded-full bg-gray-300"></div>
                  </div>
                </div>

                <!-- Content area -->
                <div class="p-4">
                  <!-- Header -->
                  <div class="flex items-center justify-between mb-4">
                    <div class="flex items-center gap-2">
                      <div class="w-8 h-8 rounded-lg bg-gray-100 flex items-center justify-center">
                        <svg class="w-4 h-4 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
                        </svg>
                      </div>
                      <div>
                        <div class="text-gray-800 text-sm font-medium">Private Network</div>
                        <div class="text-gray-400 text-xs">4 services</div>
                      </div>
                    </div>
                    <span class="flex items-center gap-1 px-2 py-1 bg-gray-50 rounded text-xs text-gray-600 border border-gray-200">
                      <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
                      Connected
                    </span>
                  </div>

                  <!-- Services list -->
                  <div class="space-y-2">
                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                      <div class="flex items-center gap-2">
                        <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
                        <span class="text-gray-700 text-sm">PostgreSQL</span>
                        <span class="text-gray-400 text-xs font-mono">10.0.1.50</span>
                      </div>
                      <span class="text-gray-400 text-xs">12ms</span>
                    </div>

                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                      <div class="flex items-center gap-2">
                        <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
                        <span class="text-gray-700 text-sm">Redis Cluster</span>
                        <span class="text-gray-400 text-xs font-mono">10.0.1.51</span>
                      </div>
                      <span class="text-gray-400 text-xs">3ms</span>
                    </div>

                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                      <div class="flex items-center gap-2">
                        <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
                        <span class="text-gray-700 text-sm">K8s API Server</span>
                        <span class="text-gray-400 text-xs font-mono">10.0.0.1</span>
                      </div>
                      <span class="text-gray-400 text-xs">8ms</span>
                    </div>

                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                      <div class="flex items-center gap-2">
                        <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
                        <span class="text-gray-700 text-sm">API Gateway</span>
                        <span class="text-gray-400 text-xs font-mono">10.0.2.10</span>
                      </div>
                      <span class="text-gray-400 text-xs">15ms</span>
                    </div>
                  </div>

                  <!-- Footer -->
                  <div class="mt-3 pt-3 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400">
                    <span>Probe: prod-vpc-01</span>
                    <span>Last check: 2s ago</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="relative order-1 lg:order-2">
            <div class="flex items-center gap-4 mb-6">
              <div class="flex h-10 w-10 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" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                </svg>
              </div>
              <span class="text-sm font-semibold text-blue-600 uppercase tracking-wide">Internal Infrastructure</span>
            </div>
            <h3 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4">Private Network Monitoring</h3>
            <p class="text-lg text-gray-600 mb-6">
              Deploy lightweight monitoring probes inside your private networks, VPNs, or air-gapped environments. Monitor internal services, databases, and infrastructure that aren't accessible from the public internet.
            </p>
            <ul class="space-y-3 mb-8">
              <li class="flex items-center gap-3 text-gray-600">
                <svg class="h-5 w-5 text-blue-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                </svg>
                Monitor behind firewalls and VPNs
              </li>
              <li class="flex items-center gap-3 text-gray-600">
                <svg class="h-5 w-5 text-blue-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                </svg>
                Kubernetes cluster monitoring
              </li>
              <li class="flex items-center gap-3 text-gray-600">
                <svg class="h-5 w-5 text-blue-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                </svg>
                On-premise and hybrid cloud support
              </li>
            </ul>
            <a href="/accounts/register" class="inline-flex items-center gap-1.5 px-4 py-2 bg-gray-900 text-white text-sm font-medium rounded-lg hover:bg-gray-800 transition-colors">
              Get started
              <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
              </svg>
            </a>
          </div>
        </div>

        <!-- Feature 3: Real-time Status -->
        <div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
          <div class="relative">
            <div class="flex items-center gap-4 mb-6">
              <div class="flex h-10 w-10 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" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                </svg>
              </div>
              <span class="text-sm font-semibold text-blue-600 uppercase tracking-wide">Instant Updates</span>
            </div>
            <h3 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4">Showcase Real-time Status</h3>
            <p class="text-lg text-gray-600 mb-6">
              OneUptime checks the status of your endpoints every second to ensure your status page gets updated as soon as any of your resources go down.
            </p>
            <ul class="space-y-3 mb-8">
              <li class="flex items-center gap-3 text-gray-600">
                <svg class="h-5 w-5 text-blue-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                </svg>
                1-second check intervals
              </li>
              <li class="flex items-center gap-3 text-gray-600">
                <svg class="h-5 w-5 text-blue-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                </svg>
                Auto-updated status pages
              </li>
              <li class="flex items-center gap-3 text-gray-600">
                <svg class="h-5 w-5 text-blue-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                </svg>
                Instant incident detection
              </li>
            </ul>
            <a href="/accounts/register" class="inline-flex items-center gap-1.5 px-4 py-2 bg-gray-900 text-white text-sm font-medium rounded-lg hover:bg-gray-800 transition-colors">
              Get started
              <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
              </svg>
            </a>
          </div>
          <div class="mt-12 lg:mt-0">
            <div class="relative">
              <!-- Subtle background -->
              <div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>

              <!-- Status Page with Uptime Bars -->
              <div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
                <!-- Header -->
                <div class="p-4 border-b border-gray-100">
                  <div class="flex items-center gap-3">
                    <div class="w-3 h-3 rounded-full bg-emerald-500"></div>
                    <div>
                      <div class="text-gray-800 text-sm font-semibold">All Systems Operational</div>
                      <div class="text-gray-400 text-xs">Updated 1 second ago</div>
                    </div>
                  </div>
                </div>

                <!-- Uptime bars -->
                <div class="p-4 space-y-4">
                  <!-- API Services -->
                  <div>
                    <div class="flex items-center justify-between mb-1.5">
                      <span class="text-gray-700 text-sm">API Services</span>
                      <span class="text-gray-400 text-xs">99.99%</span>
                    </div>
                    <div class="flex gap-0.5">
                      <div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
                      <div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
                      <div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
                      <div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
                      <div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
                      <div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
                      <div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
                      <div class="flex-1 h-6 bg-amber-400 rounded-sm"></div>
                      <div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
                      <div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
                      <div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
                      <div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
                      <div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
                      <div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
                    </div>
                  </div>

                  <!-- Web Dashboard -->
                  <div>
                    <div class="flex items-center justify-between mb-1.5">
                      <span class="text-gray-700 text-sm">Web Dashboard</span>
                      <span class="text-gray-400 text-xs">100%</span>
                    </div>
                    <div class="flex gap-0.5">
                      <div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
                      <div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
                      <div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
                      <div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
                      <div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
                      <div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
                      <div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
                      <div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
                      <div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
                      <div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
                      <div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
                      <div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
                      <div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
                      <div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
                    </div>
                  </div>

                  <!-- Database -->
                  <div>
                    <div class="flex items-center justify-between mb-1.5">
                      <span class="text-gray-700 text-sm">Database</span>
                      <span class="text-gray-400 text-xs">99.95%</span>
                    </div>
                    <div class="flex gap-0.5">
                      <div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
                      <div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
                      <div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
                      <div class="flex-1 h-6 bg-red-400 rounded-sm"></div>
                      <div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
                      <div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
                      <div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
                      <div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
                      <div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
                      <div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
                      <div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
                      <div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
                      <div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
                      <div class="flex-1 h-6 bg-emerald-400 rounded-sm"></div>
                    </div>
                  </div>
                </div>

                <!-- Footer -->
                <div class="px-4 py-3 bg-gray-50 border-t border-gray-100 flex items-center justify-between">
                  <span class="text-gray-400 text-xs">90 days ago</span>
                  <div class="flex items-center gap-2">
                    <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
                    <span class="text-gray-400 text-xs">Today</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Feature 4: User Journey Monitoring -->
        <div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
          <div class="relative order-2 lg:order-1 mt-12 lg:mt-0">
            <div class="relative">
              <!-- Subtle background -->
              <div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>

              <!-- Clean Card Design -->
              <div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
                <!-- Header -->
                <div class="px-4 py-3 border-b border-gray-100">
                  <div class="flex items-center justify-between">
                    <div class="flex items-center gap-2">
                      <div class="w-8 h-8 rounded-lg bg-gray-100 flex items-center justify-center">
                        <svg class="w-4 h-4 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
                        </svg>
                      </div>
                      <div>
                        <div class="text-gray-800 text-sm font-medium">Checkout Flow</div>
                        <div class="text-gray-400 text-xs">4 steps</div>
                      </div>
                    </div>
                    <span class="flex items-center gap-1 px-2 py-1 bg-gray-50 rounded text-xs text-gray-600 border border-gray-200">
                      <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
                      Passed
                    </span>
                  </div>
                </div>

                <!-- Content area -->
                <div class="p-4">
                  <!-- Journey flow visualization -->
                  <div class="flex items-start justify-between mb-5">
                    <!-- Step 1 -->
                    <div class="flex flex-col items-center">
                      <div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center border-2 border-emerald-500">
                        <svg class="w-4 h-4 text-emerald-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>
                      </div>
                      <span class="text-gray-600 text-xs mt-1.5">Login</span>
                      <span class="text-gray-400 text-[10px]">1.1s</span>
                    </div>

                    <div class="flex-1 h-0.5 bg-gray-200 mx-1 mt-5"></div>

                    <!-- Step 2 -->
                    <div class="flex flex-col items-center">
                      <div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center border-2 border-emerald-500">
                        <svg class="w-4 h-4 text-emerald-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>
                      </div>
                      <span class="text-gray-600 text-xs mt-1.5">Browse</span>
                      <span class="text-gray-400 text-[10px]">0.8s</span>
                    </div>

                    <div class="flex-1 h-0.5 bg-gray-200 mx-1 mt-5"></div>

                    <!-- Step 3 -->
                    <div class="flex flex-col items-center">
                      <div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center border-2 border-emerald-500">
                        <svg class="w-4 h-4 text-emerald-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>
                      </div>
                      <span class="text-gray-600 text-xs mt-1.5">Cart</span>
                      <span class="text-gray-400 text-[10px]">0.4s</span>
                    </div>

                    <div class="flex-1 h-0.5 bg-gray-200 mx-1 mt-5"></div>

                    <!-- Step 4 -->
                    <div class="flex flex-col items-center">
                      <div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center border-2 border-emerald-500">
                        <svg class="w-4 h-4 text-emerald-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>
                      </div>
                      <span class="text-gray-600 text-xs mt-1.5">Pay</span>
                      <span class="text-gray-400 text-[10px]">1.9s</span>
                    </div>
                  </div>

                  <!-- Step details -->
                  <div class="space-y-2">
                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                      <div class="flex items-center gap-2">
                        <span class="w-5 h-5 rounded bg-gray-200 flex items-center justify-center text-xs text-gray-600 font-medium">1</span>
                        <span class="text-gray-700 text-sm">Navigate to login page</span>
                      </div>
                      <span class="text-gray-400 text-xs">320ms</span>
                    </div>

                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                      <div class="flex items-center gap-2">
                        <span class="w-5 h-5 rounded bg-gray-200 flex items-center justify-center text-xs text-gray-600 font-medium">2</span>
                        <span class="text-gray-700 text-sm">Enter credentials</span>
                      </div>
                      <span class="text-gray-400 text-xs">180ms</span>
                    </div>

                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                      <div class="flex items-center gap-2">
                        <span class="w-5 h-5 rounded bg-gray-200 flex items-center justify-center text-xs text-gray-600 font-medium">3</span>
                        <span class="text-gray-700 text-sm">Add item to cart</span>
                      </div>
                      <span class="text-gray-400 text-xs">412ms</span>
                    </div>
                  </div>

                  <!-- Footer -->
                  <div class="mt-3 pt-3 border-t border-gray-100 flex items-center justify-between">
                    <div class="flex items-center gap-4 text-sm">
                      <div>
                        <span class="text-gray-400 text-xs">Total</span>
                        <span class="text-gray-700 font-medium ml-1">4.2s</span>
                      </div>
                      <div>
                        <span class="text-gray-400 text-xs">Success</span>
                        <span class="text-gray-700 font-medium ml-1">100%</span>
                      </div>
                    </div>
                    <span class="text-gray-400 text-xs">Runs every 5 min</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="relative order-1 lg:order-2">
            <div class="flex items-center gap-4 mb-6">
              <div class="flex h-10 w-10 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" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
                </svg>
              </div>
              <span class="text-sm font-semibold text-blue-600 uppercase tracking-wide">End-to-End Testing</span>
            </div>
            <h3 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4">User Journey Monitoring</h3>
            <p class="text-lg text-gray-600 mb-6">
              Simulate real user interactions and monitor critical user journeys like sign-up, checkout, or onboarding flows. Catch issues before your users do with automated synthetic monitoring.
            </p>
            <ul class="space-y-3 mb-8">
              <li class="flex items-center gap-3 text-gray-600">
                <svg class="h-5 w-5 text-blue-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                </svg>
                Multi-step flow monitoring
              </li>
              <li class="flex items-center gap-3 text-gray-600">
                <svg class="h-5 w-5 text-blue-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                </svg>
                Form submissions and interactions
              </li>
              <li class="flex items-center gap-3 text-gray-600">
                <svg class="h-5 w-5 text-blue-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                </svg>
                Performance metrics per step
              </li>
            </ul>
            <a href="/accounts/register" class="inline-flex items-center gap-1.5 px-4 py-2 bg-gray-900 text-white text-sm font-medium rounded-lg hover:bg-gray-800 transition-colors">
              Get started
              <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
              </svg>
            </a>
          </div>
        </div>

        <!-- Feature 5: IoT, Cron & Backup Monitoring -->
        <div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
          <div class="relative">
            <div class="flex items-center gap-4 mb-6">
              <div class="flex h-10 w-10 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" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
              </div>
              <span class="text-sm font-semibold text-blue-600 uppercase tracking-wide">Scheduled Task Monitoring</span>
            </div>
            <h3 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4">IoT, Cron & Backup Monitoring</h3>
            <p class="text-lg text-gray-600 mb-6">
              Monitor scheduled jobs, IoT device heartbeats, and backup processes. Get alerted when cron jobs fail to run, backups don't complete, or IoT devices go silent.
            </p>
            <ul class="space-y-3 mb-8">
              <li class="flex items-center gap-3 text-gray-600">
                <svg class="h-5 w-5 text-blue-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                </svg>
                Heartbeat monitoring for IoT devices
              </li>
              <li class="flex items-center gap-3 text-gray-600">
                <svg class="h-5 w-5 text-blue-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                </svg>
                Cron job and scheduled task alerts
              </li>
              <li class="flex items-center gap-3 text-gray-600">
                <svg class="h-5 w-5 text-blue-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                </svg>
                Backup completion verification
              </li>
            </ul>
            <a href="/accounts/register" class="inline-flex items-center gap-1.5 px-4 py-2 bg-gray-900 text-white text-sm font-medium rounded-lg hover:bg-gray-800 transition-colors">
              Get started
              <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
              </svg>
            </a>
          </div>
          <div class="mt-12 lg:mt-0">
            <div class="relative">
              <!-- Subtle background -->
              <div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>

              <!-- Timeline Schedule View -->
              <div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
                <!-- Header with current time -->
                <div class="px-4 py-3 bg-gray-50 border-b border-gray-100">
                  <div class="flex items-center justify-between">
                    <span class="text-gray-500 text-xs">Heartbeat Timeline</span>
                    <span class="text-gray-700 text-xs font-mono">Today, 14:32</span>
                  </div>
                </div>

                <!-- Timeline content -->
                <div class="p-4">
                  <div class="relative">
                    <!-- Vertical timeline line -->
                    <div class="absolute left-3 top-2 bottom-2 w-px bg-gray-200"></div>

                    <!-- Timeline items -->
                    <div class="space-y-4">
                      <!-- Item 1 - Recent -->
                      <div class="relative flex gap-4">
                        <div class="w-6 h-6 rounded-full bg-emerald-100 border-2 border-emerald-500 flex items-center justify-center z-10">
                          <div class="w-2 h-2 rounded-full bg-emerald-500"></div>
                        </div>
                        <div class="flex-1 pb-4">
                          <div class="flex items-center justify-between">
                            <span class="text-gray-800 text-sm font-medium">Temperature Sensor</span>
                            <span class="text-gray-400 text-xs">5s ago</span>
                          </div>
                          <div class="text-gray-500 text-xs mt-0.5">Heartbeat received · IoT Device</div>
                        </div>
                      </div>

                      <!-- Item 2 -->
                      <div class="relative flex gap-4">
                        <div class="w-6 h-6 rounded-full bg-emerald-100 border-2 border-emerald-500 flex items-center justify-center z-10">
                          <div class="w-2 h-2 rounded-full bg-emerald-500"></div>
                        </div>
                        <div class="flex-1 pb-4">
                          <div class="flex items-center justify-between">
                            <span class="text-gray-800 text-sm font-medium">Smart Gateway</span>
                            <span class="text-gray-400 text-xs">12s ago</span>
                          </div>
                          <div class="text-gray-500 text-xs mt-0.5">Heartbeat received · IoT Device</div>
                        </div>
                      </div>

                      <!-- Item 3 -->
                      <div class="relative flex gap-4">
                        <div class="w-6 h-6 rounded-full bg-emerald-100 border-2 border-emerald-500 flex items-center justify-center z-10">
                          <svg class="w-3 h-3 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 class="flex-1 pb-4">
                          <div class="flex items-center justify-between">
                            <span class="text-gray-800 text-sm font-medium">Daily Report</span>
                            <span class="text-gray-400 text-xs">2h ago</span>
                          </div>
                          <div class="text-gray-500 text-xs mt-0.5">Completed successfully · Cron</div>
                        </div>
                      </div>

                      <!-- Item 4 -->
                      <div class="relative flex gap-4">
                        <div class="w-6 h-6 rounded-full bg-emerald-100 border-2 border-emerald-500 flex items-center justify-center z-10">
                          <svg class="w-3 h-3 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 class="flex-1">
                          <div class="flex items-center justify-between">
                            <span class="text-gray-800 text-sm font-medium">Database Backup</span>
                            <span class="text-gray-400 text-xs">4h ago</span>
                          </div>
                          <div class="text-gray-500 text-xs mt-0.5">Completed · 2.4 GB backed up</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- Footer -->
                <div class="px-4 py-3 bg-gray-50 border-t border-gray-100">
                  <div class="flex items-center justify-between text-xs">
                    <div class="flex items-center gap-3">
                      <span class="text-gray-500">12 IoT</span>
                      <span class="text-gray-300">·</span>
                      <span class="text-gray-500">8 Cron</span>
                      <span class="text-gray-300">·</span>
                      <span class="text-gray-500">5 Backup</span>
                    </div>
                    <span class="text-emerald-600 font-medium">All healthy</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>


  <!-- More Features 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-2xl text-center mb-16">
        <div class="inline-flex items-center gap-2 rounded-full bg-blue-50 px-4 py-1.5 text-sm font-medium text-blue-700 ring-1 ring-inset ring-blue-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>
          More Features
        </div>
        <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
          Advanced features, built for you
        </h2>
        <p class="mt-6 text-lg leading-8 text-gray-600">
          Build custom workflows, integrate with anything you have, or more - you never run out of features. Batteries included.
        </p>
      </div>

      <!-- Feature Cards Grid -->
      <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
        <!-- Card 1: Reliability Guaranteed -->
        <div class="group relative h-full bg-white rounded-2xl p-8 shadow-sm ring-1 ring-gray-200/60 hover:shadow-lg hover:ring-gray-300 transition-all duration-300">
          <div class="relative h-full">
            <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-emerald-50 ring-1 ring-emerald-200 mb-6">
              <svg class="h-6 w-6 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
              </svg>
            </div>
            <h3 class="text-lg font-semibold text-gray-900 mb-3">Reliability Guaranteed</h3>
            <p class="text-gray-600 text-sm leading-relaxed">
              Hosted on a distributed high availability infrastructure across multiple clouds so your resources are always being monitored, even if a major cloud provider is down.
            </p>
            <!-- Decorative element -->
            <div class="mt-6 flex items-center gap-2">
              <div class="flex -space-x-1">
                <div class="h-6 w-6 rounded-full bg-blue-100 ring-2 ring-white flex items-center justify-center text-xs font-medium text-blue-600">A</div>
                <div class="h-6 w-6 rounded-full bg-amber-100 ring-2 ring-white flex items-center justify-center text-xs font-medium text-amber-600">G</div>
                <div class="h-6 w-6 rounded-full bg-cyan-100 ring-2 ring-white flex items-center justify-center text-xs font-medium text-cyan-600">Az</div>
              </div>
              <span class="text-xs text-gray-500">Multi-cloud</span>
            </div>
          </div>
        </div>

        <!-- Card 2: Integrations -->
        <div class="group relative h-full bg-white rounded-2xl p-8 shadow-sm ring-1 ring-gray-200/60 hover:shadow-lg hover:ring-gray-300 transition-all duration-300">
          <div class="relative h-full">
            <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-50 ring-1 ring-blue-200 mb-6">
              <svg class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z" />
              </svg>
            </div>
            <h3 class="text-lg font-semibold text-gray-900 mb-3">Integrations</h3>
            <p class="text-gray-600 text-sm leading-relaxed">
              Choose from 5000+ integrations. Your team can check the status of resources without leaving Slack. Build custom integrations with our API.
            </p>
            <!-- Decorative element -->
            <div class="mt-6 flex flex-wrap gap-2">
              <span class="inline-flex items-center px-2.5 py-1 rounded-md bg-gray-100 text-xs font-medium text-gray-600">Slack</span>
              <span class="inline-flex items-center px-2.5 py-1 rounded-md bg-gray-100 text-xs font-medium text-gray-600">Teams</span>
              <span class="inline-flex items-center px-2.5 py-1 rounded-md bg-gray-100 text-xs font-medium text-gray-600">PagerDuty</span>
              <span class="inline-flex items-center px-2.5 py-1 rounded-md bg-gray-100 text-xs font-medium text-gray-600">+5000</span>
            </div>
          </div>
        </div>

        <!-- Card 3: Workflows -->
        <div class="group relative h-full bg-white rounded-2xl p-8 shadow-sm ring-1 ring-gray-200/60 hover:shadow-lg hover:ring-gray-300 transition-all duration-300">
          <div class="relative h-full">
            <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-violet-50 ring-1 ring-violet-200 mb-6">
              <svg class="h-6 w-6 text-violet-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" />
              </svg>
            </div>
            <h3 class="text-lg font-semibold text-gray-900 mb-3">Workflows</h3>
            <p class="text-gray-600 text-sm leading-relaxed">
              Build complex workflows without code. Automate incident workflow, status page updates, and showcase reliability to different stakeholders.
            </p>
            <!-- Decorative element -->
            <div class="mt-6 flex items-center gap-2">
              <div class="flex items-center gap-1 text-xs text-gray-500">
                <span class="h-2 w-2 rounded-full bg-violet-500"></span>
                <span>Trigger</span>
                <svg class="h-4 w-4 text-gray-400" 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>
                <span class="h-2 w-2 rounded-full bg-purple-500"></span>
                <span>Action</span>
                <svg class="h-4 w-4 text-gray-400" 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>
                <span class="h-2 w-2 rounded-full bg-indigo-500"></span>
                <span>Notify</span>
              </div>
            </div>
          </div>
        </div>

        <!-- Card 4: Custom Criteria -->
        <div class="group relative h-full bg-white rounded-2xl p-8 shadow-sm ring-1 ring-gray-200/60 hover:shadow-lg hover:ring-gray-300 transition-all duration-300">
          <div class="relative h-full">
            <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-amber-50 ring-1 ring-amber-200 mb-6">
              <svg class="h-6 w-6 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
              </svg>
            </div>
            <h3 class="text-lg font-semibold text-gray-900 mb-3">Custom Criteria</h3>
            <p class="text-gray-600 text-sm leading-relaxed">
              Define custom criteria to monitor for - create an alert if the response time is delayed for 5 mins for example.
            </p>
            <!-- Decorative element -->
            <div class="mt-6 p-3 bg-gray-50 rounded-lg">
              <div class="flex items-center justify-between text-xs">
                <span class="text-gray-500">Response time</span>
                <span class="font-medium text-amber-600">&gt; 500ms</span>
              </div>
              <div class="mt-2 h-1.5 bg-gray-200 rounded-full overflow-hidden">
                <div class="h-full w-3/4 bg-amber-500 rounded-full"></div>
              </div>
            </div>
          </div>
        </div>

        <!-- Card 5: Scheduled Maintenance -->
        <div class="group relative h-full bg-white rounded-2xl p-8 shadow-sm ring-1 ring-gray-200/60 hover:shadow-lg hover:ring-gray-300 transition-all duration-300">
          <div class="relative h-full">
            <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-cyan-50 ring-1 ring-cyan-200 mb-6">
              <svg class="h-6 w-6 text-cyan-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
            </div>
            <h3 class="text-lg font-semibold text-gray-900 mb-3">Scheduled Maintenance</h3>
            <p class="text-gray-600 text-sm leading-relaxed">
              Post scheduled events related to your monitors. Keep your customers, team or other stakeholders updated.
            </p>
            <!-- Decorative element -->
            <div class="mt-6 space-y-2">
              <div class="flex items-center gap-2 text-xs">
                <div class="h-2 w-2 rounded-full bg-cyan-500"></div>
                <span class="text-gray-600">Dec 24, 2:00 AM - 4:00 AM</span>
              </div>
              <div class="flex items-center gap-2 text-xs">
                <div class="h-2 w-2 rounded-full bg-sky-400"></div>
                <span class="text-gray-600">Jan 1, 1:00 AM - 3:00 AM</span>
              </div>
            </div>
          </div>
        </div>

        <!-- Card 6: Announcements -->
        <div class="group relative h-full bg-white rounded-2xl p-8 shadow-sm ring-1 ring-gray-200/60 hover:shadow-lg hover:ring-gray-300 transition-all duration-300">
          <div class="relative h-full">
            <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-pink-50 ring-1 ring-pink-200 mb-6">
              <svg class="h-6 w-6 text-pink-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="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>
            </div>
            <h3 class="text-lg font-semibold text-gray-900 mb-3">Announcements</h3>
            <p class="text-gray-600 text-sm leading-relaxed">
              Post announcements related to your monitors. Keep your customers, team or other stakeholders updated.
            </p>
            <!-- Decorative element -->
            <div class="mt-6 p-3 bg-pink-50 rounded-lg border border-pink-100">
              <div class="flex items-start gap-2">
                <svg class="h-4 w-4 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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                <span class="text-xs text-gray-600">New feature: Custom dashboards now available!</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Team Notifications 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">
      <div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
        <!-- Content -->
        <div class="relative">
          <p class="text-sm font-medium text-blue-600 uppercase tracking-wide mb-3">Team Notifications</p>
          <h2 class="text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl">
            Alerts delivered where your team already works
          </h2>
          <p class="mt-4 text-lg text-gray-600 leading-relaxed">
            Get instant notifications in Slack and Microsoft Teams when issues are detected. No context switching required.
          </p>

          <!-- Integration cards -->
          <div class="mt-10 space-y-3">
            <!-- Slack -->
            <div class="flex items-center gap-4 p-4 rounded-xl bg-gray-50 border border-gray-100">
              <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-white shadow-sm ring-1 ring-gray-200">
                <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none">
                  <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.313z" fill="#E01E5A"/>
                  <path d="M8.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.312z" fill="#36C5F0"/>
                  <path d="M18.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.312z" fill="#2EB67D"/>
                  <path d="M15.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" fill="#ECB22E"/>
                </svg>
              </div>
              <div class="flex-1">
                <h3 class="text-sm font-semibold text-gray-900">Slack</h3>
                <p class="text-sm text-gray-500">Instant alerts with interactive actions</p>
              </div>
            </div>

            <!-- Microsoft Teams -->
            <div class="flex items-center gap-4 p-4 rounded-xl bg-gray-50 border border-gray-100">
              <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-white shadow-sm ring-1 ring-gray-200">
                <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none">
                  <path d="M20.16 7.8h-4.736c.103.317.159.654.159 1.005v7.029a3.588 3.588 0 01-3.583 3.583h-4.8v.777c0 .998.81 1.806 1.806 1.806h8.339l2.869 1.912a.452.452 0 00.703-.376V21.2h.646c.997 0 1.806-.809 1.806-1.806v-9.788A1.806 1.806 0 0020.16 7.8z" fill="#5059C9"/>
                  <circle cx="18.5" cy="4.5" r="2.5" fill="#5059C9"/>
                  <path d="M13.5 6H3.806A1.806 1.806 0 002 7.806v9.388c0 .997.81 1.806 1.806 1.806h2.611v3.336a.452.452 0 00.703.376L10.5 20h3a3.5 3.5 0 003.5-3.5v-7A3.5 3.5 0 0013.5 6z" fill="#7B83EB"/>
                  <circle cx="10" cy="3" r="3" fill="#7B83EB"/>
                  <path d="M6 11h6M6 14h4" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
                </svg>
              </div>
              <div class="flex-1">
                <h3 class="text-sm font-semibold text-gray-900">Microsoft Teams</h3>
                <p class="text-sm text-gray-500">Native adaptive cards integration</p>
              </div>
            </div>
          </div>

          <!-- Features list -->
          <div class="mt-8 grid grid-cols-2 gap-4">
            <div class="flex items-center gap-2 text-sm text-gray-600">
              <svg class="h-4 w-4 text-green-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 delivery
            </div>
            <div class="flex items-center gap-2 text-sm text-gray-600">
              <svg class="h-4 w-4 text-green-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 routing rules
            </div>
            <div class="flex items-center gap-2 text-sm text-gray-600">
              <svg class="h-4 w-4 text-green-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>
              Rich formatting
            </div>
            <div class="flex items-center gap-2 text-sm text-gray-600">
              <svg class="h-4 w-4 text-green-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>
              Action buttons
            </div>
          </div>
        </div>

        <!-- Illustration - Interactive Slack Notification -->
        <div class="mt-16 lg:mt-0">
          <div class="relative" id="slack-demo">
            <!-- Decorative background elements -->
            <div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>

            <!-- Slack Window -->
            <div class="relative bg-[#1a1d21] rounded-2xl shadow-2xl overflow-hidden max-w-md mx-auto ring-1 ring-white/10">
              <!-- Slack window header -->
              <div class="bg-[#0f1114] px-4 py-3 flex items-center justify-between border-b border-white/5">
                <div class="flex items-center gap-3">
                  <div class="flex gap-2">
                    <div class="w-3 h-3 rounded-full bg-[#ff5f57] shadow-sm shadow-red-500/50"></div>
                    <div class="w-3 h-3 rounded-full bg-[#febc2e] shadow-sm shadow-yellow-500/50"></div>
                    <div class="w-3 h-3 rounded-full bg-[#28c840] shadow-sm shadow-green-500/50"></div>
                  </div>
                </div>
                <div class="flex items-center gap-2 bg-[#1a1d21] px-3 py-1 rounded-md">
                  <svg class="w-4 h-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14"/>
                  </svg>
                  <span class="text-white text-sm font-semibold">incidents</span>
                  <svg class="w-4 h-4 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                  </svg>
                </div>
                <div class="flex items-center gap-2">
                  <div class="w-7 h-7 rounded-full bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center ring-2 ring-green-500 ring-offset-1 ring-offset-[#0f1114]">
                    <span class="text-white text-xs font-bold">S</span>
                  </div>
                </div>
              </div>

              <!-- Messages area -->
              <div class="bg-[#1a1d21] px-4 py-4" id="slack-messages">
                <!-- Original incident message -->
                <div class="group relative">
                  <div class="flex items-start gap-3">
                    <img src="/img/OneUptimePNG/1.png" alt="OneUptime" class="w-10 h-10 rounded-lg flex-shrink-0 shadow-lg" />
                    <div class="flex-1 min-w-0">
                      <div class="flex items-center gap-2">
                        <span class="font-bold text-white text-sm hover:underline cursor-pointer">OneUptime</span>
                        <span class="bg-[#4a3f7a] text-purple-200 text-[10px] px-1.5 py-0.5 rounded font-medium">APP</span>
                        <span class="text-gray-500 text-xs">12:34 PM</span>
                      </div>

                      <!-- Incident card -->
                      <div class="mt-3 bg-[#0f1114] rounded-lg overflow-hidden ring-1 ring-white/5">
                        <div class="h-1 bg-gradient-to-r from-red-500 to-orange-500"></div>
                        <div class="p-4">
                          <div class="flex items-start justify-between">
                            <div>
                              <div class="flex items-center gap-2">
                                <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-red-500/20 text-red-400 text-xs font-medium">
                                  <span class="w-1.5 h-1.5 rounded-full bg-red-400 animate-pulse"></span>
                                  Critical
                                </span>
                              </div>
                              <h4 class="text-white font-semibold mt-2">API Server is not responding</h4>
                              <p class="text-gray-400 text-sm mt-1">Response time exceeded 30s threshold</p>
                            </div>
                          </div>
                          <div class="flex items-center gap-4 mt-3 pt-3 border-t border-white/5">
                            <div class="flex items-center gap-1.5 text-xs text-gray-500">
                              <svg class="w-3.5 h-3.5" 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>
                              API Health Check
                            </div>
                            <div class="flex items-center gap-1.5 text-xs text-gray-500">
                              <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                              </svg>
                              Started 2m ago
                            </div>
                          </div>
                        </div>
                      </div>

                      <!-- Action buttons -->
                      <div class="mt-3 flex flex-wrap gap-2" id="slack-buttons">
                        <button onclick="slackAcknowledge()" id="btn-ack" class="inline-flex items-center gap-2 px-3 py-2 bg-[#007a5a] hover:bg-[#148567] rounded-md text-xs font-semibold text-white transition-all shadow-lg shadow-green-900/20">
                          <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                          </svg>
                          Acknowledge
                        </button>
                        <button onclick="slackExecuteOnCall()" id="btn-oncall" class="inline-flex items-center gap-2 px-3 py-2 bg-[#1264a3] hover:bg-[#1d74b8] rounded-md text-xs font-semibold text-white transition-all shadow-lg shadow-blue-900/20">
                          <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
                          </svg>
                          Execute On-Call
                        </button>
                        <button onclick="slackResolve()" id="btn-resolve" class="inline-flex items-center gap-2 px-3 py-2 bg-[#2e3136] hover:bg-[#3a3d42] border border-gray-600 rounded-md text-xs font-semibold text-white transition-all">
                          <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                          </svg>
                          Resolve
                        </button>
                      </div>

                      <!-- Reactions -->
                      <div class="mt-3 flex items-center gap-2" id="slack-reactions">
                        <div class="inline-flex items-center gap-1 px-2 py-1 bg-[#2e3136] rounded-full text-xs border border-gray-600 hover:border-gray-500 cursor-pointer transition-colors">
                          <span>👀</span>
                          <span class="text-gray-300">3</span>
                        </div>
                      </div>

                      <!-- Thread replies container -->
                      <div id="slack-thread" class="mt-4 space-y-3"></div>

                      <!-- Thread count indicator -->
                      <div id="thread-indicator" class="hidden mt-3 flex items-center gap-2 text-xs text-blue-400 hover:text-blue-300 cursor-pointer">
                        <div class="flex -space-x-1" id="thread-avatars"></div>
                        <span id="thread-count"></span>
                        <span class="text-gray-500">Last reply 1m ago</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- Message input -->
              <div class="bg-[#1a1d21] px-4 pb-4">
                <div class="bg-[#2e3136] rounded-lg px-4 py-3 flex items-center gap-3 ring-1 ring-white/5">
                  <svg class="w-5 h-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
                  </svg>
                  <span class="text-gray-500 text-sm">Message #incidents</span>
                  <div class="ml-auto flex items-center gap-2">
                    <svg class="w-5 h-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                    <svg class="w-5 h-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"/>
                    </svg>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <script>
        (function() {
          let ackClicked = false;
          let onCallClicked = false;
          let resolveClicked = false;
          let replyCount = 0;
          const avatars = [];

          function updateThreadIndicator() {
            const indicator = document.getElementById('thread-indicator');
            const countEl = document.getElementById('thread-count');
            const avatarsEl = document.getElementById('thread-avatars');

            if (replyCount > 0) {
              indicator.classList.remove('hidden');
              indicator.classList.add('flex');
              countEl.textContent = replyCount + (replyCount === 1 ? ' reply' : ' replies');
              avatarsEl.innerHTML = avatars.slice(-3).map(a =>
                a.isBot
                  ? `<img src="/img/OneUptimePNG/1.png" alt="O" class="w-5 h-5 rounded-full ring-2 ring-[#1a1d21]" />`
                  : `<div class="w-5 h-5 rounded-full ${a.bg} flex items-center justify-center ring-2 ring-[#1a1d21]">
                      <span class="text-white text-[8px] font-bold">${a.initial}</span>
                    </div>`
              ).join('');
            }
          }

          function addReaction(emoji) {
            const reactions = document.getElementById('slack-reactions');
            const newReaction = document.createElement('div');
            newReaction.className = 'inline-flex items-center gap-1 px-2 py-1 bg-blue-500/20 rounded-full text-xs border border-blue-500/50 cursor-pointer transition-colors animate-bounce-in';
            newReaction.innerHTML = `<span>${emoji}</span><span class="text-blue-300">1</span>`;
            newReaction.style.animation = 'bounceIn 0.3s ease-out';
            reactions.appendChild(newReaction);
          }

          function addThreadReply(avatar, name, time, message, isBot) {
            const thread = document.getElementById('slack-thread');
            const reply = document.createElement('div');
            reply.className = 'flex items-start gap-2.5 pl-3 border-l-2 border-blue-500/30';
            reply.style.animation = 'fadeSlideIn 0.3s ease-out';

            const avatarClass = avatar;
            const initial = name.charAt(0);

            if (!isBot) {
              avatars.push({ bg: `bg-gradient-to-br ${avatar}`, initial: name.charAt(0) });
            } else {
              avatars.push({ bg: '', initial: 'O', isBot: true });
            }
            replyCount++;
            updateThreadIndicator();

            const avatarHtml = isBot
              ? `<img src="/img/OneUptimePNG/1.png" alt="OneUptime" class="w-8 h-8 rounded-lg flex-shrink-0 shadow-md" />`
              : `<div class="w-8 h-8 rounded-lg bg-gradient-to-br ${avatarClass} flex items-center justify-center flex-shrink-0 shadow-md"><span class="text-white text-xs font-bold">${initial}</span></div>`;

            reply.innerHTML = `
              ${avatarHtml}
              <div class="flex-1 bg-[#0f1114] rounded-lg p-3 ring-1 ring-white/5">
                <div class="flex items-center gap-2">
                  <span class="font-semibold text-white text-sm">${name}</span>
                  ${isBot ? '<span class="bg-[#4a3f7a] text-purple-200 text-[9px] px-1 py-0.5 rounded font-medium">APP</span>' : ''}
                  <span class="text-gray-500 text-[11px]">${time}</span>
                </div>
                <p class="text-gray-300 text-sm mt-1 leading-relaxed">${message}</p>
              </div>
            `;
            thread.appendChild(reply);
          }

          window.slackAcknowledge = function() {
            if (ackClicked) return;
            ackClicked = true;

            const btn = document.getElementById('btn-ack');
            btn.disabled = true;
            btn.classList.add('opacity-70');
            btn.innerHTML = '<svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg><span>Acknowledging...</span>';

            setTimeout(() => {
              btn.innerHTML = '<svg class="w-4 h-4" 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>Acknowledged</span>';
              btn.classList.remove('bg-[#007a5a]', 'hover:bg-[#148567]', 'shadow-green-900/20');
              btn.classList.add('bg-[#2e3136]', 'border', 'border-green-500/50', 'text-green-400');

              addReaction('👍');
              addThreadReply('from-blue-400 to-blue-600', 'Sarah Chen', '12:35 PM', 'Acknowledged! Looking into this now. Checking the API gateway logs.', false);

              setTimeout(() => {
                addThreadReply('from-green-400 to-green-600', 'OneUptime', '12:35 PM', '✅ Incident acknowledged by <strong class="text-white">Sarah Chen</strong>', true);
              }, 1000);
            }, 800);
          };

          window.slackExecuteOnCall = function() {
            if (onCallClicked) return;
            onCallClicked = true;

            const btn = document.getElementById('btn-oncall');
            btn.disabled = true;
            btn.classList.add('opacity-70');
            btn.innerHTML = '<svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg><span>Paging...</span>';

            setTimeout(() => {
              btn.innerHTML = '<svg class="w-4 h-4" 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>Team Paged</span>';
              btn.classList.remove('bg-[#1264a3]', 'hover:bg-[#1d74b8]', 'shadow-blue-900/20');
              btn.classList.add('bg-[#2e3136]', 'border', 'border-blue-500/50', 'text-blue-400');

              addReaction('🚨');
              addThreadReply('from-green-400 to-green-600', 'OneUptime', '12:36 PM', '📟 On-call policy <strong class="text-white">"Engineering Team"</strong> executed<br/><span class="text-gray-400">→ Notifying: Mike Johnson (primary), Sarah Chen (secondary)</span>', true);
            }, 800);
          };

          window.slackResolve = function() {
            if (resolveClicked) return;
            resolveClicked = true;

            const btn = document.getElementById('btn-resolve');
            btn.disabled = true;
            btn.classList.add('opacity-70');
            btn.innerHTML = '<svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg><span>Resolving...</span>';

            setTimeout(() => {
              btn.innerHTML = '<svg class="w-4 h-4" 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>Resolved</span>';
              btn.classList.remove('bg-[#2e3136]', 'border-gray-600', 'hover:bg-[#3a3d42]');
              btn.classList.add('bg-green-600/20', 'border', 'border-green-500/50', 'text-green-400');

              addReaction('🎉');
              addThreadReply('from-purple-400 to-purple-600', 'Mike Johnson', '12:41 PM', 'Found it! Connection pool was exhausted due to a leaked connection in the auth service. Deployed hotfix v2.3.1 🚀', false);

              setTimeout(() => {
                addThreadReply('from-green-400 to-green-600', 'OneUptime', '12:42 PM', '🎉 Incident resolved by <strong class="text-white">Mike Johnson</strong><br/><span class="text-gray-400">Total downtime: 8 minutes • MTTR: 8m</span>', true);
              }, 1000);
            }, 800);
          };
        })();
        </script>

        <style>
          @keyframes fadeSlideIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
          }
          @keyframes bounceIn {
            0% { opacity: 0; transform: scale(0.8); }
            50% { transform: scale(1.1); }
            100% { opacity: 1; transform: scale(1); }
          }
        </style>
      </div>
    </div>
  </div>

      <%- include('./Partials/enterprise-ready') -%>
      <%- include('features-table') -%>
      <%- include('cta') -%>
      </main>
      <%- include('footer') -%>
      <%- include('./Partials/video-script') -%>

<script>
// Grid glow effect that follows cursor
(function() {
    const heroSection = document.getElementById('monitoring-hero-section');
    const gridGlowEffect = document.getElementById('monitoring-grid-glow');

    if (!heroSection || !gridGlowEffect) return;

    let isHovering = false;
    let animationFrame = null;
    let currentX = 0;
    let currentY = 0;
    let targetX = 0;
    let targetY = 0;

    function lerp(start, end, factor) {
        return start + (end - start) * factor;
    }

    function animate() {
        if (!isHovering) return;

        currentX = lerp(currentX, targetX, 0.12);
        currentY = lerp(currentY, targetY, 0.12);

        gridGlowEffect.style.setProperty('--mouse-x', currentX + 'px');
        gridGlowEffect.style.setProperty('--mouse-y', currentY + 'px');

        animationFrame = requestAnimationFrame(animate);
    }

    heroSection.addEventListener('mouseenter', function() {
        isHovering = true;
        gridGlowEffect.style.opacity = '1';
        animate();
    });

    heroSection.addEventListener('mousemove', function(e) {
        const rect = heroSection.getBoundingClientRect();
        targetX = e.clientX - rect.left;
        targetY = e.clientY - rect.top;

        if (!isHovering) {
            currentX = targetX;
            currentY = targetY;
        }
    });

    heroSection.addEventListener('mouseleave', function() {
        isHovering = false;
        gridGlowEffect.style.opacity = '0';
        if (animationFrame) {
            cancelAnimationFrame(animationFrame);
            animationFrame = null;
        }
    });
})();
</script>

</body>

</html>