safing-web/_includes/footer.html

<footer class="bg-black p-8 bg-local bg-no-repeat bg-cover bg-bottom">
  <div class="p-12 mx-auto self-center max-w-3xl text-center lg:text-left" id="newsletter">
    <span class="text-white text-xl font-bold">Stay Connected</span>
    <div class="block lg:flex items-center py-5">
      <input style="background-color: #302e37;" class="appearance-none rounded-full w-full max-w-md px-6 py-2 text-white" placeholder="Mailing list">
      <div class="pt-5 lg:pt-0 lg:pl-5 ">
        <button type="button" style="background-color: #6188ff;" class="transform hover:scale-95 inline-flex items-center px-10 py-3 border border-transparent text-xs leading-5 font-extrabold rounded-full text-white hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 active:bg-indigo-700 transition duration-150 ease-in-out uppercase">
          Join us
        </button>
      </div>
    </div>
    <div class="max-w-md flex">
      <input type="checkbox">
      <div class="ml-3">
        <label class="consent opacity-50 text-white">
          I agree that Safing &amp;
          <a class="text-blue-400" href="https://rapidmail.de" target="_blank">
            rapidmail.de
          </a>
          may proccess and use the email for newsletter purposes.
        </label>
      </div>
    </div>
  </div>
  <div class="text-center lg:text-left container mx-auto px-8">
    <div class="w-full flex flex-col md:flex-row py-6 ">
      <div class="flex-1">
        <p class="text-white text-xl md:mb-6">Company</p>
        <ul class="list-reset mb-6">
          <li class="mt-2 inline-block mr-2 md:block md:mr-0">
            <a href="{{ site.about_url }}" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">About Us</a>
          </li>
          <li class="mt-2 inline-block mr-2 md:block md:mr-0">
            <a href="{{ site.team_url }}" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">Team</a>
          </li>
          <li class="mt-2 inline-block mr-2 md:block md:mr-0">
            <a href="{{ site.ownership_url }}" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">Ownership</a>
          </li>
          <li class="mt-2 inline-block mr-2 md:block md:mr-0">
            <a href="{{ site.help_url }}" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">Get Help</a>
          </li>
        </ul>
      </div>
      <div class="flex-1">
        <p class="text-white text-xl md:mb-6">Technology</p>
        <ul class="list-reset mb-6">
          <li class="mt-2 inline-block mr-2 md:block md:mr-0">
            <a href="{{ site.portmaster_url }}" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">Portmaster</a>
          </li>
          <li class="mt-2 inline-block mr-2 md:block md:mr-0">
            <a href="{{ site.spn_url }}" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">SPN</a>
          </li>
          <li class="mt-2 inline-block mr-2 md:block md:mr-0">
            <a href="{{ site.whitepaper_url }}" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">Whitepaper</a>
          </li>
        </ul>
      </div>
      <div class="flex-1">
        <p class="text-white text-xl md:mb-6">Follow Us</p>
        <ul class="list-reset mb-6">
          <li class="mt-2 inline-block mr-2 md:block md:mr-0">
            <a href="{{ site.podcast_url }}" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">Podcast</a>
          </li>
          <li class="mt-2 inline-block mr-2 md:block md:mr-0">
            <a href="{{ site.newsletter_url }}" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">Newsletter</a>
          </li>
          <li class="mt-2 inline-block mr-2 md:block md:mr-0">
            <a href="{{ site.invidious_channel_url }}" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">Video Updates</a>
          </li>
          <li class="mt-2 inline-block mr-2 md:block md:mr-0">
            <a href="{{ site.blog_url }}" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">Blog</a>
          </li>
        </ul>
      </div>
      <div class="flex-1">
        <p class="text-white text-xl md:mb-6">Social</p>
        <ul class="list-reset mb-6">
          <li class="mt-2 inline-block mr-2 md:block md:mr-0">
            <a href="{{ site.reddit_url }}" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">Reddit</a>
          </li>
          <li class="mt-2 inline-block mr-2 md:block md:mr-0">
            <a href="{{ site.github_url }}" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">Github</a>
          </li>
          <li class="mt-2 inline-block mr-2 md:block md:mr-0">
            <a href="{{ site.twitter_url }}" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">Twitter</a>
          </li>
        </ul>
      </div>
      <div class="flex-1">
        <p class="text-white text-xl md:mb-6">Legal</p>
        <ul class="list-reset mb-6">
          <li class="mt-2 inline-block mr-2 md:block md:mr-0">
            <a href="{{ site.terms_url }}" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">Terms of Service</a>
          </li>
          <li class="mt-2 inline-block mr-2 md:block md:mr-0">
            <a href="{{ site.privacy_url }}" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">Privacy Policy</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="text-xs">
    <p class="text-center leading-6 text-white opacity-50">
      &copy; 2020 Safing ICS Technologies GmbH
    </p>
  </div>
</footer>