Merge branch 'website-version-3' of https://github.com/teaxyz/www into website-version-3

.github/workflows/cd.yml

@@ -55,7 +55,7 @@ jobs:
           --cache-control max-age=600 \
           --exclude '.git/*' --exclude '.github/*' \
           --exclude 'pour.sh' \
-          --exclude 'tea.white-paper.pdf' \
+          --exclude 'tea.white-paper.pdf*' \
           --exclude '*.md' \
           --delete
 

lychee.toml

@@ -10,4 +10,5 @@ exclude = [
   "https://www.clarity.ms/tag/",
   "https://www.googletagmanager.com/gtm.js",
   ".*/mailto:.*@.*",
+  "https://tea.xyz/tea.white-paper",
 ]

src/layouts/page/careers.html

@@ -24,6 +24,36 @@
       <p class="mb-4" style="color:#E5E6E9;">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.</p>
       <div class="accordion" id="accordionExample">
 
+        <div class="accordion-item">
+          <p class="accordion-header" id="headingOne">
+            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="true" aria-controls="collapseOne">
+              Package Maintainer
+            </button>
+          </p>
+            <div class="accordion-body">
+              <div>We are looking for Package Maintainers to help us review, update, and deploy packages for the tea system.</div>
+              <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
+              <br><strong>Responsibilities:</strong><br><br>
+              <ul>
+                <li>Collaborate with Package Manager teammates to determine priorities. </li>
+                <li>Build source code and compile packages for distribution. </li>
+                <li>Include testing code and documentation to help teammates troubleshoot issues. </li>
+                <li>Track security and breaking changes for packages in our ecosystem to ensure quick remediations. </li>
+                <li>Attend meetings, brainstorming sessions and regular standups for enhancing your knowledge of new technologies. </li>
+                <li>Stay on top of technology trends and developments, especially changes related to package dependencies. </li>
+                <li>Ensure that all technology practices adhere to applicable standards. </li>
+              </ul>
+
+              <p>This is a full-time remote contractor position.</p><br>
+
+              <a class="btn btn-primary mb-3" href="https://tea.breezy.hr/p/d98d28311cbd-package-maintainer"
+                role="button">Apply on Breezy HR</a>
+
+              <p class="small" style="color:#B9C7C9;">Visit Breezy HR to apply, and to read more about the qualifications and responsibilities for this position.</p></div>
+
+            </div>
+        </div>
+
         <div class="accordion-item">
           <p class="accordion-header" id="headingTwo">
             <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
@@ -86,6 +116,7 @@
 
             </div>
         </div>
+
       </div>
     </div>
   </div>

src/layouts/page/keep-what-is-yours.html

@@ -113,71 +113,10 @@
 
     <div class="row">
       <div class="col-lg-7">
-          <div class="sendx-modal-TRDBBvXuDV3vy1t0U684MU">
+        {{- partial "klaviyo-form.html" . -}}
-            <div class="sendx-modal-content-TRDBBvXuDV3vy1t0U684MU sendx-modal">
-              <div class="sendx-modal-right-TRDBBvXuDV3vy1t0U684MU">
-                <div class="sendx-modal-body-TRDBBvXuDV3vy1t0U684MU">
-                   <form class="sendx-submit-form-TRDBBvXuDV3vy1t0U684MU" method="post" action="https://app.sendx.io/api/v1/form/TRDBBvXuDV3vy1t0U684MU">
-                      <input id="SubscriberForm-Email-TRDBBvXuDV3vy1t0U684MU" type="Email" class="sendx-field-TRDBBvXuDV3vy1t0U684MU email-field mb-3" data-attr-type="0" name="Email" placeholder="Add your email_" required>
-                      <input type="submit" id="keep-email-btn" class="sendx-submit-TRDBBvXuDV3vy1t0U684MU sendx-button-TRDBBvXuDV3vy1t0U684MU btn-primary email-submit"  name="subscribe" value="Subscribe">
-                     </input>
-                   </form>
-                   <div class="sendx-close-text-TRDBBvXuDV3vy1t0U684MU">
-                   </div>
-                   <div style="display:flex; align-items:baseline;" class="sendx-gdpr-TRDBBvXuDV3vy1t0U684MU-wrapper">
-                     <input class="sendx-gdpr-TRDBBvXuDV3vy1t0U684MU" type="checkbox"></input><span class="sendx-gdpr-content-TRDBBvXuDV3vy1t0U684MU ms-2"><p>Opt in to receive updates from us </p></span>
-                   </div>
-                 </div>
-              </div>
-            </div>
-        </div>
       </div>
     </div>
 
