www/src/layouts/index.html

{{ define "main" }}

<!-- Hero Section -->

<style>
  .hero{
    background-image: url("/Images/hero-background-mountains.png") !important;
    background-attachment: scroll;
    background-position: right;
    background-repeat: repeat-y;
    background-size: cover !important;
  }

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

    .hero{
      background-image: none !important;
    }

  }

  code{
    color:white;
    font-size: 14px;
  }

  .inner-glow{
    color: #1a1a1a;
    text-shadow: 0 0px 18px rgba(255, 255, 255, 0.5);
    opacity: 0;
    animation: fadeIn 1s ease-in-out forwards;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  .code-box{
    border: 1px solid #ff4100;
    position: relative;
    padding: 2px;
    border-radius: 2px;
    color: #ff4100;
  }

  #copy-button{
    height: 40px;
    width: 120px;
    font-family: "inter", sans-serif !important;
    text-transform: uppercase;
  }

  @media only screen and (max-width: 768px) {
    .mobile-ctas,
    .mobile-term-loc{
      visibility: visible;
    }
    .desktop-ctas,
    .boilerplate,
    .hero-description,
    .hero-lead,
    .desktop-term-loc,
    .too-much{
      display:none;
    }
    .hero-text,
    .mobile-lead{
      text-align:center;
    }
    .mbtn{
      height:50px;
    }
    .hero-col{
      padding-top: 16vw;
      padding-bottom: 16vw;
    }
    .email{
      height: 50px !important;
    }
  }

  @media only screen and (min-width: 768px) {
    .mobile-ctas,
    .mobile-lead,
    .mobile-term-loc,
    .mobile-disclaimer,
    .section-divider{
      display:none;
    }
    .desktop-ctas,
    .desktop-term-loc{
      visibility: visible;
    }
    .bottom-cta{
      display: block;
      width:50%;
      margin-left:auto;
      margin-right:auto;
    }
  }

</style>

<section class="hero">
  <div class="container">
    <div class="row gx-5">
      <div class="hero-col col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12 my-auto">
        <h1 class="display-1 hero-text" style="z-index:3; position: relative;"><span class="inner-glow ">Invisible</span> yet <span class="callout white">powerful</span></h1>
          <p class="lead hero-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>
          <p class="lead mobile-lead mb-5">tea/cli... from the creator of <a href="https://brew.sh/" target="_blank">brew</a></p>
          <p class="mb-5 hero-description">Introducing tea, the cross-platform package manager of the future. Say goodbye to slow package managers. With tea, simply type commands and it takes care of the rest. Get the latest version easily and support specific tool versions for different projects. Encoding dependencies in the README makes it readable by humans and tea, providing easier access for users. Experience better package management with tea.</p>

          <div class="mobile-ctas">
            {{- partial "mobile-ctas.html" -}}
          </div>

          {{- partial "desktop-ctas.html" -}}

          <p class="small dark-gray mb-5 boilerplate">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 class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
        <div class="terminal-animation mb-3">
          {{- partial "hero-terminal-animation.html" -}}
        </div>
      </div>
    </div>
  </div>
</section>

