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

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

<head>
    <title>Status Pages | Keep Customers Informed During Incidents</title>
    <meta name="description"
        content="Beautiful, customizable status pages that keep your customers informed. Public and private status pages with automatic updates and subscriber notifications.">
        <%- 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">
      <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>

      <div class="mx-auto max-w-7xl px-6 pt-24 pb-20 sm:pt-32 sm:pb-24 lg:pt-40 lg:pb-32 lg:px-8">
        <div class="mx-auto max-w-3xl text-center">
          <!-- Badge -->
          <div class="mb-8 inline-flex items-center gap-2 rounded-full bg-emerald-600 px-4 py-2 text-sm font-medium text-white shadow-lg">
            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" d="M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18a2.25 2.25 0 0 1-2.25 2.25M16.5 7.5V18a2.25 2.25 0 0 0 2.25 2.25M16.5 7.5V4.875c0-.621-.504-1.125-1.125-1.125H4.125C3.504 3.75 3 4.254 3 4.875V18a2.25 2.25 0 0 0 2.25 2.25h13.5M6 7.5h3v3H6v-3Z" />
            </svg>
            <span>Status Pages</span>
          </div>

          <!-- Main Headline -->
          <h1 class="text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl lg:text-6xl">
            Build trust with <br class="hidden sm:block" />
            transparent communication
          </h1>

          <!-- Subheadline -->
          <p class="mt-6 text-lg leading-8 text-gray-600 max-w-2xl mx-auto">
            Beautiful, customizable status pages that keep your customers informed. Reduce support tickets and build trust during incidents.
          </p>

          <!-- CTA Buttons -->
          <div class="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4">
            <a href="/accounts/register" class="w-full sm:w-auto inline-flex items-center justify-center gap-2 rounded-full bg-gray-900 px-8 py-3.5 text-sm font-medium text-white shadow-lg transition-all hover:bg-gray-800">
              Create Your Status Page
              <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
              </svg>
            </a>
            <a href="/enterprise/demo" class="w-full sm:w-auto inline-flex items-center justify-center gap-2 rounded-full bg-white px-8 py-3.5 text-sm font-medium text-gray-700 shadow-sm ring-1 ring-inset ring-gray-300 transition-all hover:bg-gray-50">
              <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5" />
              </svg>
              Schedule Demo
            </a>
          </div>
        </div>
      </div>
    </div>

    <!-- Logo Roll -->
    <%- include('../logo-roll') -%>

    <!-- Status Page Types Section -->
    <section class="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">
          <h2 class="text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl">
            Status pages for every need
          </h2>
          <p class="mt-4 text-lg text-gray-600">
            Public pages for customers, private pages for internal teams
          </p>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
          <!-- Public Status Page -->
          <div class="p-8 rounded-2xl bg-white border border-gray-200 hover:shadow-lg transition-shadow">
            <div class="inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-emerald-100 mb-6">
              <svg class="w-7 h-7 text-emerald-600" 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 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-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 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582" />
              </svg>
            </div>
            <h3 class="text-2xl font-semibold text-gray-900 mb-3">Public Status Page</h3>
            <p class="text-gray-600 mb-6">Share your service status with customers. Custom domains, branding, and SEO-optimized pages.</p>
            <ul class="space-y-3 text-sm text-gray-600">
              <li class="flex items-center gap-2">
                <svg class="h-4 w-4 text-emerald-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>
                Custom domain support
              </li>
              <li class="flex items-center gap-2">
                <svg class="h-4 w-4 text-emerald-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>
                Custom branding & CSS
              </li>
              <li class="flex items-center gap-2">
                <svg class="h-4 w-4 text-emerald-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>
                Email/SMS subscriber notifications
              </li>
              <li class="flex items-center gap-2">
                <svg class="h-4 w-4 text-emerald-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>
                SSL certificate included
              </li>
            </ul>
          </div>

          <!-- Private Status Page -->
          <div class="p-8 rounded-2xl bg-white border border-gray-200 hover:shadow-lg transition-shadow">
            <div class="inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-blue-100 mb-6">
              <svg class="w-7 h-7 text-blue-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z" />
              </svg>
            </div>
            <h3 class="text-2xl font-semibold text-gray-900 mb-3">Private Status Page</h3>
            <p class="text-gray-600 mb-6">Internal status pages for your team or enterprise customers. SSO authentication and access controls.</p>
            <ul class="space-y-3 text-sm text-gray-600">
              <li class="flex items-center gap-2">
                <svg class="h-4 w-4 text-emerald-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>
                SSO authentication
              </li>
              <li class="flex items-center gap-2">
                <svg class="h-4 w-4 text-emerald-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>
                Role-based access control
              </li>
              <li class="flex items-center gap-2">
                <svg class="h-4 w-4 text-emerald-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>
                Detailed internal metrics
              </li>
              <li class="flex items-center gap-2">
                <svg class="h-4 w-4 text-emerald-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>
                Enterprise customer access
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>

    <!-- Features Section -->
    <section class="bg-white 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">
          <span class="inline-flex items-center gap-2 px-4 py-2 text-xs font-semibold tracking-wide text-gray-700 uppercase bg-gray-100 rounded-full mb-6 border border-gray-200">
            Features
          </span>
          <h2 class="text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl">
            Everything you need for status communication
          </h2>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          <!-- Automatic Updates -->
          <div class="p-6 rounded-2xl bg-gray-50 border border-gray-200 hover:shadow-lg transition-shadow">
            <div class="inline-flex items-center justify-center w-12 h-12 rounded-xl bg-emerald-100 mb-4">
              <svg class="w-6 h-6 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
              </svg>
            </div>
            <h3 class="text-lg font-semibold text-gray-900 mb-2">Automatic Updates</h3>
            <p class="text-sm text-gray-600">Status pages update automatically based on monitor status. No manual intervention needed.</p>
          </div>

          <!-- Subscriber Notifications -->
          <div class="p-6 rounded-2xl bg-gray-50 border border-gray-200 hover:shadow-lg transition-shadow">
            <div class="inline-flex items-center justify-center w-12 h-12 rounded-xl bg-blue-100 mb-4">
              <svg class="w-6 h-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" />
              </svg>
            </div>
            <h3 class="text-lg font-semibold text-gray-900 mb-2">Subscriber Notifications</h3>
            <p class="text-sm text-gray-600">Email, SMS, and webhook notifications keep subscribers informed of updates.</p>
          </div>

          <!-- Scheduled Maintenance -->
          <div class="p-6 rounded-2xl bg-gray-50 border border-gray-200 hover:shadow-lg transition-shadow">
            <div class="inline-flex items-center justify-center w-12 h-12 rounded-xl bg-amber-100 mb-4">
              <svg class="w-6 h-6 text-amber-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5" />
              </svg>
            </div>
            <h3 class="text-lg font-semibold text-gray-900 mb-2">Scheduled Maintenance</h3>
            <p class="text-sm text-gray-600">Announce planned maintenance in advance. Automatic start/end notifications.</p>
          </div>

          <!-- Incident History -->
          <div class="p-6 rounded-2xl bg-gray-50 border border-gray-200 hover:shadow-lg transition-shadow">
            <div class="inline-flex items-center justify-center w-12 h-12 rounded-xl bg-violet-100 mb-4">
              <svg class="w-6 h-6 text-violet-600" 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 1 1-18 0 9 9 0 0 1 18 0Z" />
              </svg>
            </div>
            <h3 class="text-lg font-semibold text-gray-900 mb-2">Incident History</h3>
            <p class="text-sm text-gray-600">Complete incident timeline with updates and resolution details.</p>
          </div>

          <!-- Uptime History -->
          <div class="p-6 rounded-2xl bg-gray-50 border border-gray-200 hover:shadow-lg transition-shadow">
            <div class="inline-flex items-center justify-center w-12 h-12 rounded-xl bg-cyan-100 mb-4">
              <svg class="w-6 h-6 text-cyan-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z" />
              </svg>
            </div>
            <h3 class="text-lg font-semibold text-gray-900 mb-2">Uptime History</h3>
            <p class="text-sm text-gray-600">90-day uptime history with detailed metrics for each component.</p>
          </div>

          <!-- Custom Components -->
          <div class="p-6 rounded-2xl bg-gray-50 border border-gray-200 hover:shadow-lg transition-shadow">
            <div class="inline-flex items-center justify-center w-12 h-12 rounded-xl bg-rose-100 mb-4">
              <svg class="w-6 h-6 text-rose-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M6.429 9.75 2.25 12l4.179 2.25m0-4.5 5.571 3 5.571-3m-11.142 0L2.25 7.5 12 2.25l9.75 5.25-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0 4.179 2.25L12 21.75 2.25 16.5l4.179-2.25m11.142 0-5.571 3-5.571-3" />
              </svg>
            </div>
            <h3 class="text-lg font-semibold text-gray-900 mb-2">Custom Components</h3>
            <p class="text-sm text-gray-600">Group services into logical components. Show only what matters to your customers.</p>
          </div>
        </div>
      </div>
    </section>

    <!-- CTA Section -->
    <section class="relative py-24 sm:py-32 bg-gray-900 overflow-hidden">
      <div class="absolute inset-0 opacity-10">
        <svg class="absolute inset-0 h-full w-full" xmlns="http://www.w3.org/2000/svg">
          <defs>
            <pattern id="cta-grid" width="40" height="40" patternUnits="userSpaceOnUse">
              <path d="M0 40V0h40" fill="none" stroke="currentColor" stroke-width="1"/>
            </pattern>
          </defs>
          <rect width="100%" height="100%" fill="url(#cta-grid)" />
        </svg>
      </div>

      <div class="relative mx-auto max-w-4xl px-6 lg:px-8 text-center">
        <h2 class="text-3xl sm:text-4xl font-semibold tracking-tight text-white mb-6">
          Ready to improve customer communication?
        </h2>
        <p class="text-lg text-gray-300 mb-10 max-w-2xl mx-auto">
          Create your status page in minutes. Reduce support tickets and build customer trust.
        </p>
        <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
          <a href="/accounts/register" class="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-8 py-4 rounded-full bg-white text-gray-900 font-medium hover:bg-gray-100 transition-colors">
            Create Your Status Page
            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
            </svg>
          </a>
          <a href="/pricing" class="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-8 py-4 rounded-full text-white font-medium hover:bg-white/10 transition-colors border border-white/20">
            View Pricing
          </a>
        </div>
      </div>
    </section>

  </main>
  <%- include('../footer') -%>

</body>

</html>
