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="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="subscribe-submit-btn" type="submit">Subscribe</button>
    </form>
    <div id="formResponse"></div>
  </div>
</div>

  <style>

    .subscribe-collapse{
      display:none;
    }

    #email{
      width:100%;
      height: 60px;
      background-color: #1a1a1a;
      border: 1.5px solid #949494;
      color: white;
      font-family: "inter", sans-serif;
      text-transform: uppercase;
      border-radius: 0px !important;
    }
    #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>

<!-- 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>