Added frontend localization

frontend/src/components/RecentActivityWidget.vue

@@ -1,35 +1,38 @@
 <script setup lang="ts">
 import { Activity, CreditCard, Popcorn, ShoppingCart, Users } from 'lucide-vue-next';
+import { useI18n } from '../i18n';
+
+const { t } = useI18n();
 
 const activities = [
   {
     icon: ShoppingCart,
-    title: 'Grocery Shopping',
-    subtitle: 'Sarah • $124.50',
+    titleKey: 'home.activity.shopping',
+    subtitleKey: 'home.activity.shoppingSubtitle',
     time: '2h',
     bgColor: 'bg-emerald-500/10',
     textColor: 'text-emerald-400',
   },
   {
     icon: Popcorn,
-    title: 'Movie Vote',
-    subtitle: '3 votes for "Dune 2"',
+    titleKey: 'home.activity.movieVote',
+    subtitleKey: 'home.activity.movieVoteSubtitle',
     time: '5h',
     bgColor: 'bg-purple-500/10',
     textColor: 'text-purple-400',
   },
   {
     icon: CreditCard,
-    title: 'Subscription',
-    subtitle: 'Netflix • $15.99',
+    titleKey: 'home.activity.subscription',
+    subtitleKey: 'home.activity.subscriptionSubtitle',
     time: '1d',
     bgColor: 'bg-rose-500/10',
     textColor: 'text-rose-400',
   },
   {
     icon: Users,
-    title: 'New Event',
-    subtitle: 'Family BBQ Saturday',
+    titleKey: 'home.activity.newEvent',
+    subtitleKey: 'home.activity.newEventSubtitle',
     time: '2d',
     bgColor: 'bg-blue-500/10',
     textColor: 'text-blue-400',
@@ -44,25 +47,25 @@ const activities = [
         <div class="flex h-9 w-9 items-center justify-center rounded-[12px] bg-blue-500/10">
           <Activity class="h-[18px] w-[18px] text-blue-400" :stroke-width="2" />
         </div>
-        <h3 class="text-[15px] font-semibold text-white">Activity</h3>
+        <h3 class="text-[15px] font-semibold text-white">{{ t('home.activity.title') }}</h3>
       </div>
       <button class="text-[12px] font-medium text-purple-400 transition-colors hover:text-purple-300">
-        View all
+        {{ t('home.activity.viewAll') }}
       </button>
     </div>
 
     <div class="space-y-2">
       <div
         v-for="activity in activities"
-        :key="activity.title"
+        :key="activity.titleKey"
         class="group flex cursor-pointer items-center gap-3 rounded-[12px] p-3 transition-all hover:bg-white/[0.03]"
       >
         <div :class="['flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-[12px] transition-transform group-hover:scale-110', activity.bgColor]">
           <component :is="activity.icon" :class="['h-[18px] w-[18px]', activity.textColor]" :stroke-width="2" />
         </div>
         <div class="min-w-0 flex-1">
-          <p class="mb-0.5 text-[14px] font-medium text-white">{{ activity.title }}</p>
-          <p class="truncate text-[12px] text-zinc-500">{{ activity.subtitle }}</p>
+          <p class="mb-0.5 text-[14px] font-medium text-white">{{ t(activity.titleKey) }}</p>
+          <p class="truncate text-[12px] text-zinc-500">{{ t(activity.subtitleKey) }}</p>
         </div>
         <span class="flex-shrink-0 text-[12px] font-medium text-zinc-600">{{ activity.time }}</span>
       </div>