Merge pull request #125 from teaxyz/tom-more-progress

Tom more progress

src/layouts/index.html

@@ -30,7 +30,7 @@
   <div class="container hero-container">
     <div class="row">
       <div class="col">
-        <h1>Keep <span class="white">what</span><br><span class="hero-float" style="float:right;"><span class="white">is</span> yours.</span></h1>
+        <h1 class="impact">Keep <span class="white">what</span><br><span class="hero-float" style="float:right;"><span class="white">is</span> yours.</span></h1>
       </div>
     </div>
     <div class="row">
@@ -177,12 +177,26 @@
 <!-- Package CTA Section -->
 
 <hr>
-  <section package-cta-section>
+  <section class="package-cta-section" id="authenticate">
-      <div class="container package-cta-container">
+      <div class="container package-cta-container two-boxes">
-        <div class="row" style="margin-bottom: 20px;">
+        <div class="row one-box-down">
-          <div class="col" style="margin: 150px 0px;">
+          <div class="col-lg-9">
-            <h3 class="text-center">Authenticate your GitHub for an even bigger sip</h3>
+            <h3>Authenticate your GitHub for an even bigger sip</h3>
-            <p class="text-center">Using tea without authenticating is like playing a video game without the DLC. There’s so much more to our ecosystem than a command line interface, and we want you to be a part of it.</p>
+            <p class="lead">Using tea without authenticating is like playing a video game without the DLC. There’s so much more to our ecosystem than a command line interface, and we want you to be a part of it.</p>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12 one-box-down">
+            <h5>heading one</h5>
+            <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-xl-4 col-lg-4 col-md-4 col-sm-12 col-12 one-box-down">
+            <h5>heading one</h5>
+            <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-xl-4 col-lg-4 col-md-4 col-sm-12 col-12 one-box-down">
+            <h5>heading one</h5>
+            <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>
       </div>
@@ -209,7 +223,9 @@
         <h2>sta'tea'stics</h2>
         <p class="lead">The problem is bigger than most realize. While everyday people use software every day, very few understand that the technology underlying their daily routine is provided by uncompensated labor.</p>
         <p>Even many developers don’t fully recognize the security risks of unpaid open-source until something deep in the stack collapses, like log4J.We want to shine a light on the scale of OSS usage, both to celebrate the achievements of unsung heroes as well as highlight the need for a better way.</p><br>
+        <!-- Commenting this out until more data is available. Everything can fit on the homepage as of now.
         {{- partial "detail-btn-large.html" "#" -}}
+        -->
       </div>
     </div>
     <div class="row">
@@ -258,8 +274,8 @@
     </div>
     <div class="row pt-5">
       <div class="col">
-        <img class="partner-logo" id="binance-logo" src="/Images/binance-logo-white.svg" alt="Binance Logo" style="width:16.183vw;">
+        <img class="partner-logo" id="binance-logo" src="/Images/binance-logo-white.svg" alt="Binance Logo" style="width:16.183vw; z-index:2; position:relative;">
-        <img class="partner-logo ps-5" id="galaxy-eco-labs" src="/Images/galaxy-eco.svg" alt="Galaxy Eco Logo" style="width:40%;">
+        <img class="partner-logo ps-5" id="galaxy-eco-labs" src="/Images/galaxy-eco.svg" alt="Galaxy Eco Logo" style="width:40%; z-index:2; position:relative;">
         <img class="mobile-grid-element" src="/Images/mobile-grid-element-3-rows.svg" alt="grid" style="margin-top: -2.8vw;">
         <div class="gen-art-mobile" id="m-gen-art-9"></div>
       </div>

src/layouts/page/authentication-success.html

@@ -2,19 +2,11 @@
 
 <div class="container auth-success-container">
   <div class="row">
