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;">the next&#8208;generation, cross&#8208;platform <span class="white"><br>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">
        <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>
                <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>

<style>

  .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;
  }

</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 display-2" 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">
        <i class="icon-pattern-random-15 black display-6"></i><br><br>
        <h3 class="black display-6">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-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">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-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">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 -->

<!-- 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-2">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-3">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-5">
                <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-5">
                <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-3">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-5">
            <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>

    <!-- 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-3">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-5">
            <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>


    <!-- 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-3">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-5">
            <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>


    <!-- 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-3">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-5">
            <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>
</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-7"></div>
<div class="gen-art" id="gen-art-8"></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>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 "clipboard-copy.html" . -}}
</div>


<section>
  <div class="container">
    <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">
      <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>
</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>

  .twitter-card{
    border: 2px solid gray;
    border-radius: 10px;
    box-shadow: 0px 10px 18px #121212;
    animation: float 3s ease-in-out infinite;
  }
  .title-bar{
    height:30px;
    border-bottom: 1px solid gray;
  }

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

</style>

<section>
  <div class="container">
    <div class="row">
      <div class="col">


        <script>
          const commands = [
            { input: "$ node --eval 'console.log(\"Hello World!\")'", output: `command not found: node<br><span class="dark-gray">#Node is not installed, thus command is not found :/ ...</span><br>` },
            { input: "$ sh <(curl tea.xyz) --yes", output: `installing ~/.tea...<br><table style="font-size:12px;" class="teal small">
    <thead>
        <tr>
            <th>% Total</th>
            <th>% Received</th>
            <th>% Xferd</th>
            <th>Average Speed</th>
            <th>Time</th>
            <th>Time</th>
            <th>Time</th>
            <th>Current</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>100</td>
            <td>13306</td>
            <td>100</td>
            <td>54983</td>
            <td>0</td>
            <td>--:--:--</td>
            <td>--:--:--</td>
            <td>--:--:--</td>
        </tr>
        <tr>
            <td colspan="8">k, we installed  <mark>/Users/userName/.tea/tea.xyz/v0.21.0/bin/tea</mark></td>
        </tr>
    </tbody>
</table>
` },
            { input: "$ node --eval 'console.log(\"Hello World!\")'", output: `tea: installing nodejs.org^19<br><span class="dark-gray">#tea magically installs needed dependencies...</span>` },
            { input: "", output: `Hello World! &#128526;<br><span class="dark-gray">#and tah-dah!</span>` },
          ];

          let commandIndex = 0;
          let command = commands[commandIndex];
          let commandOutput = "";

          function typeCommand() {
            if (commandIndex === commands.length) {
              return;
            }
            if (command.input.length === 0) {
              commandOutput += '\n' + command.output + '\n';
              document.querySelector("#terminal-output").innerHTML = commandOutput;
              commandIndex++;
              command = commands[commandIndex];
              setTimeout(typeCommand, 1000);
              return;
            }
            commandOutput += command.input[0];
            command.input = command.input.slice(1);
            document.querySelector("#terminal-output").innerHTML = commandOutput;
            setTimeout(typeCommand, 100);
          }

          typeCommand();
        </script>

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

{{ end }}