marketplaces/src/app/components/footer/footer.component.html

<footer class="app-footer">
  <div class="app-footer__container page-container">
    <div class="app-footer__top">
      <div class="app-footer__brand">
        <app-logo />
        <p>{{ 'footer.description' | translate }}</p>
      </div>

      @for (group of footerGroups(); track group.id) {
        <div class="app-footer__group">
          @if (group.title) {
            <h4>{{ group.title }}</h4>
          }
          <ul>
            @for (item of group.items; track item.id) {
              <li>
                @if (item.external) {
                  <a [href]="item.route" target="_blank" rel="noopener">{{ item.label | translate }}</a>
                } @else {
                  <a [routerLink]="item.route | langRoute">{{ item.label | translate }}</a>
                }
              </li>
            }
          </ul>
        </div>
      }

      <div class="app-footer__group">
        <h4>{{ 'footer.payment' | translate }}</h4>
        <div class="app-footer__payments">
          @for (icon of paymentIcons(); track $index) {
            <img [src]="icon.src" [alt]="icon.alt" loading="lazy" [width]="icon.width" [height]="icon.height" (error)="onImageError($event)" />
          }
        </div>
      </div>
    </div>

    <div class="app-footer__bottom">
      <p>
        @if (copyrightText()) {
          {{ copyrightText() }}
        } @else {
          &copy; {{ currentYear }} {{ brandName }}. {{ 'footer.allRightsReserved' | translate }}
        }
      </p>
      @if (contactEmail) {
        <a [href]="'mailto:' + contactEmail">{{ contactEmail }}</a>
      }
    </div>
  </div>
</footer>