www/src/layouts/index.html

{{ 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;">Invisible yet <span class="callout white">powerful</span></h1>
        <div class="lead-box flex text-center black-bg p-xl-5 p-lg-5 p-md-5 p-sm-3 p-3">
          <p class="lead-text lead">Upgrade to Tea - the revolutionary, cross-platform package manager. Say goodbye to slow & clunky, and say hello to fast & smooth updates. From the creator of Brew.</p>
        </div>
      </div>
    </div>
  </div>
</section>
  <div class="full-width-cta-container">
   {{- partial "full-width-cta-split.html" . -}}
  </div>

  <style>

    @media only screen and (min-width: 1200px) {

      .lead-box{
        width: 100%;
        border: 2px solid #949494;
        min-height: 12.556vw;
      }

    }

    @media only screen and (min-width: 992px) and (max-width: 1200px) {

      .lead-box{
        width: 100%;
        border: 2px solid #949494;
        height:auto;
      }

    }

    @media only screen and (min-width: 768px) and (max-width: 992px) {

      .lead-box{
        width: 100%;
        border: 2px solid #949494;
        height: auto;
      }

    }

    @media only screen and (min-width: 576px) and (max-width: 768px) {

      .lead-box{
        width: 100%;
        border: 2px solid #949494;
        height: auto;
      }

    }

    @media only screen and (max-width: 576px) {

      .lead-box{
        border: 2px solid #949494;
        min-height: 300px;
        margin: 0vw 3.5vw !important;
      }

      .lead-text{
        text-align: left;
      }

    }

  </style>


<section class="hero-section terminal-demo">
  <div class="container">
    <div class="row">
      <div class="col">
        <a href="https://github.com/teaxyz/cli#teacli-0212" target="_blank">
        <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">
              <div class="terminal-content">
                <p id="terminal-output"></p>
                <p id="terminal-input"></p>
              </div>
          </div>
          <a href="https://github.com/teaxyz/cli#teacli-0212">
            <button id="tryIt" class="term-btn"type="button" name="button" target="_blank"><i class="icon-github term-icon"></i> Visit README</button>
          </a>
        </div>
        </a>
      </div>
    </div>
  </div>
</section>

{{- partial "hero-terminal-animation.html" -}}

<style>

  @media only screen and (min-width: 1200px) {

    .term-icon{
      position: relative;
      top: 3px;
    }

    .term-btn{
      text-transform: uppercase;
    }

    #tryIt{
      position: fixed;
      right: 20px;
      bottom: 20px;
      background-color: #8000ff;
      border: none;
      color: white;
      font-familY: "pp-neue-machina";
      padding: 5px 20px;
    }

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

    .terminal{
      height: auto;
      min-height: 449px;
      width: 58.594vw;
      display: block;
      margin-left: auto;
      margin-right: auto;
      margin-top:-0.3vw;
      margin-bottom: -8.371vw;
      border-radius: 10px;
      background-color: #1a1a1a;
      border: 1px solid gray;
      box-shadow: 0px 10px 18px rgba(10, 05, 05, .5);
      animation: float 3s ease-in-out infinite;
    }

    .terminal-bar{
      height: 30px;
      border-radius: 8px 8px 0px 0px;
      border-bottom: 1px solid gray;
    }

    #terminal-input:after {
      content: "|";
      color: green;
      position: absolute;
      left: 0;
      animation: blink 1s linear infinite;
    }

    @keyframes blink {
      0% {
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
    }

    #terminal-output {
      white-space: pre;
      display: inline-block;
    }
    #terminal-input {
      position: relative;
      display: inline-block;
    }
    .terminal-content{
      overflow: hidden;
    }

  }

  @media only screen and (min-width: 992px) and (max-width: 1200px) {

    .term-icon{
      position: relative;
      top: 3px;
    }

    .term-btn{
      text-transform: uppercase;
    }

    #tryIt{
      position: fixed;
      right: 20px;
      bottom: 20px;
      background-color: #8000ff;
      border: none;
      color: white;
      font-familY: "pp-neue-machina";
      padding: 5px 20px;
    }

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

    .terminal{
      height: auto;
      min-height: 449px;
      width: 58.594vw;
      display: block;
      margin-left: auto;
      margin-right: auto;
      margin-top:-0.3vw;
      margin-bottom: -8.371vw;
      border-radius: 10px;
      background-color: #1a1a1a;
      border: 1px solid gray;
      box-shadow: 0px 10px 18px rgba(10, 05, 05, .5);
      animation: float 3s ease-in-out infinite;
    }

    .terminal-bar{
      height: 30px;
      border-radius: 8px 8px 0px 0px;
      border-bottom: 1px solid gray;
    }

    #terminal-input:after {
      content: "|";
      color: green;
      position: absolute;
      left: 0;
      animation: blink 1s linear infinite;
    }

    @keyframes blink {
      0% {
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
    }

    #terminal-output {
      white-space: pre;
      display: inline-block;
    }
    #terminal-input {
      position: relative;
      display: inline-block;
    }
    .terminal-content{
      overflow: hidden;
    }

  }

  @media only screen and (min-width: 768px) and (max-width: 992px) {

    .term-icon{
      position: relative;
      top: 3px;
    }

    .term-btn{
      text-transform: uppercase;
    }

    #tryIt{
      position: fixed;
      right: 20px;
      bottom: 20px;
      background-color: #8000ff;
      border: none;
      color: white;
      font-familY: "pp-neue-machina";
      padding: 5px 20px;
    }

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

    .terminal{
      height: auto;
      min-height: 449px;
      width: 100%;
      display: block;
      margin-left: auto;
      margin-right: auto;
      margin-top:-0.3vw;
      margin-bottom: -8.371vw;
      border-radius: 10px;
      background-color: #1a1a1a;
      border: 1px solid gray;
      box-shadow: 0px 10px 18px rgba(10, 05, 05, .5);
      animation: float 3s ease-in-out infinite;
    }

    .terminal-bar{
      height: 30px;
      border-radius: 8px 8px 0px 0px;
      border-bottom: 1px solid gray;
    }

    #terminal-input:after {
      content: "|";
      color: green;
      position: absolute;
      left: 0;
      animation: blink 1s linear infinite;
    }

    @keyframes blink {
      0% {
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
    }

    #terminal-output {
      white-space: pre;
      display: inline-block;
    }
    #terminal-input {
      position: relative;
      display: inline-block;
    }
    .terminal-content{
      overflow: hidden;
    }

  }

  @media only screen and (min-width: 576px) and (max-width: 768px) {

    .term-icon{
      position: relative;
      top: 3px;
    }

    .term-btn{
      text-transform: uppercase;
    }

    #tryIt{
      position: fixed;
      right: 20px;
      bottom: 20px;
      background-color: #8000ff;
      border: none;
      color: white;
      font-familY: "pp-neue-machina";
      padding: 5px 20px;
    }

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

    .terminal{
      height: auto;
      min-height: 449px;
      width: 100%;
      display: block;
      margin-left: auto;
      margin-right: auto;
      margin-top:-0.3vw;
      margin-bottom: -8.371vw;
      border-radius: 10px;
      background-color: #1a1a1a;
      border: 1px solid gray;
      box-shadow: 0px 10px 18px rgba(10, 05, 05, .5);
      animation: float 3s ease-in-out infinite;
    }

    .terminal-bar{
      height: 30px;
      border-radius: 8px 8px 0px 0px;
      border-bottom: 1px solid gray;
    }

    #terminal-input:after {
      content: "|";
      color: green;
      position: absolute;
      left: 0;
      animation: blink 1s linear infinite;
    }

    @keyframes blink {
      0% {
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
    }

    #terminal-output {
      white-space: pre;
      display: inline-block;
    }
    #terminal-input {
      position: relative;
      display: inline-block;
    }
    .terminal-content{
      overflow: hidden;
    }

  }

  @media only screen and (max-width: 576px) {

    .term-icon{
      position: relative;
      top: 3px;
    }

    .term-btn{
      text-transform: uppercase;
    }

    #tryIt{
      position: fixed;
      right: 20px;
      bottom: 20px;
      background-color: #8000ff;
      border: none;
      color: white;
      font-familY: "pp-neue-machina";
      padding: 5px 20px;
    }

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

    .terminal{
      height: auto;
      min-height: 449px;
      width: 100%;
      display: block;
      margin-left: auto;
      margin-right: auto;
      margin-top:-0.3vw;
      margin-bottom: -8.371vw;
      border-radius: 10px;
      background-color: #1a1a1a;
      border: 1px solid gray;
      box-shadow: 0px 10px 18px rgba(10, 05, 05, .5);
      animation: float 3s ease-in-out infinite;
    }

    .terminal-bar{
      height: 30px;
      border-radius: 8px 8px 0px 0px;
      border-bottom: 1px solid gray;
    }

    #terminal-input:after {
      content: "|";
      color: green;
      position: absolute;
      left: 0;
      animation: blink 1s linear infinite;
    }

    @keyframes blink {
      0% {
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
    }

    #terminal-output {
      white-space: pre;
      display: inline-block;
    }
    #terminal-input {
      position: relative;
      display: inline-block;
    }
    .terminal-content{
      overflow: hidden;
    }

  }

