fix(tools): add comprehensive translations for all tool pages and ensure two-line hero titles

Author: root

components/GlobalFooter.vue

@@ -40,7 +40,9 @@
         © {{ new Date().getFullYear() }} -
         <nuxt-link :to="$localePath('/about')">About</nuxt-link>
         -
-        <nuxt-link :to="$localePath('/tools')">Tools</nuxt-link>
+        <nuxt-link :to="$localePath('/tools')">{{
+          $t("toolsHub.headerTools") || "Tools"
+        }}</nuxt-link>
         -
         <nuxt-link :to="$localePath('/impressum')">Imprint</nuxt-link>
         -
@@ -67,6 +69,10 @@ export default {
           name: "tools/proof-of-relationship",
           text: "pageNameRelationship",
         },
+        {
+          name: "tools/inactivity",
+          text: "pageNameInactivity",
+        },
         {
           name: "switch-from-whatsapp-to-signal",
           text: "pageNameSignal",

components/GlobalHeader.vue

@@ -20,7 +20,7 @@
             <v-icon size="16" class="mr-1" color="#000000"
               >mdi-toolbox-outline</v-icon
             >
-            <span>Tools</span>
+            <span>{{ $t("toolsHub.headerTools") || "Tools" }}</span>
           </nuxt-link>
 
           <v-btn

components/landing/LandingHero.vue

@@ -31,7 +31,7 @@
         </template>
       </nav>
       <p v-if="eyebrow" class="landing-hero__eyebrow">{{ eyebrow }}</p>
-      <h1 class="landing-hero__title" v-html="title"></h1>
+      <h1 class="landing-hero__title" v-html="renderedTitle"></h1>
       <p v-if="subtitle" class="landing-hero__subtitle">{{ subtitle }}</p>
       <div v-if="ctaText" class="landing-hero__actions">
         <LandingButton :to="ctaTo">{{ ctaText }}</LandingButton>
@@ -60,6 +60,24 @@ export default {
   data() {
     return { visible: false };
   },
+  computed: {
+    renderedTitle() {
+      if (!this.title) return "";
+      if (this.title.includes("landing-hero__title-line")) {
+        return this.title;
+      }
+      if (/<br\s*\/?>/i.test(this.title)) {
+        return this.title
+          .split(/<br\s*\/?>/i)
+          .map(
+            (part) =>
+              `<span class="landing-hero__title-line">${part.trim()}</span>`
+          )
+          .join("");
+      }
+      return this.title;
+    },
+  },
   mounted() {
     requestAnimationFrame(() => {
       this.visible = true;
@@ -140,12 +158,16 @@ export default {
 }
 
 .landing-hero__title {
-  font-size: clamp(2.5rem, 7vw, 4.8rem);
+  font-size: clamp(2.2rem, 5.5vw, 4.2rem);
   font-weight: 700;
-  line-height: 1.05;
+  line-height: 1.1;
   letter-spacing: -0.02em;
   margin: 0 auto;
   max-width: 18ch;
+
+  :deep(.landing-hero__title-line) {
+    display: block;
+  }
 }
 
 .landing-hero__subtitle {
@@ -183,6 +205,12 @@ export default {
   .landing-hero__title {
     margin: 0;
     max-width: none;
+    font-size: clamp(2rem, 4.4vw, 3.6rem);
+
+    :deep(.landing-hero__title-line) {
+      display: block;
+      white-space: nowrap;
+    }
   }
 
   .landing-hero__subtitle {
@@ -195,4 +223,16 @@ export default {
     justify-content: flex-start;
   }
 }
+
+@media (max-width: 600px) {
+  .landing-hero--left .landing-hero__title {
+    font-size: clamp(1.35rem, 5.2vw, 2rem);
+  }
+}
+
+@media (max-width: 380px) {
+  .landing-hero--left .landing-hero__title {
+    font-size: clamp(1.15rem, 5vw, 1.5rem);
+  }
+}
 </style>

components/tools/ToolDropzone.vue

@@ -3,11 +3,11 @@
     <!-- Technical Security Banner -->
     <div class="tech-spec-bar">
       <span class="pulse-dot"></span>
-      <span class="mono-label">LOCAL CLIENT ENGINE</span>
+      <span class="mono-label">{{ t("toolDropzone.localEngine") }}</span>
       <span class="separator">•</span>
-      <span class="mono-label">ZERO CLOUD TRANSMISSION</span>
+      <span class="mono-label">{{ t("toolDropzone.zeroCloud") }}</span>
       <span class="separator">•</span>
-      <span class="mono-label">100% PRIVATE</span>
+      <span class="mono-label">{{ t("toolDropzone.private") }}</span>
     </div>
 
     <!-- Drop Container Card (Styled like LandingDocMock / LandingStatsMock) -->
@@ -40,29 +40,27 @@
           <v-icon size="32" color="#21a68d">mdi-tray-arrow-down</v-icon>
         </div>
 
-        <h3 class="dropzone-title">Drop your WhatsApp chat export here</h3>
-        <p class="dropzone-subtitle">
-          Accepts exported <code>.txt</code> or <code>.zip</code> chat files
-        </p>
+        <h3 class="dropzone-title">{{ t("toolDropzone.dropTitle") }}</h3>
+        <p class="dropzone-subtitle">{{ t("toolDropzone.dropSubtitle") }}</p>
 
         <div class="action-buttons" @click.stop>
           <button type="button" class="btn-primary" @click="triggerFileDialog">
             <v-icon size="18" class="mr-1">mdi-file-upload-outline</v-icon>
-            Select Chat File
+            {{ t("toolDropzone.selectFile") }}
           </button>
           <button type="button" class="btn-ghost" @click="loadSampleChat">
             <v-icon size="18" class="mr-1">mdi-play-circle-outline</v-icon>
-            Try With Sample Chat
+            {{ t("toolDropzone.trySample") }}
           </button>
         </div>
       </div>
 
       <!-- Loading / Parsing State -->
       <div v-else-if="loading" class="dropzone-content loading-state">
         <div class="spinner-ring"></div>
-        <h4 class="loading-title">Analyzing Conversation Gaps...</h4>
+        <h4 class="loading-title">{{ t("toolDropzone.analyzingTitle") }}</h4>
         <p class="loading-meta mono-label">
-          Computing timestamps, response latencies, and participant inactivity
+          {{ t("toolDropzone.analyzingSubtitle") }}
         </p>
       </div>
 
@@ -73,8 +71,12 @@
           <div class="file-info">
             <span class="file-name">{{ loadedFileName }}</span>
             <span class="file-meta mono-label">
-              {{ parsedMessageCount.toLocaleString() }} messages • analyzed in
-              {{ parseDurationMs }}ms
+              {{
+                t("toolDropzone.messagesAnalyzedIn", {
+                  count: parsedMessageCount.toLocaleString(),
+                  time: parseDurationMs,
+                })
+              }}
             </span>
           </div>
         </div>
@@ -85,7 +87,7 @@
           @click="triggerFileDialog"
         >
           <v-icon size="16" class="mr-1">mdi-swap-horizontal</v-icon>
-          Switch File
+          {{ t("toolDropzone.switchFile") }}
         </button>
       </div>
 
@@ -102,6 +104,8 @@
 
 <script setup lang="ts">
 import { ref } from "vue";
+
+const { t } = useI18n();
 import {
   parseChatFile,
   useSharedChat,