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

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

<head>
    <title>OneUptime for Platform Teams | Internal Developer Platform Observability</title>
    <meta name="description"
        content="Empower your platform team to deliver self-service observability. Build golden paths for developers with standardized monitoring, alerting, and incident response.">
        <%- 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-violet-50 px-4 py-1.5 text-sm text-violet-700 ring-1 ring-inset ring-violet-200 transition-all hover:bg-violet-100 hover:ring-violet-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="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>
            <span>Built for Platform Teams</span>
            <span class="h-1 w-1 rounded-full bg-violet-300"></span>
            <span>Open Source</span>
            <svg class="h-3.5 w-3.5 text-violet-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]">
            Build your internal <br class="hidden sm:block" />
            <span class="text-gray-700">developer platform.</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">
            Deliver self-service observability to your developers. Create golden paths with standardized monitoring, alerting, and incident response workflows.
          </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 RBAC</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>API-First Design</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>Self-host or Cloud</span>
            </div>
          </div>
        </div>
      </div>
    </div>

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

    <!-- Platform 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-rose-100/40 rounded-full blur-3xl"></div>
        <div class="absolute bottom-1/4 right-0 w-72 h-72 bg-amber-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-rose-600 tracking-wide uppercase mb-4">The Problem</p>
          <h2 class="text-4xl sm:text-5xl font-semibold tracking-tight text-gray-900 mb-6">
            Sound familiar?
          </h2>
        </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">Ticket overload</h3>
            </div>
            <p class="text-sm text-gray-600">"Can you set up monitoring for my service?" 50 times a week. Every team wants custom observability, but nobody wants to own it.</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="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.24-.438.613-.43.992a6.759 6.759 0 0 1 0 .255c-.008.378.137.75.43.99l1.004.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 0 1 0-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281Z" />
                  <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
                </svg>
              </div>
              <h3 class="font-semibold text-gray-900">No standards</h3>
            </div>
            <p class="text-sm text-gray-600">Every team has their own way of doing things. 50 different alert naming conventions. Zero consistency across services.</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="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="font-semibold text-gray-900">Permission chaos</h3>
            </div>
            <p class="text-sm text-gray-600">"Who has access to what?" Great question. Check 4 different tools and a spreadsheet someone last updated in 2022.</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="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Z" />
                </svg>
              </div>
              <h3 class="font-semibold text-gray-900">Budget battles</h3>
            </div>
            <p class="text-sm text-gray-600">"Your team used 3x more data than last month." Time for another chargebacks discussion nobody wants to have.</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="M3.75 3v11.25A2.25 2.25 0 0 0 6 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0 1 18 16.5h-2.25m-7.5 0h7.5m-7.5 0-1 3m8.5-3 1 3m0 0 .5 1.5m-.5-1.5h-9.5m0 0-.5 1.5" />
                </svg>
              </div>
              <h3 class="font-semibold text-gray-900">No visibility</h3>
            </div>
            <p class="text-sm text-gray-600">"What's the health of our platform?" Good luck building that executive dashboard from 7 different tools.</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="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                </svg>
              </div>
              <h3 class="font-semibold text-gray-900">Onboarding pain</h3>
            </div>
            <p class="text-sm text-gray-600">New service? New team? That's 2 weeks of setup, documentation reading, and Slack questions before they're productive.</p>
          </div>
        </div>
      </div>
    </section>

    <!-- The Solution Section -->
    <%- include('../Partials/product-grid-section', {
      label: 'The Solution',
      title: 'OneUptime',
      subtitle: 'Your IDP for observability.',
      description: 'Give developers self-service observability with guardrails. OneUptime provides the building blocks for your internal developer platform—standardized, governed, and easy to adopt.'
    }) -%>

    <!-- Platform 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-violet-100/40 rounded-full blur-3xl"></div>
        <div class="absolute bottom-1/4 left-0 w-72 h-72 bg-blue-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-violet-600 tracking-wide uppercase mb-4">Platform Engineering</p>
          <h2 class="text-4xl sm:text-5xl font-semibold tracking-tight text-gray-900 mb-6">
            Empower developers with<br class="hidden sm:block" />
            <span class="text-gray-500">self-service observability.</span>
          </h2>
          <p class="max-w-2xl mx-auto text-lg text-gray-600">
            Build golden paths that developers love to use. OneUptime gives you the control you need while giving developers the autonomy they want.
          </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          <!-- Service Catalog - 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-violet-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="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z" />
                  </svg>
                </div>
                <span class="text-xs text-gray-500 bg-gray-100 px-2 py-1 rounded-full">Service Discovery</span>
              </div>
              <h3 class="text-xl font-semibold text-gray-900 mb-2">Service Catalog</h3>
              <p class="text-gray-500 mb-5">Complete inventory of services with ownership, dependencies, and health status. Auto-discover from Kubernetes, cloud providers, or manual registration.</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>
                  Service ownership
                </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>
                  Dependency mapping
                </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>
                  Health aggregation
                </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>
                  Team contact info
                </div>
              </div>
            </div>
          </div>

          <!-- Multi-tenant RBAC -->
          <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-blue-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="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-base font-semibold text-gray-900 mb-1">Multi-tenant RBAC</h3>
              <p class="text-sm text-gray-500 mb-3">Fine-grained access control with SSO integration. Teams see only their services while platform teams see everything.</p>
              <div class="pt-3 border-t border-gray-100">
                <a href="/docs/rbac" class="text-xs text-violet-600 hover:text-violet-800 font-medium flex items-center gap-1">
                  RBAC Documentation
                  <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>

          <!-- Monitor Templates -->
          <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="M8.25 7.5V6.108c0-1.135.845-2.098 1.976-2.192.373-.03.748-.057 1.123-.08M15.75 18H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08M15.75 18.75v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5A3.375 3.375 0 0 0 6.375 7.5H5.25m11.9-3.664A2.251 2.251 0 0 0 15 2.25h-1.5a2.251 2.251 0 0 0-2.15 1.586m5.8 0c.065.21.1.433.1.664v.75h-6V4.5c0-.231.035-.454.1-.664M6.75 7.5H4.875c-.621 0-1.125.504-1.125 1.125v12c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V16.5a9 9 0 0 0-9-9Z" />
                </svg>
              </div>
              <h3 class="text-base font-semibold text-gray-900 mb-1">Monitor Templates</h3>
              <p class="text-sm text-gray-500">Create standardized monitoring templates for different service types. Developers get started in minutes with pre-configured golden signals.</p>
            </div>
          </div>

          <!-- API-First -->
          <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-First Design</h3>
              <p class="text-sm text-gray-500">Everything is available via API. Integrate with Backstage, Port, or your own internal developer portal.</p>
            </div>
          </div>

          <!-- Custom Dashboards -->
          <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-cyan-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.75 3v11.25A2.25 2.25 0 0 0 6 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0 1 18 16.5h-2.25m-7.5 0h7.5m-7.5 0-1 3m8.5-3 1 3m0 0 .5 1.5m-.5-1.5h-9.5m0 0-.5 1.5" />
                </svg>
              </div>
              <h3 class="text-base font-semibold text-gray-900 mb-1">Custom Dashboards</h3>
              <p class="text-sm text-gray-500">Build executive dashboards, team views, and service health boards. Embed anywhere or share publicly.</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Self-Service 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">
            Golden Paths
          </span>
          <h2 class="text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl">
            Self-service with guardrails
          </h2>
          <p class="mt-4 text-lg text-gray-600">
            Give developers what they need while maintaining platform standards
          </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
          <div class="text-center">
            <div class="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-2xl bg-violet-100">
              <svg class="h-8 w-8 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">5-Minute Onboarding</h3>
            <p class="text-gray-600">New service? New team? Pre-configured templates get them observability in minutes, not weeks.</p>
          </div>

          <div class="text-center">
            <div class="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-2xl bg-blue-100">
              <svg class="h-8 w-8 text-blue-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.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z" />
              </svg>
            </div>
            <h3 class="text-lg font-semibold text-gray-900 mb-2">Governed Access</h3>
            <p class="text-gray-600">Teams get exactly the permissions they need. RBAC with SSO keeps everything secure and auditable.</p>
          </div>

          <div class="text-center">
            <div class="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-2xl bg-emerald-100">
              <svg class="h-8 w-8 text-emerald-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">Platform Metrics</h3>
            <p class="text-gray-600">Track adoption, usage, and health across the entire platform. Know what's working and what needs attention.</p>
          </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>
