www/src/layouts/partials/mobile-ctas.html

<!-- Mobile CTA's -->

<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="mbtn hbtn hb-fill-right" id="email-btn" style="width:100%;"><i class="icon-email-icon-www" style="position:relative; top:2px;"></i>Subscribe</button>
  </div>
  <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-6">
    <button class="mbtn 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">
    <p class="text-center small grid-gray">Enter your email to join our newsletter:</p>
    <form id="subscribeForm">
      <div class="form-container p-1 flex">
        <input class="email p-3" placeholder="Enter your email" type="email" id="email" required>
        <button class="ms-2 email email-send hbtn hb-fill-right" style="width:100%;" id="subscribe-submit-btn" type="submit"><i class="icon-telegram"></i></button>
      </div>
    </form>
    <div id="formResponse"></div>
  </div>
</div>

  <style>

    .subscribe-collapse{
      display:none;
    }

    .form-container{
      border: 1px solid #949494;
      border-radius: 5px !important;
      height: 50px;
    }

    #email{
      width:100%;
      height: 100% !important;
      background-color: #1a1a1a;
      border:none !important;
      color: white;
      font-family: "inter", sans-serif;
      border-radius: 5px;
    }
    #email-btn{
      text-transform: uppercase !important;
    }
    .email-send{
      text-transform: uppercase !important;
      width:20% !important;
      border-radius: 3px;
      height: 100% !important;
    }
  </style>

  <script>
    const emailBtn = document.getElementById("email-btn");
    const subscribeCollapse = document.querySelector(".subscribe-collapse");

    emailBtn.addEventListener("click", function() {
      if (subscribeCollapse.style.display === "none") {
        subscribeCollapse.style.display = "block";
      } else {
        subscribeCollapse.style.display = "none";
      }
    });

    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 =
            `<div class="mt-3 orange-bg p-2 flex" style="border-radius: 3px;">
              <span class="small" style="color: #fff; display:block; margin-left:auto; margin-right:auto;">An error occurred. Please try again later.</span>
            </div>`;
        });
    });
  </script>

  <!-- Deep-linking script for Twitter follow button -->
<script>
  document.getElementById("follow-button").addEventListener("click", function() {
    if (navigator.userAgent.match(/iPhone|iPad|iPod/i)) {
      window.location.href = "twitter://user?screen_name=teaxyz";
    } else if (navigator.userAgent.match(/Android/i)) {
      window.location.href = "twitter://user?screen_name=teaxyz";
    } else {
      window.location.href = "https://twitter.com/teaxyz";
    }
  });
</script>