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

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

<head>
  <title>OneUptime | Unlimited Public or Private Status Page. </title>
  <meta name="description"
    content="OneUptime monitors websites, APIs, and servers and alerts your team if something goes wrong. It also keeps your customers updated about any downtime.">
  <%- include('head', {
    enableGoogleTagManager: typeof enableGoogleTagManager !== 'undefined' ? enableGoogleTagManager : false
}) -%>
</head>

<body>
  <%- include('nav') -%>
    <main id="main-content">
    <div class="">


      

      <!-- Hero Section -->
      <div class="relative isolate overflow-hidden bg-white" id="status-page-hero-section">
        <!-- Subtle grid pattern background -->
        <div class="absolute inset-0 -z-10 h-full w-full bg-white bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_110%)]"></div>

        <!-- Grid glow effect that follows cursor - emerald color -->
        <div id="status-page-grid-glow" class="absolute inset-0 -z-9 pointer-events-none" style="opacity: 0; transition: opacity 0.3s ease-out; background: linear-gradient(to right, rgba(16, 185, 129, 0.3) 1px, transparent 1px), linear-gradient(to bottom, rgba(16, 185, 129, 0.3) 1px, transparent 1px); background-size: 4rem 4rem; -webkit-mask-image: radial-gradient(circle 250px at var(--mouse-x, 50%) var(--mouse-y, 50%), black 0%, transparent 100%); mask-image: radial-gradient(circle 250px at var(--mouse-x, 50%) var(--mouse-y, 50%), black 0%, transparent 100%);"></div>

        <div class="py-20 sm:py-28 lg:py-32">
          <div class="mx-auto max-w-7xl px-6 lg:px-8">
            <div class="mx-auto max-w-3xl text-center">
              <!-- Minimal badge -->
              <p class="text-sm font-medium text-emerald-600 mb-4">Trusted by 1000+ companies worldwide</p>

              <h1 class="text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl lg:text-6xl">
                Communicate incidents beautifully
              </h1>
              <p class="mt-6 text-lg leading-8 text-gray-600 max-w-2xl mx-auto">
                Build stunning status pages that keep your customers informed. Showcase your reliability, communicate transparently, and turn incidents into trust-building moments.
              </p>

              <div class="mt-10 flex items-center justify-center gap-x-6">
                <a href="/accounts/register"
                  class="rounded-lg bg-gray-900 px-5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-800 transition-colors">
                  Get started
                </a>
                <a href="/enterprise/demo" class="text-sm font-semibold text-gray-900 hover:text-gray-600 transition-colors">
                  Request demo <span aria-hidden="true">&rarr;</span>
                </a>
              </div>

              <!-- Subtle feature list -->
              <div class="mt-12 flex flex-wrap items-center justify-center gap-x-8 gap-y-3 text-sm text-gray-500">
                <span>Unlimited status pages</span>
                <span class="hidden sm:inline text-gray-300">|</span>
                <span>Custom branding</span>
                <span class="hidden sm:inline text-gray-300">|</span>
                <span>Free SSL certificates</span>
                <span class="hidden sm:inline text-gray-300">|</span>
                <span>99.99% uptime SLA</span>
              </div>
            </div>

            <!-- Clean hero image -->
            <div class="mt-16 sm:mt-20">
              <div class="relative mx-auto max-w-5xl">
                <div class="relative rounded-xl bg-gray-900/5 p-1.5 ring-1 ring-gray-900/10">
                  <img src="/img/status-pages.png" alt="OneUptime status page" width="2432" height="1442"
                    class="rounded-lg shadow-lg">
                  <%- include('./Partials/watch-demo.ejs', {videoId: "F6BNipy5VCk" }) -%>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    <%- include('logo-roll') -%>

    <!-- How It Works Section -->
    <div class="relative bg-gray-50 py-24 sm:py-32">
      <div class="mx-auto max-w-7xl px-6 lg:px-8">
        <div class="mx-auto max-w-2xl text-center mb-16">
          <p class="text-sm font-medium text-emerald-600 uppercase tracking-wide mb-3">How It Works</p>
          <h2 class="text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl">
            Launch your status page in minutes
          </h2>
          <p class="mt-4 text-lg text-gray-600">
            Get your branded status page up and running in four simple steps. No coding required.
          </p>
        </div>

        <div class="mx-auto max-w-5xl">
          <!-- Connecting line for desktop -->
          <div class="hidden lg:block relative">
            <div class="absolute top-8 left-[calc(12.5%+24px)] right-[calc(12.5%+24px)] h-px bg-emerald-200"></div>
          </div>

          <div class="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-4">
            <!-- Step 1 -->
            <div class="text-center">
              <div class="relative inline-flex items-center justify-center h-16 w-16 rounded-full bg-emerald-600 text-white mb-6 shadow-sm">
                <svg class="h-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-emerald-600 ring-2 ring-emerald-600">1</span>
              </div>
              <h3 class="text-base font-semibold text-gray-900 mb-2">Create Page</h3>
              <p class="text-sm text-gray-600 leading-relaxed">Set up your branded status page with custom domain and styling.</p>
            </div>

            <!-- Step 2 -->
            <div class="text-center">
              <div class="relative inline-flex items-center justify-center h-16 w-16 rounded-full bg-emerald-600 text-white mb-6 shadow-sm">
                <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
                </svg>
                <span class="absolute -bottom-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full bg-white text-xs font-semibold text-emerald-600 ring-2 ring-emerald-600">2</span>
              </div>
              <h3 class="text-base font-semibold text-gray-900 mb-2">Add Resources</h3>
              <p class="text-sm text-gray-600 leading-relaxed">Add services, APIs, and components you want to display.</p>
            </div>

            <!-- Step 3 -->
            <div class="text-center">
              <div class="relative inline-flex items-center justify-center h-16 w-16 rounded-full bg-emerald-600 text-white mb-6 shadow-sm">
                <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
                </svg>
                <span class="absolute -bottom-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full bg-white text-xs font-semibold text-emerald-600 ring-2 ring-emerald-600">3</span>
              </div>
              <h3 class="text-base font-semibold text-gray-900 mb-2">Connect Monitors</h3>
              <p class="text-sm text-gray-600 leading-relaxed">Link monitors for automatic status updates in real-time.</p>
            </div>

            <!-- Step 4 -->
            <div class="text-center">
              <div class="relative inline-flex items-center justify-center h-16 w-16 rounded-full bg-emerald-600 text-white mb-6 shadow-sm">
                <svg class="h-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-emerald-600 ring-2 ring-emerald-600">4</span>
              </div>
              <h3 class="text-base font-semibold text-gray-900 mb-2">Go Live</h3>
              <p class="text-sm text-gray-600 leading-relaxed">Publish and start building trust with your customers.</p>
            </div>
          </div>
        </div>
      </div>
    </div>

      <!-- Why OneUptime Section -->
      <div class="relative overflow-hidden bg-white py-24 sm:py-32">

        <div class="mx-auto max-w-7xl px-6 lg:px-8">
          <!-- Section Header -->
          <div class="mx-auto max-w-2xl text-center mb-20">
            <div class="inline-flex items-center gap-2 rounded-full bg-emerald-50 px-4 py-1.5 text-sm font-medium text-emerald-700 ring-1 ring-inset ring-emerald-600/20 mb-6">
              <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
              </svg>
              Why OneUptime
            </div>
            <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl lg:text-5xl">
              The status page platform built for modern teams
            </h2>
            <p class="mt-6 text-lg leading-8 text-gray-600">
              Everything you need to keep your customers informed. Unlimited pages, unlimited subscribers, complete customization, and powerful incident communication tools.
            </p>
          </div>

          <!-- Feature 1: Unlimited Status Pages -->
          <div class="relative mb-24 lg:mb-32">
            <div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
              <div class="relative z-10">
                <div class="flex items-center gap-4 mb-6">
                  <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-emerald-50 ring-1 ring-emerald-200">
                    <svg class="h-5 w-5 text-emerald-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                  </div>
                  <span class="text-sm font-semibold text-emerald-600 uppercase tracking-wide">Unlimited Pages</span>
                </div>
                <h3 class="text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl">
                  Unlimited Public & Private Status Pages
                </h3>
                <p class="mt-4 text-lg text-gray-600 leading-relaxed">
                  Create as many status pages as you need - one for each product, team, or customer segment. Show exactly the right information to the right audience with public or private pages.
                </p>

                <!-- Feature bullets -->
                <ul class="mt-8 space-y-4">
                  <li class="flex items-start gap-3">
                    <div class="flex-shrink-0 h-6 w-6 rounded-full bg-emerald-100 flex items-center justify-center mt-0.5">
                      <svg class="h-4 w-4 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                      </svg>
                    </div>
                    <span class="text-gray-600">No limits on the number of status pages</span>
                  </li>
                  <li class="flex items-start gap-3">
                    <div class="flex-shrink-0 h-6 w-6 rounded-full bg-emerald-100 flex items-center justify-center mt-0.5">
                      <svg class="h-4 w-4 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                      </svg>
                    </div>
                    <span class="text-gray-600">Password-protected private pages for internal teams</span>
                  </li>
                  <li class="flex items-start gap-3">
                    <div class="flex-shrink-0 h-6 w-6 rounded-full bg-emerald-100 flex items-center justify-center mt-0.5">
                      <svg class="h-4 w-4 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                      </svg>
                    </div>
                    <span class="text-gray-600">Group resources by service, region, or team</span>
                  </li>
                </ul>

                <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>

              <!-- Custom Visual -->
              <div class="mt-12 lg:mt-0 relative">
                <div class="relative">
                  <!-- Subtle background -->
                  <div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>

                  <!-- Status Page Grid -->
                  <div class="relative max-w-md mx-auto">
                    <div class="grid grid-cols-2 gap-3">
                      <!-- Public Status Page -->
                      <div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm">
                        <div class="flex items-center gap-2 mb-3">
                          <div class="w-2 h-2 rounded-full bg-emerald-500"></div>
                          <span class="text-xs font-medium text-gray-500">PUBLIC</span>
                        </div>
                        <div class="text-gray-800 text-sm font-medium mb-1">API Services</div>
                        <div class="text-gray-400 text-xs">status.api.com</div>
                        <div class="mt-3 flex items-center gap-1">
                          <div class="h-1.5 w-3 rounded-full bg-emerald-500"></div>
                          <div class="h-1.5 w-3 rounded-full bg-emerald-500"></div>
                          <div class="h-1.5 w-3 rounded-full bg-emerald-500"></div>
                          <div class="h-1.5 w-3 rounded-full bg-emerald-500"></div>
                          <div class="h-1.5 w-3 rounded-full bg-emerald-500"></div>
                        </div>
                      </div>

                      <!-- Private Status Page -->
                      <div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm">
                        <div class="flex items-center gap-2 mb-3">
                          <svg class="w-3 h-3 text-gray-400" 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>
                          <span class="text-xs font-medium text-gray-500">PRIVATE</span>
                        </div>
                        <div class="text-gray-800 text-sm font-medium mb-1">Internal Tools</div>
                        <div class="text-gray-400 text-xs">internal.ops.com</div>
                        <div class="mt-3 flex items-center gap-1">
                          <div class="h-1.5 w-3 rounded-full bg-emerald-500"></div>
                          <div class="h-1.5 w-3 rounded-full bg-emerald-500"></div>
                          <div class="h-1.5 w-3 rounded-full bg-amber-500"></div>
                          <div class="h-1.5 w-3 rounded-full bg-emerald-500"></div>
                          <div class="h-1.5 w-3 rounded-full bg-emerald-500"></div>
                        </div>
                      </div>

                      <!-- Customer Status Page -->
                      <div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm">
                        <div class="flex items-center gap-2 mb-3">
                          <div class="w-2 h-2 rounded-full bg-emerald-500"></div>
                          <span class="text-xs font-medium text-gray-500">PUBLIC</span>
                        </div>
                        <div class="text-gray-800 text-sm font-medium mb-1">Platform Status</div>
                        <div class="text-gray-400 text-xs">status.yourapp.io</div>
                        <div class="mt-3 flex items-center gap-1">
                          <div class="h-1.5 w-3 rounded-full bg-emerald-500"></div>
                          <div class="h-1.5 w-3 rounded-full bg-emerald-500"></div>
                          <div class="h-1.5 w-3 rounded-full bg-emerald-500"></div>
                          <div class="h-1.5 w-3 rounded-full bg-emerald-500"></div>
                          <div class="h-1.5 w-3 rounded-full bg-emerald-500"></div>
                        </div>
                      </div>

                      <!-- Enterprise Status Page -->
                      <div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm">
                        <div class="flex items-center gap-2 mb-3">
                          <svg class="w-3 h-3 text-gray-400" 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>
                          <span class="text-xs font-medium text-gray-500">PRIVATE</span>
                        </div>
                        <div class="text-gray-800 text-sm font-medium mb-1">Enterprise Ops</div>
                        <div class="text-gray-400 text-xs">ops.enterprise.net</div>
                        <div class="mt-3 flex items-center gap-1">
                          <div class="h-1.5 w-3 rounded-full bg-emerald-500"></div>
                          <div class="h-1.5 w-3 rounded-full bg-emerald-500"></div>
                          <div class="h-1.5 w-3 rounded-full bg-emerald-500"></div>
                          <div class="h-1.5 w-3 rounded-full bg-emerald-500"></div>
                          <div class="h-1.5 w-3 rounded-full bg-emerald-500"></div>
                        </div>
                      </div>
                    </div>

                    <!-- Footer label -->
                    <div class="mt-4 text-center text-xs text-gray-400">
                      + Unlimited status pages, custom domains & more
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- Feature 2: Unlimited Subscribers -->
          <div class="relative mb-24 lg:mb-32">
            <div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
              <!-- Custom Visual (left on desktop) -->
              <div class="order-2 lg:order-1 mt-12 lg:mt-0 relative">
                <div class="relative">
                  <!-- Subtle background -->
                  <div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>

                  <!-- Subscriber Notifications 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-blue-100 flex items-center justify-center">
                            <svg class="w-4 h-4 text-blue-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>
                          <div>
                            <div class="text-gray-800 text-sm font-medium">Notifications Sent</div>
                            <div class="text-gray-400 text-xs">Last 24 hours</div>
                          </div>
                        </div>
                        <span class="px-2 py-1 bg-emerald-50 rounded text-xs text-emerald-600 font-medium">12,847</span>
                      </div>

                      <!-- Notification channels -->
                      <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">
                            <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="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>
                            <span class="text-gray-700 text-sm">Email</span>
                          </div>
                          <span class="text-gray-500 text-xs">8,234 sent</span>
                        </div>

                        <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                          <div class="flex items-center gap-2">
                            <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="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/>
                            </svg>
                            <span class="text-gray-700 text-sm">SMS</span>
                          </div>
                          <span class="text-gray-500 text-xs">2,156 sent</span>
                        </div>

                        <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                          <div class="flex items-center gap-2">
                            <svg class="w-4 h-4 text-[#4A154B]" viewBox="0 0 24 24" fill="currentColor">
                              <path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313z"/>
                            </svg>
                            <span class="text-gray-700 text-sm">Slack</span>
                          </div>
                          <span class="text-gray-500 text-xs">1,892 sent</span>
                        </div>

                        <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                          <div class="flex items-center gap-2">
                            <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="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/>
                            </svg>
                            <span class="text-gray-700 text-sm">Webhooks</span>
                          </div>
                          <span class="text-gray-500 text-xs">565 sent</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>Total subscribers: 45,230</span>
                        <span class="text-emerald-500">100% delivered</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="order-1 lg:order-2 relative z-10">
                <div class="flex items-center gap-4 mb-6">
                  <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-emerald-50 ring-1 ring-emerald-200">
                    <svg class="h-5 w-5 text-emerald-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" />
                    </svg>
                  </div>
                  <span class="text-sm font-semibold text-emerald-600 uppercase tracking-wide">Unlimited Subscribers</span>
                </div>
                <h3 class="text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl">
                  Unlimited Subscribers, Zero Extra Cost
                </h3>
                <p class="mt-4 text-lg text-gray-600 leading-relaxed">
                  Never worry about subscriber limits. Your entire organization can stay informed without per-seat charges. Reach everyone through their preferred channel.
                </p>

                <!-- Channel badges -->
                <div class="mt-8 flex flex-wrap gap-3">
                  <div class="inline-flex items-center gap-2 rounded-full bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700">
                    <svg class="h-4 w-4 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                    </svg>
                    Email
                  </div>
                  <div class="inline-flex items-center gap-2 rounded-full bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700">
                    <svg class="h-4 w-4 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" />
                    </svg>
                    SMS
                  </div>
                  <div class="inline-flex items-center gap-2 rounded-full bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700">
                    <svg class="h-4 w-4 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
                    </svg>
                    Webhooks
                  </div>
                  <div class="inline-flex items-center gap-2 rounded-full bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700">
                    <svg class="h-4 w-4 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 5c7.18 0 13 5.82 13 13M6 11a7 7 0 017 7m-6 0a1 1 0 11-2 0 1 1 0 012 0z" />
                    </svg>
                    RSS
                  </div>
                  <div class="inline-flex items-center gap-2 rounded-full bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700">
                    <svg class="h-4 w-4 text-gray-500" viewBox="0 0 24 24" fill="currentColor">
                      <path d="M22.46 6c-.85.38-1.78.64-2.75.76 1-.6 1.76-1.55 2.12-2.68-.93.55-1.96.95-3.06 1.17-.88-.94-2.13-1.53-3.51-1.53-2.66 0-4.81 2.16-4.81 4.81 0 .38.04.75.13 1.1-4-.2-7.58-2.11-9.96-5.02-.42.72-.66 1.56-.66 2.46 0 1.68.85 3.16 2.14 4.02-.79-.02-1.53-.24-2.18-.6v.06c0 2.35 1.67 4.31 3.88 4.76-.4.1-.83.16-1.27.16-.31 0-.62-.03-.92-.08.63 1.96 2.45 3.39 4.61 3.43-1.69 1.32-3.83 2.1-6.15 2.1-.4 0-.8-.02-1.19-.07 2.19 1.4 4.78 2.22 7.57 2.22 9.07 0 14.02-7.52 14.02-14.02 0-.21 0-.43-.01-.64.96-.69 1.79-1.56 2.45-2.55z"/>
                    </svg>
                    Slack
                  </div>
                </div>

                <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>

          <!-- Feature 3: Branding & Customization -->
          <div class="relative mb-24 lg:mb-32">
            <div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
              <div class="relative z-10">
                <div class="flex items-center gap-4 mb-6">
                  <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-emerald-50 ring-1 ring-emerald-200">
                    <svg class="h-5 w-5 text-emerald-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M4.098 19.902a3.75 3.75 0 005.304 0l6.401-6.402M6.75 21A3.75 3.75 0 013 17.25V4.125C3 3.504 3.504 3 4.125 3h5.25c.621 0 1.125.504 1.125 1.125v4.072M6.75 21a3.75 3.75 0 003.75-3.75V8.197M6.75 21h13.125c.621 0 1.125-.504 1.125-1.125v-5.25c0-.621-.504-1.125-1.125-1.125h-4.072M10.5 8.197l2.88-2.88c.438-.439 1.15-.439 1.59 0l3.712 3.713c.44.44.44 1.152 0 1.59l-2.879 2.88M6.75 17.25h.008v.008H6.75v-.008z" />
                    </svg>
                  </div>
                  <span class="text-sm font-semibold text-emerald-600 uppercase tracking-wide">Full Customization</span>
                </div>
                <h3 class="text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl">
                  Complete Brand Customization
                </h3>
                <p class="mt-4 text-lg text-gray-600 leading-relaxed">
                  Make your status page an extension of your brand. Full control over colors, logos, custom domains, and even inject your own HTML, CSS, or JavaScript.
                </p>

                <!-- Customization options -->
                <div class="mt-8 grid grid-cols-2 gap-4">
                  <div class="flex items-center gap-3 p-3 rounded-xl bg-white shadow-sm ring-1 ring-gray-100">
                    <div class="flex-shrink-0 h-10 w-10 rounded-lg bg-pink-500"></div>
                    <span class="text-sm font-medium text-gray-700">Custom Colors</span>
                  </div>
                  <div class="flex items-center gap-3 p-3 rounded-xl bg-white shadow-sm ring-1 ring-gray-100">
                    <div class="flex-shrink-0 h-10 w-10 rounded-lg bg-gray-100 flex items-center justify-center">
                      <svg class="h-5 w-5 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                      </svg>
                    </div>
                    <span class="text-sm font-medium text-gray-700">Logo & Favicon</span>
                  </div>
                  <div class="flex items-center gap-3 p-3 rounded-xl bg-white shadow-sm ring-1 ring-gray-100">
                    <div class="flex-shrink-0 h-10 w-10 rounded-lg bg-gray-100 flex items-center justify-center">
                      <svg class="h-5 w-5 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
                      </svg>
                    </div>
                    <span class="text-sm font-medium text-gray-700">Custom Domain</span>
                  </div>
                  <div class="flex items-center gap-3 p-3 rounded-xl bg-white shadow-sm ring-1 ring-gray-100">
                    <div class="flex-shrink-0 h-10 w-10 rounded-lg bg-gray-100 flex items-center justify-center">
                      <svg class="h-5 w-5 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
                      </svg>
                    </div>
                    <span class="text-sm font-medium text-gray-700">Custom Code</span>
                  </div>
                </div>

                <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>

              <!-- Custom Visual -->
              <div class="mt-12 lg:mt-0 relative">
                <div class="relative">
                  <!-- Subtle background -->
                  <div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>

                  <!-- Branded Status Page Preview -->
                  <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-violet-600 px-4 py-2.5 flex items-center gap-3">
                      <div class="flex gap-1.5">
                        <div class="w-2.5 h-2.5 rounded-full bg-white/30"></div>
                        <div class="w-2.5 h-2.5 rounded-full bg-white/30"></div>
                        <div class="w-2.5 h-2.5 rounded-full bg-white/30"></div>
                      </div>
                      <div class="flex-1 text-center">
                        <span class="text-white/80 text-xs">status.yourcompany.com</span>
                      </div>
                    </div>

                    <!-- Page header with branding -->
                    <div class="bg-violet-600 px-6 py-6">
                      <div class="flex items-center gap-3 mb-4">
                        <div class="w-10 h-10 rounded-lg bg-white flex items-center justify-center">
                          <svg class="w-6 h-6 text-violet-600" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
                          </svg>
                        </div>
                        <div>
                          <div class="text-white font-semibold">YourCompany</div>
                          <div class="text-white/60 text-xs">System Status</div>
                        </div>
                      </div>
                      <div class="flex items-center gap-2">
                        <div class="w-2 h-2 rounded-full bg-emerald-400"></div>
                        <span class="text-white text-sm">All Systems Operational</span>
                      </div>
                    </div>

                    <!-- Status items -->
                    <div class="p-4 space-y-2">
                      <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                        <span class="text-gray-700 text-sm">API</span>
                        <span class="flex items-center gap-1.5 text-emerald-600 text-xs font-medium">
                          <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
                          Operational
                        </span>
                      </div>
                      <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                        <span class="text-gray-700 text-sm">Dashboard</span>
                        <span class="flex items-center gap-1.5 text-emerald-600 text-xs font-medium">
                          <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
                          Operational
                        </span>
                      </div>
                      <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                        <span class="text-gray-700 text-sm">Database</span>
                        <span class="flex items-center gap-1.5 text-emerald-600 text-xs font-medium">
                          <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
                          Operational
                        </span>
                      </div>
                    </div>

                    <!-- Footer -->
                    <div class="px-4 py-3 border-t border-gray-100 text-center">
                      <span class="text-gray-400 text-xs">Powered by OneUptime</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- Feature 4: Incident Communication -->
          <div class="relative">
            <div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
              <!-- Custom Visual (left on desktop) -->
              <div class="order-2 lg:order-1 mt-12 lg:mt-0 relative">
                <div class="relative">
                  <!-- Subtle background -->
                  <div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>

                  <!-- Incident Update 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-amber-50 px-4 py-3 border-b border-amber-100">
                      <div class="flex items-center justify-between">
                        <div class="flex items-center gap-2">
                          <div class="w-2 h-2 rounded-full bg-amber-500 animate-pulse"></div>
                          <span class="text-amber-800 text-sm font-medium">Active Incident</span>
                        </div>
                        <span class="text-amber-600 text-xs">Updated 2m ago</span>
                      </div>
                    </div>

                    <!-- Incident details -->
                    <div class="p-4">
                      <h4 class="text-gray-900 font-semibold mb-2">API Latency Degradation</h4>
                      <p class="text-gray-600 text-sm mb-4">We are investigating elevated response times affecting the API.</p>

                      <!-- Timeline -->
                      <div class="space-y-3">
                        <div class="flex gap-3">
                          <div class="flex flex-col items-center">
                            <div class="w-2 h-2 rounded-full bg-amber-500"></div>
                            <div class="flex-1 w-px bg-gray-200"></div>
                          </div>
                          <div class="pb-3">
                            <div class="flex items-center gap-2 mb-0.5">
                              <span class="text-xs font-medium text-gray-900">Investigating</span>
                              <span class="text-xs text-gray-400">14:32 UTC</span>
                            </div>
                            <p class="text-xs text-gray-500">Root cause identified as database connection pool exhaustion.</p>
                          </div>
                        </div>

                        <div class="flex gap-3">
                          <div class="flex flex-col items-center">
                            <div class="w-2 h-2 rounded-full bg-red-500"></div>
                          </div>
                          <div>
                            <div class="flex items-center gap-2 mb-0.5">
                              <span class="text-xs font-medium text-gray-900">Identified</span>
                              <span class="text-xs text-gray-400">14:15 UTC</span>
                            </div>
                            <p class="text-xs text-gray-500">Monitoring detected elevated p99 latency.</p>
                          </div>
                        </div>
                      </div>
                    </div>

                    <!-- Affected services -->
                    <div class="px-4 py-3 bg-gray-50 border-t border-gray-100">
                      <div class="text-xs text-gray-500 mb-2">Affected Services</div>
                      <div class="flex gap-2">
                        <span class="px-2 py-1 bg-amber-100 text-amber-700 rounded text-xs">API</span>
                        <span class="px-2 py-1 bg-amber-100 text-amber-700 rounded text-xs">Dashboard</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="order-1 lg:order-2 relative z-10">
                <div class="flex items-center gap-4 mb-6">
                  <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-emerald-50 ring-1 ring-emerald-200">
                    <svg class="h-5 w-5 text-emerald-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 01-2.555-.337A5.972 5.972 0 015.41 20.97a5.969 5.969 0 01-.474-.065 4.48 4.48 0 00.978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25z" />
                    </svg>
                  </div>
                  <span class="text-sm font-semibold text-emerald-600 uppercase tracking-wide">Incident Updates</span>
                </div>
                <h3 class="text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl">
                  Incident Notes & Postmortems
                </h3>
                <p class="mt-4 text-lg text-gray-600 leading-relaxed">
                  Keep everyone informed with real-time incident updates. Post notes, share resolution progress, and publish detailed postmortems to build trust and reduce support load.
                </p>

                <!-- Timeline preview -->
                <div class="mt-8 space-y-4">
                  <div class="flex gap-4">
                    <div class="flex flex-col items-center">
                      <div class="h-3 w-3 rounded-full bg-red-500 ring-4 ring-red-100"></div>
                      <div class="flex-1 w-px bg-gray-200"></div>
                    </div>
                    <div class="pb-4">
                      <p class="text-sm font-medium text-gray-900">Incident Identified</p>
                      <p class="text-sm text-gray-500">API latency increased significantly</p>
                    </div>
                  </div>
                  <div class="flex gap-4">
                    <div class="flex flex-col items-center">
                      <div class="h-3 w-3 rounded-full bg-amber-500 ring-4 ring-amber-100"></div>
                      <div class="flex-1 w-px bg-gray-200"></div>
                    </div>
                    <div class="pb-4">
                      <p class="text-sm font-medium text-gray-900">Investigating</p>
                      <p class="text-sm text-gray-500">Team identified database bottleneck</p>
                    </div>
                  </div>
                  <div class="flex gap-4">
                    <div class="flex flex-col items-center">
                      <div class="h-3 w-3 rounded-full bg-emerald-500 ring-4 ring-emerald-100"></div>
                    </div>
                    <div>
                      <p class="text-sm font-medium text-gray-900">Resolved</p>
                      <p class="text-sm text-gray-500">All systems back to normal</p>
                    </div>
                  </div>
                </div>

                <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 bg-white py-24 sm:py-32 lg:py-40 overflow-hidden">

          <div class="mx-auto max-w-7xl px-6 lg:px-8">
            <!-- Section Header -->
            <div class="mx-auto max-w-3xl text-center mb-20">
              <div class="inline-flex items-center gap-2 rounded-full bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 ring-1 ring-inset ring-gray-200 mb-6">
                <svg class="h-4 w-4 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
                </svg>
                Powerful Capabilities
              </div>
              <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
                Everything you need, nothing you don't
              </h2>
              <p class="mt-6 text-lg leading-8 text-gray-600">
                From enterprise-grade reliability to seamless integrations, we've built every feature you need to communicate status effectively.
              </p>
            </div>

            <!-- Feature Cards Grid -->
            <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">

              <!-- Feature 1: Reliability -->
              <div class="group relative">
                <div class="relative h-full rounded-2xl bg-white p-8 shadow-sm ring-1 ring-gray-200/60 transition-all duration-300 hover:shadow-lg hover:ring-gray-300/60">
                  <div class="flex items-center gap-4 mb-6">
                    <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-emerald-50 ring-1 ring-emerald-200">
                      <svg class="h-6 w-6 text-emerald-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0112 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 01-3.296-1.043 3.745 3.745 0 01-1.043-3.296A3.745 3.745 0 013 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 011.043-3.296 3.746 3.746 0 013.296-1.043A3.746 3.746 0 0112 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 013.296 1.043 3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z" />
                      </svg>
                    </div>
                    <div class="flex items-center gap-2">
                      <span class="inline-flex items-center rounded-full bg-emerald-50 px-2.5 py-1 text-xs font-medium text-emerald-700 ring-1 ring-inset ring-emerald-600/20">
                        99.99% SLA
                      </span>
                    </div>
                  </div>
                  <h3 class="text-xl font-semibold text-gray-900 mb-3">Enterprise Reliability</h3>
                  <p class="text-gray-600 leading-relaxed">
                    Distributed across multiple clouds and continents. Your status page stays up even when major providers go down.
                  </p>
                  <div class="mt-6 flex items-center gap-4 text-sm text-gray-500">
                    <div class="flex items-center gap-1.5">
                      <div class="h-2 w-2 rounded-full bg-emerald-500"></div>
                      <span>Multi-cloud</span>
                    </div>
                    <div class="flex items-center gap-1.5">
                      <div class="h-2 w-2 rounded-full bg-emerald-500"></div>
                      <span>Global CDN</span>
                    </div>
                  </div>
                </div>
              </div>

              <!-- Feature 2: Integrations -->
              <div class="group relative">
                <div class="relative h-full rounded-2xl bg-white p-8 shadow-sm ring-1 ring-gray-200/60 transition-all duration-300 hover:shadow-lg hover:ring-gray-300/60">
                  <div class="flex items-center gap-4 mb-6">
                    <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-50 ring-1 ring-blue-200">
                      <svg class="h-6 w-6 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 002.25-2.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v2.25A2.25 2.25 0 006 10.5zm0 9.75h2.25A2.25 2.25 0 0010.5 18v-2.25a2.25 2.25 0 00-2.25-2.25H6a2.25 2.25 0 00-2.25 2.25V18A2.25 2.25 0 006 20.25zm9.75-9.75H18a2.25 2.25 0 002.25-2.25V6A2.25 2.25 0 0018 3.75h-2.25A2.25 2.25 0 0013.5 6v2.25a2.25 2.25 0 002.25 2.25z" />
                      </svg>
                    </div>
                    <div class="flex items-center gap-2">
                      <span class="inline-flex items-center rounded-full bg-blue-50 px-2.5 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-600/20">
                        5000+ Apps
                      </span>
                    </div>
                  </div>
                  <h3 class="text-xl font-semibold text-gray-900 mb-3">Seamless Integrations</h3>
                  <p class="text-gray-600 leading-relaxed">
                    Connect with Slack, PagerDuty, Jira, and thousands more. Update status pages without leaving your tools.
                  </p>
                  <div class="mt-6 flex -space-x-2">
                    <div class="h-8 w-8 rounded-full bg-gray-100 ring-2 ring-white flex items-center justify-center">
                      <svg class="h-4 w-4 text-gray-600" viewBox="0 0 24 24" fill="currentColor"><path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z"/></svg>
                    </div>
                    <div class="h-8 w-8 rounded-full bg-gray-100 ring-2 ring-white flex items-center justify-center">
                      <svg class="h-4 w-4 text-gray-600" viewBox="0 0 24 24" fill="currentColor"><path d="M11.998 0C5.366 0 0 5.367 0 12a11.992 11.992 0 0 0 8.203 11.385c.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12.002-12"/></svg>
                    </div>
                    <div class="h-8 w-8 rounded-full bg-gray-100 ring-2 ring-white flex items-center justify-center">
                      <svg class="h-4 w-4 text-gray-600" viewBox="0 0 24 24" fill="currentColor"><path d="M11.571 11.513H0a5.218 5.218 0 0 0 5.232 5.215h2.13v2.057A5.215 5.215 0 0 0 12.575 24V12.518a1.005 1.005 0 0 0-1.005-1.005zm5.723-5.756H5.736a5.215 5.215 0 0 0 5.215 5.214h2.129v2.058a5.218 5.218 0 0 0 5.215 5.214V6.758a1.001 1.001 0 0 0-1.001-1.001zM23.013 0H11.455a5.215 5.215 0 0 0 5.215 5.215h2.129v2.057A5.215 5.215 0 0 0 24 12.483V1.005A1.001 1.001 0 0 0 23.013 0Z"/></svg>
                    </div>
                    <div class="h-8 w-8 rounded-full bg-gray-100 ring-2 ring-white flex items-center justify-center text-xs font-medium text-gray-500">
                      +
                    </div>
                  </div>
                </div>
              </div>

              <!-- Feature 3: Workflows -->
              <div class="group relative">
                <div class="relative h-full rounded-2xl bg-white p-8 shadow-sm ring-1 ring-gray-200/60 transition-all duration-300 hover:shadow-lg hover:ring-gray-300/60">
                  <div class="flex items-center gap-4 mb-6">
                    <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-violet-50 ring-1 ring-violet-200">
                      <svg class="h-6 w-6 text-violet-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 7.125C2.25 6.504 2.754 6 3.375 6h6c.621 0 1.125.504 1.125 1.125v3.75c0 .621-.504 1.125-1.125 1.125h-6a1.125 1.125 0 01-1.125-1.125v-3.75zM14.25 8.625c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v8.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 01-1.125-1.125v-8.25zM3.75 16.125c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 01-1.125-1.125v-2.25z" />
                      </svg>
                    </div>
                    <div class="flex items-center gap-2">
                      <span class="inline-flex items-center rounded-full bg-violet-50 px-2.5 py-1 text-xs font-medium text-violet-700 ring-1 ring-inset ring-violet-600/20">
                        No-code
                      </span>
                    </div>
                  </div>
                  <h3 class="text-xl font-semibold text-gray-900 mb-3">Automated Workflows</h3>
                  <p class="text-gray-600 leading-relaxed">
                    Build complex automation without code. Auto-update status pages, trigger notifications, and streamline incident response.
                  </p>
                  <div class="mt-6 flex items-center gap-2">
                    <div class="h-8 rounded-full bg-violet-100 px-3 flex items-center text-xs font-medium text-violet-700">
                      Trigger
                    </div>
                    <svg class="h-4 w-4 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                    </svg>
                    <div class="h-8 rounded-full bg-violet-100 px-3 flex items-center text-xs font-medium text-violet-700">
                      Action
                    </div>
                    <svg class="h-4 w-4 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                    </svg>
                    <div class="h-8 rounded-full bg-violet-100 px-3 flex items-center text-xs font-medium text-violet-700">
                      Notify
                    </div>
                  </div>
                </div>
              </div>

              <!-- Feature 4: Custom Domains -->
              <div class="group relative">
                <div class="relative h-full rounded-2xl bg-white p-8 shadow-sm ring-1 ring-gray-200/60 transition-all duration-300 hover:shadow-lg hover:ring-gray-300/60">
                  <div class="flex items-center gap-4 mb-6">
                    <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-cyan-50 ring-1 ring-cyan-200">
                      <svg class="h-6 w-6 text-cyan-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418" />
                      </svg>
                    </div>
                    <div class="flex items-center gap-2">
                      <span class="inline-flex items-center rounded-full bg-cyan-50 px-2.5 py-1 text-xs font-medium text-cyan-700 ring-1 ring-inset ring-cyan-600/20">
                        Free SSL
                      </span>
                    </div>
                  </div>
                  <h3 class="text-xl font-semibold text-gray-900 mb-3">Custom Domains</h3>
                  <p class="text-gray-600 leading-relaxed">
                    Host on your own domain with automatic SSL provisioning. Multiple domains per status page supported.
                  </p>
                  <div class="mt-6 p-3 rounded-lg bg-gray-50 font-mono text-sm text-gray-600">
                    <span class="text-cyan-600">https://</span>status.yourcompany.com
                  </div>
                </div>
              </div>

              <!-- Feature 5: Scheduled Maintenance -->
              <div class="group relative">
                <div class="relative h-full rounded-2xl bg-white p-8 shadow-sm ring-1 ring-gray-200/60 transition-all duration-300 hover:shadow-lg hover:ring-gray-300/60">
                  <div class="flex items-center gap-4 mb-6">
                    <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-amber-50 ring-1 ring-amber-200">
                      <svg class="h-6 w-6 text-amber-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
                      </svg>
                    </div>
                  </div>
                  <h3 class="text-xl font-semibold text-gray-900 mb-3">Scheduled Maintenance</h3>
                  <p class="text-gray-600 leading-relaxed">
                    Plan and communicate maintenance windows in advance. Auto-notify subscribers before, during, and after.
                  </p>
                  <div class="mt-6 flex items-center gap-3">
                    <div class="flex items-center gap-2 text-sm">
                      <div class="h-3 w-3 rounded-full bg-amber-400"></div>
                      <span class="text-gray-500">Dec 28, 2:00 AM</span>
                    </div>
                    <span class="text-gray-300">-</span>
                    <div class="flex items-center gap-2 text-sm">
                      <div class="h-3 w-3 rounded-full bg-emerald-400"></div>
                      <span class="text-gray-500">4:00 AM UTC</span>
                    </div>
                  </div>
                </div>
              </div>

              <!-- Feature 6: Announcements -->
              <div class="group relative">
                <div class="relative h-full rounded-2xl bg-white p-8 shadow-sm ring-1 ring-gray-200/60 transition-all duration-300 hover:shadow-lg hover:ring-gray-300/60">
                  <div class="flex items-center gap-4 mb-6">
                    <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-pink-50 ring-1 ring-pink-200">
                      <svg class="h-6 w-6 text-pink-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M10.34 15.84c-.688-.06-1.386-.09-2.09-.09H7.5a4.5 4.5 0 110-9h.75c.704 0 1.402-.03 2.09-.09m0 9.18c.253.962.584 1.892.985 2.783.247.55.06 1.21-.463 1.511l-.657.38c-.551.318-1.26.117-1.527-.461a20.845 20.845 0 01-1.44-4.282m3.102.069a18.03 18.03 0 01-.59-4.59c0-1.586.205-3.124.59-4.59m0 9.18a23.848 23.848 0 018.835 2.535M10.34 6.66a23.847 23.847 0 008.835-2.535m0 0A23.74 23.74 0 0018.795 3m.38 1.125a23.91 23.91 0 011.014 5.395m-1.014 8.855c-.118.38-.245.754-.38 1.125m.38-1.125a23.91 23.91 0 001.014-5.395m0-3.46c.495.413.811 1.035.811 1.73 0 .695-.316 1.317-.811 1.73m0-3.46a24.347 24.347 0 010 3.46" />
                      </svg>
                    </div>
                  </div>
                  <h3 class="text-xl font-semibold text-gray-900 mb-3">Announcements</h3>
                  <p class="text-gray-600 leading-relaxed">
                    Share product updates, new features, and important news directly on your status page.
                  </p>
                  <div class="mt-6 p-3 rounded-lg bg-pink-50 border border-pink-100">
                    <div class="flex items-start gap-2">
                      <svg class="h-5 w-5 text-pink-500 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z" />
                      </svg>
                      <p class="text-sm text-gray-600">New API v2.0 is now available!</p>
                    </div>
                  </div>
                </div>
              </div>

            </div>
          </div>
        </div>

    <!-- Team Notifications Section -->
    <div class="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-teal-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 status page notifications in Slack and Microsoft Teams. Post updates, notify subscribers, and manage incidents from 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 status update 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>
                Subscriber alerts
              </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>

          <!-- Slack Demo -->
          <div class="relative" id="status-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">status-updates</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-teal-400 to-teal-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="status-slack-messages">
                <!-- Original status update 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:30 PM</span>
                      </div>

                      <!-- Status update 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-amber-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-amber-500/20 text-amber-400 text-xs font-medium">
                                  <span class="w-1.5 h-1.5 rounded-full bg-amber-400 animate-pulse"></span>
                                  Investigating
                                </span>
                              </div>
                              <h4 class="text-white font-semibold mt-2">API Performance Degradation</h4>
                              <p class="text-gray-400 text-sm mt-1">Elevated response times on API endpoints</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="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>
                              status.acme.com
                            </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 5m ago
                            </div>
                          </div>
                        </div>
                      </div>

                      <!-- Action buttons -->
                      <div class="mt-3 flex flex-wrap gap-2" id="status-slack-buttons">
                        <button onclick="statusPostUpdate()" id="status-btn-update" 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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                          </svg>
                          Post Update
                        </button>
                        <button onclick="statusNotify()" id="status-btn-notify" 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="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>
                          Notify Subscribers
                        </button>
                        <button onclick="statusResolve()" id="status-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>
                          Mark Resolved
                        </button>
                      </div>

                      <!-- Reactions -->
                      <div class="mt-3 flex items-center gap-2" id="status-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">5</span>
                        </div>
                      </div>

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

                      <!-- Thread count indicator -->
                      <div id="status-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="status-thread-avatars"></div>
                        <span id="status-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 #status-updates</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 statusUpdateClicked = false;
          let statusNotifyClicked = false;
          let statusResolveClicked = false;
          let statusReplyCount = 0;
          const statusAvatars = [];

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

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

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

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

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

            const btn = document.getElementById('status-btn-update');
            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>Posting...</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>Posted</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');

              addStatusReaction('📝');
              addStatusThreadReply('from-teal-400 to-teal-600', 'Lisa Wong', '2:32 PM', 'Identified: Database query latency spike. Scaling read replicas now.', false);

              setTimeout(() => {
                addStatusThreadReply('from-green-400 to-green-600', 'OneUptime', '2:32 PM', '📢 Status page updated to <strong class="text-amber-400">Identified</strong><br/><span class="text-gray-400">247 subscribers notified</span>', true);
              }, 1000);
            }, 800);
          };

          window.statusNotify = function() {
            if (statusNotifyClicked) return;
            statusNotifyClicked = true;

            const btn = document.getElementById('status-btn-notify');
            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>Sending...</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>Sent</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');

              addStatusReaction('📧');
              addStatusThreadReply('from-green-400 to-green-600', 'OneUptime', '2:34 PM', '📨 Notifications sent<br/><span class="text-gray-400">→ Email: 189 subscribers<br/>→ Slack: 12 channels<br/>→ Webhook: 8 endpoints</span>', true);
            }, 800);
          };

          window.statusResolve = function() {
            if (statusResolveClicked) return;
            statusResolveClicked = true;

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

              addStatusReaction('🎉');
              addStatusThreadReply('from-teal-400 to-teal-600', 'Lisa Wong', '2:42 PM', 'All systems back to normal. Read replicas scaled and query optimizations deployed.', false);

              setTimeout(() => {
                addStatusThreadReply('from-green-400 to-green-600', 'OneUptime', '2:42 PM', '✅ Incident resolved<br/><span class="text-gray-400">Total duration: 12 minutes • All services operational</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 status page hero section
      (function() {
        const heroSection = document.getElementById('status-page-hero-section');
        const gridGlow = document.getElementById('status-page-grid-glow');

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

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

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

</body>

</html>