<footer class="cm-gray-2 body-font">
  <div class="container px-5 pt-8 mx-auto flex md:flex-row md:flex-nowrap flex-wrap flex-col">
    <div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left">
      <div class="flex title-font font-medium items-center md:justify-start justify-center cm-gray-1">
        <img src="{{ '/assets/logo.png' | relative_url }}" alt="logo" height="32" width="32" class="h-8">
        <span class="ml-3 text-xl">{{ site.title }}</span>
      </div>
      <p class="mt-2 text-sm cm-gray-3">{{ site.tagline }}</p>
    </div>

    <div class="flex-grow flex flex-wrap md:pl-10 mb-1 md:mt-0 mt-10 md:text-left text-center md:justify-left justify-center">
    {% assign footer  = footer|default: site.data.general.footer %}
    {% for cat in footer %}
      <div class="md:w-1/4 px-4">
        <h2 class="footer-categorie title-font">
          {% if cat.link %}<a href="{% include fnc/link.html item=cat.link %}">{% endif %}{{cat.title}}{% if cat.link %}</a>{% endif %}
        </h2>
        <nav class="list-none mb-10"><ul>
          {% for item in cat.cats %}
          <li><a href="{% include fnc/link.html item=item%}" class="footer-link">{{ item.name }}</a></li>
          {% endfor %}
        </ul></nav>
      </div>
    {% endfor %}
    </div>
  </div>

  <div class="bg-gray-100">
    <div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row">
      <p class="cm-gray-2 text-sm text-center sm:text-left">© 2021-now {{ site.title }} by<a href="https://github.com/inventree" rel="noopener" class="cm-gray-2 ml-1" target="_blank">@inventree</a>— website made with &hearts; by<a href="https://github.com/matmair" rel="noopener" class="cm-gray-2 ml-1" target="_blank">@matmair</a></p>
      <span class="inline-flex sm:ml-auto sm:mt-0 mt-2 justify-center sm:justify-start">
        <a href="https://github.com/inventree/inventree" alt="github repo" class="ml-3 cm-gray-3">
          <img class="h-5 w-5" alt="GitHub logo" src="{{ '/assets/github.svg' | relative_url }}" />
        </a>
        <a href="https://reddit.com/r/inventree" alt="Reddit" class="ml-3 cm-gray-3">
          <img class="h-5 w-5" alt= "Reddit logo" src="{{ '/assets/reddit.svg' | relative_url }}" />
        </a>
        <a href="https://twitter.com/inventreedb" alt="Twitter" class="ml-3 cm-gray-3">
          <img class="h-5 w-5" alt="Twitter logo" src="{{ '/assets/twitter.svg' | relative_url }}" />
        </a>
      </span>
    </div>
  </div>
</footer>