website/layouts/partials/usage_footer.html

<div class="container mt-5 mb-4">
  <div class="row py-5">
    <div class="col-md-10 offset-md-1 col-lg-8 offset-lg-2 col-xl-6 offset-xl-3 text-center">
      <h4 class="font-weight-bold mb-3">
        {{ i18n "footer-try-title-line1" }}<br>
        {{ i18n "footer-try-title-line2" }}
      </h4>

      <p>
        happy<span class="font-weight-bold">Domain</span> {{ i18n "footer-try-text" }}
      </p>

      <p>

        <a class="btn btn-primary mt-2 mx-3" data-umami-event="cta-{{ .Page.File.ContentBaseName }}-tryit" data-umami-event-lang="{{ .Page.File.Lang }}" href="{{ .Site.Params.tryit }}">
          {{ i18n "tryit" }} &#187;
        </a>
        <a class="btn btn-outline-secondary mt-2 mx-3" data-umami-event="cta-{{ .Page.File.ContentBaseName }}-downloads" data-umami-event-lang="{{ .Page.File.Lang }}" href="/#downloads">
          {{ i18n "downloadit" }} &#187;
        </a>
      </p>

      <p class="mt-5">
        {{ i18n "footer-discuss-text" }}
      </p>

      <div class="row cols-1 cols-sm-3 mt-4">
        <div class="col">
          <a href="{{ .Site.Params.survey }}" class="card h-100 pb-2 justify-content-between">
            <div class="d-flex flex-fill justify-content-center flex-column">
              <img src="/img/screenshots/users/survey.webp" alt="{{ i18n "footer-discuss-feedback" }}" class="w-100 mb-3 flex-grow-1">
            </div>
            <h5 class="text-center">{{ i18n "footer-discuss-feedback" }}</h5>
          </a>
        </div>
        <div class="col">
          <a href="https://matrix.to/#/#happyDNS:matrix.org" class="card h-100 p-2 justify-content-between">
            <div class="d-flex flex-fill justify-content-center flex-column">
              <img src="/img/screenshots/users/matrix-logo.svg" alt="{{ i18n "footer-discuss-matrix" }}" class="w-100 mb-3">
            </div>
            <h5 class="text-center">{{ i18n "footer-discuss-matrix" }}</h5>
          </a>
        </div>
        <div class="col">
          <a href="https://web.libera.chat/#happydns" class="card h-100 p-2 justify-content-between">
            <div class="d-flex flex-fill justify-content-center flex-column">
              <img src="/img/screenshots/users/libera-color.svg" alt="{{ i18n "footer-discuss-irc" }}" class="w-100 mb-3">
            </div>
            <h5 class="text-center">{{ i18n "footer-discuss-irc" }}</h5>
          </a>
        </div>
      </div>
    </div>

  </div>
</div>

<div class="container-fluid bg-secondary text-light text-center py-5">
  <div class="container my-4">
    <div class="row">
      <div class="order-0 col-md-5 offset-md-1 align-self-center text-center">
        <h3 class="font-weight-bolder">{{ i18n "footer-us-title" }}</h3>
      </div>
      <div class="order-1 col-md-5">
        <h4 class="font-weight-bold mb-3">
          {{ i18n "footer-us-text-lead" }}
        </h4>

        <p>
          {{ i18n "footer-us-text-1" }}<span class="text-dark text-hilight px-1">{{ i18n "footer-us-text-hilight" }}</span>{{ i18n "footer-us-text-2" }}
        </p>
        <a href="{{ i18n "footer-us-button-link" }}" class="btn btn-outline-light">
          {{ i18n "footer-us-button" }}
        </a>
      </div>
    </div>
  </div>
</div>