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

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

<head>
  <title>
    OneUptime Blog - Latest posts on Observability, Monitoring, Reliability and more.
  </title>
  <meta name="description" content="Learn more about Observability, Monitoring, Reliability and more.">
  <%- include('../head') -%>


</head>


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

    <div class="relative isolate overflow-hidden bg-white">

      <div class="py-24 sm:py-32">

        <div class="mx-auto max-w-7xl px-6 lg:px-8">
          <%- include('./Partials/BlogTitleAndDescription', { title: 'Engineering Uptime', smallTitle: '- Blog by OneUptime', description: 'Latest posts on Observability, Monitoring, Reliability and more.' }) -%>

          <div class="mt-4">
            <% if(blogPosts.length> 0){ %>
              <% const featured = blogPosts[0]; const rest = blogPosts.slice(1); %>
              <!-- Featured Post -->
              <div class="group/featured relative mb-14 rounded-2xl overflow-hidden border border-gray-200 bg-white p-8 md:p-12 shadow-sm ring-1 ring-gray-100 hover:shadow-lg hover:border-blue-200 hover:ring-blue-100 transition-all duration-300 cursor-pointer">
                <!-- Subtle gradient on hover -->
                <div class="absolute inset-0 bg-gradient-to-br from-blue-50/0 via-transparent to-emerald-50/0 group-hover/featured:from-blue-50/30 group-hover/featured:to-emerald-50/20 transition-all duration-500 pointer-events-none"></div>
                <div class="relative z-10">
                  <div class="">
                    <a href="<%- featured.blogUrl %>" class="group no-underline">
                      <p class="inline-flex items-center gap-2 text-xs font-medium uppercase tracking-wide text-blue-600 bg-blue-50 px-3 py-1.5 rounded-full ring-1 ring-blue-100 shadow-sm">
                        <span class="h-1.5 w-1.5 rounded-full bg-blue-500 animate-pulse"></span>
                        Featured
                      </p>
                      <h2 class="mt-5 text-3xl md:text-4xl font-bold tracking-tight text-gray-900 group-hover:text-blue-600 transition-colors duration-200"><%- featured.title %></h2>
                      <p class="mt-5 text-base md:text-lg leading-relaxed text-gray-600 line-clamp-5"><%- featured.description %></p>
                      <div class="mt-6 text-xs text-gray-500 flex flex-wrap items-center gap-3">
                        <img class="h-9 w-9 rounded-full ring-2 ring-white shadow-sm" src="https://avatars.githubusercontent.com/<%- featured.authorGitHubUsername -%>?s=80" alt="@<%- featured.authorGitHubUsername -%>" width="36" height="36" loading="lazy" decoding="async">
                        <span class="font-medium text-gray-600">@<%- featured.authorGitHubUsername -%></span>
                        <span class="select-none text-gray-300">•</span>
                        <span><%- featured.formattedPostDate -%></span>
                      </div>
                      <div class="mt-6">
                        <%- include('./Partials/Tags', { blogPost: featured }) -%>
                      </div>
                      <div class="mt-8 inline-flex items-center gap-2 text-sm font-semibold text-blue-600 group-hover:text-blue-500 transition-all duration-200">Read article <svg class="w-4 h-4 transition-transform duration-200 group-hover:translate-x-1" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" /></svg></div>
                    </a>
                  </div>
                </div>
              </div>

              <!-- Posts Grid -->
              <div id="blog-posts-grid" class="grid grid-cols-1 gap-10 sm:grid-cols-2 xl:grid-cols-3 items-stretch">
                <% for(var i=0; i<rest.length; i++) { const post = rest[i]; %>
                  <div data-blog-card class="h-full" data-search="<%- (post.title + ' ' + post.description + ' ' + post.tags.join(' ')).toLowerCase() -%>">
                    <%- include('./Partials/ListItem', { blogPost: post, colorIndex: i }) -%>
                  </div>
                <% } %>
              </div>
              <div id="no-search-results" class="hidden text-center text-gray-500 text-sm py-16">No posts match your search.</div>
              <%- include('./Partials/Pagination', { page: page, pageSize: pageSize, totalPages: totalPages, totalPosts: totalPosts, basePath: basePath }) -%>
            <% } else { %>
              <div class="text-center text-gray-600 text-lg py-12">No blog posts found.</div>
            <% } %>
            <div class="mt-24">
              <%- include('./Partials/OpenSourceCommitment', {blogPost: null}) -%>
            </div>
          </div>
        </div>
      </div>

    </div>




    <%- include('./Partials/BlogCta') -%>
      <%- include('../footer') -%>
</body>

</html>