ivabus/www
1
0
Fork 0
mirror of https://github.com/ivabus/www synced 2024-11-25 09:55:11 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Tom's updates

Browse source
This commit is contained in:
Jacob Heider 2022-04-25 17:56:21 -04:00 committed by mxcl
parent 1233fd8903
commit 3e8fb32045
Failed to extract signature
2 changed files with 224 additions and 225 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

85
public/index.html
View file

@ -2,6 +2,7 @@
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Equitable Open-Source for Web3</title>
<!-- Global site tag (gtag.js) - Google Analytics -->
@ -27,14 +28,14 @@
<body>
<nav class="navbar navbar-expand-lg navbar-dark sticky-top pb-3 pt-3">
<nav class="navbar navbar-expand-lg navbar-dark sticky-top my-auto">
<div class="container-fluid top-nav">
<a class="navbar-brand" href="#"><img src="Images/tea-main-logo.svg" style="width:100px;"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto me-4 mb-2 mb-lg-0 my-auto">
<div class="collapse navbar-collapse p-4" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto me-4 my-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
@ -58,18 +59,17 @@
<!-- Hero Section -->
<img id="tea-steam-dark-1" src="Images/tea-steam-dark-1.svg" alt="">
<img id="tea-steam-dark-2" src="Images/tea-steam-dark-2.svg" alt="">
<div class="container">
<div class="row hero mb-5 mt-5">
<div class="container mb-5 mt-5">
<div class="row hero my-auto">
<div style="z-index:100;" class="col-lg-6 col-sm-12 order-lg-1 order-sm-2 order-2">
<h1 class="mb-5"><span class="yellow">Equitable</span> Open-Source for Web3</h1>
<p style="font-size:18px;" class="mb-5">The tools that build the internet have steeped too long. For the past two decades, big tech has made trillions off the generosity of visionary developers and web pioneers… never thanking, never mentioning, and certainly never paying. At tea, we’re brewing something to change that by enabling developers (you) to continue doing what you love, while earning what you deserve.<br><span class="yellow"><strong>Download our Github app to get authenticated and join the tea revolution.</strong></span></p>
<h1 class="display-1 mb-4"><span class="yellow">Equitable</span> Open-Source for Web3</h1>
<p class="mb-5 fs-sm-5 fs-lg-6">The tools that build the internet have steeped too long. For the past two decades, big tech has made trillions off the generosity of visionary developers and web pioneers… never thanking, never mentioning, and certainly never paying. At tea, we’re brewing something to change that by enabling developers (you) to continue doing what you love, while earning what you deserve.<br><br>
<span class="yellow"><strong>Download our Github app to get authenticated and join the tea revolution.</strong></span></p>
<a class="btn btn-primary mb-3" href="https://github.com/apps/tea-xyz" role="button">Install our Github App</a><br>
<a class="btn btn-primary mb-5 disabled" id="whitepaper-btn" href="Media/tea.white-paper (v0.9, koinos).pdf" role="button">Whitepaper Coming Soon</a>
<a class="btn btn-primary disabled" id="whitepaper-btn" href="Media/tea.white-paper (v0.9, koinos).pdf" role="button">Whitepaper Coming Soon</a>
</div>
<div class="col-lg-6 col-sm-12 order-lg-2 order-sm-1 order-1">
<img class="hero-image mb-4 ps-5" src="Images/tea-hero-illustrationAsset 2.svg" alt="">
<img class="hero-image" src="Images/tea-hero-illustrationAsset 2.svg" alt="">
</div>
</div>
</div>
@ -78,10 +78,10 @@
<img id="tea-steam-1" src="Images/tea-steam-1.svg" alt="">
<img id="tea-steam-2" src="Images/tea-steam-2.svg" alt="">
<div class="row mission pb-5 pt-5">
<div class="container">
<div class="container pb-5 pt-5">
<div class="row">
<div class="col">
<h2 class="charcoal" style="text-align:center;">The tools you need to keep on building.</h2>
<h2 class="charcoal display-4" style="text-align:center;">The tools you need to keep on building.</h2>
<p class="charcoal" style="text-align:center;">Like its predecessor, brew, tea is the base of the developer stack–seated beneath the tools that build the internet. Unlike its predecessor, tea leverages blockchain and Web3 technology to eliminate anonymity and deliver compensation.</p>
</div>
</div>
@ -89,37 +89,37 @@
</div>
<!-- Web2 -->
<div class="container" id="why-tea">
<div class="container mb-5 mt-5 web2-container" id="why-tea">
<div class="row">
<div class="col-lg-6 col-md-12 col-sm-12 col-12 my-auto mb-5">
<p class="mb-5">WEB2</p>
<h3 class="mb-4">Thankless <span class="yellow">tech giants profit</span> from from the generosity of open-source developers.</h3>
<h3 class="mb-4 display-4">Thankless <span class="yellow">tech giants profit</span> from from the generosity of open-source developers.</h3>
<p class="mb-4">For more than twenty years the Internet has been built upon the fruits of freely available open source. Whenever a project enabled new functionality it was (whether desired or not) added as a new brick in the tower of infrastructure; giving the Internet new powers and capabilities; becoming a new foundation for all the innovations that followed. The maintainers of these new bricks became thanklessly unpaid volunteers.</p>
<hr class="mb-4">
<h4><img src="Images/no-compensation.svg" alt="no compensation icon" class="me-2"> No Compensation</h4>
<h4><img src="Images/no-compensation.svg" alt="no compensation icon" class="feature-icon me-2"> No Compensation</h4>
<p class="mb-4 ps-5">Developers contribute innovations (bricks) to the tower of infrastructure that serves as a feeding ground for big tech. Their efforts are capitalized on, yet they see none of that profit.</p>
<hr class="mb-4">
<h4><img src="Images/centralized.svg" alt="centralized icon" class="me-2"> Centralized</h4>
<h4><img src="Images/centralized.svg" alt="centralized icon" class="feature-icon me-2"> Centralized</h4>
<p class="mb-4 ps-5">Entire stacks are left at the mercy of single, proprietary vendors who control their composition and deployment. This turns the “tower of bricks” into a game of Jenga.</p>
<hr class="mb-4">
<h4><img src="Images/obligation_maintain.svg" alt="obligation icon" class="me-2"> Obligation to Maintain</h4>
<h4><img src="Images/obligation_maintain.svg" alt="obligation icon" class="feature-icon me-2"> Obligation to Maintain</h4>
<p class="ps-5">Open-source authors are pressured by their peers and the community at large to continuously maintain and update their contributions... again, without pay or gratitude.</p>
</div>
<div class="col-lg-6 col-sm-12 col-md-6 col-12 mx-auto web2-col my-auto">
<img style="display:block; margin-left:auto; margin-right:auto;" src="Images/web2-tower.svg" alt="">
<img class="web2-tower" style="display:block; margin-left:auto; margin-right:auto;" src="Images/web2-tower.svg" alt="">
</div>
</div>
</div>
<!-- Web3 -->
<div class="container">
<div class="container web3-container">
<div class="row">
<div class="col order-lg-1 order-sm-2 order-2">
<img class="mt-5" src="Images/web-3-towerAsset 2.svg" alt="">
<img class="mt-5 web3-tower" src="Images/web-3-towerAsset 2.svg" alt="">
</div>
<div class="col-lg-6 col-sm-12 my-auto order-lg-2 order-sm-1 order-1">
<p class="mb-5">WEB3</p>
<h3 class="mb-4">Blockchain <span class="yellow">empowers developers</span> to contribute to open-source while <span class="yellow">reaping overdue benefits</span>.</h3>
<h3 class="mb-4 display-4">Blockchain <span class="yellow">empowers developers</span> to contribute to open-source while <span class="yellow">reaping overdue benefits</span>.</h3>
<p class="mb-4">The problem has always existed, but the technology to solve it hasn’t. tea facilitates the graph of open source that underpins all modern digital infrastructure. We’re putting it on‐chain creating a map we’ll use to guide value redistribution to the open source that makes the Internet possible.
We’re not changing how open source works—it’s still free. web3 has introduced powerful new paradigms that allow value to be compensated without direct payment. Creator economy, meet open source.</p>
<hr class="mb-4">
@ -137,16 +137,16 @@
</div>
<!-- Features & Benefits -->
<div class="container" id="features">
<div class="container mb-5 mt-5" id="features">
<div class="row">
<div class="col mb-5">
<h2 style="text-align:center;">What makes it <span class="yellow">great</span>?</h2>
<h2 class="display-4" style="text-align:center;">What makes it <span class="yellow">great</span>?</h2>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-12 col-md-6 col-lg-4 mb-4">
<div class="col-12 col-sm-12 col-md-12 col-lg-4 mb-4">
<div class="card mb-4">
<div class="card-body ps-4 pe-4 pt-5 pb-5">
<div class="card-body p-4">
<img src="Images/cross-platform.svg" alt="" class="mb-3">
<h4 class="mb-4">Cross Platform Compatible</h4>
<p>Wherever you develop, wherever your CI/CD runs, however you deploy your app, tea is there. We abstract this detail away so you can get on with the work that matters to you.<br><br>
@ -162,7 +162,7 @@
</div>
<div class="card">
<div class="card-body ps-4 pe-4 pt-5 pb-5">
<div class="card-body p-4">
<img src="Images/delightful-dev.svg" alt="" class="mb-3">
<h4 class="mb-4">Delightful DevExperience</h4>
<p>tea is built with a “it just works” philosophy. It’s our job to set you up for success and then get out of your way so you can work as effectively as possible. Development is hard enough without the toolset being a source of pain as well.</p>
@ -175,9 +175,9 @@
</div>
<div class="col-12 col-sm-12 col-md-6 col-lg-4">
<div class="col-12 col-sm-12 col-md-12 col-lg-4">
<div class="card mb-4">
<div class="card-body ps-4 pe-4 pt-5 pb-5">
<div class="card-body p-4">
<img src="Images/designed-teams.svg" alt="" class="mb-3">
<h4 class="mb-4">Designed for tea’ms</h4>
<p>Good developers create. Great developers collaborate.</p>
@ -189,9 +189,9 @@
</div>
<div class="card mb-4">
<div class="card-body ps-4 pe-4 pt-5 pb-5">
<div class="card-body p-4">
<img src="Images/decentralized-secure.svg" alt="" class="mb-3">
<h4 class="mb-4">Decentralized & Secure</h4>
<h4 class="mb-4">Decentralized &amp; Secure</h4>
<p>tea’s decentralization offers tangible benefits to ecosystem security. Every layer of your apps and dapps is signed and verified on‐chain. Users can rest assured that the software they are using is what all its creators intended.</p>
<p>In day to day development our decentralization increases reliability (leftpad is a sore memory) and gives developers the flexibility they need to turn inspiration into empires; when a single proprietry vendor controls how your stack is composed and deployed your stack is centralized and under their control.</p>
@ -204,9 +204,9 @@
</div>
<div class="col-12 col-sm-12 col-md-6 col-lg-4">
<div class="col-12 col-sm-12 col-md-12 col-lg-4">
<div class="card mb-4">
<div class="card-body ps-4 pe-4 pt-5 pb-5">
<div class="card-body p-4">
<img src="Images/open-governance.svg" alt="" class="mb-3">
<h4 class="mb-4">Open Governance</h4>
<p>We believe the open source community needs to direct and control the ecosystem we will help launch. The DAO will be an open, transparent and evolving governance structure where the depth of your contributions will matter more than the depth of your pocket.</p>
@ -214,7 +214,7 @@
</div>
<div class="card">
<div class="card-body ps-4 pe-4 pt-5 pb-5">
<div class="card-body p-4">
<img src="Images/help-build.svg" alt="" class="mb-3">
<h4 class="mb-4">Want to Help Us Build It?</h4>
<p>Join the team that is both fixing how open source is funded and creating the tools that will accelerate its creation for the benefit of all humanity.</p>
@ -230,10 +230,10 @@
<!-- Partners -->
<div class="container">
<div class="container partners mt-5 mb-5">
<div class="row">
<div class="col mb-5">
<h3 style="text-align:center;">What’s a revolution without <span class="yellow">powerful allies?</span></h3>
<h3 style="text-align:center;" class="display-5">What’s a revolution without <span class="yellow">powerful allies?</span></h3>
</div>
</div>
@ -250,7 +250,7 @@
<div class="container p-4" id="community">
<div class="row">
<div class="col">
<h3 style="text-align:center;" class="mb-5">Join the Community</h3>
<h3 style="text-align:center;" class="mb-5 display-5">Join the Community</h3>
</div>
</div>
@ -297,17 +297,16 @@
</div>
<!-- Footer -->
<div class="container">
<div class="row mb-5">
<div class="container footer mb-5 mt-5">
<div class="row mb-5 mt-5">
<div class="col-lg-4">
<img src="Images/tea-light.svg" alt="tea.xyz logo" style="width:100px;">
<p class="boilerplate mt-3">tea is revolutionizing open-source by leveraging blockchain and Web3 to ensure fairness and equitability for the developers who power the internet. Now tell me, will you answer the call? A shot's been heard around the web, and the tea army wants you to join the cause.</p>
<p class="boilerplate mt-3 small">tea is revolutionizing open-source by leveraging blockchain and Web3 to ensure fairness and equitability for the developers who power the internet. Now tell me, will you answer the call? A shot's been heard around the web, and the tea army wants you to join the cause.</p>
</div>
<div class="col-lg-2 col-sm-6 col-6 mt-3">
<h6>Quick Links</h6>
<ul class="nav flex-column">
<ul class="nav flex-column small">
<li class="nav-item">
<a class="nav-link ps-0" href="#">Home</a>
</li>
@ -322,7 +321,7 @@
<div class="col-lg-2 col-sm-6 col-6 mt-3 mb-3">
<h6>Legal</h6>
<ul class="nav flex-column">
<ul class="nav flex-column small">
<li class="nav-item">
<a class="nav-link ps-0" href="#">Privacy Policy</a>
</li>

