implement i18n for Directory

src/i18n/locales/en.ts

@@ -11,6 +11,8 @@ export default {
     learnMore: 'Learn More'
   },
   directory: {
+    title: 'Lightning Payment Directory',
+    subtitle: 'Find local businesses and services that accept Bitcoin Lightning payments',
     search: 'Search...',
     categories: {
       all: 'All',
@@ -19,7 +21,11 @@ export default {
       lancha: 'Lanchas',
       retail: 'Retail',
       other: 'Other'
-    }
+    },
+    contact: 'Contact',
+    location: 'Location',
+    viewMap: 'View on Map',
+    lightning: 'Lightning Address'
   },
   footer: {
     poweredBy: 'Powered by',

src/i18n/locales/es.ts

@@ -11,6 +11,8 @@ export default {
     learnMore: 'Aprende Más'
   },
   directory: {
+    title: 'Directorio de Pagos Lightning',
+    subtitle: 'Encuentra negocios y servicios locales que aceptan pagos Bitcoin Lightning',
     search: 'Buscar...',
     categories: {
       all: 'Todos',
@@ -19,7 +21,11 @@ export default {
       lancha: 'Lanchas',
       retail: 'Tiendas',
       other: 'Otros'
-    }
+    },
+    contact: 'Contacto',
+    location: 'Ubicación',
+    viewMap: 'Ver en Mapa',
+    lightning: 'Dirección Lightning'
   },
   footer: {
     poweredBy: 'Desarrollado con',

src/pages/Directory.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n'
 import DirectoryGrid from '@/components/directory/DirectoryGrid.vue'
 import { type DirectoryItem } from '@/types/directory'
 
+const { t } = useI18n()
+
 // This is temporary mock data - we'll replace it with real data later
 const mockItems: DirectoryItem[] = [
   {
@@ -302,15 +305,19 @@ const mockItems: DirectoryItem[] = [
 
 <template>
   <div class="container mx-auto px-4 py-8">
-    <div class="max-w-4xl mx-auto mb-8">
+    <div class="space-y-8">
-      <h1 class="text-3xl font-bold tracking-tight sm:text-4xl mb-4">
+      <!-- Directory Header -->
-        Lightning Payment Directory
+      <div class="text-center">
-      </h1>
+        <h1 class="text-3xl font-bold tracking-tight sm:text-4xl">
-      <p class="text-base sm:text-lg lg:text-xl text-muted-foreground">
+          {{ t('directory.title') }}
-        Browse businesses and services that accept Bitcoin Lightning payments in your area.
+        </h1>
-      </p>
+        <p class="mt-4 text-lg text-muted-foreground">
-    </div>
+          {{ t('directory.subtitle') }}
+        </p>
+      </div>
 
-    <DirectoryGrid :items="mockItems" />
+      <!-- Directory Grid -->
+      <DirectoryGrid :items="mockItems" />
+    </div>
   </div>
 </template>