</style>

<!-- Teal Impact Section -->

<section class="teal-bg impact-section one-box">
  <div class="container">
    <div class="row one-box-down">
      <div class="col-10">
          <div>
            <h2 class="black display-3" 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-xl-4 col-lg-4 col-md-4 col-sm-12 col-12 mb-xl-0 mb-lg-0 mb-md-5 mb-sm-5 mb-5">
        <i class="icon-pattern-random-15 black display-6"></i><br><br>
        <h3 class="black display-6">Effortless Package Management</h3>
        <p class="black">Tea eliminates the need to manually install packages, as it automatically fetches and installs the required packages and creates a virtual environment.</p>
      </div>
      <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12 mb-xl-0 mb-lg-0 mb-md-5 mb-sm-5 mb-5">
        <i class="icon-pattern-random-15 black display-6"></i><br><br>
        <h3 class="black display-6">Virtual Envir. Creation</h3>
        <p class="black">Cross-Platform and Versatile: Tea supports multiple platforms and programming languages and allows users to specify specific versions of tools.</p>
      </div>
      <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12">
        <i class="icon-pattern-random-15 black display-6"></i><br><br>
        <h3 class="black display-6">Flexible Dependency Control</h3>
        <p class="black">Tea allows developers to encode project-specific dependencies into the project README, making it effortless for both tea users and non-tea users to work on the project.</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>

