Toju/website/src/app/components/footer/footer.component.html

<footer class="border-t border-border/30 bg-background/80 backdrop-blur-sm">
  <div class="container mx-auto px-6 py-16">
    <div class="grid grid-cols-1 md:grid-cols-4 gap-12">
      <!-- Brand -->
      <div class="md:col-span-1">
        <div class="flex items-center gap-3 mb-4">
          <img
            src="/images/toju-logo-transparent.png"
            [attr.alt]="'common.brand' | translate"
            class="h-8 w-auto object-contain"
          />
        </div>
        <p class="text-sm text-muted-foreground leading-relaxed">
          {{ 'components.footer.description' | translate }}
        </p>
      </div>

      <!-- Product -->
      <div>
        <h4 class="text-sm font-semibold text-foreground mb-4 uppercase tracking-wider">{{ 'components.footer.sections.product' | translate }}</h4>
        <ul class="space-y-3">
          <li>
            <a
              routerLink="/downloads"
              class="text-sm text-muted-foreground hover:text-foreground transition-colors"
            >
              {{ 'components.footer.links.downloads' | translate }}
            </a>
          </li>
          <li>
            <a
              href="https://web.toju.app/"
              target="_blank"
              rel="noopener"
              class="text-sm text-muted-foreground hover:text-foreground transition-colors"
            >
              {{ 'components.footer.links.webVersion' | translate }}
            </a>
          </li>
          <li>
            <a
              routerLink="/what-is-toju"
              class="text-sm text-muted-foreground hover:text-foreground transition-colors"
            >
              {{ 'components.footer.links.whatIsToju' | translate }}
            </a>
          </li>
          <li>
            <a
              routerLink="/gallery"
              class="text-sm text-muted-foreground hover:text-foreground transition-colors"
            >
              {{ 'components.footer.links.imageGallery' | translate }}
            </a>
          </li>
        </ul>
      </div>

      <!-- Community -->
      <div>
        <h4 class="text-sm font-semibold text-foreground mb-4 uppercase tracking-wider">{{ 'components.footer.sections.community' | translate }}</h4>
        <ul class="space-y-3">
          <li>
            <a
              href="https://git.azaaxin.com/myxelium/Toju"
              target="_blank"
              rel="noopener"
              class="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
            >
              <img
                src="/images/gitea.png"
                alt=""
                width="16"
                height="16"
                class="w-4 h-4 object-contain"
              />
              {{ 'components.footer.links.sourceCode' | translate }}
            </a>
          </li>
          <li>
            <a
              href="https://github.com/Myxelium"
              target="_blank"
              rel="noopener"
              class="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
            >
              <img
                src="/images/github.png"
                alt=""
                width="16"
                height="16"
                class="w-4 h-4 object-contain"
              />
              {{ 'components.footer.links.github' | translate }}
            </a>
          </li>
          <li>
            <a
              href="https://buymeacoffee.com/myxelium"
              target="_blank"
              rel="noopener"
              class="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
            >
              <img
                src="/images/buymeacoffee.png"
                alt=""
                width="16"
                height="16"
                class="w-4 h-4 object-contain"
              />
              {{ 'components.footer.links.supportUs' | translate }}
            </a>
          </li>
        </ul>
      </div>

      <!-- Values -->
      <div>
        <h4 class="text-sm font-semibold text-foreground mb-4 uppercase tracking-wider">{{ 'components.footer.sections.values' | translate }}</h4>
        <ul class="space-y-3">
          <li>
            <a
              routerLink="/philosophy"
              class="text-sm text-muted-foreground hover:text-foreground transition-colors"
            >
              {{ 'components.footer.links.ourPhilosophy' | translate }}
            </a>
          </li>
          <li><span class="text-sm text-muted-foreground">{{ 'components.footer.values.freeForever' | translate }}</span></li>
          <li><span class="text-sm text-muted-foreground">{{ 'components.footer.values.openSource' | translate }}</span></li>
        </ul>
      </div>
    </div>

    <div class="mt-12 pt-8 border-t border-border/30 flex flex-col md:flex-row justify-between items-center gap-4">
      <p class="text-xs text-muted-foreground">{{ 'components.footer.copyright' | translate:{ year: currentYear } }}</p>
      <div class="flex items-center gap-4">
        <a
          href="https://git.azaaxin.com/myxelium/Toju"
          target="_blank"
          rel="noopener"
          [attr.aria-label]="'components.footer.viewSourceOnGitea' | translate"
          class="text-muted-foreground hover:text-foreground transition-colors"
        >
          <img
            src="/images/gitea.png"
            alt=""
            width="20"
            height="20"
            class="w-5 h-5 object-contain"
          />
        </a>
        <a
          href="https://github.com/Myxelium"
          target="_blank"
          rel="noopener"
          [attr.aria-label]="'components.footer.viewProjectOnGitHub' | translate"
          class="text-muted-foreground hover:text-foreground transition-colors"
        >
          <img
            src="/images/github.png"
            alt=""
            width="20"
            height="20"
            class="w-5 h-5 object-contain"
          />
        </a>
      </div>
    </div>
  </div>
</footer>