vac.dev-experimental-old/_includes/footer.html

<footer class="footer bg-black flex justify-center">
  <div
    class="
      container
      max-w-screen-xl
      flex
      sl:justify-between
      lm:justify-start
      p-5
      pb-10
      md:px-12 md:pt-5
      lg:pt-10
    "
  >
    <div class="logo mr-10 lg:mr-20">
      <a href="{{site.url}}{{ site.baseurl }}"
        ><img
          src="{{ '/assets/img/logo.png' | relative_url }}"
          alt="Vac logo"
          class="w-9 h-11"
      /></a>
    </div>
    <p
      class="
        hidden
        ml:inline-block
        w-52
        text-base text-white
        opacity-75
        lm:mr-32
      "
    >
      VAC researches peer-to-peer, private, censorship resistant communication
    </p>

    <div class="flex flex-col sm:flex-row xm:justify-between">
      <nav class="flex max-w-xs mr-0 xm:mr-5 l:mr-32 mb-5 sm:mb-0">
        <div class="flex flex-col xxs:flex-row">
          <div class="flex flex-col mr-5 sl:mr-14">
            <p class="text-base text-white mb-5 lg:mb-4">Research</p>
            <ul class="">
              <li class="text-xxs lg:text-base text-white opacity-75 mb-5">
                <a href="https://status.im/" target="_blank">Log</a>
              </li>
              <li class="text-xxs lg:text-base text-white opacity-75 mb-5">
                <a href="https://forum.vac.dev/" target="_blank">Forum</a>
              </li>
              <li class="text-xxs lg:text-base text-white opacity-75 mb-5">
                <a href="https://status.im/" target="_blank">Media</a>
              </li>
              <li class="text-xxs lg:text-base text-white opacity-75 mb-5">
                <a href="https://status.im/our_team/jobs.html" target="_blank"
                  >Careers</a
                >
              </li>
            </ul>
          </div>
          <div class="flex flex-col sl:mr-14">
            <p class="text-base text-white mb-5 lg:mb-4 mr-5">Socials</p>
            <ul class="">
              <li class="text-xxs lg:text-base text-white opacity-75 mb-5">
                <a href="https://twitter.com/vacp2p" target="_blank">Twitter</a>
              </li>
              <li class="text-xxs lg:text-base text-white opacity-75 mb-5">
                <a href="https://discord.com/" target="_blank">Discord</a>
              </li>
              <li class="text-xxs lg:text-base text-white opacity-75">
                <a href="https://t.me/vacp2p" target="_blank">Telegram</a>
              </li>
            </ul>
          </div>
        </div>
        <div>
          <div class="flex flex-col sl:mr-5">
            <p class="text-base text-white mb-5 lg:mb-4">Projects</p>
            <ul class="">
              <li class="text-xxs lg:text-base text-white opacity-75 mb-5">
                <a href="https://status.im/" target="_blank">Waku</a>
              </li>
              <li class="text-xxs lg:text-base text-white opacity-75 mb-5">
                <a href="https://status.im/" target="_blank">DApp Connect</a>
              </li>
            </ul>
          </div>
        </div>
      </nav>

      <div class="flex flex-col w-52">
        <h3 class="text-base text-white mb-5">Signup for updates</h3>
        <form action="">
          <div class="flex items-center w-full">
            <input
              class="
                text-xs text-white
                opacity-50
                w-full
                bg-black
                border-b border-white
                mr-2
                focus:outline-none
              "
              type="email"
              placeholder="your email"
            />
            <button
              class="
                h-2
                w-2
                hover:w-2.5 hover:h-3.5
                bg-arrowWhite bg-contain bg-no-repeat
              "
              type="submit"
            ></button>
          </div>
        </form>
      </div>
    </div>
  </div>
</footer>