<style>

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

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

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

    .terminal{
      height: auto;
      min-height: 40%;
      width: 100%;
      display: block;
      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 -->
<div class="section-divider teal-bg">
  <img src="/Images/pixel-section-divider.svg" style="pointer-events:none;" alt="">
</div>
<section class="teal-bg impact-section one-box">
  <div class="container">
    <div class="row">
      <div class="col">
          <div>
            <h2 class="black display-4 text-xl-center text-lg-center text-md-left text-sm-left text-left" style="z-index:2;">THIS ISN’T A PACKAGE MANAGER. TEA IS A UNIFIED PACKAGING INFRASTRUCTURE.</h2>
          </div>
      </div>
    </div>
    <div class="row one-box-up">
      <div class="col">
        <p class="text-xl-center text-lg-center text-md-left text-sm-left text-left black"><span class="too-much">NO. OF </span>REPOS</p>
        <h1 class="display-1 text-xl-center text-lg-center text-md-left text-sm-left text-left black"><span id="stat-one">56,987</span></h1>
      </div>
      <div class="col">
        <p class="text-xl-center text-lg-center text-md-left text-sm-left text-left black"><span class="too-much">NO. OF </span>MAINTAINERS</p>
        <h1 class="display-1 text-xl-center text-lg-center text-md-left text-sm-left text-left black"><span id="stat-two">56,987</span></h1>
      </div>
      <div class="col">
        <p class="text-xl-center text-lg-center text-md-left text-sm-left text-left black">STAR COUNT</p>
        <a href="https://github.com/teaxyz/cli/stargazers" target="_blank"><h1 class="display-1 text-xl-center text-lg-center text-md-left text-sm-left text-left black"><span class="stargazers">56,987</span></h1></a>
      </div>
      <div class="col">
        <p class="text-xl-center text-lg-center text-md-left text-sm-left text-left black">CURRENT RELEASE</p>
        <a href="https://github.com/teaxyz/cli/releases" target="_blank"><h1 class="display-1 text-xl-center text-lg-center text-md-left text-sm-left text-left black"><span class="release" style="text-transform:lowercase;">56,987</span></h1></a>
      </div>
    </div>
  </div>
</section>

<!-- Speed comparison section
<div class="section-divider">
  <img src="/Images/pixel-section-divider-teal.svg" style="pointer-events:none;" alt="">
</div>
<section class="one-box">
  <div class="container">
    <div class="row">
      <div class="col-xl-8 col-lg-8 col-md-12 col-sm-12 col-12">
        <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">@MXCL</a> HAS SET A NEW BAR.</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.</p>
        <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. 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 class="col">

        <div class="speed-terminal mb-3" 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"></p>
          </div>
        </div>

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

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

-->

<section>
  <div class="section-divider">
    <img src="/Images/pixel-section-divider-teal.svg" style="pointer-events:none;" alt="">
  </div>
  <div class="container">
    <div class="row 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">tea offers a unique way of managing and utilizing open source tools with its installer that adds hooks to your shell. With tea's magic, you can effortlessly set up project environments, automatically install commands, and easily manage packages from the open source ecosystem. Using tea magic is optional, but it offers a convenient way to streamline your development workflow. The magic only works in the terminal, but it is easy to remove if desired, and tea can still be used without magic by simply prefixing commands with "tea".</p>
            <p>tea's magic enables you to utilize the entire open source ecosystem with just a few keystrokes. The magic sets up project environments using shell environment variables, and if a command is not found, it will install the command before running it. tea's magic is designed for developers, and it won't compromise your system's integrity as it doesn't install packages in your PATH. Additionally, tea's magic can be used in shell scripts by manually adding it with the one-liner "source <(tea --magic=bash)" and you can inject packages into an environment with the "+pkg" syntax. Whether you are looking for an easy way to manage your development environment, or seeking a way to streamline your scripts, tea's magic is the solution you've been looking for.</p>
          </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" id="start-btn" style="cursor:pointer;">
          <div class="terminal-bar feature-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">
            <code id="terminal-output-2">
              {{- partial "play-btn" -}}
            </code>
          </div>
        </div>
      </div>
    </div>
    <script>
        const commands2 = [
          { input: "$ tea bun create next ./app<br>", output: `<span class="dark-gray">[package.json] Detected React - added "react-refresh"<br>
[package.json] Detected Next.js<br><br></span>` },
          { input: "", output: `<span class="dark-gray">$ bun install</span><br>
bun install v0.4.0 (a94bba63)<br>
  🔍 Resolving [1/11]<br>
[99.00ms] git<br>
<span style="color:green">+</span> @types/react@18.0.27<br>
<span style="color:green">+</span> bun-framework-next@12.2.5<br>
<span style="color:green">+</span> react-refresh@0.10.0<br>
<span style="color:green">+</span> typescript@4.9.5<br>
<span style="color:green">+</span> next@12.2.3<br>
<span style="color:green">+</span> react@18.2.0<br>
<span style="color:green">+</span> react-dom@18.2.0<br>
<span style="color:green">+</span> react-is@18.2.0<br>

 25 packages installed [704.00ms]<br>

[724.00ms] bun install<br><br>

` },
          { input: "", output: `<span class="dark-gray">$ bun bun --use next</span><br><br>` },
          { input: "", output: `bun-framework-next v12.2.5<br><br>
          <span class="ms-3">10.50 KB   bun-framework-next/client.development.tsx [0]</span><br>
          <span class="ms-3">2.97 KB   bun-framework-next/fallback.development.tsx [1]</span><br>
          <span class="ms-3">3.34 KB   bun-framework-next/page-loader.ts [2]<br></span><br>` },
          { input: "", output: `next v12.2.3<br><br>
          0.16 KB   next/app.js [3]<br>
1.04 KB   next/dist/client/add-base-path.js [4]<br>
0.77 KB   next/dist/client/add-locale.js [5]<br>
0.75 KB   next/dist/client/detect-domain-locale.js [6]<br>
0.80 KB   next/dist/client/has-base-path.js [7]<br>
4.85 KB   next/dist/client/head-manager.js [8]<br>
1.12 KB   next/dist/client/normalize-trailing-slash.js [9]<br>
4.50 KB   next/dist/client/page-loader.js [10]<br>
1.01 KB   next/dist/client/remove-base-path.js [11]<br>
0.74 KB   next/dist/client/remove-locale.js [12]<br>
1.35 KB   next/dist/client/request-idle-callback.js [13]<br>
8.49 KB   next/dist/client/route-loader.js [14]<br>
4.78 KB   next/dist/client/router.js [15]<br>
6.95 KB   next/dist/client/script.js [16]<br>
1.22 KB   next/dist/client/trusted-types.js [17]<br>
1.44 KB   next/dist/client/with-router.js [18]<br>
12.15 KB   next/dist/compiled/path-to-regexp/index.js [19]<br>
7.62 KB   next/dist/compiled/react-is/cjs/react-is.development.js [20]<br>
0.24 KB   next/dist/compiled/react-is/index.js [21]<br>
0.98 KB   next/dist/lib/is-error.js [22]<br>
2.43 KB   next/dist/pages/_app.js [23]<br>
0.65 KB   next/dist/shared/lib/amp-context.js [24]<br>
0.42 KB   next/dist/shared/lib/amp-mode.js [25]<br>
0.56 KB   next/dist/shared/lib/escape-regexp.js [26]<br>
0.69 KB   next/dist/shared/lib/head-manager-context.js [27]<br>
6.72 KB   next/dist/shared/lib/head.js [28]<br>
0.87 KB   next/dist/shared/lib/i18n/normalize-locale-path.js [29]<br>
0.71 KB   next/dist/shared/lib/is-plain-object.js [30]<br>
0.71 KB   next/dist/shared/lib/mitt.js [31]<br>
0.71 KB   next/dist/shared/lib/page-path/denormalize-page-path.js [32]<br>
0.44 KB   next/dist/shared/lib/page-path/normalize-path-sep.js [33]<br>
0.65 KB   next/dist/shared/lib/router-context.js [34]<br>
51.00 KB   next/dist/shared/lib/router/router.js [35]<br>
0.81 KB   next/dist/shared/lib/router/utils/add-locale.js [36]<br>
0.63 KB   next/dist/shared/lib/router/utils/add-path-prefix.js [37]<br>
12.70 KB   next/dist/shared/lib/router/utils/add-path-suffix.js [38]<br>
1.27 KB   next/dist/shared/lib/router/utils/format-next-pathname-info.js [39]<br>
3.58 KB   next/dist/shared/lib/router/utils/format-url.js [40]<br>
0.57 KB   next/dist/shared/lib/router/utils/get-asset-path-from-route.js [41]<br>
1.77 KB   next/dist/shared/lib/router/utils/get-next-pathname-info.js [42]<br>
0.70 KB   next/dist/shared/lib/router/utils/index.js [43]<br>
0.46 KB   next/dist/shared/lib/router/utils/is-dynamic.js [44]<br>
0.91 KB   next/dist/shared/lib/router/utils/parse-path.js [45]<br>
1.20 KB   next/dist/shared/lib/router/utils/parse-relative-url.js [46]<br>
0.93 KB   next/dist/shared/lib/router/utils/parse-url.js [47]<br>
0.63 KB   next/dist/shared/lib/router/utils/path-has-prefix.js [48]<br>
1.62 KB   next/dist/shared/lib/router/utils/path-match.js [49]<br>
6.75 KB   next/dist/shared/lib/router/utils/prepare-destination.js [50]<br>
1.71 KB   next/dist/shared/lib/router/utils/querystring.js [51]<br>
0.69 KB   next/dist/shared/lib/router/utils/remove-path-prefix.js [52]<br>
0.47 KB   next/dist/shared/lib/router/utils/remove-trailing-slash.js [53]<br>
3.85 KB   next/dist/shared/lib/router/utils/resolve-rewrites.js [54]<br>
1.15 KB   next/dist/shared/lib/router/utils/route-matcher.js [55]<br>
5.32 KB   next/dist/shared/lib/router/utils/route-regex.js [56]<br>
5.42 KB   next/dist/shared/lib/router/utils/sorted-routes.js [57]<br>
0.52 KB   next/dist/shared/lib/runtime-config.js [58]<br>
3.21 KB   next/dist/shared/lib/side-effect.js [59]<br>
5.53 KB   next/dist/shared/lib/utils.js [60]<br>
0.16 KB   next/head.js [61]<br><br></span>` },
{ input: "", output: `react v18.2.0<br><br>
<span class="ms-3"> 30.58 KB   react/cjs/react-jsx-dev-runtime.development.js [62]</span><br>
<span class="ms-3">64.50 KB   react/cjs/react.development.js [63]</span><br>
<span class="ms-3">0.17 KB   react/index.js [64]</span><br>
<span class="ms-3">0.20 KB   react/jsx-dev-runtime.js [65]<br></span><br>` },
{ input: "", output: `  1.13 MB JavaScript
       73 modules
        6 packages
 41492 LOC parsed x2
    119ms elapsed
 Saved to ./node_modules.bun, ./node_modules.server.bun

[2.41s] bun create next

Come hang out in bun's Discord: https://bun.sh/discord

-----

A local git repository was created for you and dependencies were installed automatically.

Created next project successfully

# When dependencies change, run this to update node_modules.bun:

  bun bun --use next

# To get started, run:

  cd app
  bun dev` },
              ];

        let commandIndex2 = 0;
        let command2 = commands2[commandIndex2];
        let commandOutput2 = "";

        function typeCommand2() {
          if (commandIndex2 === commands2.length) {
            return;
          }
          if (command2.input.length === 0) {
            commandOutput2 += '\n' + command2.output + '\n';
            document.querySelector("#terminal-output-2").innerHTML = commandOutput2;
            commandIndex2++;
            command2 = commands2[commandIndex2];
            setTimeout(typeCommand2, 1000);
            return;
          }
          commandOutput2 += command2.input[0];
          command2.input = command2.input.slice(1);
          document.querySelector("#terminal-output-2").innerHTML = commandOutput2;
          setTimeout(typeCommand2, 100);
        }

        document.querySelector("#start-btn").addEventListener("click", typeCommand2);
    </script>

    <div class="divider">
      <hr>
    </div>

    <!-- Second -->

    <div class="row one-box">
      <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 order-xl-1 order-lg-1 order-md-2 order-sm-2 order-2 flex">
          <div class="feature-content pe-xl-5 pe-lg-3 pe-md-0 pe-sm-0 pe-0">
            <h2 class="display-4">Developer Environments</h2>
            <p class="lead">Say goodbye to globally installed tools with different versions causing subtle bugs during development. With tea, you simply step into your project directory, type your command and voila, tea fetches and runs the specific versions that your project requires.</p>
            <p>tea is designed to be as clever as possible, it parses the required tool versions from different sources like GitHub Actions, .node-version files, YAML front matter in configuration files, and a # Dependencies section in your README.md. If there isn't a convention to specify the tool versions, you can add the YAML front matter to the tool's configuration file or add the dependencies to the # Dependencies section in your README.md. tea also provides SRCROOT and VERSION variables in addition to everything else required to make your dev environment function. To see the full environment for your project, simply run tea -En or env. If you encounter any issues or bugs, simply open a ticket. Try tea today and make project management a breeze!</p>
          </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 order-xl-2 order-lg-2 order-md-1 order-sm-1 order-1">
        <div class="feature-terminal" id="start-button" style="cursor:pointer;">
          <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">
            <code id="terminal-output-3">
              {{- partial "play-btn.html" -}}
            </code>
          </div>
        </div>
      </div>
    </div>

    <script>
      const commands3 = [
        { input: "$ node --version<br>", output: `v19.3.0<br><br>` },
        { input: "$ cat <<EOF >>my-project/README.md<br>", output: `# Dependencies<br>
          <table>
            <thead>
              <tr>
                <th>Project</th>
                <th>Version</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>nodejs.org</td>
                <td>^18.4</td>
              </tr>
            </tbody>
          </table>
EOF
    <br><br>` },
        { input: "$ cd my-project<br>", output: `my-project<br><br>` },
        { input: "$ node --version<br>", output: `v18.13.0` },
      ];

      let commandIndex3 = 0;
      let command3 = commands3[commandIndex3];
      let commandOutput3 = "";

      function typeCommand3() {
        if (commandIndex3 === commands3.length) {
          return;
        }
        if (command3.input.length === 0) {
          commandOutput3 += '\n' + command3.output + '\n';
          document.querySelector("#terminal-output-3").innerHTML = commandOutput3;
          commandIndex3++;
          command3 = commands3[commandIndex3];
          setTimeout(typeCommand3, 1000);
          return;
        }
        commandOutput3 += command3.input[0];
        command3.input = command3.input.slice(1);
        document.querySelector("#terminal-output-3").innerHTML = commandOutput3;
        setTimeout(typeCommand3, 100);
      }

      document.querySelector("#start-button").addEventListener("click", typeCommand3);
    </script>

    <div class="divider">
      <hr>
    </div>

    <!-- Third -->

    <div class="row one-box">
      <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 scripts</h2>
            <p class="lead">With tea, there's no need to install packages beforehand, just type the commands you need and tea takes care of the rest. This includes fetching packages, constructing a virtual environment isolated from the rest of your system, and then running your commands. The focus is on using tools rather than installing them.</p>
            <p>tea supports the full https://semver.org specification, allowing you to construct virtual environments of specific tools and versions, encapsulated separately from the rest of your system. You can also specify the version of a tool needed in the tool's config, using YAML front matter in a comment or by adding an isolated tea namespace in a file like package.json. tea also has the option to parse your README for dependencies, further cementing the notion that using tea is completely optional for both you and your users.</p>
          </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" id="start-animation-4" style="cursor:pointer;">
          <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">
            <code id="terminal-output-4">
              {{- partial "play-btn.html" -}}
            </code>
          </div>
        </div>
      </div>
    </div>

    <script>
      const commands4 = [
        { input: "tea https://github.com/teaxyz/demos/blob/main/hello-universe.sh<br><br>", output: `*** Interpreters ***<br><br>`},
        { input: "", output: `TypeScript: Hello, World!<br>`},
        { input: "", output: `Go: Hello, World!<br>`},
        { input: "", output: `JavaScript: Hello, World!<br>`},
        { input: "", output: `Perl: Hello, World!<br>`},
        { input: "", output: `Python: Hello, World!<br>`},
        { input: "", output: `Ruby: Hello World!<br>`},
        { input: "", output: `Lua: Hello, World!<br><br>`},
        { input: "", output: `*** Compilers ***<br><br>`},
        { input: "", output: `C: Hello, World!<br>`},
        { input: "", output: `Rust: Hello, World!<br>`},
      ];

      let commandIndex4 = 0;
      let command4 = commands4[commandIndex4];
      let commandOutput4 = "";

      function typeCommand4() {
        if (commandIndex4 === commands4.length) {
          return;
        }
        if (command4.input.length === 0) {
          commandOutput4 += '\n' + command4.output + '\n';
          document.querySelector("#terminal-output-4").innerHTML = commandOutput4;
          commandIndex4++;
          command4 = commands4[commandIndex4];
          setTimeout(typeCommand4, 1000);
          return;
        }
        commandOutput4 += command4.input[0];
        command4.input = command4.input.slice(1);
        document.querySelector("#terminal-output-4").innerHTML = commandOutput4;
        setTimeout(typeCommand4, 100);
      }

      document.querySelector("#start-animation-4").addEventListener("click", function() {
        typeCommand4();
      });
    </script>

  </div>
</section>

<hr>

<style>

  .btn-icon{
    position: relative;
    top:2px;
  }
  .feature-row{
    border: 2px solid gray;
    position: fixed;
    width: 100%;
  }
  .feature-terminal{
    width: 100%;
    min-height: 400px;
    border: 2px solid gray;
    background-color: #1a1a1a;
    border-radius: 10px;
    box-shadow: 0px 10px 18px #121212;
    animation: float 3s ease-in-out infinite;
  }
  .terminal-content{
    overflow-y: auto;
    min-height:400px;
    max-height: 400px;
  }
  .speed-terminal{
    width: 100%;
    height: auto;
    min-height: 50%;
    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>


<!-- Getting Started -->

<section class="gs-section">
  <div class="container">
    <div class="row one-box">
      <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="">
          <!-- 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 term-lead">
            <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="vertical-rule"></div>
        <div class="circle mb-3"></div>


        <style>

          .vertical-rule {
            width: 2px;
            height: 75px;
            background-color: #00ffd0;
            display: block;
            margin-left: auto;
            margin-right: auto;
          }

          .circle{
            width:12px;
            border: 2px solid #00ffd0;
            height: 12px;
            border-radius: 30px;
            display: block;
            margin-left: auto;
            margin-right: auto;
          }

          .vertical-rule-gray {
            width: 1px;
            height: 35px;
            background-color: #949494;
            display: block;
            margin-left: auto;
            margin-right: auto;
          }

          .circle-gray{
            width:12px;
            border: 1px solid #949494;
            height: 12px;
            border-radius: 30px;
            display: block;
            margin-left: auto;
            margin-right: auto;
          }



        </style>

        <div>
          <!-- 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="vertical-rule-gray"></div>
        <div class="circle-gray mb-3"></div>

        <div>
          <!-- 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="vertical-rule-gray"></div>
        <div class="circle-gray mb-3"></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;
  }
  .term-lead{
    border: 2px solid #00ffd0;
  }
</style>

<hr>

<!--

<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" -}}
      </div>
      <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12">
        {{- 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" -}}
      </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 mb-5">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 class="bottom-cta">{{- partial "desktop-ctas.html" -}}</div>
      </div>
    </div>
  </div>
</section>

<hr>

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

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