safing-web/_includes/footer.html

<footer class="bg-black p-8 bg-local bg-no-repeat bg-cover bg-bottom" id="footer">
  <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 via Newsletter</span>
    <form action="https://t80607841.emailsys1a.net/184/1387/c70759e794/subscribe/form.html" method="post">
      <div class="block lg:flex items-center py-5">
        <input style="background-color: #302e37;" type="email" name="email" class="appearance-none rounded-full w-full max-w-md px-6 py-2 text-white focus:outline-none" required placeholder="email">
        <div class="pt-5 lg:pt-0 lg:pl-5 ">
          <input type="submit" value="Subscribe" 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" />
        </div>
      </div>
      <div class="max-w-md flex">
        <input type="checkbox" id="consent_text" name="consent_text" value="yes" required />
        <div class="ml-3">
          <label class="consent opacity-55 text-white" for='consent_text'>
            I agree that Safing &amp;
            <a class="text-blue-500 hover:text-blue-200 transition ease-in-out duration-150" title="GDPR compliant, located in Germany" href="https://rapidmail.de" target="_blank">
              rapidmail.de
            </a>
            may proccess and use the email for newsletter purposes.
          </label>
        </div>
      </div>
    </form>
  </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-55 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-55 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-55 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-55 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-55 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-55 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-55 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.video_url }}" class="no-underline hover:opacity-100 opacity-55 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.podcast_url }}" class="no-underline hover:opacity-100 opacity-55 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.blog_url }}" class="no-underline hover:opacity-100 opacity-55 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-55 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-55 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.kickstarter_url }}" class="no-underline hover:opacity-100 opacity-55 text-white transition duration-150 ease-in-out">Kickstarter</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-55 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.contact_url }}" class="no-underline hover:opacity-100 opacity-55 text-white transition duration-150 ease-in-out">Contact & Notice</a>
          </li>
          <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-55 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-55 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-55">
      &copy; 2020 Safing ICS Technologies GmbH
    </p>
  </div>
</footer>