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

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

<head>
    <title>OneUptime | Incident Management and Response. </title>
    <meta name="description"
        content="Streamline incident response with timelines, collaboration, and postmortems. Integrates with Slack, Teams, and PagerDuty. Open source incident management platform.">
        <%- 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="incident-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 - rose color -->
    <div id="incident-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(244, 63, 94, 0.3) 1px, transparent 1px), linear-gradient(to bottom, rgba(244, 63, 94, 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-rose-600 mb-4">Resolve incidents faster with AI-powered insights</p>

          <h1 class="text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl lg:text-6xl">
            Resolve incidents faster
          </h1>
          <p class="mt-6 text-lg leading-8 text-gray-600 max-w-2xl mx-auto">
            Keep stakeholders throughout the business informed in real-time, empowering the entire company to collaborate and respond proactively.
          </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>Instant alerts</span>
            <span class="hidden sm:inline text-gray-300">|</span>
            <span>Custom severity levels</span>
            <span class="hidden sm:inline text-gray-300">|</span>
            <span>Postmortem reports</span>
            <span class="hidden sm:inline text-gray-300">|</span>
            <span>Team collaboration</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/incidents.png" alt="OneUptime incident management 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-rose-600 uppercase tracking-wide mb-3">How It Works</p>
        <h2 class="text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl">
          From alert to resolution in minutes
        </h2>
        <p class="mt-4 text-lg text-gray-600">
          Our streamlined incident management process helps you respond faster and resolve issues before they impact your customers.
        </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-rose-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-rose-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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 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-rose-600 ring-2 ring-rose-600">1</span>
            </div>
            <h3 class="text-base font-semibold text-gray-900 mb-2">Detect</h3>
            <p class="text-sm text-gray-600 leading-relaxed">Automatic detection from monitors or manual creation via API.</p>
          </div>

          <!-- Step 2 -->
          <div class="text-center">
            <div class="relative inline-flex items-center justify-center h-16 w-16 rounded-full bg-rose-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-rose-600 ring-2 ring-rose-600">2</span>
            </div>
            <h3 class="text-base font-semibold text-gray-900 mb-2">Alert</h3>
            <p class="text-sm text-gray-600 leading-relaxed">Instantly notify on-call teams via their preferred channels.</p>
          </div>

          <!-- Step 3 -->
          <div class="text-center">
            <div class="relative inline-flex items-center justify-center h-16 w-16 rounded-full bg-rose-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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
              </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-rose-600 ring-2 ring-rose-600">3</span>
            </div>
            <h3 class="text-base font-semibold text-gray-900 mb-2">Respond</h3>
            <p class="text-sm text-gray-600 leading-relaxed">Acknowledge, investigate, and collaborate in real-time.</p>
          </div>

          <!-- Step 4 -->
          <div class="text-center">
            <div class="relative inline-flex items-center justify-center h-16 w-16 rounded-full bg-rose-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-rose-600 ring-2 ring-rose-600">4</span>
            </div>
            <h3 class="text-base font-semibold text-gray-900 mb-2">Resolve</h3>
            <p class="text-sm text-gray-600 leading-relaxed">Close the incident and document learnings in postmortems.</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-rose-50 px-4 py-1.5 text-sm font-medium text-rose-700 ring-1 ring-inset ring-rose-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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
          </svg>
          Why OneUptime
        </div>
        <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl lg:text-5xl">
          An unbeatable incident management built for you
        </h2>
        <p class="mt-6 text-lg leading-8 text-gray-600">
          Our real-time operations platform ensures less downtime and fewer outages, meaning happier customers and more productive teams.
        </p>
      </div>

      <!-- Feature Blocks -->
      <div class="space-y-24 lg:space-y-32">
        <!-- Feature 1: Incident Created Instantly -->
        <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-rose-50 ring-1 ring-rose-200">
                <svg class="h-5 w-5 text-rose-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-rose-600 uppercase tracking-wide">Instant Detection</span>
            </div>
            <h3 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4">Incidents Created Instantly</h3>
            <p class="text-lg text-gray-600 mb-6">
              OneUptime's monitoring lets you know exactly what is wrong with your service, at the right time. Incidents are created instantly, alerting the right people.
            </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-rose-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-detect and create incidents
              </li>
              <li class="flex items-center gap-3 text-gray-600">
                <svg class="h-5 w-5 text-rose-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>
                Alert the right team members
              </li>
              <li class="flex items-center gap-3 text-gray-600">
                <svg class="h-5 w-5 text-rose-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>
                Save critical response time
              </li>
            </ul>
            <a href="/accounts/register" class="mt-6 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>

              <!-- Incident Alert Card -->
              <div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
                <!-- Header -->
                <div class="bg-red-50 px-4 py-3 border-b border-red-100">
                  <div class="flex items-center justify-between">
                    <div class="flex items-center gap-2">
                      <div class="w-2 h-2 rounded-full bg-red-500 animate-pulse"></div>
                      <span class="text-red-800 text-sm font-medium">New Incident Detected</span>
                    </div>
                    <span class="text-red-600 text-xs">Just now</span>
                  </div>
                </div>

                <!-- Content -->
                <div class="p-4">
                  <div class="flex items-center gap-2 mb-3">
                    <span class="px-2 py-0.5 bg-red-100 text-red-700 rounded text-xs font-medium">P1 - Critical</span>
                    <span class="px-2 py-0.5 bg-gray-100 text-gray-600 rounded text-xs">API</span>
                  </div>
                  <h4 class="text-gray-900 font-semibold mb-2">API Response Time Exceeded Threshold</h4>
                  <p class="text-gray-600 text-sm mb-4">Response time increased from 120ms to 3500ms in the last 2 minutes.</p>

                  <!-- Alert details -->
                  <div class="space-y-2">
                    <div class="flex items-center justify-between p-2 bg-gray-50 rounded">
                      <span class="text-gray-500 text-xs">Monitor</span>
                      <span class="text-gray-700 text-xs font-medium">api.example.com/health</span>
                    </div>
                    <div class="flex items-center justify-between p-2 bg-gray-50 rounded">
                      <span class="text-gray-500 text-xs">Triggered by</span>
                      <span class="text-gray-700 text-xs font-medium">Response Time &gt; 2000ms</span>
                    </div>
                  </div>
                </div>

                <!-- Footer with action -->
                <div class="px-4 py-3 bg-gray-50 border-t border-gray-100 flex items-center justify-between">
                  <div class="flex items-center gap-2">
                    <div class="w-6 h-6 rounded-full bg-rose-100 flex items-center justify-center">
                      <span class="text-xs font-medium text-rose-600">JD</span>
                    </div>
                    <span class="text-xs text-gray-500">Assigned to John Doe</span>
                  </div>
                  <span class="px-2 py-1 bg-red-600 text-white rounded text-xs font-medium">Acknowledge</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Feature 2: Custom Incident Severity -->
        <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>

              <!-- Severity Levels Card -->
              <div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
                <!-- Header -->
                <div class="bg-gray-50 px-4 py-3 border-b border-gray-100">
                  <div class="flex items-center justify-between">
                    <span class="text-gray-800 text-sm font-medium">Incident Severity Levels</span>
                    <span class="text-gray-400 text-xs">Customizable</span>
                  </div>
                </div>

                <!-- Severity list -->
                <div class="p-4 space-y-3">
                  <!-- P1 Critical -->
                  <div class="flex items-center justify-between p-3 bg-red-50 rounded-lg border border-red-100">
                    <div class="flex items-center gap-3">
                      <div class="w-3 h-3 rounded-full bg-red-500"></div>
                      <div>
                        <div class="text-gray-900 text-sm font-medium">P1 - Critical</div>
                        <div class="text-gray-500 text-xs">Service completely down</div>
                      </div>
                    </div>
                    <div class="text-right">
                      <div class="text-red-600 text-xs font-medium">5 min SLA</div>
                    </div>
                  </div>

                  <!-- P2 High -->
                  <div class="flex items-center justify-between p-3 bg-orange-50 rounded-lg border border-orange-100">
                    <div class="flex items-center gap-3">
                      <div class="w-3 h-3 rounded-full bg-orange-500"></div>
                      <div>
                        <div class="text-gray-900 text-sm font-medium">P2 - High</div>
                        <div class="text-gray-500 text-xs">Major functionality impaired</div>
                      </div>
                    </div>
                    <div class="text-right">
                      <div class="text-orange-600 text-xs font-medium">15 min SLA</div>
                    </div>
                  </div>

                  <!-- P3 Medium -->
                  <div class="flex items-center justify-between p-3 bg-amber-50 rounded-lg border border-amber-100">
                    <div class="flex items-center gap-3">
                      <div class="w-3 h-3 rounded-full bg-amber-500"></div>
                      <div>
                        <div class="text-gray-900 text-sm font-medium">P3 - Medium</div>
                        <div class="text-gray-500 text-xs">Degraded performance</div>
                      </div>
                    </div>
                    <div class="text-right">
                      <div class="text-amber-600 text-xs font-medium">1 hour SLA</div>
                    </div>
                  </div>

                  <!-- P4 Low -->
                  <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg border border-gray-200">
                    <div class="flex items-center gap-3">
                      <div class="w-3 h-3 rounded-full bg-gray-400"></div>
                      <div>
                        <div class="text-gray-900 text-sm font-medium">P4 - Low</div>
                        <div class="text-gray-500 text-xs">Minor issues</div>
                      </div>
                    </div>
                    <div class="text-right">
                      <div class="text-gray-500 text-xs font-medium">24 hour SLA</div>
                    </div>
                  </div>
                </div>

                <!-- Footer -->
                <div class="px-4 py-3 bg-gray-50 border-t border-gray-100 text-center">
                  <span class="text-gray-400 text-xs">+ Add custom severity level</span>
                </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-amber-50 ring-1 ring-amber-200">
                <svg class="h-5 w-5 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                </svg>
              </div>
              <span class="text-sm font-semibold text-amber-600 uppercase tracking-wide">Prioritization</span>
            </div>
            <h3 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4">Custom Incident Severity</h3>
            <p class="text-lg text-gray-600 mb-6">
              Customize incident severity for your project - have levels like P1, P2 and more. Severity helps you keep your team in the loop and prioritize response.
            </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-amber-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>
                Custom severity levels
              </li>
              <li class="flex items-center gap-3 text-gray-600">
                <svg class="h-5 w-5 text-amber-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>
                Priority-based escalation
              </li>
              <li class="flex items-center gap-3 text-gray-600">
                <svg class="h-5 w-5 text-amber-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>
                SLA-aware response
              </li>
            </ul>
            <a href="/accounts/register" class="mt-6 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: Custom Incident State -->
        <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-violet-50 ring-1 ring-violet-200">
                <svg class="h-5 w-5 text-violet-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-violet-600 uppercase tracking-wide">Workflow States</span>
            </div>
            <h3 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4">Custom Incident States</h3>
            <p class="text-lg text-gray-600 mb-6">
              Customize incident states for your project - have states like investigating, monitoring and more. States help you track progress throughout resolution.
            </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-violet-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>
                Custom state workflows
              </li>
              <li class="flex items-center gap-3 text-gray-600">
                <svg class="h-5 w-5 text-violet-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-update status pages
              </li>
              <li class="flex items-center gap-3 text-gray-600">
                <svg class="h-5 w-5 text-violet-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>
                Keep stakeholders informed
              </li>
            </ul>
            <a href="/accounts/register" class="mt-6 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>

              <!-- Incident State Flow Card -->
              <div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
                <!-- Header -->
                <div class="bg-violet-50 px-4 py-3 border-b border-violet-100">
                  <div class="flex items-center justify-between">
                    <span class="text-violet-800 text-sm font-medium">Incident State Flow</span>
                    <span class="px-2 py-0.5 bg-violet-100 text-violet-600 rounded text-xs">Customizable</span>
                  </div>
                </div>

                <!-- State flow -->
                <div class="p-4">
                  <div class="space-y-3">
                    <!-- Identified -->
                    <div class="flex items-center gap-3">
                      <div class="flex flex-col items-center">
                        <div class="w-8 h-8 rounded-full bg-red-100 flex items-center justify-center">
                          <div class="w-3 h-3 rounded-full bg-red-500"></div>
                        </div>
                        <div class="w-0.5 h-6 bg-gray-200"></div>
                      </div>
                      <div class="flex-1 p-3 bg-red-50 rounded-lg border border-red-100">
                        <div class="text-gray-900 text-sm font-medium">Identified</div>
                        <div class="text-gray-500 text-xs">Issue detected and confirmed</div>
                      </div>
                    </div>

                    <!-- Investigating -->
                    <div class="flex items-center gap-3">
                      <div class="flex flex-col items-center">
                        <div class="w-8 h-8 rounded-full bg-amber-100 flex items-center justify-center">
                          <div class="w-3 h-3 rounded-full bg-amber-500"></div>
                        </div>
                        <div class="w-0.5 h-6 bg-gray-200"></div>
                      </div>
                      <div class="flex-1 p-3 bg-amber-50 rounded-lg border border-amber-100">
                        <div class="text-gray-900 text-sm font-medium">Investigating</div>
                        <div class="text-gray-500 text-xs">Team is analyzing root cause</div>
                      </div>
                    </div>

                    <!-- Monitoring -->
                    <div class="flex items-center gap-3">
                      <div class="flex flex-col items-center">
                        <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center">
                          <div class="w-3 h-3 rounded-full bg-blue-500"></div>
                        </div>
                        <div class="w-0.5 h-6 bg-gray-200"></div>
                      </div>
                      <div class="flex-1 p-3 bg-blue-50 rounded-lg border border-blue-100">
                        <div class="text-gray-900 text-sm font-medium">Monitoring</div>
                        <div class="text-gray-500 text-xs">Fix deployed, verifying stability</div>
                      </div>
                    </div>

                    <!-- Resolved -->
                    <div class="flex items-center gap-3">
                      <div class="flex flex-col items-center">
                        <div class="w-8 h-8 rounded-full bg-emerald-100 flex items-center justify-center">
                          <div class="w-3 h-3 rounded-full bg-emerald-500"></div>
                        </div>
                      </div>
                      <div class="flex-1 p-3 bg-emerald-50 rounded-lg border border-emerald-100">
                        <div class="text-gray-900 text-sm font-medium">Resolved</div>
                        <div class="text-gray-500 text-xs">Incident fully resolved</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Feature 4: Postmortem Notes -->
        <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>

              <!-- Postmortem Report Card -->
              <div class="relative bg-white rounded-xl shadow-lg overflow-hidden max-w-md mx-auto border border-gray-200">
                <!-- Header -->
                <div class="bg-cyan-50 px-4 py-3 border-b border-cyan-100">
                  <div class="flex items-center justify-between">
                    <div class="flex items-center gap-2">
                      <svg class="h-4 w-4 text-cyan-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                      </svg>
                      <span class="text-cyan-800 text-sm font-medium">Postmortem Report</span>
                    </div>
                    <span class="px-2 py-0.5 bg-emerald-100 text-emerald-600 rounded text-xs">Resolved</span>
                  </div>
                </div>

                <!-- Content -->
                <div class="p-4">
                  <h4 class="text-gray-900 font-semibold mb-2">API Latency Incident - Jan 5</h4>

                  <!-- Summary -->
                  <div class="mb-4">
                    <div class="text-gray-500 text-xs uppercase tracking-wide mb-1">Summary</div>
                    <p class="text-gray-600 text-sm">Database connection pool exhaustion caused 45-minute API degradation.</p>
                  </div>

                  <!-- Timeline -->
                  <div class="mb-4 p-3 bg-gray-50 rounded-lg">
                    <div class="flex justify-between text-xs mb-2">
                      <span class="text-gray-500">Duration</span>
                      <span class="text-gray-700 font-medium">45 minutes</span>
                    </div>
                    <div class="flex justify-between text-xs">
                      <span class="text-gray-500">Impact</span>
                      <span class="text-gray-700 font-medium">2,340 affected requests</span>
                    </div>
                  </div>

                  <!-- Root Cause -->
                  <div class="mb-4">
                    <div class="text-gray-500 text-xs uppercase tracking-wide mb-1">Root Cause</div>
                    <p class="text-gray-600 text-sm">Connection pool size was undersized for traffic spike.</p>
                  </div>

                  <!-- Action Items -->
                  <div>
                    <div class="text-gray-500 text-xs uppercase tracking-wide mb-2">Action Items</div>
                    <div class="space-y-2">
                      <div class="flex items-center gap-2">
                        <div class="w-4 h-4 rounded border-2 border-emerald-500 flex items-center justify-center">
                          <svg class="w-3 h-3 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/>
                          </svg>
                        </div>
                        <span class="text-gray-600 text-xs">Increase connection pool size</span>
                      </div>
                      <div class="flex items-center gap-2">
                        <div class="w-4 h-4 rounded border-2 border-emerald-500 flex items-center justify-center">
                          <svg class="w-3 h-3 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/>
                          </svg>
                        </div>
                        <span class="text-gray-600 text-xs">Add connection pool metrics</span>
                      </div>
                      <div class="flex items-center gap-2">
                        <div class="w-4 h-4 rounded border-2 border-gray-300"></div>
                        <span class="text-gray-600 text-xs">Set up auto-scaling for pool</span>
                      </div>
                    </div>
                  </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-cyan-50 ring-1 ring-cyan-200">
                <svg class="h-5 w-5 text-cyan-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
                </svg>
              </div>
              <span class="text-sm font-semibold text-cyan-600 uppercase tracking-wide">Documentation</span>
            </div>
            <h3 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4">Post Incident & Postmortem Notes</h3>
            <p class="text-lg text-gray-600 mb-6">
              Post notes directly on your status page and communicate with your team, customers and users. Always keep them in the loop and reduce support costs.
            </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-cyan-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>
                Public & private notes
              </li>
              <li class="flex items-center gap-3 text-gray-600">
                <svg class="h-5 w-5 text-cyan-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>
                Root cause analysis
              </li>
              <li class="flex items-center gap-3 text-gray-600">
                <svg class="h-5 w-5 text-cyan-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>
                Action item tracking
              </li>
            </ul>
            <a href="/accounts/register" class="mt-6 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>
      </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-orange-50 px-4 py-1.5 text-sm font-medium text-orange-700 ring-1 ring-inset ring-orange-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. When there's a major incident at a cloud provider, we never go down.
            </p>
            <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 update incidents without leaving Slack. Build custom integrations with our API.
            </p>
            <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">Jira</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 keep stakeholders updated.
            </p>
            <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-red-500"></span>
                <span>Alert</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-amber-500"></span>
                <span>Escalate</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-emerald-500"></span>
                <span>Resolve</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 create incidents - create an incident if the response time is delayed for 5 mins for example.
            </p>
            <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; 5 min</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: Instant Alerts -->
        <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-rose-50 ring-1 ring-rose-200 mb-6">
              <svg class="h-6 w-6 text-rose-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
              </svg>
            </div>
            <h3 class="text-lg font-semibold text-gray-900 mb-3">Instant Alerts</h3>
            <p class="text-gray-600 text-sm leading-relaxed">
              Alert anyone across the company via email, SMS, Slack notification, phone call or more.
            </p>
            <div class="mt-6 flex flex-wrap gap-2">
              <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-md bg-rose-50 text-xs font-medium text-rose-600">
                <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                </svg>
                Email
              </span>
              <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-md bg-rose-50 text-xs font-medium text-rose-600">
                <svg class="h-3 w-3" 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>
                Phone
              </span>
              <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-md bg-rose-50 text-xs font-medium text-rose-600">
                SMS
              </span>
            </div>
          </div>
        </div>

        <!-- Card 6: On-Call Schedules -->
        <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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
              </svg>
            </div>
            <h3 class="text-lg font-semibold text-gray-900 mb-3">On-Call Schedules</h3>
            <p class="text-gray-600 text-sm leading-relaxed">
              Create on-call schedules, and escalation policies so your incidents are always responded to as fast as possible.
            </p>
            <div class="mt-6 space-y-2">
              <div class="flex items-center gap-2 text-xs">
                <div class="h-6 w-6 rounded-full bg-cyan-100 flex items-center justify-center text-cyan-600 font-medium">JD</div>
                <span class="text-gray-600">John (Mon-Wed)</span>
              </div>
              <div class="flex items-center gap-2 text-xs">
                <div class="h-6 w-6 rounded-full bg-sky-100 flex items-center justify-center text-sky-600 font-medium">SK</div>
                <span class="text-gray-600">Sarah (Thu-Sun)</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-rose-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 incident notifications in Slack and Microsoft Teams. Acknowledge, escalate, and resolve incidents without leaving your chat app.
          </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">Interactive incident actions in threads</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>
              Escalation paths
            </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>

        <!-- Slack Demo -->
        <div class="relative" id="incident-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-rose-400 to-rose-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">I</span>
                </div>
              </div>
            </div>

            <!-- Messages area -->
            <div class="bg-[#1a1d21] px-4 py-4" id="incident-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">2: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-rose-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>
                                P1 Critical
                              </span>
                            </div>
                            <h4 class="text-white font-semibold mt-2">Production API Server Down</h4>
                            <p class="text-gray-400 text-sm mt-1">All endpoints returning 500 errors</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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                            </svg>
                            API Health Monitor
                          </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 3m ago
                          </div>
                        </div>
                      </div>
                    </div>

                    <!-- Action buttons -->
                    <div class="mt-3 flex flex-wrap gap-2" id="incident-slack-buttons">
                      <button onclick="incidentAcknowledge()" id="incident-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="incidentEscalate()" id="incident-btn-escalate" 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="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/>
                        </svg>
                        Escalate
                      </button>
                      <button onclick="incidentResolve()" id="incident-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="incident-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="incident-slack-thread" class="mt-4 space-y-3"></div>

                    <!-- Thread count indicator -->
                    <div id="incident-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="incident-thread-avatars"></div>
                      <span id="incident-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 incidentAckClicked = false;
        let incidentEscalateClicked = false;
        let incidentResolveClicked = false;
        let incidentReplyCount = 0;
        const incidentAvatars = [];

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

          if (incidentReplyCount > 0) {
            indicator.classList.remove('hidden');
            indicator.classList.add('flex');
            countEl.textContent = incidentReplyCount + (incidentReplyCount === 1 ? ' reply' : ' replies');
            avatarsEl.innerHTML = incidentAvatars.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 addIncidentReaction(emoji) {
          const reactions = document.getElementById('incident-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 addIncidentThreadReply(avatar, name, time, message, isBot) {
          const thread = document.getElementById('incident-slack-thread');
          const reply = document.createElement('div');
          reply.className = 'flex items-start gap-2.5 pl-3 border-l-2 border-rose-500/30';
          reply.style.animation = 'fadeSlideIn 0.3s ease-out';

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

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

          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.incidentAcknowledge = function() {
          if (incidentAckClicked) return;
          incidentAckClicked = true;

          const btn = document.getElementById('incident-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');

            addIncidentReaction('👍');
            addIncidentThreadReply('from-rose-400 to-rose-600', 'Alex Rivera', '2:35 PM', 'Acknowledged! I\'m on it. Checking the API gateway logs now.', false);

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

        window.incidentEscalate = function() {
          if (incidentEscalateClicked) return;
          incidentEscalateClicked = true;

          const btn = document.getElementById('incident-btn-escalate');
          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>Escalating...</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>Escalated</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');

            addIncidentReaction('🚨');
            addIncidentThreadReply('from-green-400 to-green-600', 'OneUptime', '2:37 PM', '📟 Escalated to <strong class="text-white">Backend Team Lead</strong><br/><span class="text-gray-400">→ Notifying: Jordan Kim (Lead), Taylor Smith (SRE)</span>', true);
          }, 800);
        };

        window.incidentResolve = function() {
          if (incidentResolveClicked) return;
          incidentResolveClicked = true;

          const btn = document.getElementById('incident-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');

            addIncidentReaction('🎉');
            addIncidentThreadReply('from-blue-400 to-blue-600', 'Jordan Kim', '2:45 PM', 'Root cause identified: Database connection pool exhausted. Deployed fix and scaled up the pool size.', false);

            setTimeout(() => {
              addIncidentThreadReply('from-green-400 to-green-600', 'OneUptime', '2:45 PM', '🎉 Incident resolved by <strong class="text-white">Jordan Kim</strong><br/><span class="text-gray-400">Total downtime: 11 minutes • MTTR: 11m</span>', true);
            }, 1000);
          }, 800);
        };
      })();
      </script>
    </div>
  </div>

      <%- include('./Partials/enterprise-ready') -%>
      <%- include('features-table') -%>
      <%- include('cta') -%>
  </main>
      <%- include('footer') -%>
      <%- include('./Partials/video-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>

  <script>
    // Grid glow effect for incident management hero section
    (function() {
      const heroSection = document.getElementById('incident-hero-section');
      const gridGlow = document.getElementById('incident-grid-glow');

      if (heroSection && gridGlow) {
        heroSection.addEventListener('mousemove', (e) => {
          const rect = heroSection.getBoundingClientRect();
          const x = ((e.clientX - rect.left) / rect.width) * 100;
          const y = ((e.clientY - rect.top) / rect.height) * 100;

          gridGlow.style.setProperty('--mouse-x', x + '%');
          gridGlow.style.setProperty('--mouse-y', y + '%');
          gridGlow.style.opacity = '1';
        });

        heroSection.addEventListener('mouseleave', () => {
          gridGlow.style.opacity = '0';
        });
      }
    })();
  </script>

</body>

</html>