From a41f9ee185f731e69e5df0aa94d6832d4d6dc78b Mon Sep 17 00:00:00 2001
From: Thomas Smith <49042513+tsmitty11@users.noreply.github.com>
Date: Fri, 3 Feb 2023 11:30:18 -0500
Subject: [PATCH] Email form with Klaviyo API for mobile CTA

---
 src/layouts/index.html | 73 ++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 70 insertions(+), 3 deletions(-)

diff --git a/src/layouts/index.html b/src/layouts/index.html
index 716c73f..581b74f 100644
--- a/src/layouts/index.html
+++ b/src/layouts/index.html
@@ -65,6 +65,9 @@
     .boilerplate{
       display:none;
     }
+    .hero-description{
+      display:none;
+    }
   }
 
   @media only screen and (min-width: 768px) {
@@ -84,7 +87,7 @@
       <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12 my-auto">
         <h1 class="display-1" style="z-index:3; position: relative;"><span class="inner-glow ">Invisible</span> yet <span class="callout white">powerful</span></h1>
           <p class="lead">Upgrade to Tea - the revolutionary, cross-platform package manager. Say goodbye to slow & clunky, and say hello to fast & smooth updates. From the creator of Brew.</p>
-          <p class="mb-5">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>
+          <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>
           <!-- Desktop CTA's -->
           <div class="row mb-3 desktop-ctas">
             <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12 mb-3">
@@ -99,10 +102,74 @@
             </div>
           </div>
           <!-- Mobile CTA's -->
-          <div class="row mb-3 mobile-ctas">
+          <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">
-              {{- partial "klaviyo-form.html" -}}
+              <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>
+              </form>
+              <div id="formResponse"></div>
             </div>
+
+            <div class="or-divider flex">
+              <hr>
+              <p class="small grid-gray">or</p>
+              <hr>
+            </div>
+
+            <style>
+              #email{
+                width:100%;
+                height: 60px;
+                background-color: #1a1a1a;
+                border: 1.5px solid #949494;
+                color: white;
+                font-family: "inter", sans-serif;
+                text-transform: uppercase;
+              }
+              #email-btn{
+                text-transform: uppercase;
+              }
+            </style>
+
+            <script>
+              const subscribeForm = document.getElementById('subscribeForm');
+              const formResponse = document.getElementById('formResponse');
+
+              subscribeForm.addEventListener('submit', (event) => {
+                event.preventDefault();
+
+                const email = document.getElementById('email').value;
+
+                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');
+                  }
+                  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>
+
             <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>