Add translation support for website

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

@@ -6,25 +6,25 @@
         <div class="flex items-center gap-3 mb-4">
           <img
             src="/images/toju-logo-transparent.png"
-            alt="Toju"
+            [attr.alt]="'common.brand' | translate"
             class="h-8 w-auto object-contain"
           />
         </div>
         <p class="text-sm text-muted-foreground leading-relaxed">
-          Free, open-source, peer-to-peer communication. Built by people who believe privacy is a right, not a premium feature.
+          {{ 'components.footer.description' | translate }}
         </p>
       </div>
 
       <!-- Product -->
       <div>
-        <h4 class="text-sm font-semibold text-foreground mb-4 uppercase tracking-wider">Product</h4>
+        <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"
             >
-              Downloads
+              {{ 'components.footer.links.downloads' | translate }}
             </a>
           </li>
           <li>
@@ -34,7 +34,7 @@
               rel="noopener"
               class="text-sm text-muted-foreground hover:text-foreground transition-colors"
             >
-              Web Version
+              {{ 'components.footer.links.webVersion' | translate }}
             </a>
           </li>
           <li>
@@ -42,7 +42,7 @@
               routerLink="/what-is-toju"
               class="text-sm text-muted-foreground hover:text-foreground transition-colors"
             >
-              What is Toju?
+              {{ 'components.footer.links.whatIsToju' | translate }}
             </a>
           </li>
           <li>
@@ -50,7 +50,7 @@
               routerLink="/gallery"
               class="text-sm text-muted-foreground hover:text-foreground transition-colors"
             >
-              Image Gallery
+              {{ 'components.footer.links.imageGallery' | translate }}
             </a>
           </li>
         </ul>
@@ -58,7 +58,7 @@
 
       <!-- Community -->
       <div>
-        <h4 class="text-sm font-semibold text-foreground mb-4 uppercase tracking-wider">Community</h4>
+        <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
@@ -74,7 +74,7 @@
                 height="16"
                 class="w-4 h-4 object-contain"
               />
-              Source Code
+              {{ 'components.footer.links.sourceCode' | translate }}
             </a>
           </li>
           <li>
@@ -91,7 +91,7 @@
                 height="16"
                 class="w-4 h-4 object-contain"
               />
-              GitHub
+              {{ 'components.footer.links.github' | translate }}
             </a>
           </li>
           <li>
@@ -108,7 +108,7 @@
                 height="16"
                 class="w-4 h-4 object-contain"
               />
-              Support Us
+              {{ 'components.footer.links.supportUs' | translate }}
             </a>
           </li>
         </ul>
@@ -116,30 +116,30 @@
 
       <!-- Values -->
       <div>
-        <h4 class="text-sm font-semibold text-foreground mb-4 uppercase tracking-wider">Values</h4>
+        <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"
             >
-              Our Philosophy
+              {{ 'components.footer.links.ourPhilosophy' | translate }}
             </a>
           </li>
-          <li><span class="text-sm text-muted-foreground">100% Free Forever</span></li>
-          <li><span class="text-sm text-muted-foreground">Open Source</span></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">&copy; {{ currentYear }} Myxelium. Toju is open-source software.</p>
+      <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"
-          aria-label="View source code on Gitea"
+          [attr.aria-label]="'components.footer.viewSourceOnGitea' | translate"
           class="text-muted-foreground hover:text-foreground transition-colors"
         >
           <img
@@ -154,7 +154,7 @@
           href="https://github.com/Myxelium"
           target="_blank"
           rel="noopener"
-          aria-label="View the project on GitHub"
+          [attr.aria-label]="'components.footer.viewProjectOnGitHub' | translate"
           class="text-muted-foreground hover:text-foreground transition-colors"
         >
           <img

website/src/app/components/footer/footer.component.ts

@@ -1,10 +1,11 @@
 import { Component } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
 import { RouterLink } from '@angular/router';
 
 @Component({
   selector: 'app-footer',
   standalone: true,
-  imports: [RouterLink],
+  imports: [RouterLink, TranslateModule],
   templateUrl: './footer.component.html'
 })
 export class FooterComponent {