<!-- Getting Started -->

<section class="gs-section">
  <div class="container">
    <div class="row two-boxes">
      <div class="col-xl-5 col-lg-5 col-md-12 col-sm-12 col-12 mb-5">
        <div class="gs-parent">
          <div class="gs-content">
            <h2 class="display-3">Getting started with tea!</h2>
            <p class="lead">Installing tea is easy and convenient, with multiple options to choose from.</p>
            <p class="mb-5">Tea is a standalone, cross-platform binary that can be installed by cURLing or using a package manager like brew. Additionally, there's an installer available that provides shell magic and sets up the environment. The one-liner abstracts away the installation process and creates a sandbox for running code. With the installation, there's no need for a preamble in tutorials and blog posts. The installer also updates tea. The binary is supported on Linux, macOS, and WSL and will soon be available for Windows natively. Another option for installation is using GitHub Actions, which installs dependencies and makes tea accessible in the workflow.</p>
            <a href="https://github.com/teaxyz/cli#getting-started" target="_blank">
              <button class="hbtn hb-fill-right" id="hb-btn" style="text-transform:uppercase;"><i class="btn-icon icon-github"></i>VIEW README<span style="text-transform:lowercase;">.md</span></button>
            </a>
          </div>
        </div>

        <style>
          .gs-parent{
          }
          .gs-content{
          }
        </style>

      </div>
      <div class="col-xl-7 col-lg-7 col-md-12 col-sm-12 col-12 ps-xl-5 ps-lg-5 ps-md-0 ps-sm-3 ps-3">

        <div class="mb-5">
          <!-- terminal description -->
          <p class="mb-4 lead light-gray">If you want to just use tea as a standalone binary, you can cURL it:</p>
          <!-- Terminal sample -->
          <div class="terminal flex term-getting-started">
            <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">
                <div class="terminal-content">
                  <p>$ curl -Lo tea https://tea.xyz/$(uname)/$(uname -m)<br>
                  $ chmod u+x ./tea</p>
                </div>
            </div>
          </div>
        </div>

        <hr class="mb-5">

        <div class="mb-5">
          <!-- terminal description -->
          <p class="mb-4 lead light-gray">If you want tea’s shell magic, use the installer:</p>
          <!-- Terminal sample -->
          <div class="terminal flex term-getting-started">
            <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">
                <div class="terminal-content">
                  <p>sh <(curl https://tea.xyz)</p>
                </div>
            </div>
          </div>
        </div>

        <div class="mb-5">
          <!-- terminal description -->
          <p class="mb-4 light-gray">This will confirm before setting up ~/.tea and adding to your ~/.shellrc. Our one-liner even abstracts installing tea itself:</p>
          <!-- Terminal sample -->
          <div class="terminal flex term-getting-started">
            <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">
                <div class="terminal-content">
                  <p>sh <(curl tea.xyz) bun run start</p>
                </div>
            </div>
          </div>
        </div>

        <div class="mb-5">
          <!-- terminal description -->
          <p class="mb-4 light-gray">This way, you don't need to start with "how to install tea" in your tutorials and blog posts. The installer also updates tea. If you hate installers, use brew:</p>
          <!-- Terminal sample -->
          <div class="terminal flex term-getting-started">
            <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">
                <div class="terminal-content">
                  <p>$ brew install teaxyz/pkgs/tea-cli</p>
                </div>
            </div>
          </div>
        </div>

        <div class="mb-3">
          <!-- terminal description -->
          <p class="mb-4 light-gray">You can also install tea through GitHub Actions:</p>
          <!-- Terminal sample -->
          <div class="terminal flex term-getting-started">
            <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">
                <div class="terminal-content">
                  <p>- uses: teaxyz/setup@v0</p>
                </div>
            </div>
          </div>
        </div>

        <p class="light-gray">tea is supported on macOS >= 11, Linux (glibc >= 23), and WSL, with Windows native support coming soon.</p>

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

<style>
  .term-getting-started{
    min-height: 0px !important;
    height: auto;
    width: 100% !important;
    animation: none !important;
    margin-bottom: 0 !important;
  }
</style>


<div class="full-width-cta-container">
 {{- partial "full-width-cta-split.html" . -}}
</div>

<!-- Features -->

<!-- Homebrew v. tea Section -->

<section class="features">
  <div class="container">
    <div class="row one-box">
      <div class="col">
        <h3 class="display-6 one-box-down">tea Features (<span class="release"></span>)</h3>
        <h2 class="display-3">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 one-box-down">
      <div class="col p-xl-5 p-lg-5 p-md-4 p-sm-4 p-4 pt-5 pb-5" style="border: 2px solid gray;">
        <h2 class="display-5">Faster Steeping</h2>
        <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p class="one-box-down">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <div class="row speed-comparison">
          <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12 mb-xl-0 mb-lg-0 mb-md-4 mb-sm-4 mb-4">
            <h3 class="dark-gray display-6">homebrew (slow)</h3>
            <div class="speed-terminal" style="box-shadow:none;">
              <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="terminal-content p-xl-5 p-lg-5 p-md-5 p-sm-2 p-3">
                <p class="teal small">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
              </div>
            </div>
          </div>
          <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
            <h3 class="display-6">tea (fast)</h3>
            <div class="speed-terminal">
              <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="terminal-content p-xl-5 p-lg-5 p-md-5 p-sm-2 p-3">
                <p class="teal small">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- First -->

    <div class="row feature-row p-xl-5 p-lg-5 p-md-3 p-sm-1 p-3 one-box-down">
      <div class="col-xl-7 col-lg-6 col-md-12 col-sm-12 col-12 mb-xl-0 mb-lg-0 mb-md-5 mb-sm-5 mb-5 flex order-2">
          <div class="feature-content ps-xl-5 ps-lg-3 ps-md-0 ps-sm-0 ps-0">
            <h2 class="display-4">tea magic</h2>
            <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
            <p class="mb-xl-5 mb-lg-5 mb-md-3 mb-sm-3 mb-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <div class="">
              <a href="https://github.com/teaxyz/cli#magic" target="_blank">
                <button class="hbtn hb-fill-right" id="hb-btn" style="text-transform:uppercase;"><i class="btn-icon icon-github"></i>VIEW README<span style="text-transform:lowercase;">.md</span></button>
              </a>
            </div>
          </div>
        </div>
      <div class="col-xl-5 col-lg-6 col-md-12 col-sm-12 xol-12 pb-xl-0 pb-lg-0 pb-md-5 pb-sm-5 pb-5 mt-xl-0 mt-lg-0 mt-md-5 mt-sm-5 mt-5">
        <div class="feature-terminal">
          <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="terminal-content p-xl-5 p-lg-5 p-md-5 p-sm-2 p-3">
            <p class="teal small">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          </div>
        </div>
      </div>
    </div>

    <!-- {{- partial "tea-magic-terminal-animation.html" -}} -->

    <!-- Second -->

    <div class="row feature-row p-xl-5 p-lg-5 p-md-3 p-sm-1 p-3 one-box-down">
      <div class="col-xl-7 col-lg-6 col-md-12 col-sm-12 col-12 mb-xl-0 mb-lg-0 mb-md-5 mb-sm-5 mb-5 flex order-2">
          <div class="feature-content ps-xl-5 ps-lg-3 ps-md-0 ps-sm-0 ps-0">
            <h2 class="display-4">value prop</h2>
            <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
            <p class="mb-xl-5 mb-lg-5 mb-md-3 mb-sm-3 mb-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <div class="">
              <a href="https://github.com/teaxyz/cli#magic" target="_blank">
                <button class="hbtn hb-fill-right" id="hb-btn" style="text-transform:uppercase;"><i class="btn-icon icon-github"></i>VIEW README<span style="text-transform:lowercase;">.md</span></button>
              </a>
            </div>
          </div>
        </div>
      <div class="col-xl-5 col-lg-6 col-md-12 col-sm-12 xol-12 pb-xl-0 pb-lg-0 pb-md-5 pb-sm-5 pb-5 mt-xl-0 mt-lg-0 mt-md-5 mt-sm-5 mt-5">
        <div class="feature-terminal">
          <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="terminal-content p-xl-5 p-lg-5 p-md-5 p-sm-2 p-3">
            <p class="teal small">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          </div>
        </div>
      </div>
    </div>


    <!-- Third -->

    <div class="row feature-row p-xl-5 p-lg-5 p-md-3 p-sm-1 p-3 one-box-down">
      <div class="col-xl-7 col-lg-6 col-md-12 col-sm-12 col-12 mb-xl-0 mb-lg-0 mb-md-5 mb-sm-5 mb-5 flex order-2">
          <div class="feature-content ps-xl-5 ps-lg-3 ps-md-0 ps-sm-0 ps-0">
            <h2 class="display-4">value prop</h2>
            <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
            <p class="mb-xl-5 mb-lg-5 mb-md-3 mb-sm-3 mb-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <div class="">
              <a href="https://github.com/teaxyz/cli#magic" target="_blank">
                <button class="hbtn hb-fill-right" id="hb-btn" style="text-transform:uppercase;"><i class="btn-icon icon-github"></i>VIEW README<span style="text-transform:lowercase;">.md</span></button>
              </a>
            </div>
          </div>
        </div>
      <div class="col-xl-5 col-lg-6 col-md-12 col-sm-12 xol-12 pb-xl-0 pb-lg-0 pb-md-5 pb-sm-5 pb-5 mt-xl-0 mt-lg-0 mt-md-5 mt-sm-5 mt-5">
        <div class="feature-terminal">
          <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="terminal-content p-xl-5 p-lg-5 p-md-5 p-sm-2 p-3">
            <p class="teal small">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          </div>
        </div>
      </div>
    </div>


    <!-- Fourth-->

    <div class="row feature-row p-xl-5 p-lg-5 p-md-3 p-sm-1 p-3 one-box-down">
      <div class="col-xl-7 col-lg-6 col-md-12 col-sm-12 col-12 mb-xl-0 mb-lg-0 mb-md-5 mb-sm-5 mb-5 flex order-2">
          <div class="feature-content ps-xl-5 ps-lg-3 ps-md-0 ps-sm-0 ps-0">
            <h2 class="display-4">value prop</h2>
            <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
            <p class="mb-xl-5 mb-lg-5 mb-md-3 mb-sm-3 mb-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <div class="">
              <a href="https://github.com/teaxyz/cli#magic" target="_blank">
                <button class="hbtn hb-fill-right" id="hb-btn" style="text-transform:uppercase;"><i class="btn-icon icon-github"></i>VIEW README<span style="text-transform:lowercase;">.md</span></button>
              </a>
            </div>
          </div>
        </div>
      <div class="col-xl-5 col-lg-6 col-md-12 col-sm-12 xol-12 pb-xl-0 pb-lg-0 pb-md-5 pb-sm-5 pb-5 mt-xl-0 mt-lg-0 mt-md-5 mt-sm-5 mt-5">
        <div class="feature-terminal">
          <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="terminal-content p-xl-5 p-lg-5 p-md-5 p-sm-2 p-3">
            <p class="teal small">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          </div>
        </div>
      </div>
    </div>


  </div>
</section>

<div class="full-width-cta-container">
 {{- partial "full-width-cta-split.html" . -}}
</div>

<style>

  .btn-icon{
    position: relative;
    top:2px;
  }

  #hb-btn{
    height: 75px !important;
  }
  .feature-row{
    border: 2px solid gray;
  }
  .feature-terminal{
    width: 100%;
    height: 100%;
    border: 2px solid gray;
    background-color: #1a1a1a;
    border-radius: 10px;
    box-shadow: 0px 10px 18px #121212;
    animation: float 3s ease-in-out infinite;
  }
  .speed-terminal{
    width: 100%;
    height: auto;
    min-height: 400px;
    border: 2px solid gray;
    background-color: #1a1a1a;
    border-radius: 10px;
    animation: float 3s ease-in-out infinite;
  }
  @keyframes float {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-5px);
    }
    100% {
      transform: translateY(0);
    }
  }
