Added frontend localization

frontend/src/components/TodayWidget.vue

@@ -1,22 +1,34 @@
 <script setup lang="ts">
+import { computed } from 'vue';
 import { Calendar, Clock, MapPin } from 'lucide-vue-next';
+import { useI18n } from '../i18n';
+
+const { locale, t } = useI18n();
 
 const todayEvents = [
   {
     time: '6:30 PM',
-    title: 'Family Dinner',
-    location: 'Home',
+    titleKey: 'home.today.event.familyDinner',
+    locationKey: 'home.today.location.home',
     colorFrom: '#a855f7',
     colorTo: '#9333ea',
   },
   {
     time: '8:00 PM',
-    title: 'Movie Night',
-    location: 'Living Room',
+    titleKey: 'home.today.event.movieNight',
+    locationKey: 'home.today.location.livingRoom',
     colorFrom: '#3b82f6',
     colorTo: '#2563eb',
   },
 ];
+
+const formattedToday = computed(() =>
+  new Intl.DateTimeFormat(locale.value, {
+    weekday: 'long',
+    month: 'long',
+    day: 'numeric',
+  }).format(new Date()),
+);
 </script>
 
 <template>
@@ -27,17 +39,17 @@ const todayEvents = [
           <Calendar class="h-[18px] w-[18px] text-purple-400" :stroke-width="2" />
         </div>
         <div>
-          <h3 class="text-[15px] font-semibold text-white">Today</h3>
-          <p class="text-[12px] text-zinc-500">Wednesday, April 2</p>
+          <h3 class="text-[15px] font-semibold text-white">{{ t('home.today.title') }}</h3>
+          <p class="text-[12px] text-zinc-500">{{ formattedToday }}</p>
         </div>
       </div>
-      <span class="text-[12px] font-medium text-zinc-600">{{ todayEvents.length }} events</span>
+      <span class="text-[12px] font-medium text-zinc-600">{{ todayEvents.length }} {{ t('home.today.events') }}</span>
     </div>
 
     <div class="space-y-2.5">
       <div
         v-for="event in todayEvents"
-        :key="event.title"
+        :key="event.titleKey"
         class="group flex cursor-pointer items-center gap-3 rounded-[14px] border border-white/[0.04] bg-white/[0.02] p-3.5 transition-all hover:border-white/[0.08] hover:bg-white/[0.05]"
       >
         <div class="flex min-w-[52px] flex-col items-center justify-center rounded-[10px] border border-white/[0.06] bg-white/[0.04] py-2 px-2.5">
@@ -45,10 +57,10 @@ const todayEvents = [
           <span class="text-[13px] font-semibold leading-none text-white">{{ event.time }}</span>
         </div>
         <div class="min-w-0 flex-1">
-          <h4 class="mb-0.5 text-[14px] font-semibold text-white">{{ event.title }}</h4>
+          <h4 class="mb-0.5 text-[14px] font-semibold text-white">{{ t(event.titleKey) }}</h4>
           <div class="flex items-center gap-1 text-zinc-500">
             <MapPin class="h-3 w-3" :stroke-width="2" />
-            <span class="text-[12px]">{{ event.location }}</span>
+            <span class="text-[12px]">{{ t(event.locationKey) }}</span>
           </div>
         </div>
         <div