implement i18n for Directory

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">
-      <h1 class="text-3xl font-bold tracking-tight sm:text-4xl mb-4">
-        Lightning Payment Directory
-      </h1>
-      <p class="text-base sm:text-lg lg:text-xl text-muted-foreground">
-        Browse businesses and services that accept Bitcoin Lightning payments in your area.
-      </p>
-    </div>
+    <div class="space-y-8">
+      <!-- Directory Header -->
+      <div class="text-center">
+        <h1 class="text-3xl font-bold tracking-tight sm:text-4xl">
+          {{ t('directory.title') }}
+        </h1>
+        <p class="mt-4 text-lg text-muted-foreground">
+          {{ t('directory.subtitle') }}
+        </p>
+      </div>
 
-    <DirectoryGrid :items="mockItems" />
+      <!-- Directory Grid -->
+      <DirectoryGrid :items="mockItems" />
+    </div>
   </div>
 </template>