-<!-- Styling for Subscibe form -->
-
-    <style>
-
-      #keep-btn-bottom:hover{
-        border: 2px solid #62CFBF !important;
-      }
-
-      @media only screen and (max-width: 576px) {
-
-        #SubscriberForm-Email-TRDBBvXuDV3vy1t0U684MU{
-          width:100%;
-        }
-
-        #keep-email-btn{
-          width:100%;
-          float:none;
-          margin-bottom:20px;
-        }
-
-        .whitepaper-btn-right{
-          width:100%;
-          margin-bottom: 10px;
-        }
-
-      }
-
-      @media only screen and (min-width: 576px) {
-
-        #SubscriberForm-Email-TRDBBvXuDV3vy1t0U684MU{
-          width:69%;
-        }
-
-        #keep-email-btn{
-          width:29%;
-          float:right;
-        }
-
-      }
-
-    </style>
-
-<!-- End styling for subscribe form -->
-
 <!-- Start three column value props -->
 
 <style>

src/layouts/page/white-paper.html

@@ -70,13 +70,80 @@
         </div>
       </div>
     </div>
-  </div>
+    <div class="row">
+      <hr>
+        <div class="col mb-4 mt-3">
+          <h4>Our white paper is available in multiple languages</h4>
+          <p>Thanks to the tea community's generosity and time, our white paper is available in several world languages. Select your preferred language from the dropdown menu.</p>
+          <div class="dropdown">
+            <button class="btn btn-secondary dropdown-toggle languages" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+              Choose a Language
+            </button>
+            <ul class="dropdown-menu" id="language-selector"></ul>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      const versions = [
+        ['English', ''],
+        ['Bahasa Indonesia', '_id'],
+        ['беларускі', '_be'],
+      ];
+
+      document.addEventListener('DOMContentLoaded', function () {
+        for (const lang of versions) {
+
+          $('#language-selector').append("<li><a class=\"dropdown-item\" onclick=\"go(\'" + lang[1] + "')\">" + lang[0] + "</a></li>");
+        }
+      }, false);
+
+      function go(suffix) {
+        const url = 'https://tea.xyz/tea.white-paper' + suffix + '.pdf';
+        document.getElementById('wp-iframe').setAttribute('src', url + '#toolbar=0&navpanes=0&view=fitH');
+        document.getElementById('mobile-wp-download').setAttribute('href', url);
+      }
+    </script>
+
+  <style>
+
+    .languages{
+      border: 2px solid white;
+      border-radius: 30px;
+      width:240px;
+      background-color:#1C1E21;
+    }
+
+    .languages:hover{
+      background-color:#23282c;
+    }
+
+    .languages:focus{
+      background-color:#1C1E21;
+    }
+
+    .dropdown-menu{
+      width:240px;
+      background-color:#23282c;
+      color:white;
+    }
+
+    .dropdown-item{
+      color:white;
+    }
+
+    .dropdown-item:hover{
+      background-color: #54BAAB;
+    }
+
+  </style>
 
   <!-- Start PDF -->
 
   <div class="container pdf-iframe"
     style="margin-bottom:100px; overflow:auto; -webkit-overflow-scrolling:touch; z-index:2;">
-    <iframe src="https://tea.xyz/tea.white-paper.pdf#toolbar=0&navpanes=0&view=fitH" width="100%" height="800px">
+    <iframe id="wp-iframe"src="https://tea.xyz/tea.white-paper.pdf#toolbar=0&navpanes=0&view=fitH" width="100%" height="800px">
     </iframe>
   </div>
 
@@ -90,7 +157,7 @@
             <div style="margin-top:auto; margin-bottom:auto;">
               <p class="text-center">Mobile browsers can be finicky, so please view our white paper via the button
                 below.</p>
-              <a style="display:block; margin-left:auto; margin-right:auto;" class="btn btn-primary mb-3"
+              <a id="mobile-wp-download" style="display:block; margin-left:auto; margin-right:auto;" class="btn btn-primary mb-3"
                 href="https://tea.xyz/tea.white-paper.pdf" role="button">Download our White Paper</a>
             </div>
           </div>

src/layouts/partials/head.html

@@ -44,6 +44,10 @@
       })();
     </script>
 
+    <!-- Enable Klaviyo Signup Form  -->
+
+    <script async type="text/javascript" src="https://static.klaviyo.com/onsite/js/klaviyo.js?company_id=VAwqJH"></script>
+
     <!-- CSS only -->
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
       integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

src/layouts/partials/klaviyo-form.html

@@ -0,0 +1,49 @@
+<div class="klaviyo-form-WUxzRc"></div>
+
+<style>
+
+  .kl-private-reset-css-Xuajs1{
+    display: block !important;
+    padding: 0px !important;
+    margin: 0px !important;
+  }
+
+  .go3894874857{
+    width: 100% !important;
+    background-color: #54BAAB !important;
+    height: 45px !important;
+    border: none !important;
+    border-radius: 60px !important;
+    transition: 0.2s ease-in-out !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;
+    font-weight: 700 !important;
+    font-size: 16px !important;
+  }
+
+  .go3894874857:hover{
+    background-color: #62CFBF !important;
+  }
+
+  ::placeholder{
+    font-size: 16px !important;
+  }
+
+  #email_48240757{
+    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_48240757:focus{
+    border: 1px solid #54BAAB !important;
+    box-shadow: 0px 0px 4px rgba(84, 186, 171, 0.5) !important;
+  }
+
+</style>