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

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

<head>
    <title>OneUptime for SaaS | Scale with Complete Visibility</title>
    <meta name="description"
        content="Complete observability for SaaS companies. Monitor multi-tenant applications, track customer experience, and maintain 99.99% uptime for your SaaS platform.">
        <%- include('../head', {
    enableGoogleTagManager: typeof enableGoogleTagManager !== 'undefined' ? enableGoogleTagManager : false
}) -%>

</head>

<body>
  <%- include('../nav') -%>

  <main id="main-content">
    <!-- Hero Section -->
    <div class="relative isolate overflow-hidden bg-white">
      <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 -->
          <a href="https://github.com/oneuptime/oneuptime" target="_blank" class="group mb-8 inline-flex items-center gap-1.5 rounded-full bg-blue-50 px-4 py-1.5 text-sm text-blue-700 ring-1 ring-inset ring-blue-200 transition-all hover:bg-blue-100 hover:ring-blue-300">
            <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="M2.25 15a4.5 4.5 0 0 0 4.5 4.5H18a3.75 3.75 0 0 0 1.332-7.257 3 3 0 0 0-3.758-3.848 5.25 5.25 0 0 0-10.233 2.33A4.502 4.502 0 0 0 2.25 15Z" />
            </svg>
            <span>SaaS Companies</span>
            <span class="h-1 w-1 rounded-full bg-blue-300"></span>
            <span>Built by SaaS for SaaS</span>
            <svg class="h-3.5 w-3.5 text-blue-400 transition-transform group-hover:translate-x-0.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"></path></svg>
          </a>

          <!-- Main Headline -->
          <h1 class="text-4xl font-medium tracking-tight text-gray-900 sm:text-5xl lg:text-[3.5rem] lg:leading-[1.15]">
            Your customers expect <br class="hidden sm:block" />
            <span class="text-gray-700">99.99% uptime. So should you.</span>
          </h1>

          <!-- Subheadline -->
          <p class="mt-6 text-base leading-7 text-gray-600 sm:text-lg sm:leading-8 max-w-xl mx-auto">
            Observability built by SaaS engineers, for SaaS companies. Monitor multi-tenant apps, track customer experience, and catch issues before they become churned customers.
          </p>

          <!-- CTA Buttons -->
          <div class="mt-10 flex flex-col sm:flex-row items-center justify-center gap-3 sm:gap-4">
            <a href="/accounts/register"
              class="w-full sm:w-auto inline-flex items-center justify-center rounded-lg bg-gray-900 px-6 py-2.5 text-sm font-medium text-white shadow-sm transition-all hover:bg-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900">
              Get started free
              <svg class="ml-2 h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"></path></svg>
            </a>
            <a href="/enterprise/demo" class="w-full sm:w-auto inline-flex items-center justify-center rounded-lg bg-white px-6 py-2.5 text-sm font-medium text-gray-700 shadow-sm ring-1 ring-inset ring-gray-300 transition-all hover:bg-gray-50">
              Schedule Demo
            </a>
          </div>

          <!-- Quick stats -->
          <div class="mt-12 flex flex-wrap items-center justify-center gap-x-8 gap-y-4 text-sm text-gray-500">
            <div class="flex items-center gap-2">
              <svg class="h-4 w-4 text-emerald-500" 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>
              <span>Multi-tenant ready</span>
            </div>
            <div class="flex items-center gap-2">
              <svg class="h-4 w-4 text-emerald-500" 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>
              <span>99.99% SLA</span>
            </div>
            <div class="flex items-center gap-2">
              <svg class="h-4 w-4 text-emerald-500" 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>
              <span>SOC 2 Type II</span>
            </div>
          </div>
        </div>
      </div>
    </div>

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

    <!-- SaaS Pain Points Section -->
    <section class="relative py-24 lg:py-32 bg-gray-50 overflow-hidden">
      <div class="absolute inset-0 -z-10">
        <div class="absolute top-1/4 left-0 w-72 h-72 bg-blue-100/40 rounded-full blur-3xl"></div>
        <div class="absolute bottom-1/4 right-0 w-72 h-72 bg-violet-100/40 rounded-full blur-3xl"></div>
      </div>

      <div class="mx-auto max-w-6xl px-6 lg:px-8">
        <div class="text-center mb-16">
          <p class="text-sm font-medium text-blue-600 tracking-wide uppercase mb-4">The Reality</p>
          <h2 class="text-4xl sm:text-5xl font-semibold tracking-tight text-gray-900 mb-6">
            In SaaS, every incident is a churn risk.
          </h2>
          <p class="max-w-2xl mx-auto text-lg text-gray-600">
            Your customers don't care about your infrastructure. They care about whether your product works.
          </p>
        </div>

        <!-- Pain Points Grid -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-16">
          <div class="p-6 rounded-2xl bg-white border border-gray-200 shadow-sm">
            <div class="flex items-center gap-3 mb-4">
              <div class="w-10 h-10 rounded-lg bg-rose-100 flex items-center justify-center">
                <svg class="w-5 h-5 text-rose-600" 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 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z" />
                </svg>
              </div>
              <h3 class="font-semibold text-gray-900">Noisy neighbor complaints</h3>
            </div>
            <p class="text-sm text-gray-600">One high-volume customer tanks performance for everyone. By the time you notice, three enterprise accounts have opened support tickets.</p>
          </div>

          <div class="p-6 rounded-2xl bg-white border border-gray-200 shadow-sm">
            <div class="flex items-center gap-3 mb-4">
              <div class="w-10 h-10 rounded-lg bg-amber-100 flex items-center justify-center">
                <svg class="w-5 h-5 text-amber-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M3 3v1.5M3 21v-6m0 0 2.77-.693a9 9 0 0 1 6.208.682l.108.054a9 9 0 0 0 6.086.71l3.114-.732a48.524 48.524 0 0 1-.005-10.499l-3.11.732a9 9 0 0 1-6.085-.711l-.108-.054a9 9 0 0 0-6.208-.682L3 4.5M3 15V4.5" />
                </svg>
              </div>
              <h3 class="font-semibold text-gray-900">Deployment roulette</h3>
            </div>
            <p class="text-sm text-gray-600">"Did the deploy break something or was it already broken?" Rolling back takes 20 minutes. Finding the root cause takes hours.</p>
          </div>

          <div class="p-6 rounded-2xl bg-white border border-gray-200 shadow-sm">
            <div class="flex items-center gap-3 mb-4">
              <div class="w-10 h-10 rounded-lg bg-violet-100 flex items-center justify-center">
                <svg class="w-5 h-5 text-violet-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 0 1-1.043 3.296 3.745 3.745 0 0 1-3.296 1.043A3.745 3.745 0 0 1 12 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 0 1-3.296-1.043 3.745 3.745 0 0 1-1.043-3.296A3.745 3.745 0 0 1 3 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 0 1 1.043-3.296 3.746 3.746 0 0 1 3.296-1.043A3.746 3.746 0 0 1 12 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 0 1 3.296 1.043 3.746 3.746 0 0 1 1.043 3.296A3.745 3.745 0 0 1 21 12Z" />
                </svg>
              </div>
              <h3 class="font-semibold text-gray-900">SLA scrambles</h3>
            </div>
            <p class="text-sm text-gray-600">Enterprise customer asks for an SLA report. You spend 4 hours pulling data from 3 different tools to prove you hit 99.9%.</p>
          </div>

          <div class="p-6 rounded-2xl bg-white border border-gray-200 shadow-sm">
            <div class="flex items-center gap-3 mb-4">
              <div class="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center">
                <svg class="w-5 h-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M15.182 15.182a4.5 4.5 0 0 1-6.364 0M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Z" />
                </svg>
              </div>
              <h3 class="font-semibold text-gray-900">Customer blindspots</h3>
            </div>
            <p class="text-sm text-gray-600">Your dashboards say everything's green. Meanwhile, Acme Corp's users are seeing 5-second load times because of a slow database query in their workflow.</p>
          </div>

          <div class="p-6 rounded-2xl bg-white border border-gray-200 shadow-sm">
            <div class="flex items-center gap-3 mb-4">
              <div class="w-10 h-10 rounded-lg bg-emerald-100 flex items-center justify-center">
                <svg class="w-5 h-5 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                </svg>
              </div>
              <h3 class="font-semibold text-gray-900">Status page theater</h3>
            </div>
            <p class="text-sm text-gray-600">You know there's an issue. Your status page says "All Systems Operational" because updating it means admitting you have a problem.</p>
          </div>

          <div class="p-6 rounded-2xl bg-white border border-gray-200 shadow-sm">
            <div class="flex items-center gap-3 mb-4">
              <div class="w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center">
                <svg class="w-5 h-5 text-gray-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3-4.5 16.5" />
                </svg>
              </div>
              <h3 class="font-semibold text-gray-900">API rate limit surprises</h3>
            </div>
            <p class="text-sm text-gray-600">A customer integration starts hammering your API. You find out when your other customers start complaining about timeouts.</p>
          </div>
        </div>
      </div>
    </section>

    <!-- Product Grid Section -->
    <%- include('../Partials/product-grid-section', {
      label: 'The Solution',
      title: 'OneUptime for SaaS',
      subtitle: 'Built by SaaS, for SaaS.',
      description: 'Complete observability designed for multi-tenant applications. From API endpoints to database queries, monitor everything your customers depend on.'
    }) -%>

    <!-- SaaS Features Bento -->
    <section class="relative py-24 lg:py-32 bg-gray-50 overflow-hidden">
      <div class="absolute inset-0 -z-10">
        <div class="absolute top-1/4 right-0 w-72 h-72 bg-blue-100/40 rounded-full blur-3xl"></div>
        <div class="absolute bottom-1/4 left-0 w-72 h-72 bg-violet-100/40 rounded-full blur-3xl"></div>
      </div>

      <div class="relative mx-auto max-w-6xl px-6 lg:px-8">
        <div class="text-center mb-16">
          <p class="text-sm font-medium text-blue-600 tracking-wide uppercase mb-4">SaaS Grade</p>
          <h2 class="text-4xl sm:text-5xl font-semibold tracking-tight text-gray-900 mb-6">
            Built for the demands<br class="hidden sm:block" />
            <span class="text-gray-500">of modern SaaS.</span>
          </h2>
          <p class="max-w-2xl mx-auto text-lg text-gray-600">
            From API performance to customer experience, OneUptime provides the observability infrastructure that SaaS companies need to scale.
          </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          <!-- Multi-tenant Monitoring - Large -->
          <div class="lg:col-span-2 group">
            <div class="h-full p-8 rounded-2xl bg-white border border-gray-300 shadow-sm hover:shadow-lg transition-shadow">
              <div class="flex items-start justify-between mb-5">
                <div class="inline-flex items-center justify-center w-10 h-10 rounded-lg bg-blue-600">
                  <svg class="w-5 h-5 text-white" 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 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z" />
                  </svg>
                </div>
                <span class="text-xs text-gray-500 bg-gray-100 px-2 py-1 rounded-full">Per-tenant</span>
              </div>
              <h3 class="text-xl font-semibold text-gray-900 mb-2">Multi-Tenant Monitoring</h3>
              <p class="text-gray-500 mb-5">See performance broken down by customer. Identify noisy neighbors, track per-tenant SLAs, and ensure fair resource allocation across your customer base.</p>
              <div class="grid grid-cols-2 gap-3">
                <div class="flex items-center gap-2 text-sm text-gray-700">
                  <svg class="w-4 h-4 text-emerald-500" 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>
                  Per-tenant dashboards
                </div>
                <div class="flex items-center gap-2 text-sm text-gray-700">
                  <svg class="w-4 h-4 text-emerald-500" 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>
                  Noisy neighbor detection
                </div>
                <div class="flex items-center gap-2 text-sm text-gray-700">
                  <svg class="w-4 h-4 text-emerald-500" 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 SLA tracking
                </div>
                <div class="flex items-center gap-2 text-sm text-gray-700">
                  <svg class="w-4 h-4 text-emerald-500" 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>
                  Usage analytics
                </div>
              </div>
            </div>
          </div>

          <!-- Public Status Pages -->
          <div class="group">
            <div class="h-full p-6 rounded-2xl bg-white border border-gray-300 shadow-sm hover:shadow-lg transition-shadow">
              <div class="inline-flex items-center justify-center w-10 h-10 rounded-lg bg-emerald-600 mb-4">
                <svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                </svg>
              </div>
              <h3 class="text-base font-semibold text-gray-900 mb-1">Beautiful Status Pages</h3>
              <p class="text-sm text-gray-500 mb-3">Keep customers informed with auto-updating status pages. Reduce support tickets, build trust, and communicate incidents professionally.</p>
              <div class="pt-3 border-t border-gray-100">
                <a href="/product/status-page" class="text-xs text-blue-600 hover:text-blue-800 font-medium flex items-center gap-1">
                  View Status Pages
                  <svg class="w-3 h-3" 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>
              </div>
            </div>
          </div>

          <!-- Deployment Correlation -->
          <div class="group">
            <div class="h-full p-6 rounded-2xl bg-white border border-gray-300 shadow-sm hover:shadow-lg transition-shadow">
              <div class="inline-flex items-center justify-center w-10 h-10 rounded-lg bg-violet-600 mb-4">
                <svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M3 3v1.5M3 21v-6m0 0 2.77-.693a9 9 0 0 1 6.208.682l.108.054a9 9 0 0 0 6.086.71l3.114-.732a48.524 48.524 0 0 1-.005-10.499l-3.11.732a9 9 0 0 1-6.085-.711l-.108-.054a9 9 0 0 0-6.208-.682L3 4.5M3 15V4.5" />
                </svg>
              </div>
              <h3 class="text-base font-semibold text-gray-900 mb-1">Deployment Correlation</h3>
              <p class="text-sm text-gray-500">Automatically correlate deployments with performance changes. Know instantly if a deploy caused a regression.</p>
            </div>
          </div>

          <!-- API Monitoring -->
          <div class="group">
            <div class="h-full p-6 rounded-2xl bg-white border border-gray-300 shadow-sm hover:shadow-lg transition-shadow">
              <div class="inline-flex items-center justify-center w-10 h-10 rounded-lg bg-amber-600 mb-4">
                <svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3-4.5 16.5" />
                </svg>
              </div>
              <h3 class="text-base font-semibold text-gray-900 mb-1">API Performance</h3>
              <p class="text-sm text-gray-500">Monitor public APIs end-to-end. Track latency, error rates, and rate limits before your API consumers notice issues.</p>
            </div>
          </div>

          <!-- Customer Experience -->
          <div class="group">
            <div class="h-full p-6 rounded-2xl bg-white border border-gray-300 shadow-sm hover:shadow-lg transition-shadow">
              <div class="inline-flex items-center justify-center w-10 h-10 rounded-lg bg-rose-600 mb-4">
                <svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M15.182 15.182a4.5 4.5 0 0 1-6.364 0M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Z" />
                </svg>
              </div>
              <h3 class="text-base font-semibold text-gray-900 mb-1">Real User Monitoring</h3>
              <p class="text-sm text-gray-500">See what your customers actually experience. Core Web Vitals, session replays, and error tracking for frontend apps.</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Integrations 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">
            Integrations
          </span>
          <h2 class="text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl">
            Works with your SaaS stack
          </h2>
          <p class="mt-4 text-lg text-gray-600">
            Native integrations with the tools SaaS companies use every day
          </p>
        </div>

        <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
          <div class="p-6 rounded-2xl bg-gray-50 border border-gray-200 text-center">
            <div class="text-lg font-semibold text-gray-900">AWS</div>
            <div class="text-sm text-gray-500 mt-1">Cloud infrastructure</div>
          </div>
          <div class="p-6 rounded-2xl bg-gray-50 border border-gray-200 text-center">
            <div class="text-lg font-semibold text-gray-900">Stripe</div>
            <div class="text-sm text-gray-500 mt-1">Payment monitoring</div>
          </div>
          <div class="p-6 rounded-2xl bg-gray-50 border border-gray-200 text-center">
            <div class="text-lg font-semibold text-gray-900">Slack</div>
            <div class="text-sm text-gray-500 mt-1">Alert notifications</div>
          </div>
          <div class="p-6 rounded-2xl bg-gray-50 border border-gray-200 text-center">
            <div class="text-lg font-semibold text-gray-900">GitHub</div>
            <div class="text-sm text-gray-500 mt-1">Deployment tracking</div>
          </div>
          <div class="p-6 rounded-2xl bg-gray-50 border border-gray-200 text-center">
            <div class="text-lg font-semibold text-gray-900">Kubernetes</div>
            <div class="text-sm text-gray-500 mt-1">Container orchestration</div>
          </div>
          <div class="p-6 rounded-2xl bg-gray-50 border border-gray-200 text-center">
            <div class="text-lg font-semibold text-gray-900">PostgreSQL</div>
            <div class="text-sm text-gray-500 mt-1">Database monitoring</div>
          </div>
          <div class="p-6 rounded-2xl bg-gray-50 border border-gray-200 text-center">
            <div class="text-lg font-semibold text-gray-900">Redis</div>
            <div class="text-sm text-gray-500 mt-1">Cache monitoring</div>
          </div>
          <div class="p-6 rounded-2xl bg-gray-50 border border-gray-200 text-center">
            <div class="text-lg font-semibold text-gray-900">Jira</div>
            <div class="text-sm text-gray-500 mt-1">Issue tracking</div>
          </div>
        </div>
      </div>
    </section>

    <!-- AI Agent Section -->
    <%- include('../Partials/copilot') -%>

    <!-- Enterprise Ready Section -->
    <%- include('../Partials/enterprise-ready') -%>

    <!-- Open Source Section -->
    <%- include('../Partials/proudly-open-source') -%>

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

</body>

</html>
