Add translation support for website

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

@@ -5,10 +5,10 @@
       <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"
       >
-        Our Manifesto
+        {{ 'pages.philosophy.hero.badge' | translate }}
       </div>
-      <h1 class="text-4xl md:text-6xl font-extrabold text-foreground mb-6">Why we <span class="gradient-text">build</span> Toju</h1>
-      <p class="text-lg text-muted-foreground leading-relaxed">A letter from the people behind the project.</p>
+      <h1 class="text-4xl md:text-6xl font-extrabold text-foreground mb-6">{{ 'pages.philosophy.hero.titlePrefix' | translate }} <span class="gradient-text">{{ 'pages.philosophy.hero.titleHighlight' | translate }}</span> {{ 'common.brand' | translate }}</h1>
+      <p class="text-lg text-muted-foreground leading-relaxed">{{ 'pages.philosophy.hero.description' | translate }}</p>
     </div>
   </section>
 
@@ -19,81 +19,58 @@
     <article class="max-w-3xl mx-auto prose prose-invert prose-lg">
       <!-- Ownership -->
       <div class="section-fade mb-16">
-        <h2 class="text-2xl md:text-3xl font-bold text-foreground mb-6 !mt-0">We Lost Something Important</h2>
+        <h2 class="text-2xl md:text-3xl font-bold text-foreground mb-6 !mt-0">{{ 'pages.philosophy.sections.ownership.title' | translate }}</h2>
         <p class="text-muted-foreground leading-relaxed">
-          Over the past two decades, something fundamental shifted. Our conversations, our memories, our connections - they stopped belonging to us.
-          They live on servers we don't control, inside apps that treat our personal lives as data to be harvested, analyzed, and sold to the highest
-          bidder.
+          {{ 'pages.philosophy.sections.ownership.paragraph1' | translate }}
         </p>
         <p class="text-muted-foreground leading-relaxed">
-          We gave up ownership of our digital lives so gradually that most of us didn't even notice. A "free" app here, a convenient service there -
-          each one taking a little more of our privacy in exchange for convenience. Toju exists because we believe it's time to take it back.
+          {{ 'pages.philosophy.sections.ownership.paragraph2' | translate }}
         </p>
       </div>
 
       <!-- No predatory pricing -->
       <div class="section-fade mb-16">
-        <h2 class="text-2xl md:text-3xl font-bold text-foreground mb-6">No Paywalls. No Premium Tiers. Ever.</h2>
+        <h2 class="text-2xl md:text-3xl font-bold text-foreground mb-6">{{ 'pages.philosophy.sections.paywalls.title' | translate }}</h2>
         <p class="text-muted-foreground leading-relaxed">
-          You know the playbook: launch a free product, build a user base, then start locking features behind subscription tiers. Can't share your
-          screen at more than 720p unless you upgrade. File size limited to 8 MB. Want noise suppression? That's a premium feature now.
-        </p>
-        <p class="text-muted-foreground leading-relaxed">
-          We refuse to play that game. <strong class="text-foreground">Every feature in Toju is available to every user, always.</strong>
-          There is no "Toju Nitro," no "Pro plan," no artificial limitations designed to push you toward your wallet. Communication is a human need,
-          not a luxury - and the tools for it should reflect that.
+          {{ 'pages.philosophy.sections.paywalls.paragraph1' | translate }}
         </p>
+        <p class="text-muted-foreground leading-relaxed" [innerHTML]="'pages.philosophy.sections.paywalls.paragraph2' | translate"></p>
       </div>
 
       <app-ad-slot />
 
       <!-- Privacy as a right -->
       <div class="section-fade mb-16">
-        <h2 class="text-2xl md:text-3xl font-bold text-foreground mb-6">Privacy Is a Right, Not a Feature</h2>
+        <h2 class="text-2xl md:text-3xl font-bold text-foreground mb-6">{{ 'pages.philosophy.sections.privacy.title' | translate }}</h2>
         <p class="text-muted-foreground leading-relaxed">
-          Most communication platforms collect everything: who you talk to, when, for how long, what you share. They build profiles of your social
-          graph, your habits, your interests. Even services that claim to care about privacy still store metadata on their servers.
-        </p>
-        <p class="text-muted-foreground leading-relaxed">
-          Toju is architecturally different. Your data goes directly from your device to your friend's device. We don't have your messages. We don't
-          have your files. We don't have your call history. Not because we promised not to look - but because the data never touches our
-          infrastructure. We built the technology so that
-          <strong class="text-foreground">privacy isn't something we offer; it's something we literally cannot violate.</strong>
+          {{ 'pages.philosophy.sections.privacy.paragraph1' | translate }}
         </p>
+        <p class="text-muted-foreground leading-relaxed" [innerHTML]="'pages.philosophy.sections.privacy.paragraph2' | translate"></p>
       </div>
 
       <!-- Better world -->
       <div class="section-fade mb-16">
-        <h2 class="text-2xl md:text-3xl font-bold text-foreground mb-6">Built from the Heart</h2>
+        <h2 class="text-2xl md:text-3xl font-bold text-foreground mb-6">{{ 'pages.philosophy.sections.heart.title' | translate }}</h2>
         <p class="text-muted-foreground leading-relaxed">
