<footer class="pt-5 pb-3 bg-dark text-light">
  <div class="container">
    <div class="row row-cols-1 row-cols-md-2 row-cols-lg-5 g-4 mb-4">
      <div class="col footer-brand-col">
        <div class="footer-logo mb-3">
          {{ partial "logo.html" (dict "height" "1.4em") }}
        </div>
        <p class="footer-tagline">{{ i18n "footer-tagline" }}</p>
        <div class="footer-social d-flex flex-wrap gap-2 mt-3">
          <a href="https://framagit.org/happyDomain/happydomain" target="_blank" rel="noopener" title="Framagit" data-umami-event="footer-framagit">
            <i class="bi bi-gitlab"></i>
          </a>
          <a href="https://github.com/happyDomain/happydomain" target="_blank" rel="noopener" title="GitHub" data-umami-event="footer-github-social">
            <i class="bi bi-github"></i>
          </a>
          <a href="https://floss.social/@happyDomain" target="_blank" rel="noopener" title="Mastodon" data-umami-event="footer-mastodon">
            <i class="bi bi-mastodon"></i>
          </a>
          <a href="https://feedback.happydomain.org/" target="_blank" rel="noopener" title="Feedback" data-umami-event="footer-feedback">
            <i class="bi bi-lightbulb-fill"></i>
          </a>
          <a
            href="#"
            data-contact="Y29udGFjdEBoYXBweWRvbWFpbi5vcmc="
            onfocus="this.href = 'mailto:' + atob(this.dataset.contact)"
            title="Email"
            data-umami-event="footer-email"
          >
            <i class="bi bi-envelope-at"></i>
          </a>
        </div>
      </div>
      <div class="col">
        <h4 class="footer-heading">{{ i18n "footer-product" }}</h4>
        <ul class="footer-links">
          <li><a href="#features">{{ i18n "footer-happydomain-features" }}</a></li>
          <li><a href="#discover">{{ i18n "discover-title" }}</a></li>
          <li><a href="https://try.happydomain.org/" data-umami-event="footer-tryit">{{ i18n "tryit" }}</a></li>
          <!--li><a href="#">{{ i18n "footer-happydomain-testimonials" }}</a></li-->
          <li><a href="#downloads">{{ i18n "footer-happydomain-downloads" }}</a></li>
          <!--li><a href="#">{{ i18n "footer-happydomain-prices" }}</a></li-->
        </ul>
      </div>
      <div class="col">
        <h4 class="footer-heading">{{ i18n "footer-resources" }}</h4>
        <ul class="footer-links">
          <li><a href="https://help.happydomain.org/{{ .Site.Language.Lang }}/" target="_blank" rel="noopener" data-umami-event="footer-docs">{{ i18n "footer-resources-docs" }}</a></li>
          <li><a href="https://app.happydomain.org/swagger/index.html" target="_blank" rel="noopener" data-umami-event="footer-api">{{ i18n "footer-resources-api" }}</a></li>
          <li><a href="https://blog.happydomain.org/" data-umami-event="footer-blog">{{ i18n "footer-resources-blog" }}</a></li>
          <li><a href="/{{ .Site.Language.Lang }}/newsletter/" data-umami-event="footer-newsletter">{{ i18n "footer-resources-newsletter" }}</a></li>
          <!--li><a href="#">{{ i18n "footer-resources-faq" }}</a></li-->
        </ul>
      </div>
      <div class="col">
        <h4 class="footer-heading">{{ i18n "footer-company" }}</h4>
        <ul class="footer-links">
          <li><a href="{{ i18n "footer-us-button-link" }}" data-umami-event="footer-about">{{ i18n "footer-company-about" }}</a></li>
          <li><a href="/{{ .Site.Language.Lang }}/community/" data-umami-event="footer-community">{{ i18n "footer-resources-community" }}</a></li>
          <li><a href="https://git.happydomain.org/happydomain" target="_blank" rel="noopener" data-umami-event="footer-license">{{ i18n "footer-company-license" }}</a></li>
          <li><a href="/{{ .Site.Language.Lang }}/community/" data-umami-event="footer-contact">{{ i18n "footer-company-contact" }}</a></li>
        </ul>
      </div>
      <div class="col">
        <h4 class="footer-heading">{{ i18n "footer-legal" }}</h4>
        <ul class="footer-links">
          <li><a href="/{{ .Site.Language.Lang }}/legal-notice/">{{ i18n "legal-notice" }}</a></li>
        </ul>
      </div>
    </div>
</footer>
