mirror of
https://github.com/ivabus/www
synced 2024-11-22 18:45:06 +03:00
Move tea-cli content from homepage to cli page
This commit is contained in:
Thomas Smith
parent
1aaf55c65b
commit
ae56d82124
1 changed files with 813 additions and 0 deletions
|
|
@ -1,3 +1,816 @@
|
||||||
{{ define "main" }}
|
{{ define "main" }}
|
||||||
|
|
||||||
|
<!-- Uncomment to enable site preloader:
|
||||||
|
|
||||||
|
{{- partial "preloader.html" -}}
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Hero Section -->
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
.comment{
|
||||||
|
background-color: #ff4100;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment-success{
|
||||||
|
background-color: #00ffd0;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment-process{
|
||||||
|
background-color: #ffff00;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment-success code{
|
||||||
|
color: #1a1a1a;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
.hero{
|
||||||
|
background-image: url("/Images/tea-hero-background.jpg") !important;
|
||||||
|
background-attachment: scroll;
|
||||||
|
background-position: left;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
.install-label{
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@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 one-box">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row gx-5 mb-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">Introducing <span class="tea">tea</span> - the revolutionary, cross-platform package manager. Say goodbye to slow & clunky, and say hello to fast & smooth. From the creator of Brew.</p>
|
||||||
|
<p class="lead mobile-lead mb-5"><span class="tea">tea</span>... from the creator of <a href="https://brew.sh/" target="_blank">brew</a></p>
|
||||||
|
<p class="mb-5 hero-description">With <span class="tea">tea</span>, simply type commands and it takes care of the rest. Get the latest versions of open source tools and support specific tool versions for different projects. Experience better package management with <span class="tea">tea</span>.</p>
|
||||||
|
|
||||||
|
<div class="mobile-ctas">
|
||||||
|
{{- partial "mobile-ctas.html" -}}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{{- partial "desktop-ctas.html" -}}
|
||||||
|
|
||||||
|
</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 class="row">
|
||||||
|
<div class="col">
|
||||||
|
{{- partial "click-to-copy.html" . -}}
|
||||||
|
<p class="no-installer grid-gray text-center"><span class="tea">tea</span> is a stand‐alone binary, see <a class="install-link" href="https://docs.tea.xyz/getting-started/install-tea/without-installer">our docs</a> for more installation methods.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
.install-link{
|
||||||
|
color: #00ffd0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.install-link:hover{
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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);
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#terminal-input {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
witdth: 100%;
|
||||||
|
}
|
||||||
|
.terminal-content{
|
||||||
|
overflow: hidden;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<div class="container">
|
||||||
|
<div class="row one-box">
|
||||||
|
<div class="col">
|
||||||
|
<p class="text-uppercase text-center small mb-5 grid-gray">As featured on</p>
|
||||||
|
<div class="row logos" style="width:60%;margin-left:auto;margin-right:auto;">
|
||||||
|
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12 p-3 text-center">
|
||||||
|
<a href="https://www.binance.com/en/blog/ecosystem/binance-labs-leads-$8-million-seed-funding-round-for-tea-421499824684903608" target="_blank">
|
||||||
|
<img src="/Images/binance.svg" alt="Binance Labs" style="width:140px;">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12 p-3 text-center">
|
||||||
|
<a href="https://techcrunch.com/2022/03/23/open-source-project-tea-is-brew2-for-web3/" target="_blank">
|
||||||
|
<img src="/Images/tech-crunch-tea-xyz.svg" alt="Binance Labs" style="width:140px;">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12 p-3 text-center">
|
||||||
|
<a href="https://stackoverflow.blog/2022/11/18/the-creator-of-homebrew-has-a-plan-to-get-open-source-contributors-paid-ep-506/" target="_blank">
|
||||||
|
<img src="/Images/stackoverflow-logo.svg" alt="Binance Labs" style="width:140px;">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 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 two-boxes">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col">
|
||||||
|
<div>
|
||||||
|
<h2 class="black display-5 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 UNIFIED PACKAGING INFRASTRUCTURE.</h2>
|
||||||
|
<p class="lead black text-xl-center text-lg-center text-md-center text-sm-left text-left">And through that packaging infrastructure, we have plans of leveraging blockchain to help remunerate devs for their contributions to OSS. You can learn more about our grand ambitions for web3 by checking out our <a href="https://tea.xyz/tea.white-paper.pdf" style="color:#1a1a1a !important;">white paper here</a>.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row one-box-up one-box-down">
|
||||||
|
<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-2 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-2 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-2 text-xl-center text-lg-center text-md-left text-sm-left text-left black"><span class="stargazers">6.1k</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-2 text-xl-center text-lg-center text-md-left text-sm-left text-left black"><span class="release" style="text-transform:lowercase;">v0.24.9</span></h1></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="authenticate p-2 pt-xl-0 pt-lg-0 pt-md-0 pt-sm-5 pb-xl-0 pb-lg-0 pb-md-0 pb-sm-5 pt-5 pb-5">
|
||||||
|
<div class="container auth-container one-box black-bg p-xl-5 p-lg-5 p-md-4 p-sm-4 p-4">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col">
|
||||||
|
<h2 class="display-6 text-xl-center text-lg-center text-md-center text-sm-left text-left black"><span id="count" style="color:#8000ff;"></span> OSS Devs Have Authenticated with GitHub</h2>
|
||||||
|
<p class="black mb-5 text-xl-center text-lg-center text-md-center text-sm-left text-left">As part of our long‐term, web3 vision, we're asking developers to authenticate via GitHub. Authentications will be integral in our mission to remunerate OSS developers for their valuable contributions to the modern internet landscape. </p>
|
||||||
|
<a href="https://github.com/login/oauth/authorize?client_id=9d1f1a72f1300b6991df&state=teaxyz">
|
||||||
|
<button class="hbtn-black hb-fill-right-black auth-click">AUTHENTICATE WITH GITHUB</button>
|
||||||
|
</a>
|
||||||
|
<p class="small auth-boiler mt-3 black">By clicking above, you'll be redirected to our GitHub OAuth app. We ask for your country of residence, as well as the hex address for your web3 wallet. This information will be used to assign you a rank based on your GitHub contributions, which in turn, will be used to determine remunerations after the launch of our <span class="tea">tea</span> protocol. You can learn more about our privacy policy <a class="purple" href="/privacy-policy/">here</a>.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
.auth-boiler{
|
||||||
|
line-height: 1.4em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hbtn-black {
|
||||||
|
background-color: #1a1a1a;
|
||||||
|
position: relative;
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: 60px;
|
||||||
|
display: inline-block;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 8px 20px;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
border: 1px solid #1a1a1a;
|
||||||
|
text-decoration: none;
|
||||||
|
color: rgb(225, 225, 225);
|
||||||
|
white-space: nowrap;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hb-fill-right-black::before {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
background: rgb(077, 077, 077);
|
||||||
|
transition-duration: 0.2s;
|
||||||
|
z-index: -1;
|
||||||
|
inset: 0px auto auto 0px;
|
||||||
|
width: 0px;
|
||||||
|
height: 100%;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.hb-fill-right-black:hover::before {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.hb-fill-right-black:hover {
|
||||||
|
color: rgb(255, 255, 255);
|
||||||
|
background: rgb(91, 0, 184);
|
||||||
|
transition: color 0.3s ease 0s, background 0s ease 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-width: 576px) {
|
||||||
|
|
||||||
|
.auth-click{
|
||||||
|
max-width: 290px;
|
||||||
|
display: block;
|
||||||
|
margin-left:auto;
|
||||||
|
margin-right:auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-container{
|
||||||
|
max-width: 800px;
|
||||||
|
margin-top: -100px;
|
||||||
|
border: 2px solid #1a1a1a;
|
||||||
|
background-color: #33ffd9;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 576px) {
|
||||||
|
|
||||||
|
.auth-click{
|
||||||
|
max-width: 290px;
|
||||||
|
display: block;
|
||||||
|
margin-right:auto;
|
||||||
|
}
|
||||||
|
.auth-container{
|
||||||
|
max-width: 800px;
|
||||||
|
margin-top: -100px;
|
||||||
|
border: 2px solid #1a1a1a;
|
||||||
|
background-color: #33ffd9;
|
||||||
|
}
|
||||||
|
.authenticate{
|
||||||
|
background-color: #00ffd0;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<div class="section-divider">
|
||||||
|
<img src="/Images/pixel-section-divider-teal.svg" style="pointer-events:none;" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="container two-boxes-up one-box-down">
|
||||||
|
<div class="row one-box-down">
|
||||||
|
<div class="col">
|
||||||
|
<h2 class="display-5 text-center">features</h2>
|
||||||
|
<p class="text-center">We're currently on <span class="tea">tea</span> <span class="release"></span> and our <span class="tea">tea</span>'m and community are working hard to make <span class="tea">tea</span> the most powerful package manager that the world has ever seen. From our revolutionary `magic` to powerful scripts that draw upon the entire open-source ecosystem, we’re fundamentally reimagining what a package manager can be. If you have suggestions or thoughts on how <span class="tea">tea</span> could be improved even further, we'd love for you to join the discussion!</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr>
|
||||||
|
<div class="row one-box-up">
|
||||||
|
<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-5">tea magic</h2>
|
||||||
|
<p>Easily access the entire open source ecosystem with <span class="tea">tea</span>. Simply prefix your commands with "<span class="tea">tea</span>" and if the tool isn't installed, <span class="tea">tea</span> will install it for you. Add magic to your shell scripts and use developer environments to enhance your workflow. magic is optional; if you don’t enable it, then just prefix your commands with `<span class="tea">tea</span>`.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xl-5 col-lg-6 col-md-12 col-sm-12 col-12 mb-xl-0 mb-lg-0 mb-md-3 mb-sm-3 mb-3">
|
||||||
|
<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" style="position:relative;">
|
||||||
|
<code id="terminal-output-2">
|
||||||
|
<div style="margin-top: 15%;">
|
||||||
|
{{- partial "play-btn.html" -}}
|
||||||
|
</div>
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{{- partial "animation-1.html" . -}}
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col">
|
||||||
|
<img src="/Images/lg-screen-grid.svg" alt="grid-element">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Second -->
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<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-5">Developer Environments</h2>
|
||||||
|
<p>Simplify your development environment setup with <span class="tea">tea</span> by automatically fetching the specific versions of tools your project needs. With a range of specifications, <span class="tea">tea</span> provides a seamless solution to manage project dependencies. Debug changes, supplement your environment, and see the full environment with ease.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xl-5 col-lg-6 col-md-12 col-sm-12 col-12 mb-xl-0 mb-lg-0 mb-md-3 mb-sm-3 mb-3 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">
|
||||||
|
<div style="margin-top: 15%;">
|
||||||
|
{{- partial "play-btn.html" -}}
|
||||||
|
</div>
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{{- partial "animation-2.html" . -}}
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col">
|
||||||
|
<img src="/Images/lg-screen-grid.svg" alt="grid-element">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Third -->
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xl-7 col-lg-6 col-md-12 col-sm-12 col-12 flex order-2">
|
||||||
|
<div class="feature-content ps-xl-5 ps-lg-3 ps-md-0 ps-sm-0 ps-0">
|
||||||
|
<h2 class="display-5">tea scripts</h2>
|
||||||
|
<p>Scripting is so powerful, but has been left in the dark ages because there’s no easy way to install the packages you need. <span class="tea">tea</span> can transform your scripts by leveraging the entire open source ecosystem.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xl-5 col-lg-6 col-md-12 col-sm-12 col-12 mb-xl-0 mb-lg-0 mb-md-3 mb-sm-3 mb-3">
|
||||||
|
<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">
|
||||||
|
<div style="margin-top: 15%;">
|
||||||
|
{{- partial "play-btn.html" -}}
|
||||||
|
</div>
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{{- partial "animation-3.html" . -}}
|
||||||
|
|
||||||
|
<!--
|
||||||
|
<hr>
|
||||||
|
-->
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
.btn-icon{
|
||||||
|
position: relative;
|
||||||
|
top:2px;
|
||||||
|
}
|
||||||
|
.feature-row{
|
||||||
|
border: 2px solid gray;
|
||||||
|
position: fixed;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
@media only screen and (max-width: 768px) {
|
||||||
|
.feature-terminal{
|
||||||
|
width: 100%;
|
||||||
|
min-height: 250px;
|
||||||
|
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{
|
||||||
|
height: 250px;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
.horizon-img{
|
||||||
|
height: 200px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media only screen and (min-width: 768px) {
|
||||||
|
.terminal-content{
|
||||||
|
overflow-y: auto;
|
||||||
|
min-height:400px;
|
||||||
|
max-height: 400px;
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.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>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<div class="container one-box-down">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col">
|
||||||
|
<img src="/Images/lg-screen-grid.svg" alt="grid-element">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="two-boxes-down">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 my-auto pe-5">
|
||||||
|
<h2 class="display-5">Getting started with tea!</h2>
|
||||||
|
<p class="mb-5"><span class="tea">tea</span> is a standalone binary for all platforms. You can curl it by itself or, if you want magic, use our installer. We provide a docker image and GitHub action for easier CI/CD.</p>
|
||||||
|
</div>
|
||||||
|
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 mb-3">
|
||||||
|
<div class="terminal mb-4 flex term-getting-started term-lead" style="min-height:auto; border:2px solid #00ffd0;">
|
||||||
|
<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-gs">
|
||||||
|
<code>$ sh <(curl https://tea.xyz)</code>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="mb-4 light-gray small">This will confirm before setting up <span class="tea">~/.tea</span> and adding to your ~/.shellrc. Our one-liner even abstracts installing <span class="tea">tea</span> itself:</p>
|
||||||
|
|
||||||
|
<div class="terminal mb-4 flex term-getting-started" style="min-height:auto;">
|
||||||
|
<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-gs">
|
||||||
|
<code>$ sh <(curl tea.xyz) bun run start</code>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="mb-4 light-gray small">This way, you don't need to start with "how to install tea" in your tutorials and blog posts. The installer also updates <span class="tea">tea</span>. If you hate installers, use brew:</p>
|
||||||
|
|
||||||
|
<div class="terminal flex term-getting-started" style="min-height:auto;">
|
||||||
|
<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-gs">
|
||||||
|
<code>$ brew install teaxyz/pkgs/tea-cli</code>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
.top-bar{
|
||||||
|
border-bottom: 2px solid #1a1a1a;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
<section class="teal-bg">
|
||||||
|
<div class="container one-box-up two-boxes two-boxes-down">
|
||||||
|
<div class="row one-box-down">
|
||||||
|
<div class="col">
|
||||||
|
<h2 class="display-5 black text-center">Don't just take our word for it; everybody's liking the new brew</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row twitter-desktop">
|
||||||
|
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12">
|
||||||
|
<div class="twitter-card mb-4">
|
||||||
|
<div class="top-bar flex p-1 ps-3">
|
||||||
|
<i class="icon-github black lead"></i>
|
||||||
|
</div>
|
||||||
|
<div class="twitter-content p-xl-5 p-lg-5 p-md-3 p-sm-4 p-4">
|
||||||
|
<div class="">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<p class="black">When I ran my script (yarnpkg.com), it was an amazing moment––I realized I have not setup deno yet but <span class="tea">tea magic</span> just did it for me. It was a 'wow' moment... just 'wow'.</p>
|
||||||
|
<hr class="mb-3" style="border-bottom: 1px solid black !important;">
|
||||||
|
<div class="flex-start">
|
||||||
|
<img class="avatar" src="/Images/neil-m.png" alt="">
|
||||||
|
<p class="small test-name black">Neil M</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12">
|
||||||
|
<div class="twitter-card mb-4">
|
||||||
|
<div class="top-bar flex p-1 ps-3">
|
||||||
|
<i class="icon-twitter black lead"></i>
|
||||||
|
</div>
|
||||||
|
<div class="twitter-content p-xl-5 p-lg-5 p-md-3 p-sm-4 p-4">
|
||||||
|
<p class="black">It is hard to think of a more perfect use for blockchain technology than coordinating package releases for opensource software. What @teaxyz_ is embarking on will improve security, maintenance, and reliability, while providing much-needed incentive for independent developers. 🙌🏼</p>
|
||||||
|
<hr class="mb-3" style="border-bottom: 1px solid black !important;">
|
||||||
|
<div class="flex-start">
|
||||||
|
<img class="avatar" src="/Images/jcinis-eth.jpeg" alt="">
|
||||||
|
<p class="small test-name black">jcinis.eth</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12">
|
||||||
|
<div class="twitter-card mb-4">
|
||||||
|
<div class="top-bar flex p-1 ps-3">
|
||||||
|
<i class="icon-discord black lead"></i>
|
||||||
|
</div>
|
||||||
|
<div class="twitter-content p-xl-5 p-lg-5 p-md-3 p-sm-4 p-4">
|
||||||
|
<p class="black">You guys are really onto something with <a href="https://github.com/teaxyz/cli#magic" style="color:#1a1a1a !important;">magics</a> – it's so awesome. I've been using it all day and I am hooked.</p>
|
||||||
|
<hr class="mb-3" style="border-bottom: 1px solid black !important;">
|
||||||
|
<div class="flex-start">
|
||||||
|
<img class="avatar" src="/Images/dd.png" alt="">
|
||||||
|
<p class="small test-name black">David D</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<div class="container">
|
||||||
|
<div class="row two-boxes-down">
|
||||||
|
<div class="col">
|
||||||
|
<h2 class="display-5 text-center">Ready to start building?<br>All you need is tea.</h2>
|
||||||
|
<p class="lead text-center mb-5"><span class="tea">tea</span>’s +pkg syntax embodies our core belief that good tools should just get out of the way so that you can keep making the internet a better place. Access the entire open source ecosystem with one command, compose and combine everything, and enjoy an all-around more delightful dev experience.</p>
|
||||||
|
<div class="bottom-cta">{{- partial "desktop-ctas.html" -}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<div class="container one-box-down">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col">
|
||||||
|
<img src="/Images/lg-screen-grid.svg" alt="grid-element">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
.twitter-card{
|
||||||
|
border: 2px solid #1a1a1a;
|
||||||
|
background-color: #33ffd9 !important;
|
||||||
|
min-height: 466px;
|
||||||
|
}
|
||||||
|
.title-bar{
|
||||||
|
height:30px;
|
||||||
|
}
|
||||||
|
.avatar{
|
||||||
|
height: 24px;
|
||||||
|
width: 24px;
|
||||||
|
border-radius: 30px;
|
||||||
|
background-color: gray;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.test-name{
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
.top-bar i{
|
||||||
|
position: relative;
|
||||||
|
top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</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>
|
||||||
|
|
||||||
|
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue