From 930c6b26bc2405129f96465677a6218e2cecd9b4 Mon Sep 17 00:00:00 2001
From: Thomas Smith <49042513+tsmitty11@users.noreply.github.com>
Date: Tue, 7 Feb 2023 18:52:13 -0500
Subject: [PATCH] Re-arrange buttons on mobile

---
 src/layouts/index.html                | 20 +++---
 src/layouts/partials/mobile-ctas.html | 92 ++++++++++++++-------------
 src/layouts/partials/play-btn.html    |  9 +--
 3 files changed, 63 insertions(+), 58 deletions(-)

diff --git a/src/layouts/index.html b/src/layouts/index.html
index 3fe4521..626647b 100644
--- a/src/layouts/index.html
+++ b/src/layouts/index.html
@@ -99,6 +99,10 @@
           <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>
@@ -108,7 +112,6 @@
           {{- partial "hero-terminal-animation.html" -}}
         </div>
         <p class="mobile-disclaimer light-gray"><strong>Dev tools are best domonstrated on desktop.</strong> But we get it... you're out and about (or in the loo), so drop us your email or follow us on Twitter so you can be reminded when you're back at your desk.</p>
-        {{- partial "mobile-ctas.html" -}}
       </div>
     </div>
   </div>
@@ -220,7 +223,7 @@
   </div>
 </section>
 
-<!-- Features -->
+<!-- Speed comparison section
 <div class="section-divider">
   <img src="/Images/pixel-section-divider-teal.svg" style="pointer-events:none;" alt="">
 </div>
@@ -234,8 +237,6 @@
       </div>
       <div class="col">
 
-        <!-- Homebrew -->
-
         <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>
@@ -247,8 +248,6 @@
           </div>
         </div>
 
-        <!-- tea -->
-
         <div class="speed-terminal">
           <div class="terminal-bar black-bg flex-start p-1 ps-3">
             <div class="traffic-light"></div>
@@ -265,6 +264,8 @@
   </div>
 </section>
 
+-->
+
 <hr>
 
 <section>
@@ -598,10 +599,6 @@ EOF
     position: relative;
     top:2px;
   }
-
-  #hb-btn{
-    height: 75px !important;
-  }
   .feature-row{
     border: 2px solid gray;
     position: fixed;
@@ -609,6 +606,7 @@ EOF
   }
   .feature-terminal{
     width: 100%;
+    min-height: 400px;
     border: 2px solid gray;
     background-color: #1a1a1a;
     border-radius: 10px;
@@ -617,7 +615,7 @@ EOF
   }
   .terminal-content{
     overflow-y: auto;
-    max-height: 500px;
+    height: 400px;
   }
   .speed-terminal{
     width: 100%;
diff --git a/src/layouts/partials/mobile-ctas.html b/src/layouts/partials/mobile-ctas.html
index 2fbe6dc..9cf2bdb 100644
--- a/src/layouts/partials/mobile-ctas.html
+++ b/src/layouts/partials/mobile-ctas.html
@@ -1,22 +1,32 @@
 <!-- Mobile CTA's -->
-<div class="row mb-3 mt-5 mobile-ctas">
-  <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12 mb-3">
+
+<div class="row mt-5 gx-3 mobile-ctas">
+  <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-6">
+    <button class="hbtn hb-fill-right" id="email-btn" style="width:100%;">Subscribe</button>
+  </div>
+  <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-6">
+    <button class="hbtn-light hb-light-fill-right mb-4" id="follow-button" style="width:100%; text-transform:uppercase;"><i class="icon-twitter" style="position:relative;top:2px;"></i>Follow Us</button>
+  </div>
+</div>
+
+<div class="mb-4 subscribe-collapse">
+  <div class="col">
     <form id="subscribeForm">
       <div class="mb-3">
         <input class="p-3 text-center" placeholder="Enter your email" type="email" id="email" required>
       </div>
-      <button class="hbtn hb-fill-right" style="width:100%;" id="email-btn" type="submit">Subscribe</button>
+      <button class="hbtn hb-fill-right" style="width:100%;" id="subscribe-submit-btn" type="submit">Subscribe</button>
     </form>
     <div id="formResponse"></div>
   </div>
-
-  <div class="or-divider flex">
-    <hr>
-    <p class="small grid-gray">or</p>
-    <hr>
-  </div>
+</div>
 
   <style>
+
+    .subscribe-collapse{
+      display:none;
+    }
+
     #email{
       width:100%;
       height: 60px;
@@ -32,46 +42,42 @@
     }
   </style>
 
-  <script>
-    const subscribeForm = document.getElementById('subscribeForm');
-    const formResponse = document.getElementById('formResponse');
+<script>
+  const subscribeForm = document.getElementById('subscribeForm');
+  const formResponse = document.getElementById('formResponse');
 
-    subscribeForm.addEventListener('submit', (event) => {
-      event.preventDefault();
+  subscribeForm.addEventListener('submit', (event) => {
+    event.preventDefault();
 
-      const email = document.getElementById('email').value;
+    const email = document.getElementById('email').value;
 
-      if (!email) {
-        formResponse.innerHTML = '<p style="color: red">Please enter a valid email address.</p>';
-        return;
+    if (!email) {
+      formResponse.innerHTML = '<p style="color: red">Please enter a valid email address.</p>';
+      return;
+    }
+
+    fetch('https://manage.klaviyo.com/api/v1/list/R2UVm3/members', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        email: email,
+        api_key: 'pk_231a258e61a40283566192ee59310c7af4'
+      })
+    })
+    .then(response => {
+      if (!response.ok) {
+        throw new Error('Failed to subscribe');
       }
-
-      fetch('https://manage.klaviyo.com/api/v1/list/R2UVm3/members', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({
-          email: email,
-          api_key: 'pk_231a258e61a40283566192ee59310c7af4'
-        })
-      })
-      .then(response => {
-        if (!response.ok) {
-          throw new Error('Failed to subscribe');
-        }
-        formResponse.innerHTML = '<p style="color: green">Form submitted!</p>';
-      })
-      .catch(error => {
-        formResponse.innerHTML = '<p style="color: red">An error occurred. Please try again later.</p>';
-      });
+      formResponse.innerHTML = '<p style="color: green">Form submitted!</p>';
+    })
+    .catch(error => {
+      formResponse.innerHTML = '<p style="color: red">An error occurred. Please try again later.</p>';
     });
-  </script>
+  });
+</script>
 
-  <div class="col">
-    <button class="hbtn-light hb-light-fill-right mb-4" id="follow-button" style="width:100%; text-transform:uppercase;"><i class="icon-twitter" style="position:relative;top:2px;"></i>Follow Us on Twitter</button>
-  </div>
-</div>
 <!-- Deep-linking script for Twitter follow button -->
 <script>
   document.getElementById("follow-button").addEventListener("click", function() {
diff --git a/src/layouts/partials/play-btn.html b/src/layouts/partials/play-btn.html
index 6ec599c..1d5c844 100644
--- a/src/layouts/partials/play-btn.html
+++ b/src/layouts/partials/play-btn.html
@@ -14,7 +14,7 @@
   .play-btn{
     width: 100px;
     height: 100px;
-    background-color: #8000ff !important;
+    background-color: #4d4d4d !important;
     border-radius: 60px;
     display: block;
     display: flex;
@@ -22,6 +22,7 @@
    align-items: center;
     margin-left:auto;
     margin-right:auto;
+    margin-top: 100px;
     position: relative;
   }
 
@@ -29,7 +30,7 @@
     width: 200px;
     height: 200px;
     border-radius: 100px;
-    border: 4px solid #8000ff;
+    border: 4px solid #4d4d4d;
     position: absolute;
     top: -50px;
     left: -50px;
@@ -49,7 +50,7 @@
     width: 100%;
     height: 100%;
     border-radius: 60px;
-    border: 4px solid #8000ff;
+    border: 4px solid #4d4d4d;
     position: absolute;
     top: 0;
     left: 0;
@@ -63,7 +64,7 @@
     width: 200px;
     height: 200px;
     border-radius: 100px;
-    border: 4px solid #8000ff;
+    border: 4px solid #4d4d4d;
     position: absolute;
     top: -50px;
     left: -50px;