340
public/style.css
View file

@ -6,7 +6,7 @@ body{
.container,
.top-nav{
max-width: 1140px;
max-width: 1280px;
}
.row{
@ -15,7 +15,6 @@ body{
}
.container{
padding: 80px 20px;
z-index: 50;
}
@ -27,7 +26,6 @@ body{
margin-top: 80px;
}
@media only screen and (min-width: 600px) {
.hero-image{
display: block;
margin-left: auto;
@ -38,6 +36,136 @@ body{
background-color: black;
}
@media only screen and (max-width: 600px) {
#tea-steam-1{
position: absolute;
z-index: 0;
margin-top: -100px;
width: 50%
}
#tea-steam-2{
position: absolute;
z-index: 0;
display: block;
right: 0px;
margin-top: 50px;
}
.hero-image{
display:none;
}
#binance{
display: block;
margin-left: auto;
margin-right: auto;
width: 70%;
}
}
@media only screen and (min-width: 600px) {
#tea-steam-1{
position: absolute;
z-index: 0;
margin-top: -100px;
}
#tea-steam-2{
position: absolute;
z-index: 0;
right: 0px;
display: block;
margin-top: 100px;
}
#binance{
display: block;
margin-left: auto;
margin-right: auto;
width: 40%;
}
.web2-container{
padding-top: 100px;
padding-bottom: 100px;
}
.web3-container{
padding-top: 0px;
padding-bottom: 100px;
}
.partners{
padding-top: 100px;
padding-bottom: 100px;
}
}
.web3-tower{
width:70%;
display: block;
margin-left: auto;
margin-right: auto;
}
.web2-tower{
width: 50%;
}
#tea-steam-dark-1{
position: absolute;
z-index: 0;
}
#tea-steam-dark-2{
position: absolute;
z-index: 0;
right: 0px;
top: 0px;
}
/*Typorgaphy*/
h1,
h2,
h3,
h4,
h5{
font-family: 'Playfair Display', serif !important;
color: #fff;
z-index:200;
}
h6{
color: #fff;
}
p{
color:#fff;
}
.yellow{
color: #DDFC76;
}
.charcoal{
color: #2B3033;
}
.btn-primary{
background-color: #54BAAB;
border: none;
border-radius: 60px;
width: 300px;
padding: 10px 0px;
transition: 0.2s ease-in-out;
}
#tea-steam-1{
position: absolute;
z-index: 0;
@ -52,139 +180,40 @@ body{
margin-top: 100px;
}
#tea-steam-dark-1{
position: absolute;
z-index: 0;
.community-icon{
width: 30%;
}
#tea-steam-dark-2{
position: absolute;
z-index: 0;
right: 0px;
top: 0px;
.card-body{
background-color: #2B3033;
border: 1px solid #DCDBDB;
border-radius: 3px;
box-shadow: 0px 0px 24px #16191B;
}
}
@media only screen and (max-width: 600px) {
.hero-image{
display: none;
hr{
border: 1px solid #fff;
}
.navbar{
background-color: black;
}
.collapse{
padding-top: 30px;
padding-bottom: 30px;
transition: 0.1s ease-in-out;
}
#tea-steam-1{
position: absolute;
z-index: 0;
width: 250px;
margin-top: -100px;
}
#tea-steam-2{
position: absolute;
z-index: 0;
width: 200px;
right: 0px;
display: block;
margin-top: 300px;
}
#tea-steam-dark-1{
position: absolute;
z-index: 0;
width: 500px;
}
#tea-steam-dark-2{
display: none;
}
}
/*Typography*/
h1, h2, h3, h4, h5{
font-family: 'Playfair Display', serif;
color: #fff;
z-index:200;
}
h1{
font-size: 48px;
}
h2{
font-size: 38px;
}
h3{
font-size: 32px;
}
h6{
color: white;
font-weight: 600;
}
p{
font-size: 16px;
color: #fff;
}
.boilerplate{
font-size: 14px;
}
label{
color: #fff;
}
.yellow{
color:#DDFC76;
}
.charcoal{
color:#2B3033;
}
.nav-link:hover{
color: #54BAAB;
}
/*Buttons*/
.btn-primary{
background-color: #54BAAB;
border: none;
border-radius: 30px;
width: 280px;
padding: 10px 0px;
transition: 0.2s ease-in-out;
}
.btn-primary:hover{
.btn-primary:hover{
background-color: #62CFBF;
}
}
#whitepaper-btn{
#whitepaper-btn{
border: 2px solid #fff !important;
background-color: #2B3033;
}
}
.mission,
.community-container{
background-color: #54BAAB;
}
.mission,
.community-container{
background-color: #54BAAB !important;
}
.com-card{
.mission{
padding: 100px 0px;
}
.com-card{
background-color: #62C8B9 !important;
border: 2px solid #7CEEDD;
border-radius: 3px;
@ -192,55 +221,23 @@ label{
display: flex;
justify-content: center;
transition: 0.2s ease-in-out;
}
}
.com-card:hover{
.com-card:hover{
cursor:pointer;
box-shadow: 0px 0px 12px rgba(81, 92, 92, 0.3);
transform: scale(1.02);
}
}
.community-icon{
width: 30%
}
.card-body{
background-color: #2B3033;
border: 1px solid #DCDBDB;
border-radius: 3px;
box-shadow: 0px 0px 24px #16191B;
}
hr{
border: 1px solid #fff;
}
code{
code{
color:#DDFC76;
}
@media only screen and (min-width: 600px) {
.partner-img{
width: 40%;
}
}
@media only screen and (max-width: 600px) {
.partner-img{
width: 75%;
}
}
#binance{
display: block;
margin-left: auto;
margin-right: auto;
}
.nav-link{
.nav-link{
color:white;
}
}
.email-field{
.email-field{
width:100%;
border: none;
border-radius: 30px;
@ -248,17 +245,20 @@ code{
padding: 10px 20px;
color: white;
transition: 0.1s ease-in-out;
}
}
.email-field:focus{
.email-field:focus{
border: 1px solid #54BAAB !important;
box-shadow: 0px 0px 4px rgba(84, 186, 171, 0.5);
}
}
input{
input{
outline: none !important;
}
}
.email-submit{
.email-submit{
width: 100%;
}
}
.footer{
}