<div class="w-full h-screen overflow-x-hidden border-t flex flex-col">
    <main class="w-full flex-grow p-6">
      <!-- Content goes here! ðŸ˜� -->
      <!-- Projects Section -->
      <section class="body-font">
        <div class="container px-5 py-24 mx-auto">
            <div class="flex flex-wrap w-full mb-20">
                <div class="lg:w-1/2 w-full mb-6 lg:mb-0">
                  <h1 class="sm:text-3xl text-2xl font-medium title-font mb-2 text-gray-900">You can have it all. </h1>
                  <div class="h-1 w-20 bg-orange rounded"></div>
                </div>
                <p class="lg:w-1/2 w-full leading-relaxed text-gray-500">Starting from being a part of the community to honing new skills and showcasing projects, Zairza lets you monitor yourself.Here are a few projects we've worked on recently. Feel free to contact us for any project or collaboration. </p>
              </div>
            <div class="grid xl:grid-cols-3 lg:grid-cols-2 grid-cols-1 -m-4">
              <% projects.slice(0,18).forEach(function(project) { %>
              <div class="p-4">
                <div class="h-full bg-gray-100 bg-opacity-75 px-8 pt-16 pb-24 rounded-lg overflow-hidden text-center relative">
                  <h2 class="tracking-widest text-xs title-font font-medium text-gray-400 mb-1"><%= project.language %></h2>
                  <h1 class="title-font sm:text-2xl text-xl font-medium text-gray-900 mb-3"><%= project.name %></h1>
                  <p class="leading-relaxed mb-3"><%= project.description %></p>
                  <a class="text-blue inline-flex items-center justify-evenly w-2/5" href="<%= project.html_url %>">View in <i class="bx bxl-github bx-sm"></i>
                    <svg class="w-4 h-4 ml-2" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
                      <path d="M5 12h14"></path>
                      <path d="M12 5l7 7-7 7"></path>
                    </svg>
                  </a>
                  <div class="text-center mt-2 leading-none flex justify-center absolute bottom-0 left-0 w-full py-4">
                    <span class="text-gray-400 mr-3 inline-flex items-center leading-none text-sm pr-3 py-1 border-r-2 border-gray-200">
                        <i class="bx bx-git-repo-forked bx-xs"></i>
                        <%= project.forks %>
                    </span>
                    <span class="text-gray-400 inline-flex items-center leading-none text-sm">
                      <svg class="w-4 h-4 mr-1" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
                        <path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"></path>
                      </svg><%= project.open_issues %>
                    </span>
                  </div>
                </div>
              </div>
              <% }) %>
            </div>
          </div>
      </section>
    </main>
  </div>