update locales, Navbar, Footer, DirectoryFilter

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>