{{ 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 black-bg flex-start p-1 ps-3">
            <div class="traffic-light"></div>
            <div class="traffic-light"></div>
            <div class="traffic-light"></div>
          </div>
            <div class="p-5">
              <p class="teal">
                node --eval 'console.log("Hello World!")'<br>command not found: node<br><br>

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

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

<style>

  .traffic-light{
    height: 16px;
    width: 16px;
    border: 1px solid gray;
    border-radius: 100px;
    display: inline-block;
    margin-right: 5px;
  }

  .terminal{
    height: auto;
    width: 58.594vw;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top:-0.3vw;
    margin-bottom: -8.371vw;
    border-radius: 10px;
    background-color: #121212;
    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 one-box-down">
      <div class="col-10">
          <div>
            <h2 class="black" style="z-index:2;">THIS ISN’T A PACKAGE MANAGER. TEA IS A UNIFIED PACKAGING <br>INFRASTRUCTURE.</h2>
          </div>
      </div>
      <img src="/Images/xl-grid-one-row.svg" alt="grid-element" class="single-grid-row">
    </div>
    <div class="row">
      <div class="col">
        <i class="icon-pattern-random-15 black display-6"></i><br><br>
        <h3 class="black">Integrate multiple tools</h3>
        <p class="black">Tea can easily integrate different tools and languages. This allows users to throw together scripts that use entirely separate tools and languages and share them with others with just a simple one-liner command.</p>
      </div>
      <div class="col">
        <i class="icon-pattern-random-15 black display-6"></i><br><br>
        <h3 class="black">UNIVERSAL<br>BINARY</h3>
        <p class="black">tea is a standalone, binary download that can be used on multiple different devices and operating systems. This makes it easy to use Tea on a variety of different devices, without the need to worry about compatibility issues.</p>
      </div>
      <div class="col">
        <i class="icon-pattern-random-15 black display-6"></i><br><br>
        <h3 class="black">All-inclusive<br>Packaging</h3>
        <p class="black">tea is a unified packaging infrastructure, providing access to the entire open source ecosystem. This means that Tea users can easily find and use a wide variety of software packages.</p>
      </div>

    </div>
  </div>
</section>

<style>

  i{
    font-weight: 900 !important;
  }

  .single-grid-row{
    margin-top: -1.6vw;
  }


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

  .box div {

  }

</style>

<!-- Features -->

<section>
  <div class="container">
    <div class="row one-box">
      <div class="col">
        <h3 class="one-box-down">tea Features (<span class="release"></span>)</h3>
        <h2>TO CALL TEA ‘REVOLUTIONARY’ WOULD BE AN UNDERSTATEMENT. <a href="https://twitter.com/mxcl?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor" style="color:#2675f5;">@MXCL</a> HAS SET A NEW BAR.</h2>
      </div>
    </div>
    <div class="row">
      <div class="col p-5" style="border: 2px solid gray;">
        <p class="lead">While homebrew takes about as long as your earl grey takes to steep, tea is done before you’ve time to put the bag in the cup.</p>
        <div class="flex">
          <div class="speed-terminal">

          </div>
          <div class="speed-terminal">

          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<style>

  .speed-terminal{
    width: 50%;
    height: 500px;
    background-color: #4d4d4d;
    border-radius: 10px;
  }

</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 }}