</style>



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

<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-9"></div>

  <div class="container">
    <div class="row mb-5">
      <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12">
        <h2 class="display-2">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>
      </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 "full-width-cta-split.html" . -}}
</div>


<section>
  <div class="container one-box-up one-box-down">
    <div class="row one-box-down">
      <div class="col">
        <h2 class="display-3">DON’T JUST TAKE OUR WORD FOR IT… TWITTER’S BEEN SIPPING THE TEA TOO!</h2>
      </div>
    </div>
    <div class="row twitter-desktop">
      <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12">
        {{- partial "twitter-card.html" -}}
        {{- partial "twitter-card.html" -}}
        {{- partial "twitter-card.html" -}}
      </div>
      <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12">
        {{- partial "twitter-card.html" -}}
        {{- partial "twitter-card.html" -}}
        {{- partial "twitter-card.html" -}}
      </div>
      <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12">
        {{- partial "twitter-card.html" -}}
        {{- partial "twitter-card.html" -}}
        {{- partial "twitter-card.html" -}}
      </div>
    </div>
    <div class="row twitter-mobile">
      <div class="col">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                {{- range .Data.Pages }}
                    <div class="swiper-slide">
                        {{- partial "twitter-card.html" . -}}
                    </div>
                {{- end }}
            </div>
        </div>
      </div>
    </div>
  </div>
