Add translation support for website

website/src/app/pages/gallery/gallery.component.html

@@ -4,11 +4,11 @@
       <div
         class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-purple-500/10 border border-purple-500/20 text-purple-400 text-sm font-medium mb-6"
       >
-        Image Gallery
+        {{ 'pages.gallery.hero.badge' | translate }}
       </div>
-      <h1 class="text-4xl md:text-6xl font-extrabold text-foreground mb-6">A closer look at <span class="gradient-text">Toju</span></h1>
+      <h1 class="text-4xl md:text-6xl font-extrabold text-foreground mb-6">{{ 'pages.gallery.hero.titlePrefix' | translate }} <span class="gradient-text">{{ 'common.brand' | translate }}</span></h1>
       <p class="text-lg text-muted-foreground leading-relaxed">
-        Explore screenshots of the app experience, from voice chat and media sharing to servers, rooms, and full-screen collaboration.
+        {{ 'pages.gallery.hero.description' | translate }}
       </p>
     </div>
   </section>
@@ -19,7 +19,7 @@
         <div class="relative aspect-[16/9]">
           <img
             ngSrc="/images/screenshots/screenshot_main.png"
-            alt="Toju main application screenshot"
+            [attr.alt]="'pages.gallery.featured.imageAlt' | translate"
             fill
             priority
             sizes="(min-width: 1536px) 75vw, (min-width: 1280px) 90vw, 100vw"
@@ -27,10 +27,10 @@
           />
         </div>
         <div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-background via-background/80 to-transparent p-6 md:p-8">
-          <p class="text-xs font-semibold uppercase tracking-[0.2em] text-purple-400 mb-2">Featured</p>
-          <h2 class="text-2xl md:text-3xl font-bold text-foreground mb-2">The full Toju workspace</h2>
+          <p class="text-xs font-semibold uppercase tracking-[0.2em] text-purple-400 mb-2">{{ 'pages.gallery.featured.label' | translate }}</p>
+          <h2 class="text-2xl md:text-3xl font-bold text-foreground mb-2">{{ 'pages.gallery.featured.title' | translate }}</h2>
           <p class="max-w-2xl text-sm md:text-base text-muted-foreground">
-            See the main interface where rooms, messages, presence, and media all come together in one focused layout.
+            {{ 'pages.gallery.featured.description' | translate }}
           </p>
         </div>
       </div>
@@ -52,15 +52,15 @@
             <div class="relative aspect-video overflow-hidden">
               <img
                 [ngSrc]="item.src"
-                [alt]="item.title"
+                [attr.alt]="item.titleKey | translate"
                 fill
                 sizes="(max-width: 768px) 100vw, (max-width: 1280px) 50vw, 33vw"
                 class="object-cover transition-transform duration-500 group-hover:scale-105"
               />
             </div>
             <div class="p-5">
-              <h3 class="text-lg font-semibold text-foreground mb-2">{{ item.title }}</h3>
-              <p class="text-sm text-muted-foreground leading-relaxed">{{ item.description }}</p>
+              <h3 class="text-lg font-semibold text-foreground mb-2">{{ item.titleKey | translate }}</h3>
+              <p class="text-sm text-muted-foreground leading-relaxed">{{ item.descriptionKey | translate }}</p>
             </div>
           </a>
         }
@@ -72,14 +72,14 @@
     <div
       class="max-w-4xl mx-auto section-fade rounded-3xl border border-purple-500/20 bg-gradient-to-br from-purple-950/20 to-violet-950/20 p-8 md:p-10 text-center"
     >
-      <h2 class="text-2xl md:text-3xl font-bold text-foreground mb-4">Want to see it in action?</h2>
-      <p class="text-muted-foreground leading-relaxed mb-6">Download Toju or jump into the browser experience and explore the interface yourself.</p>
+      <h2 class="text-2xl md:text-3xl font-bold text-foreground mb-4">{{ 'pages.gallery.cta.title' | translate }}</h2>
+      <p class="text-muted-foreground leading-relaxed mb-6">{{ 'pages.gallery.cta.description' | translate }}</p>
       <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
         <a
           routerLink="/downloads"
           class="inline-flex items-center gap-2 px-6 py-3 rounded-xl bg-gradient-to-r from-purple-600 to-violet-600 text-white font-semibold hover:from-purple-500 hover:to-violet-500 transition-all shadow-lg shadow-purple-500/25"
         >
-          Go to downloads
+          {{ 'common.actions.goToDownloads' | translate }}
         </a>
         <a
           href="https://web.toju.app/"
@@ -87,7 +87,7 @@
           rel="noopener"
           class="inline-flex items-center gap-2 px-6 py-3 rounded-xl border border-border/50 bg-card/50 text-foreground font-medium hover:border-purple-500/30 transition-all"
         >
-          Open web version
+          {{ 'common.actions.openWebVersion' | translate }}
         </a>
       </div>
     </div>