Add translation support for website

website/src/app/components/ad-slot/ad-slot.component.html

@@ -3,7 +3,7 @@
     <div
       class="rounded-lg border border-dashed border-border/50 bg-card/30 min-h-[90px] flex items-center justify-center text-xs text-muted-foreground/50"
     >
-      Advertisement
+      {{ 'components.adSlot.label' | translate }}
     </div>
   </div>
 }

website/src/app/components/ad-slot/ad-slot.component.ts

@@ -1,9 +1,11 @@
 import { Component, inject } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
 import { AdService } from '../../services/ad.service';
 
 @Component({
   selector: 'app-ad-slot',
   standalone: true,
+  imports: [TranslateModule],
   templateUrl: './ad-slot.component.html'
 })
 export class AdSlotComponent {

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 {

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

@@ -6,21 +6,21 @@
     <!-- Logo -->
     <a
       routerLink="/"
-      aria-label="Toju home"
+      [attr.aria-label]="'components.header.homeAriaLabel' | translate"
       class="flex items-center group"
     >
       <span class="flex items-center gap-1.5">
         <img
           src="/images/toju-logo-transparent.png"
-          alt="Toju"
+          [attr.alt]="'common.brand' | translate"
           class="h-9 w-auto object-contain drop-shadow-lg group-hover:opacity-90 transition-opacity"
         />
-        <span class="text-xl font-bold text-foreground">Toju</span>
+        <span class="text-xl font-bold text-foreground">{{ 'common.brand' | translate }}</span>
       </span>
       <span
         class="ml-2 text-[10px] font-medium px-1.5 py-0.5 rounded-full bg-purple-500/20 text-purple-400 border border-purple-500/30 uppercase tracking-wider"
       >
-        Beta
+        {{ 'components.header.beta' | translate }}
       </span>
     </a>
 
@@ -32,28 +32,28 @@
         [routerLinkActiveOptions]="{ exact: true }"
         class="text-sm text-muted-foreground hover:text-foreground transition-colors"
       >
-        Home
+        {{ 'components.header.navigation.home' | translate }}
       </a>
       <a
         routerLink="/what-is-toju"
         routerLinkActive="text-primary"
         class="text-sm text-muted-foreground hover:text-foreground transition-colors"
       >
-        What is Toju?
+        {{ 'components.header.navigation.whatIsToju' | translate }}
       </a>
       <a
         routerLink="/downloads"
         routerLinkActive="text-primary"
         class="text-sm text-muted-foreground hover:text-foreground transition-colors"
       >
-        Downloads
+        {{ 'components.header.navigation.downloads' | translate }}
       </a>
       <a
         routerLink="/philosophy"
         routerLinkActive="text-primary"
         class="text-sm text-muted-foreground hover:text-foreground transition-colors"
       >
-        Our Philosophy
+        {{ 'components.header.navigation.philosophy' | translate }}
       </a>
     </div>
 
@@ -72,7 +72,7 @@
           height="16"
           class="w-4 h-4 object-contain"
         />
-        Support Us
+        {{ 'components.header.supportUs' | translate }}
       </a>
       <a
         href="https://web.toju.app/"
@@ -80,7 +80,7 @@
         rel="noopener"
         class="inline-flex items-center gap-2 px-5 py-2 rounded-lg bg-gradient-to-r from-purple-600 to-violet-600 text-white text-sm font-medium hover:from-purple-500 hover:to-violet-500 transition-all shadow-lg shadow-purple-500/25 hover:shadow-purple-500/40"
       >
-        Use Web Version
+        {{ 'components.header.useWebVersion' | translate }}
         <svg
           class="w-4 h-4"
           fill="none"
@@ -102,7 +102,7 @@
       type="button"
       class="md:hidden text-foreground p-2"
       (click)="mobileOpen.set(!mobileOpen())"
-      aria-label="Toggle menu"
+      [attr.aria-label]="'components.header.toggleMenu' | translate"
     >
       <svg
         class="w-6 h-6"
@@ -138,22 +138,22 @@
       <a
         routerLink="/"
         class="block text-sm text-muted-foreground hover:text-foreground transition-colors"
-        >Home</a
+        >{{ 'components.header.navigation.home' | translate }}</a
       >
       <a
         routerLink="/what-is-toju"
         class="block text-sm text-muted-foreground hover:text-foreground transition-colors"
-        >What is Toju?</a
+        >{{ 'components.header.navigation.whatIsToju' | translate }}</a
       >
       <a
         routerLink="/downloads"
         class="block text-sm text-muted-foreground hover:text-foreground transition-colors"
-        >Downloads</a
+        >{{ 'components.header.navigation.downloads' | translate }}</a
       >
       <a
         routerLink="/philosophy"
         class="block text-sm text-muted-foreground hover:text-foreground transition-colors"
-        >Our Philosophy</a
+        >{{ 'components.header.navigation.philosophy' | translate }}</a
       >
       <hr class="border-border/30" />
       <a
@@ -169,7 +169,7 @@
           height="16"
           class="w-4 h-4 object-contain"
         />
-        Support Us
+        {{ 'components.header.supportUs' | translate }}
       </a>
       <a
         href="https://web.toju.app/"
@@ -177,7 +177,7 @@
         rel="noopener"
         class="inline-flex items-center gap-2 px-5 py-2 rounded-lg bg-gradient-to-r from-purple-600 to-violet-600 text-white text-sm font-medium"
       >
-        Use Web Version
+        {{ 'components.header.useWebVersion' | translate }}
       </a>
     </div>
   }

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

@@ -5,13 +5,18 @@ import {
   HostListener,
   PLATFORM_ID
 } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
 import { RouterLink, RouterLinkActive } from '@angular/router';
 import { isPlatformBrowser } from '@angular/common';
 
 @Component({
   selector: 'app-header',
   standalone: true,
-  imports: [RouterLink, RouterLinkActive],
+  imports: [
+    RouterLink,
+    RouterLinkActive,
+    TranslateModule
+  ],
   templateUrl: './header.component.html'
 })
 export class HeaderComponent {