</section>

<hr>

<section>
  <div class="container">
    <div class="row two-boxes">
      <div class="col">
        <h2 class="display-3 text-center">Ready to start building?<br>All you need is tea.</h2>
        <p class="lead text-center">Introducing tea’s +pkg syntax, the ultimate tool for streamlined open source access, allowing you to access the entire ecosystem with one command, compose and combine everything, and even more.</p>
      </div>
    </div>
  </div>
</section>

<div class="full-width-cta-container">
 {{- partial "full-width-cta-split.html" . -}}
</div>

<style>

  @media only screen and (min-width: 576px) {

    .twitter-desktop{
      visibility: visible;
    }
    .twitter-mobile{
      visibility: hidden;
      display: none;
    }

  }

  @media only screen and (max-width: 576px) {

    .twitter-desktop{
      visibility: hidden;
      display: none;
    }
    .twitter-mobile{
      visibility: visible;
    }

  }

  .twitter-card{
    border: 2px solid gray;
    border-radius: 10px;
    box-shadow: 0px 10px 18px #121212;
  }
  .title-bar{
    height:30px;
    border-bottom: 1px solid gray;
  }

  .title-bar i{
    color: #2675f5;
  }

</style>

<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>

<script>

  var mySwiper = new Swiper ('.swiper-container', {
  spaceBetween: 10,
  freeMode: true,
  direction: 'horizontal',
  loop: true,
  pagination: {
      el: '.swiper-pagination',
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  })

</script>

<section class="one-box">
  <div class="container">
    <div class="row">
      <h2 class="display-2">OSS wouldn't work without talented contributors like you.</h2>
      <p class="mb-5">We at tea would like to give a big shout out to all the open-source developers out there. Your contributions and dedication to making the world a better place through technology is truly admirable. Thanks to your hard work and generosity, projects like teaxyz/cli can continue to improve and evolve. If you are interested in joining our team of code crusaders, we welcome you with open arms. Head on over to the teaxyz/cli repository on Github and start contributing today! Let's continue to make a positive impact on the world of technology together.</p>

    </div>
    <div class="row" id="contributors-list">

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

<hr>
  <div class="row button-container flex">
    <a href="https://github.com/teaxyz/cli/graphs/contributors" class="ps-0 pe-0 btn-div" id="btn-div-top" >
      <button class="sbtn sb-fill-top">VIEW ALL CONTRIBUTORS</button>
    </a>
    <a href="https://github.com/teaxyz/cli#contributing" class="ps-0 pe-0 btn-div" id="btn-div" >
      <button class="sbtn sb-fill-top">LEARN HOW TO CONTRIBUTE</button>
    </a>
  </div>
<hr>

<script>

  $.getJSON("https://api.github.com/repos/teaxyz/cli/contributors", function(contributors) {
  var contributorsList = $("#contributors-list");
  $.each(contributors, function(i, contributor) {
  contributorsList.append("<div class='col-3 col-sm-3 col-md-3 col-lg-1 col-xl-1'>" + "<a href='" + contributor.html_url + "' target='_blank'><img class='con-img mb-3' src='" + contributor.avatar_url + "'></a>" + "<p class='small' style='hyphens:auto;'>" + contributor.login + "</p>" + "</div>");
  });
  });

</script>

<style>

  .con-img{
    width:100%;
    border-radius: 5px;
    filter: grayscale(100);
    background-color: gray;
    transition: 0.1s ease-in-out;
  }

  .con-img:hover{
    transform: translateY(-5px);
    filter:none;
  }

</style>

{{ end }}