initial layout with navbar and pages

src/pages/Directory.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import DirectoryGrid from '@/components/directory/DirectoryGrid.vue'
+import { type DirectoryItem } from '@/types/directory'
+
+// This is temporary mock data - we'll replace it with real data later
+const mockItems: DirectoryItem[] = [
+  {
+    id: '1',
+    name: 'Ixchel Cafe & Bakery',
+    category: 'restaurant',
+    description: 'A cozy cafe serving great coffee and accepting Bitcoin Lightning payments.',
+    town: 'San Marcos',
+    mapsUrl: 'https://maps.app.goo.gl/sbjmvqP8U4SB4FS29',
+  },
+  {
+    id: '2',
+    name: 'Axel',
+    category: 'taxi',
+    town: 'San Marcos',
+    contact: '+502 3846 1220',
+    contactType: ['whatsapp', 'telegram'],
+    lightning: 'axel@atitlan.io'
+  },
+  {
+    id: '3',
+    name: 'Bitcoin Lake Lancha',
+    category: 'lancha',
+    description: 'Cross-harbor lancha service accepting Lightning payments.',
+    address: 'Pier 21, Harbor Front',
+    contact: '+1 234-567-8902'
+  }
+]
+</script>
+
+<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-xl text-muted-foreground">
+        Browse businesses and services that accept Bitcoin Lightning payments in your area.
+      </p>
+    </div>
+
+    <DirectoryGrid :items="mockItems" />
+  </div>
+</template>