-    <div class="col my-auto">
+    <div class="col success-container">
-      <div class="success-div p-4" style="
+      <div class="success-content">
-            margin: 0;
+        <h1 class="text-center display-4">Thanks for Authenticating!</h1>
-            position: absolute;
+        <p class="lead text-center">You've just become an integral part in the future of the internet, AND you'll be entitled to a variety of exciting rewards such as minted NFT badges to honor your work thus far.</p>
-            top: 50%;
+        <button onclick="window.location.href='/';" id="return-home" class="detail-btn-large"><i class="icon-enter-arrow"></i>RETURN HOME</button>
-            left: 50%;
-            width:70%;
-            -ms-transform: translate(-50%, -50%);
-            transform: translate(-50%, -50%);">
-        <h1 class="display-4 text-center">Thanks for Authenticating!</h1>
-        <p class="lead text-center mb-5">You've just become an integral part in the future of the internet, AND you'll be entitled to a variety of exciting rewards such as minted NFT badges to honor your work thus far.</p>
-        <a class="btn btn-primary mb-5" href="https://tea.xyz"
-          role="button">Return to Home</a>
       </div>
     </div>
   </div>
@@ -22,46 +14,24 @@
 
 <style>
 
-  .auth-success-container{
+  .success-container{
-    height:100vh;
+    height: 80vh;
     position: relative;
-    background-image: url("/Images/tea-steam-dark.svg");
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: contain;
   }
 
-  .btn-primary{
+  .success-content{
-    display: block;
+    margin: 0;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  #return-home{
+    display:block;
     margin-left:auto;
     margin-right:auto;
   }
 
-  .success-gif{
-    width: 7vw;
-    height: 7vw;
-    border-radius: 100px;
-    background-image: url("/Images/auth-success.gif");
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: cover;
-    display: block;
-    margin-left:auto;
-    margin-right:auto;
-  }
-
-  @media only screen and (max-width: 720px) {
-    .success-div{
-      width: 100% !important;
-    }
-
-    .success-gif{
-      width: 18vw;
-      height: 18vw;
-    }
-
-  }
-
 </style>
 
 {{ end }}

src/layouts/page/products.html

@@ -7,7 +7,7 @@
   <div class="container product-container" lang="en">
     <div class="row">
       <div class="col">
-        <h1>Products</h1>
+        <h1 style="position:relative; z-index:3;">Products</h1>
         <div class="lead-container">
           <p class="lead animated-5 animatedFadeInUp fadeInUp">Just like the perfect cup or tea, greatness needs time to steep. But the wait is over… it’s time to take your first sip.</p>
         </div>

src/layouts/page/white-paper.html

@@ -85,10 +85,6 @@
 
   </style>
 
-  <!-- IF POSSIBLE:
-
-  I'd like to directly feed the .MD onto the this page instead of using an iFrame to display the PDF. Will look cleaner that way. Alterntively, we can just have a an accordion for the different languages with CTAs that open the white paper in a new tab. Just no iframes.
-
   <!-- Start PDF
 
   <div class="container pdf-iframe"

src/layouts/partials/clipboard-copy.html

@@ -4,7 +4,7 @@
 
     <!-- The button used to copy the text -->
 
-    <button class="clipboard-copy" id="copy-icon" onclick="myFunction()" data-bs-toggle="modal" data-bs-target="#exampleModal">copy</button>
+    <button type="button" class="clipboard-copy" id="liveToastBtn" onclick="myFunction()">copy</button>
   </div>
 <hr>
 

src/layouts/partials/floating-join-btn.html

@@ -5,15 +5,15 @@
 @media only screen and (min-width: 1200px) {
 
   .gf-container {
-    width: 8vw;
+    width: 20vw;
-    height: 8vw;
+    height: 4vw;
     border-radius: 100px;
     display: flex;
-    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding-top: .3vw;
     position: fixed;
-    text-align:center;
+    font-size: 1vw;
-    padding-top: 3vw;
-    font-size: 1.562vw;
     background-color: #1a1a1a !important;
     border: 2px solid #949494;
     color: #ffffff;
@@ -39,15 +39,15 @@
 @media only screen and (min-width: 992px) and (max-width: 1200px) {
 
   .gf-container {
-    width: 8.333vw;
+    width: 20vw;
-    height: 8.333vw;
+    height: 5vw;
     border-radius: 100px;
     display: flex;
-    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding-top: .3vw;
     position: fixed;
-    text-align:center;
+    font-size: 1.2vw;
-    padding-top: 3vw;
-    font-size: 1.562vw;
     background-color: #1a1a1a !important;
     border: 2px solid #949494;
     color: #ffffff;
@@ -73,14 +73,15 @@
 @media only screen and (min-width: 768px) and (max-width: 992px) {
 
   .gf-container {
-    width: 8vw;
+    width: 20vw;
-    height: 8vw;
+    height: 5vw;
     border-radius: 100px;
     display: flex;
-    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding-top: 0.3vw;
     position: fixed;
     text-align:center;
-    padding-top: 3vw;
     font-size: 1.562vw;
     background-color: #1a1a1a !important;
     border: 2px solid #949494;
@@ -89,7 +90,7 @@
     font-family: "pp-neue-machina", sans-serif;
     text-transform: uppercase;
     right: 15px;
-    top: 5.3vw;
+    top: 12vw;
     cursor: pointer;
     z-index: 3;
     transition: 0.2s ease-in-out;
@@ -107,15 +108,16 @@
 @media only screen and (min-width: 576px) and (max-width: 768px) {
 
   .gf-container {
-    width: 8vw;
+    width: 32vw;
     height: 8vw;
-    border-radius: 100px;
     display: flex;
-    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border-radius: 100px;
+    padding-top: 0.3vw;
     position: fixed;
     text-align:center;
-    padding-top: 3vw;
+    font-size: 2.5vw;
-    font-size: 1.562vw;
     background-color: #1a1a1a !important;
     border: 2px solid #949494;
     color: #ffffff;
@@ -123,7 +125,7 @@
     font-family: "pp-neue-machina", sans-serif;
     text-transform: uppercase;
     right: 15px;
-    top: 5.3vw;
+    bottom: 2.5vw;
     cursor: pointer;
     z-index: 3;
     transition: 0.2s ease-in-out;
@@ -141,14 +143,15 @@
 @media only screen and (max-width: 576px) {
 
   .gf-container {
-    width: 20vw;
+    width: 48vw;
-    height: 20vw;
+    height: 12vw;
-    border-radius: 100px;
     display: flex;
-    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border-radius: 100px;
     position: fixed;
     text-align:center;
-    padding-top: 7vw;
+    padding-top:0.4vw;
     font-size: 4vw;
     background-color: #1a1a1a !important;
     border: 2px solid #949494;
@@ -175,5 +178,5 @@
 </style>
 
 <a href="https://github.com/login/oauth/authorize?client_id=9d1f1a72f1300b6991df&state=teaxyz" class="gf-container animated-5 animatedFadeInUp fadeInUp" style="background-color:#8EC7BF;">
- JOIN
+ AUTHENTICATE
 </a>

src/layouts/partials/footer.html

@@ -189,3 +189,17 @@ integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+
     .catch(err => { throw err });
 
   </script>
+
+  <script>
+
+    const toastTrigger = document.getElementById('liveToastBtn')
+    const toastLiveExample = document.getElementById('liveToast')
+    if (toastTrigger) {
+      toastTrigger.addEventListener('click', () => {
+        const toast = new bootstrap.Toast(toastLiveExample)
+
+        toast.show()
+      })
+    }
+
+  </script>

src/layouts/partials/head.html

@@ -101,5 +101,7 @@
 
     {{- partial "floating-join-btn.html" . -}}
 
+    {{- partial "toast.html" -}}
+
   </head>
 </head>

src/layouts/partials/klaviyo-form.html

@@ -1,50 +1,34 @@
-<div class="klaviyo-form-WUxzRc"></div>
+<hr>
+  <div class="klaviyo-form-WUxzRc"></div>
+<hr>
 
 <style>
 
-  .kl-private-reset-css-Xuajs1{
+.needsclick.klaviyo-form.klaviyo-form-version-cid_1.kl-private-reset-css-Xuajs1{
-    display: block !important;
+  max-width: 100% !important;
   padding: 0px !important;
-    margin-top: auto !important;
+}
-    margin-bottom: auto !important;
-  }
 
-  .go3894874857{
+.needsclick{
-    width: 100% !important;
+  min-height: none;
-    background-color: #54BAAB !important;
+}
-    height: 45px !important;
+
+input#email_48240998.needsclick.go2381409361.kl-private-reset-css-Xuajs1{
   border: none !important;
-    border-radius: 60px !important;
+  background-color: #1a1a1a !important;
-    transition: 0.2s ease-in-out !important;
+  border-radius: 0px !important;
-    font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji" !important;
+  padding: 0px !important;
-    font-weight: 700 !important;
+  min-height: 4.185vw !important;
-    font-size: 16px !important;
+  font-family: "pp-neue-machina", sans-serif !important;
-  }
+  text-transform: uppercase !important;
+}
 
-  .go3894874857:hover{
+input#email_48240998.needsclick.go2381409361.kl-private-reset-css-Xuajs1:focus{
-    background-color: #62CFBF !important;
+  outline:none !important;
-  }
+  box-shadow: none !important;
-
+}
-  ::placeholder{
-    font-size: 16px !important;
-  }
-
-  #email_48240998{
-    width: 100%;
-    height: 45px !important;
-    font-size: 16px !important;
-    margin-bottom: 10px !important;
-    border: none !important;
-    border-radius: 30px !important;
-    background-color: #3F4346 !important;
-    padding: 10px 30px !important;
-    color: white !important;
-    transition: 0.1s ease-in-out !important;
-  }
-
-  #email_48240998:focus{
-    border: 1px solid #54BAAB !important;
-    box-shadow: 0px 0px 4px rgba(84, 186, 171, 0.5) !important;
-  }
 
+#email_48240998{
+  min-height: 4.185vw !important;
+}
 </style>

src/layouts/partials/toast.html

@@ -0,0 +1,40 @@
+<div class="toast-container position-fixed bottom-0 end-0 p-3">
+  <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
+    <div class="toast-header">
+      <i class="icon-tea-logo-iconasset-1 me-3 teal"></i>
+      <strong class="me-auto teal">Copied!</strong>
+      <small id="time"></small>
+      <button type="button" class="toast-close" data-bs-dismiss="toast" aria-label="Close">X</button>
+    </div>
+    <div class="toast-body">
+      Copied to clipboard. Now paste that command into your terminal.
+    </div>
+  </div>
+</div>
+
+<style>
+
+  #liveToast{
+    background-color:#1a1a1a !important;
+    color: white;
+    border-radius: 0px;
+    font-family: "sono";
+    border: 2px solid #949494;
+  }
+
+  .toast-header{
+    background-color:#1a1a1a;
+    color: white !important;
+  }
+
+  .toast-container{
+    z-index: 3;
+  }
+
+  .toast-close{
+    background-color: #1a1a1a;
+    color: white;
+    border: none;
+  }
+
+</style>

src/static/css/homepage.css

@@ -281,8 +281,17 @@ mark{
 
 }
 
+
 @media only screen and (min-width: 768px) and (max-width: 992px) {
 
+  .hero-section{
+    background-image: url("/Images/large-grid.svg");
+    background-attachment: fixed;
+    background-position: top;
+    background-repeat: repeat;
+    background-size: contain;
+  }
+
   .metric-block{
     padding: 4.185vw;
     border: 2px solid #949494;
@@ -316,7 +325,8 @@ mark{
     background-attachment: fixed;
     background-position: top;
     background-repeat: repeat;
-    background-size: contain;  }
+    background-size: cover;
+  }
 
   .metric-block{
     padding: 4.185vw;
@@ -347,7 +357,8 @@ mark{
 @media only screen and (max-width: 576px) {
 
   .hero-section{
-    padding: 1vw 4vw !important;
+    padding-right: 4vw !important;
+    padding-left: 4vw !important;
   }
 
   .hero-container{
@@ -355,8 +366,8 @@ mark{
     background-position: top;
     background-repeat: repeat-y;
     background-size: cover;
-    padding-top: 17.5vw;
+    padding-top: 21.800vw !important;
-    padding-bottom: 21vw;
+    padding-bottom: 21.800vw !important;
     border: 1px solid #949494;
   }
 

src/static/css/typography.css

@@ -75,7 +75,7 @@ li{
 
   h3{
     font-size: 3.8rem;
-    line-height: 8.3vw;
+    line-height: 4.8vw;
   }
 
   h4{
@@ -221,6 +221,11 @@ li{
 
 @media only screen and (max-width: 576px) {
 
+  .impact{
+    font-size: 24vw !important;
+    line-height: 20.4vw;
+  }
+
   h1{
     font-size: 16vw;
     line-height: 20.4vw;