{{ define "main" }}

<!-- Hero Section -->

<section class="hero-section">
  <div class="container hero-container">
    <div class="row">
      <div class="col">
        <h1 class="impact text-center" style="z-index:3; position: relative;">the next&#8208;generation, cross&#8208;platform <span class="white">package manager</span></h1>
      </div>
    </div>
  </div>
</section>
  <div class="full-width-cta-container">
   {{- partial "full-width-cta-split.html" . -}}
  </div>

<section class="hero-section terminal-demo">
  <div class="container">
    <div class="row">
      <div class="col">
        <div class="terminal flex">
          <div class="terminal-bar dark-gray-bg"></div>
            <div class="p-5">
              <code class="lead teal">
                $ node --eval 'console.log("Hello World!")'command not found: node<br><br>

                $ sh <(curl tea.xyz) --yes installing ~/.tea…<br><br>

                $ node --eval 'console.log("Hello World!")'
                tea: installing nodejs.org^19
                Hello World!
            </code>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<style>

  .terminal{
    height: 37.667vw;
    width: 58.594vw;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: -8.371vw;
    border-radius: 10px;
    background-color: #121212;
    box-shadow: 0px 0px 18px #000;
    border: 1px solid gray;
  }

  .terminal-bar{
    height: 30px;
    border-radius: 10px 10px 0px 0px;
  }

</style>

<!-- Teal Impact Section -->

<section class="teal-bg impact-section two-boxes">
  <div class="container">
    <div class="row">
      <div class="col">
        <div class="box">
          <div>
            <h2 class="black text-center" style="z-index:2;">equitable open-source<br>for&nbsp;<br id="impact-break"><span class="cycle">web3</span></h2>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<style>

  .box {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .box div {

  }

</style>


<!-- Statistics -->

<section class="statistics" style="padding-top: 8.371vw !important; padding-bottom: 8.371vw !important;">

<!-- Generative Art for the statistics section -->

<div class="gen-art" id="gen-art-5"></div>
<div class="gen-art" id="gen-art-6"></div>
<div class="gen-art" id="gen-art-7"></div>
<div class="gen-art" id="gen-art-8"></div>
<div class="gen-art" id="gen-art-9"></div>

<!-- End generative art -->

  <div class="container">
    <div class="row mb-5">
      <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12">
        <h2>sta'tea'stics</h2>
        <p class="lead">Much like its predecessor, <a href="https://brew.sh/">brew</a>, tea is seeing a rapid rate of adoption. Developers around the world are doing amazing things with our next&#8208;generation, cross&#8208;platform package manager.</p>
        <p>In true open&#8208;source fashion, we&#39;re asking the community for <a href="https://github.com/teaxyz/cli">contributions to tea/cli</a>, as well as packaging assistance in an effort to add the web&#39;s top 300 packages to <a href="https://github.com/teaxyz/pantry.zero#contributing">our pantry</a>. Now is the time to be an early contributor in what will inevitably become the foundation of the future internet.</p><br>
        <!-- Commenting this out until more data is available. Everything can fit on the homepage as of now.
        {{- partial "detail-btn-large.html" "#" -}}
        -->
      </div>
    </div>
    <div class="row">
      <div class="col">
        <div class="metric-block" style="float:right; margin-top:-300px;">
          <p class="stat-head">NUMBER OF REPOS</p>
          <p class="stat-number teal" id="stat-one"></p>
          <p class="gray stat-small-text">Number of rated repos owned by tea&#8208;authenticated developers.</p>
        </div>
        <div class="gen-art-mobile" id="m-gen-art-3"></div>
        <div class="gen-art-mobile" id="m-gen-art-4"></div>
        <img class="mobile-grid-element" src="/Images/mobile-grid-element-3-rows.svg" alt="grid">
        <div class="metric-block mb-5 mt-4">
          <p class="stat-head">AUTHENTICATED DEVS</p>
          <p class="stat-number teal"><span id="count2"></span></p>
          <p class="gray stat-small-text">This is the number of OSS developers who have chosen to join the battle for the future of the internet.</p>
        </div>
        <div class="gen-art-mobile" id="m-gen-art-5"></div>
        <div class="gen-art-mobile" id="m-gen-art-6"></div>
        <img class="mobile-grid-element" src="/Images/mobile-grid-element-3-rows.svg" alt="grid">
        <div class="metric-block" style="float:right;">
          <p class="stat-head">TEA MAINTAINERS</p>
          <p class="stat-number teal" id="stat-two"></p>
          <p class="gray stat-small-text">Number of tea-maintainers for those <span id="stat-one-small"></span> repos.</p>
        </div>
        <div class="gen-art-mobile" id="m-gen-art-7"></div>
        <div class="gen-art-mobile" id="m-gen-art-8"></div>
        <img class="mobile-grid-element" src="/Images/mobile-grid-element-3-rows.svg" alt="grid">
      </div>
    </div>
  </div>
</section>
<div class="full-width-cta-container">
 {{- partial "clipboard-copy.html" . -}}
</div>

{{ end }}