www/src/layouts/partials/footer.html

<hr>
<section class="footer">
  <div class="container">
    <div class="row mb-5">
      <div class="col-lg-8 footer-content">
        <h4>Equitable Open-Source for Web3</h4>
        <p>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.</p>
        <img src="/Images/footer-grid-element.svg" alt="tea.grid">
      </div>
      <div class="col-lg-4">
        <div class="card social-box" style="width: 100%; float:right;">
          <ul class="list-group list-group-flush">
            <a class="list-group-item" role="button" href="https://twitter.com">Twitter</a>
            <a class="list-group-item" role="button" href="https://twitter.com">Discord</a>
            <li class="list-group-item">GitHub</li>
            <li class="list-group-item">Reddit</li>
            <li class="list-group-item">Telegram</li>
            <li class="list-group-item">Instagram</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="row">
      <hr>
        <div class="col">
          <div class="input-group">
            <input type="text" class="form-control footer-email" placeholder="Recipient's username" aria-label="Recipient's username with two button addons">
            <button class="btn btn-outline-secondary" type="button">Button</button>
            <button class="btn btn-outline-secondary" type="button">Button</button>
          </div>
        </div>
      <hr>
    </div>
  </div>
</section>

<style>

  .footer-email{
    padding: 35px 75px;
    background: none;
    border: none;
  }

  .social-box{
    border-radius: 0px !important;
    border: 2px solid #949494;
    background-color: none;
  }

  .list-group{
    border-radius: 0px !important;
  }

  .list-group-item{
    background-color: #1a1a1a !important;
    padding: 20px;
    font-size: 28px;
    color: #fff;
    font-family: "pp-neue-machina", sans-serif;
    text-transform: uppercase;
    border-bottom: 2px solid #949494;
    transition: 0.2s ease-in-out;
  }

  .list-group-item:hover{
    padding-left: 40px;
    background-color: #00ffd0 !important;
    box-shadow: inset 0px 0px 0px 7px #1a1a1a !important;
    color: #1a1a1a !important;
  }

  .footer-content{
    padding-right: 100px;
  }


</style>


<!-- JavaScript Bundle with Popper -->

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous">
    </script>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"
    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

  <script>
    $(window).scroll(function () {
      $('nav').toggleClass('scrolled', $(this).scrollTop() > 100);
    });

    if (localStorage['signup'].match(/:::/)) {
      const [username, serial_] = localStorage.signup.split(':::');
      const serial = (+serial_).toLocaleString()
      $('.box-auth-true').show();
      $('.box-auth-false').hide();
      $('#auth-username').html(username);
      $('#count').html(`${serial} / <span id='count3'></span>`);
      $('#count-sub-text').html('YOUR AUTHENTICATION NUMBER');
      $('#communitea').html('Thanks for joining our communi&#39;<span style="color:#54BAAB;">tea</span>');
      $('#revolution-text').html(
        'Now stay tuned! As an early authenticator, you’ll be entitled to a variety of exciting rewards, including minted NFT certificates.'
      );
      $('#auth-body-text').hide();
      $('.rounded-pill').hide();
      $('.auth-btn').html('Configure GitHub App');
      $('.auth-btn').attr('href', 'https://github.com/apps/tea-xyz')
    }
  </script>

<script>
  try {
    fetch('https://app.tea.xyz/api/signups')
      .then(res => res.json())
      .then(res => {
        const signups = res.signups ? res.signups.toLocaleString() : ""
        if (!(localStorage['signup'] || '').match(/:::/)) {
          $('#count').html(signups)
        }
        $('#count1').html(signups)
        $('#count2').html(signups)
        $('#count3').html(signups)
        $('#count4').html(signups)
        $('#count5').html(signups)
        $('#count6').html(signups)
        $('#count7').html(signups)
      })
  } catch (e) {
    console.error(e)
  }
</script>

<script type="text/javascript">
    (function(c,l,a,r,i,t,y){
        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
    })(window, document, "clarity", "script", "c9ohlhyxzf");
</script>

<script async src="https://www.googletagmanager.com/gtag/js?id=G-Q3M5LVH76F"></script>
  <script>
    window.dataLayer = window.dataLayer || [];

    function gtag() {
      dataLayer.push(arguments);
    }
    gtag('js', new Date());

    gtag('config', 'G-Q3M5LVH76F');
  </script>

  <script>
    const textList = [
    "web3",
    "game&#8208;dev",
    "AI",
    "automation",
    "data",
    "ML",
    "web",
    "devops",
    "creating",
    "everything",
    "<i>you<i>"
    ];
    const cycle = document.querySelector("#cycle");
    let i = 0;
    const cycleText = () => {
      cycle.innerHTML = textList[i];
      i = ++i % textList.length;
    };
    cycleText();
    setInterval(cycleText, 1200);

  </script>

  <script>
    rdt('track', 'SignUp');
    rdt('track', 'ViewContent');
  </script>