Add translation support for website

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 {