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>

src/pages/FAQ.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+interface FAQ {
+  question: string
+  answer: string
+}
+
+const faqs = ref<FAQ[]>([
+  {
+    question: "What is Bitcoin Lightning?",
+    answer: "Bitcoin Lightning is a layer 2 payment protocol that operates on top of the Bitcoin blockchain. It enables instant, low-cost transactions between participating nodes, making it ideal for everyday purchases."
+  },
+  {
+    question: "How do I pay with Lightning?",
+    answer: "To pay with Lightning, you'll need a Lightning-enabled Bitcoin wallet. When making a purchase, simply scan the merchant's QR code with your wallet and confirm the payment. The transaction is nearly instant!"
+  },
+  {
+    question: "Is Lightning safe to use?",
+    answer: "Yes, Lightning is secure as it inherits Bitcoin's security model. While it operates differently from base-layer Bitcoin transactions, it maintains high security standards through smart contract technology."
+  },
+  {
+    question: "How can I list my business?",
+    answer: "If you're a business accepting Lightning payments and would like to be listed in our directory, please contact us through our submission form [coming soon]."
+  }
+])
+</script>
+
+<template>
+  <div class="container mx-auto px-4 py-8">
+    <div class="max-w-4xl mx-auto">
+      <h1 class="text-3xl font-bold tracking-tight sm:text-4xl mb-8">
+        Frequently Asked Questions
+      </h1>
+
+      <div class="space-y-6">
+        <div
+          v-for="(faq, index) in faqs"
+          :key="index"
+          class="rounded-lg border bg-card p-6"
+        >
+          <h3 class="text-lg font-semibold mb-2">
+            {{ faq.question }}
+          </h3>
+          <p class="text-muted-foreground">
+            {{ faq.answer }}
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template> 

src/pages/Home.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="container mx-auto px-4 py-8">
+    <div class="max-w-4xl mx-auto text-center space-y-8">
+      <h1 class="text-4xl font-bold tracking-tight sm:text-6xl">
+        Find Bitcoin Lightning Payments
+      </h1>
+      
+      <p class="text-xl text-muted-foreground">
+        Discover local businesses, services, and venues that accept Bitcoin Lightning payments.
+      </p>
+
+      <div class="flex flex-col sm:flex-row gap-4 justify-center">
+        <router-link 
+          to="/directory"
+          class="inline-flex items-center justify-center rounded-md bg-primary px-6 py-3 text-sm font-medium text-primary-foreground hover:bg-primary/90"
+        >
+          Browse Directory
+        </router-link>
+        
+        <router-link 
+          to="/faq"
+          class="inline-flex items-center justify-center rounded-md border border-input bg-background px-6 py-3 text-sm font-medium hover:bg-accent hover:text-accent-foreground"
+        >
+          Learn More
+        </router-link>
+      </div>
+    </div>
+  </div>
+</template>