feat(#22): Use translation keys in files

legalconsenthub/app/pages/login.vue

@@ -1,40 +1,37 @@
 <template>
-    <UCard variant="subtle">
-      <template #header>
-        <div class="text-center">
-          <UIcon name="i-lucide-lock" class="mx-auto h-16 w-16 text-primary-500 mb-6" />
-          <h1 class="text-3xl font-bold text-gray-900 mb-2">
-            Welcome
-          </h1>
-          <p class="text-gray-600">
-            You will be redirected to Keycloak to authenticate
-          </p>
-        </div>
-      </template>
-
+  <UCard variant="subtle">
+    <template #header>
       <div class="text-center">
-        <UButton
-          color="primary"
-          size="xl"
-          icon="i-lucide-log-in"
-          @click="handleSignIn"
-        >
-          Sign in with Keycloak
-        </UButton>
+        <UIcon name="i-lucide-lock" class="mx-auto h-16 w-16 text-primary-500 mb-6" />
+        <h1 class="text-3xl font-bold text-gray-900 mb-2">
+          {{ $t('auth.welcome') }}
+        </h1>
+        <p class="text-gray-600">
+          {{ $t('auth.redirectMessage') }}
+        </p>
       </div>
+    </template>
 
-      <template #footer>
-        <div class="text-center text-xs text-gray-500">
-          By signing in, you agree to our terms of service
-        </div>
-      </template>
-    </UCard>
+    <div class="text-center">
+      <UButton color="primary" size="xl" icon="i-lucide-log-in" @click="handleSignIn">
+        {{ $t('auth.signIn') }}
+      </UButton>
+    </div>
+
+    <template #footer>
+      <div class="text-center text-xs text-gray-500">
+        {{ $t('auth.termsAgreement') }}
+      </div>
+    </template>
+  </UCard>
 </template>
 
 <script setup lang="ts">
 definePageMeta({ auth: false, layout: 'auth' })
 
-useSeoMeta({ title: 'Login' })
+const { t: $t } = useI18n()
+
+useSeoMeta({ title: $t('auth.login') })
 
 function handleSignIn() {
   navigateTo('/auth/keycloak', { external: true })