-          Toju wasn't born in a boardroom with revenue projections. It was born from frustration - frustration with being the product, with watching
-          friends get locked out of features they used to have for free, with the growing feeling that the tools we depend on daily don't actually
-          serve our interests.
-        </p>
-        <p class="text-muted-foreground leading-relaxed">
-          We build Toju because we genuinely want to make the world a little better. The internet was supposed to connect people freely, and somewhere
-          along the way, that mission got hijacked by business models that exploit the very connections they facilitate.
-          <strong class="text-foreground">Toju is our small act of reclaiming that original promise.</strong>
+          {{ 'pages.philosophy.sections.heart.paragraph1' | translate }}
         </p>
+        <p class="text-muted-foreground leading-relaxed" [innerHTML]="'pages.philosophy.sections.heart.paragraph2' | translate"></p>
       </div>
 
       <!-- Open source -->
       <div class="section-fade mb-16">
-        <h2 class="text-2xl md:text-3xl font-bold text-foreground mb-6">Transparent by Default</h2>
+        <h2 class="text-2xl md:text-3xl font-bold text-foreground mb-6">{{ 'pages.philosophy.sections.openSource.title' | translate }}</h2>
         <p class="text-muted-foreground leading-relaxed">
-          Every line of Toju's code is publicly available. You can read it, audit it, contribute to it, or fork it and build your own version. This
-          isn't a marketing decision - it's an accountability decision. When you can see exactly how the software works, you never have to take our
-          word for anything.
+          {{ 'pages.philosophy.sections.openSource.paragraph1' | translate }}
         </p>
         <p class="text-muted-foreground leading-relaxed">
-          Open source also means Toju belongs to its community, not to a company. Even if we stopped development tomorrow, the project lives on. Your
-          communication infrastructure shouldn't depend on a single organization's survival.
+          {{ 'pages.philosophy.sections.openSource.paragraph2' | translate }}
         </p>
       </div>
 
       <!-- Commitment -->
       <div class="section-fade rounded-2xl border border-purple-500/20 bg-gradient-to-br from-purple-950/20 to-violet-950/20 p-8 md:p-10">
-        <h2 class="text-2xl md:text-3xl font-bold text-foreground mb-6 !mt-0">Our Promise</h2>
+        <h2 class="text-2xl md:text-3xl font-bold text-foreground mb-6 !mt-0">{{ 'pages.philosophy.promise.title' | translate }}</h2>
         <ul class="space-y-4 text-muted-foreground !list-none !pl-0">
           <li class="flex items-start gap-3">
             <svg
@@ -109,7 +86,7 @@
                 d="M5 13l4 4L19 7"
               />
             </svg>
-            <span>We will <strong class="text-foreground">never</strong> lock features behind a paywall.</span>
+            <span [innerHTML]="'pages.philosophy.promise.items.noPaywalls' | translate"></span>
           </li>
           <li class="flex items-start gap-3">
             <svg
@@ -125,7 +102,7 @@
                 d="M5 13l4 4L19 7"
               />
             </svg>
-            <span>We will <strong class="text-foreground">never</strong> sell, monetize, or harvest your data.</span>
+            <span [innerHTML]="'pages.philosophy.promise.items.noDataSales' | translate"></span>
           </li>
           <li class="flex items-start gap-3">
             <svg
@@ -141,7 +118,7 @@
                 d="M5 13l4 4L19 7"
               />
             </svg>
-            <span>We will <strong class="text-foreground">always</strong> keep the source code open and auditable.</span>
+            <span [innerHTML]="'pages.philosophy.promise.items.openSource' | translate"></span>
           </li>
           <li class="flex items-start gap-3">
             <svg
@@ -157,10 +134,10 @@
                 d="M5 13l4 4L19 7"
               />
             </svg>
-            <span>We will <strong class="text-foreground">always</strong> put users before profit.</span>
+            <span [innerHTML]="'pages.philosophy.promise.items.usersBeforeProfit' | translate"></span>
           </li>
         </ul>
-        <p class="text-muted-foreground mt-6 text-sm">- The Myxelium team</p>
+        <p class="text-muted-foreground mt-6 text-sm">{{ 'pages.philosophy.promise.signature' | translate }}</p>
       </div>
     </article>
   </section>
@@ -168,10 +145,9 @@
   <!-- Support CTA -->
   <section class="container mx-auto px-6">
     <div class="section-fade max-w-2xl mx-auto text-center">
-      <h2 class="text-2xl md:text-3xl font-bold text-foreground mb-4">Help us keep going</h2>
+      <h2 class="text-2xl md:text-3xl font-bold text-foreground mb-4">{{ 'pages.philosophy.support.title' | translate }}</h2>
       <p class="text-muted-foreground mb-8 leading-relaxed">
-        If Toju's mission resonates with you, consider supporting the project. Every contribution helps us keep the lights on and development moving
-        forward - without ever compromising our values.
+        {{ 'pages.philosophy.support.description' | translate }}
       </p>
       <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
         <a
@@ -187,13 +163,13 @@
             height="20"
             class="w-5 h-5 object-contain"
           />
-          Buy us a coffee
+          {{ 'common.actions.buyUsCoffee' | translate }}
         </a>
         <a
           routerLink="/downloads"
           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"
         >
-          Download Toju
+          {{ 'common.actions.downloadBrand' | translate }}
           <svg
             class="w-4 h-4"
             fill="none"