{{ define "main" }}

<!-- Package Grid -->

<!-- Desktop/Tablet Package Display -->

  <span class="grid-package-display black-bg">
    {{- partial "package-grid.html" . -}}
  </span>

<!-- Mobile Package Display -->

  <span class="swiper-package-display">
    {{- partial "swiper.html" . -}}
  </span>

<hr>

<section>
  <div class="container">
    <div class="row two-boxes">
      <div class="col packing-illustration me-4">

      </div>
      <div class="col-xl-7 col-lg-7 col-md-12 col-sm-12 col-12">
        <h2 class="display-5 text-left">Wanna help us with the top 300 packages?</h2>
        <p class="lead text-left">In order to ensure that the sun never sets on our packaging empire, we at tea are looking for help from the communi'tea to package up the top 300 packages.</p>
        <p class="mb-5">Our developers are working hard, but it's a daunting task that we can't handle on our own. And of course, we're also grateful for packages <i>outside</i> of that top 300 roster. While at the moment, we're requesting that you assist purely for your love of open-source, once we launch our protocol, maintainers & contributors will be remunerated for their work via tea token.</p>
        <div class="row desktop-ctas">
          <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12 mb-3">
            <a href="https://github.com/teaxyz/pantry.extra">
              <button class="hbtn hb-fill-right text-uppercase" style="width:100% !important;">Contribute to Our Pantry</button>
            </a>
          </div>
          <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<style>

  .packing-illustration{
    background: url('/Images/futuristic-packaging.jpg');
    background-size: cover;
    background-position: scroll;
    border-radius: 10px;
  }

</style>

{{ end }}
