update locales, Navbar, Footer, DirectoryFilter

src/components/layout/Footer.vue

@@ -1,27 +1,24 @@
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n'
 import { Rocket } from 'lucide-vue-next'
-const currentYear = new Date().getFullYear()
+
+const { t } = useI18n()
 </script>
 
 <template>
   <footer class="bg-card border-t border-border">
     <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-      <div class="flex h-16 items-center justify-between">
+      <div class="flex flex-col md:flex-row justify-between items-center py-4 gap-4">
         <!-- Powered by section -->
         <div class="flex items-center space-x-2 text-sm text-muted-foreground">
-          <span>Powered by</span>
+          <span>{{ t('footer.poweredBy') }}</span>
           <img src="@/assets/bitcoin.svg" alt="Bitcoin" class="w-8 h-8" />
         </div>
-
-        <!-- Copyright and Donate Button -->
         <div class="flex items-center gap-4">
-          <span class="text-sm text-muted-foreground">
-            © {{ currentYear }}
-          </span>
           <a href="https://lnbits.atitlan.io/tipjar/3" target="_blank" rel="noopener noreferrer"
             class="inline-flex items-center justify-center rounded-md bg-accent/10 px-4 py-2 text-sm font-medium text-accent border border-accent/20 hover:bg-accent/20 hover:border-accent/40 transition-colors">
             <Rocket class="mr-2 h-4 w-4" />
-            Donate
+            {{ t('footer.donate') }}
           </a>
         </div>
       </div>

src/components/layout/Navbar.vue

@@ -1,16 +1,18 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { Menu, X } from 'lucide-vue-next'
 import ThemeToggle from '@/components/ThemeToggle.vue'
 import LanguageSwitcher from '@/components/LanguageSwitcher.vue'
 
+const { t } = useI18n()
 const isOpen = ref(false)
 
-const navigation = [
-  { name: 'Home', href: '/' },
-  { name: 'Directory', href: '/directory' },
-  { name: 'FAQ', href: '/faq' },
-]
+const navigation = computed(() => [
+  { name: t('nav.home'), href: '/' },
+  { name: t('nav.directory'), href: '/directory' },
+  { name: t('nav.faq'), href: '/faq' },
+])
 
 const toggleMenu = () => {
   isOpen.value = !isOpen.value
@@ -26,7 +28,7 @@ const toggleMenu = () => {
           <div class="flex flex-shrink-0 items-center">
             <!-- Replace with your logo -->
             <router-link to="/" class="text-xl font-bold text-card-foreground">
-              ⚡️ Atitlan Lightning Directory
+              ⚡️ {{ t('nav.title') }}
             </router-link>
           </div>