<!DOCTYPE html>
<html lang="en" id="oss-friends">

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

<head>
    <title>OneUptime | Our Open Source Friends</title>
    <meta name="description"
        content="Discover amazing open-source projects and companies that are building the future of software. From observability to AI, these are the tools we love and recommend.">
        <%- include('head', {
    enableGoogleTagManager: typeof enableGoogleTagManager !== 'undefined' ? enableGoogleTagManager : false
}) -%>
</head>

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

  <!-- Hero Section -->
  <div class="relative isolate bg-white overflow-hidden">
    <!-- Subtle grid pattern background (different from homepage - using dots pattern) -->
    <div class="absolute inset-0 -z-10 h-full w-full bg-white bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] bg-[size:2rem_2rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_110%)]"></div>

    <div class="py-24 sm:py-32 lg:py-40">
      <div class="mx-auto max-w-7xl px-6 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-gray-50 px-4 py-1.5 text-sm text-gray-600 ring-1 ring-inset ring-gray-200">
            <svg class="h-4 w-4 text-red-500" fill="currentColor" viewBox="0 0 24 24">
              <path d="M11.645 20.91l-.007-.003-.022-.012a15.247 15.247 0 01-.383-.218 25.18 25.18 0 01-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0112 5.052 5.5 5.5 0 0116.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 01-4.244 3.17 15.247 15.247 0 01-.383.219l-.022.012-.007.004-.003.001a.752.752 0 01-.704 0l-.003-.001z" />
            </svg>
            <span>Tools we love and use</span>
          </div>

          <!-- Main headline -->
          <h1 class="text-4xl font-medium tracking-tight text-gray-900 sm:text-5xl lg:text-[3.5rem] lg:leading-[1.15]">
            Our Open Source <br class="hidden sm:block" />Friends
          </h1>

          <!-- Subheadline -->
          <p class="mt-6 text-base leading-7 text-gray-600 sm:text-lg sm:leading-8 max-w-xl mx-auto">
            We believe in the power of open source. These amazing projects inspire us and are building the future of software together.
          </p>

          <!-- CTA buttons -->
          <div class="mt-10 flex flex-col sm:flex-row items-center justify-center gap-3 sm:gap-4">
            <a href="https://github.com/oneuptime/oneuptime" target="_blank"
              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">
              Star us on GitHub
              <svg class="ml-2 h-4 w-4" fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" /></svg>
            </a>
            <a href="#projects" 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 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600">
              Explore projects
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Category Navigation -->
  <div class="sticky top-0 z-10 border-b border-gray-200 bg-white/80 backdrop-blur-sm">
    <div class="mx-auto max-w-7xl px-6 lg:px-8">
      <div class="flex items-center justify-between py-4">
        <div class="flex items-center gap-2 text-sm text-gray-500">
          <span class="font-medium text-gray-900"><%= ossFriends.length %></span> projects across
          <span class="font-medium text-gray-900"><%= categories.length %></span> categories
        </div>
        <nav class="hidden sm:flex items-center gap-1">
          <% for(var c=0; c<categories.length; c++) { %>
            <% var cat = categories[c]; %>
            <% var catId = cat.toLowerCase().replace(/[^a-z0-9]+/g, '-'); %>
            <a href="#category-<%= catId %>" class="rounded-full px-3 py-1.5 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900">
              <%= cat.split(' & ')[0] %>
            </a>
          <% } %>
        </nav>
      </div>
    </div>
  </div>

  <!-- Projects by Category -->
  <div id="projects" class="bg-white py-16 sm:py-24">
    <div class="mx-auto max-w-7xl px-6 lg:px-8">

      <% for(var c=0; c<categories.length; c++) { %>
        <% var category = categories[c]; %>
        <% var categoryId = category.toLowerCase().replace(/[^a-z0-9]+/g, '-'); %>
        <% var categoryFriends = ossFriends.filter(function(friend) { return friend.category === category; }); %>

        <div id="category-<%= categoryId %>" class="<%= c > 0 ? 'mt-20' : '' %> scroll-mt-20">
          <!-- Category Header -->
          <div class="flex items-center gap-x-4 mb-8">
            <% if(category === 'Data & Analytics') { %>
              <div class="flex h-12 w-12 items-center justify-center rounded-lg bg-gray-600">
                <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125" />
                </svg>
              </div>
            <% } else if(category === 'Developer Tools') { %>
              <div class="flex h-12 w-12 items-center justify-center rounded-lg bg-gray-600">
                <svg class="h-6 w-6 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.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5" />
                </svg>
              </div>
            <% } else if(category === 'Productivity & Collaboration') { %>
              <div class="flex h-12 w-12 items-center justify-center rounded-lg bg-gray-600">
                <svg class="h-6 w-6 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 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>
            <% } else if(category === 'Infrastructure & DevOps') { %>
              <div class="flex h-12 w-12 items-center justify-center rounded-lg bg-gray-600">
                <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 14.25h13.5m-13.5 0a3 3 0 01-3-3m3 3a3 3 0 100 6h13.5a3 3 0 100-6m-16.5-3a3 3 0 013-3h13.5a3 3 0 013 3m-19.5 0a4.5 4.5 0 01.9-2.7L5.737 5.1a3.375 3.375 0 012.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 01.9 2.7m0 0a3 3 0 01-3 3m0 3h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008zm-3 6h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008z" />
                </svg>
              </div>
            <% } else if(category === 'Security') { %>
              <div class="flex h-12 w-12 items-center justify-center rounded-lg bg-gray-600">
                <svg class="h-6 w-6 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.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 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>
            <% } else if(category === 'AI & Machine Learning') { %>
              <div class="flex h-12 w-12 items-center justify-center rounded-lg bg-gray-600">
                <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z" />
                </svg>
              </div>
            <% } %>
            <div>
              <h2 class="text-2xl font-bold tracking-tight text-gray-900"><%= category %></h2>
              <p class="text-sm text-gray-500"><%= categoryFriends.length %> projects</p>
            </div>
          </div>

          <!-- Cards Grid -->
          <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
            <% for(var i=0; i<categoryFriends.length; i++) { %>
              <% var friend = categoryFriends[i]; %>
              <div class="group relative flex flex-col overflow-hidden rounded-2xl bg-white shadow-sm ring-1 ring-gray-200 hover:shadow-lg hover:ring-gray-300 transition-all duration-200">
                <div class="flex flex-1 flex-col p-6">
                  <div class="flex items-center gap-x-3">
                    <h3 class="text-lg font-semibold leading-7 text-gray-900 group-hover:text-gray-600 transition-colors">
                      <%= friend.name %>
                    </h3>
                  </div>
                  <p class="mt-3 text-sm leading-6 text-gray-600 flex-1">
                    <%= friend.description %>
                  </p>
                  <div class="mt-6 flex items-center gap-x-3">
                    <a href="<%= friend.websiteUrl %>" target="_blank" rel="noopener noreferrer"
                       class="inline-flex items-center gap-x-1.5 rounded-md bg-gray-100 px-3 py-2 text-sm font-semibold text-gray-600 hover:bg-gray-100 transition-colors">
                      <svg class="h-4 w-4" 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>
                      Website
                    </a>
                    <a href="<%= friend.repositoryUrl %>" target="_blank" rel="noopener noreferrer"
                       class="inline-flex items-center gap-x-1.5 rounded-md bg-gray-100 px-3 py-2 text-sm font-semibold text-gray-700 hover:bg-gray-200 transition-colors">
                      <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24">
                        <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
                      </svg>
                      GitHub
                    </a>
                  </div>
                </div>
              </div>
            <% } %>
          </div>
        </div>
      <% } %>
    </div>
  </div>

  <!-- Want to be listed section -->
  <div class="bg-gray-50 py-16 sm:py-24">
    <div class="mx-auto max-w-7xl px-6 lg:px-8">
      <div class="mx-auto max-w-2xl text-center">
        <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
          Want to be listed here?
        </h2>
        <p class="mt-6 text-lg leading-8 text-gray-600">
          Are you building an amazing open-source project? We'd love to feature you on this page.
          Submit a pull request to our GitHub repository and join our community of open-source friends.
        </p>
        <div class="mt-10 flex items-center justify-center gap-x-6">
          <a href="https://github.com/oneuptime/oneuptime" target="_blank"
             class="rounded-md bg-gray-900 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black">
            Submit a PR
          </a>
          <a href="/contact" class="text-sm font-semibold leading-6 text-gray-900">
            Contact us <span aria-hidden="true">-></span>
          </a>
        </div>
      </div>
    </div>
  </div>

  <!-- CTA Section -->
  <div class="bg-gray-600">
    <div class="px-6 py-24 sm:px-6 sm:py-32 lg:px-8">
      <div class="mx-auto max-w-2xl text-center">
        <h2 class="text-3xl font-bold tracking-tight text-white sm:text-4xl">
          Join the Open Source Movement
        </h2>
        <p class="mx-auto mt-6 max-w-xl text-lg leading-8 text-gray-100">
          OneUptime is fully open-source. Monitor your applications, manage incidents,
          and keep your customers informed - all with the power of open source.
        </p>
        <div class="mt-10 flex items-center justify-center gap-x-6">
          <a href="https://github.com/oneuptime/oneuptime" target="_blank"
             class="rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-600 shadow-sm hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">
            View on GitHub
          </a>
          <a href="/pricing" class="text-sm font-semibold leading-6 text-white">
            Get started <span aria-hidden="true">-></span>
          </a>
        </div>
      </div>
    </div>
  </div>

  </main>
  <%- include('footer') -%>
</body>
</html>
