{{ define "main" }}

<div class="teacli-gen-art-1"></div>
<div class="teacli-gen-art-2"></div>

<section class="tea-cli">
  <div class="container tea-cli-container two-boxes">
    <div class="row">
      <div class="col my-auto">
        <h1>TEA CLI</h1>
        <p class="lead">brew2 for web3 is here. The minds that changed the interwebs for the better back in 2009 have just done it again. tea is here to help make your dev experience a little more delightful. </p>
      </div>
    </div>
  </div>
</section>

<style>

  .tea-cli-container{
    background-image: url("/Images/x-large-grid.svg");
    background-repeat: repeat;
    background-size: cover;
  }

</style>

<hr>
  <div class="row button-container" onclick="myFunction()" style="display:flex; justify-content:space-between;">
    <input class="one-liner" type="text" value="$ sh <(curl tea.xyz) install&nbsp;{{- .Title -}}" id="myInput" readonly>

    <!-- The button used to copy the text -->
    <button class="clipboard-copy" id="copy-icon" onclick="myFunction()" data-bs-toggle="modal" data-bs-target="#exampleModal"><u>copy</u></button>
  </div>
<hr>

<section class="animated-25" id="reveal" style="display:none;">
  <div class="container">
    <div class="row">
      <div class="col">
        <p class="text-center">Have you <a href="#">authenticated with tea</a>?</p>
      </div>
    </div>
  </div>
</section>

<style>

  #reveal{
    transition: 0.2s linear;
  }

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

    .one-liner{
      width: 85%;
      padding: 2.455vw 4.185vw;
      border-radius: 0px;
      border: none;
      background-color: #1a1a1a !important;
      font-family: "pp-neue-machina";
      color:#ffffff;
      font-size: 2vw;
      border-left: 2px solid #949494;
    }

    .one-liner:focus{
      border:none;
      outline: none;
      border-left: 2px solid #949494;
    }

    .clipboard-copy{
      height: 8.371vw;
      width: 14%;
      font-family: "pp-neue-machina";
      color:#ffffff;
      font-size: 2.1vw;
      float:right !important;
      background-color: #1a1a1a !important;
      border: none;
      border-right: 2px solid #949494;
      transition: 0.2s linear;
    }

    .clipboard-copy:hover{
      background-color: #00ffd0 !important;
      color: #1a1a1a !important;
      box-shadow: inset 0vw 0vw 0vw 0.558vw #1a1a1a !important;
    }

  }

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

    .one-liner{
      width: 85%;
      padding: 5vw 4vw;
      border-radius: 0px;
      border: none;
      background-color: #1a1a1a !important;
      font-family: "pp-neue-machina";
      color:#4d4d4d;
      font-size: 3.5vw;
      border-left: 2px solid #949494;
      border-right: 2px solid #949494;
    }

    .one-liner:focus{
      border:none;
      outline: none;
      border-left: 2px solid #949494;
      border-right: 2px solid #949494;
    }

    .clipboard-copy{
      padding: 5vw 4vw;
      width: 14%;
      font-family: "pp-neue-machina";
      color:#4d4d4d;
      font-size: 3.5vw;
      float:right;
      background-color: #1a1a1a !important;
      border: none;
      border-right: 2px solid #949494;
      transition: 0.2s linear;
    }

    .clipboard-copy:hover{
      background-color: #00ffd0 !important;
      color: #1a1a1a !important;
      box-shadow: inset 0vw 0vw 0vw 0.558vw #1a1a1a !important;
    }

  }

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

    .one-liner{
      width: 100%;
      padding: 7.5vw 7.5vw !important;
      border-radius: 0px;
      border: none;
      background-color: #1a1a1a !important;
      font-family: "pp-neue-machina";
      color:#4d4d4d;
      text-align: center !important;
      font-size: 4vw;
      border-left: 2px solid #949494;
      border-right: 2px solid #949494;
    }

    .one-liner:focus{
      border:none;
      outline: none;
      border-left: 2px solid #949494;
      border-right: 2px solid #949494;
    }

    .clipboard-copy{
      display: none;
    }

  }

</style>

<script>

    function myFunction() {
    // Get the text field
    var copyText = document.getElementById("myInput");

    // Select the text field
    copyText.select();
    copyText.setSelectionRange(0, 99999); // For mobile devices

     // Copy the text inside the text field
    navigator.clipboard.writeText(copyText.value);

    /* Alert the copied text
    alert("Copied " + copyText.value + " to clipboard");*/

    //Change button text to 'copied'
    document.getElementById("copy-icon").innerHTML = "copied!";

    // Reveal Auth text
    if (document.getElementById("reveal").style.display = "none") {
      document.getElementById("reveal").style.display = "block";
    } else {
      document.getElementById("reveal").style.display = "none";
    }
  }

</script>

<section class="teal-bg two-boxes">
  <div class="container">
    <div class="row">
      <div class="col">
        <h3 class="black text-center">Oh @#$%... the documentation <em>is</em> the script!?"</h3>
        <p class="black text-center">–Our latest developer discovering <strong>Executable Markdown</strong></p>
      </div>
    </div>
  </div>
</section>

<style>
  .tea-cli-data{
    font-size: 6.138vw;
    font-family: "pp-neue-machina";
  }
</style>

<section>
  <div class="container two-boxes">
    <div class="row one-box-down">
      <h3>The new foundation of the internet.</h3>
    </div>
    <div class="row">
      <div class="col-xxl-4 col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 one-box-down">
        <h4>teaxyz/cmd</h4>
        <p>A big reason Homebrew was a massive success was “viral contribution”. This is a new form of viral contribution. tea is a packaging primitive. We are making it super easy and viral for people to create new tools on top of tea and to satisfy that “I'm a part of this” urge that open source vitality plays up.</p>
      </div>
      <div class="col-xxl-4 col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 one-box-down">
        <h4>executable markdown</h4>
        <p>Markdown has become the ultimate documentation file format (white paper is written in it). Every project has comprehensive readmes. Every dev team documents their internal workspaces with markdown. We’re iterating the format by making it able to execute itself.</p>
      </div>
      <div class="col-xxl-4 col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 one-box-down">
        <h4>universal interpreter</h4>
        <p>Making a PM or tool that uses other packages sucks RN. This has led to self contained ecosystems where people make a packaging tool (eg. npm) and then everybody can only use tools within that ecosystem because everything else is too much friction. tea changes this.</p>
      </div>
      <div class="col-xxl-4 col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 one-box-down">
        <h4>virtual environment</h4>
        <p>devshops and open source projects need specific versions of tools and they need the whole team to be on those tools. Currently you either cross your fingers or use Docker. Docker sucks and slows down dev and hinders innovation. Docker is great for deployment but it sucks for dev. tea ensures that checking out a project uses the exact versions of things that project needs whatever platform they are developing on.</p>
      </div>
      <div class="col-xxl-4 col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 one-box-down">
        <h4>pantries</h4>
        <p>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 class="col-xxl-4 col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 one-box-down">
        <h4>Executable Blog Posts</h4>
        <p>Every blog post and tutorial on dev starts with brew install foo in tea’s future they will instead do sh <(curl tea.xyz) [<http://blog-post.com/article-url/>](<http://blog-post.com/article-url/>) (we will also release web-buttons that activate tea if installed or install it first otherwise).
</p>
      </div>
    </div>
  </div>
</section>

<hr>
<section>
  <div class="container three-boxes">
    <div class="row">
      <div class="col">
        <h3 class="text-center">And it's even better if you join the tea party...</h3>
      </div>
    </div>
  </div>
</section>
<hr>
{{- partial "full-width-cta.html" -}}

{{ end }}