initial layout with navbar and pages

src/App.vue

@@ -1,17 +1,14 @@
 <script setup lang="ts">
-import HelloWorld from './components/HelloWorld.vue'
+import Navbar from './components/layout/Navbar.vue'
 </script>
 
 <template>
-  <div>
+  <div class="min-h-screen bg-background">
-    <a href="https://vite.dev" target="_blank">
+    <Navbar />
-      <img src="/vite.svg" class="logo" alt="Vite logo" />
+    <main>
-    </a>
+      <router-view></router-view>
-    <a href="https://vuejs.org/" target="_blank">
+    </main>
-      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
-    </a>
   </div>
-  <HelloWorld msg="Vite + Vue" />
 </template>
 
 <style scoped>

src/components/directory/DirectoryCard.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { type DirectoryItem } from '@/types/directory'
-import { MapPin, Phone, ExternalLink } from 'lucide-vue-next'
+import { MapPin, Phone, ExternalLink, Zap, MessageCircle } from 'lucide-vue-next'
 
 defineProps<{
   item: DirectoryItem
@@ -9,7 +9,7 @@ defineProps<{
 const categoryColors = {
   restaurant: 'bg-orange-100 text-orange-800',
   taxi: 'bg-yellow-100 text-yellow-800',
-  ferry: 'bg-blue-100 text-blue-800',
+  lancha: 'bg-blue-100 text-blue-800',
   retail: 'bg-green-100 text-green-800',
   other: 'bg-gray-100 text-gray-800'
 }
@@ -20,21 +20,14 @@ const categoryColors = {
     <div class="p-6 space-y-4">
       <!-- Image -->
       <div v-if="item.imageUrl" class="aspect-video w-full overflow-hidden rounded-md">
-        <img 
+        <img :src="item.imageUrl" :alt="item.name" class="h-full w-full object-cover" />
-          :src="item.imageUrl" 
-          :alt="item.name"
-          class="h-full w-full object-cover"
-        />
       </div>
-      
+
       <!-- Content -->
       <div class="space-y-3">
         <div class="flex items-start justify-between">
           <h3 class="font-semibold text-lg">{{ item.name }}</h3>
-          <span 
+          <span class="rounded-full px-2.5 py-0.5 text-xs font-semibold" :class="categoryColors[item.category]">
-            class="rounded-full px-2.5 py-0.5 text-xs font-semibold"
-            :class="categoryColors[item.category]"
-          >
             {{ item.category }}
           </span>
         </div>
@@ -45,17 +38,40 @@ const categoryColors = {
 
         <!-- Contact Info -->
         <div class="space-y-2">
-          <div v-if="item.address" class="flex items-center text-sm">
+          <div v-if="item.town || item.address" class="flex items-center text-sm group">
             <MapPin class="mr-2 h-4 w-4" />
-            <span>{{ item.address }}</span>
+            <div class="flex items-center gap-1">
+              <span>{{ [item.address, item.town].filter(Boolean).join(', ') }}</span>
+              <a v-if="item.mapsUrl" :href="item.mapsUrl" target="_blank" rel="noopener noreferrer"
+                class="text-muted-foreground hover:text-foreground ml-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                <ExternalLink class="h-3 w-3" />
+              </a>
+            </div>
           </div>
-          
+
-          <div v-if="item.contact" class="flex items-center text-sm">
+          <div v-if="item.contact" class="flex items-center text-sm gap-2">
-            <Phone class="mr-2 h-4 w-4" />
+            <Phone class="h-4 w-4" />
             <span>{{ item.contact }}</span>
+            <div v-if="item.contactType" class="flex gap-1">
+              <span v-if="item.contactType.includes('whatsapp')"
+                class="bg-green-100 text-green-800 px-2 py-0.5 rounded-full text-xs font-medium flex items-center gap-1">
+                <MessageCircle class="h-3 w-3" />
+                WhatsApp
+              </span>
+              <span v-if="item.contactType.includes('telegram')"
+                class="bg-blue-100 text-blue-800 px-2 py-0.5 rounded-full text-xs font-medium flex items-center gap-1">
+                <MessageCircle class="h-3 w-3" />
+                Telegram
+              </span>
+            </div>
+          </div>
+
+          <div v-if="item.lightning" class="flex items-center text-sm">
+            <Zap class="mr-2 h-4 w-4" />
+            <span>{{ item.lightning }}</span>
           </div>
         </div>
       </div>
     </div>
   </div>
-</template> 
+</template>

src/components/directory/DirectoryFilter.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { Search } from 'lucide-vue-next'
+
+const props = defineProps<{
+  category: string
+  search: string
+}>()
+
+const emit = defineEmits<{
+  'update:category': [value: string]
+  'update:search': [value: string]
+}>()
+
+const categories = [
+  { id: 'all', label: 'All' },
+  { id: 'restaurant', label: 'Restaurants' },
+  { id: 'taxi', label: 'Taxis' },
+  { id: 'lancha', label: 'Lanchas' },
+  { id: 'retail', label: 'Retail' },
+  { id: 'other', label: 'Other' }
+]
+</script>
+
+<template>
+  <div class="w-full flex flex-col md:flex-row gap-4">
+    <!-- Search Input -->
+    <div class="relative flex-1">
+      <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+        <Search class="h-5 w-5 text-muted-foreground" />
+      </div>
+      <input
+        type="text"
+        :value="search"
+        @input="emit('update:search', ($event.target as HTMLInputElement).value)"
+        class="block w-full rounded-md border-input pl-10 py-2 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
+        placeholder="Search businesses..."
+      />
+    </div>
+
+    <!-- Category Filter -->
+    <div class="flex gap-2 overflow-x-auto pb-2 md:pb-0">
+      <button
+        v-for="cat in categories"
+        :key="cat.id"
+        @click="emit('update:category', cat.id)"
+        class="inline-flex items-center rounded-full px-3 py-1 text-sm font-medium whitespace-nowrap transition-colors"
+        :class="[
+          category === cat.id
+            ? 'bg-primary text-primary-foreground'
+            : 'bg-secondary text-secondary-foreground hover:bg-secondary/80'
+        ]"
+      >
+        {{ cat.label }}
+      </button>
+    </div>
+  </div>
+</template> 

src/components/directory/DirectoryGrid.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import DirectoryCard from './DirectoryCard.vue'
 import { type DirectoryItem } from '@/types/directory'
 import DirectoryFilter from './DirectoryFilter.vue'
@@ -15,7 +15,7 @@ const filteredItems = computed(() => {
   return props.items.filter(item => {
     const matchesCategory = selectedCategory.value === 'all' || item.category === selectedCategory.value
     const matchesSearch = item.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
-                         item.description.toLowerCase().includes(searchQuery.value.toLowerCase())
+      item.description.toLowerCase().includes(searchQuery.value.toLowerCase())
     return matchesCategory && matchesSearch
   })
 })
@@ -25,29 +25,19 @@ const filteredItems = computed(() => {
   <div class="container mx-auto px-4 py-8">
     <!-- Filters -->
     <div class="mb-8 space-y-4 md:space-y-0 md:flex md:items-center md:justify-between">
-      <DirectoryFilter 
+      <DirectoryFilter v-model:category="selectedCategory" v-model:search="searchQuery" />
-        v-model:category="selectedCategory"
-        v-model:search="searchQuery"
-      />
     </div>
 
     <!-- Grid -->
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-      <DirectoryCard
+      <DirectoryCard v-for="item in filteredItems" :key="item.id" :item="item" />
-        v-for="item in filteredItems"
-        :key="item.id"
-        :item="item"
-      />
     </div>
 
     <!-- Empty State -->
-    <div 
+    <div v-if="filteredItems.length === 0" class="text-center py-12">
-      v-if="filteredItems.length === 0"
-      class="text-center py-12"
-    >
       <p class="text-lg text-muted-foreground">
         No results found. Try adjusting your filters.
       </p>
     </div>
   </div>
-</template> 
+</template>

src/components/layout/Navbar.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Menu, X } from 'lucide-vue-next'
+
+const isOpen = ref(false)
+
+const navigation = [
+  { name: 'Home', href: '/' },
+  { name: 'Directory', href: '/directory' },
+  { name: 'FAQ', href: '/faq' },
+]
+
+const toggleMenu = () => {
+  isOpen.value = !isOpen.value
+}
+</script>
+
+<template>
+  <nav class="bg-white shadow-sm">
+    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+      <div class="flex h-16 justify-between">
+        <!-- Logo and Desktop Navigation -->
+        <div class="flex">
+          <div class="flex flex-shrink-0 items-center">
+            <!-- Replace with your logo -->
+            <router-link to="/" class="text-xl font-bold">
+              ⚡️ Lightning Directory
+            </router-link>
+          </div>
+          
+          <!-- Desktop Navigation -->
+          <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
+            <router-link
+              v-for="item in navigation"
+              :key="item.name"
+              :to="item.href"
+              class="inline-flex items-center px-1 pt-1 text-sm font-medium"
+              :class="[
+                $route.path === item.href
+                  ? 'border-b-2 border-primary text-gray-900'
+                  : 'text-gray-500 hover:border-b-2 hover:border-gray-300 hover:text-gray-700'
+              ]"
+            >
+              {{ item.name }}
+            </router-link>
+          </div>
+        </div>
+
+        <!-- Mobile menu button -->
+        <div class="flex items-center sm:hidden">
+          <button
+            type="button"
+            class="inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500"
+            @click="toggleMenu"
+          >
+            <span class="sr-only">Open main menu</span>
+            <Menu v-if="!isOpen" class="block h-6 w-6" aria-hidden="true" />
+            <X v-else class="block h-6 w-6" aria-hidden="true" />
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Mobile menu -->
+    <div
+      :class="[isOpen ? 'block' : 'hidden']"
+      class="sm:hidden"
+    >
+      <div class="space-y-1 pb-3 pt-2">
+        <router-link
+          v-for="item in navigation"
+          :key="item.name"
+          :to="item.href"
+          class="block border-l-4 py-2 pl-3 pr-4 text-base font-medium"
+          :class="[
+            $route.path === item.href
+              ? 'border-primary bg-primary/10 text-primary'
+              : 'border-transparent text-gray-500 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-700'
+          ]"
+          @click="isOpen = false"
+        >
+          {{ item.name }}
+        </router-link>
+      </div>
+    </div>
+  </nav>
+</template> 

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> 

src/types/directory.ts

@@ -1,13 +1,17 @@
 export interface DirectoryItem {
   id: string
   name: string
-  category: 'restaurant' | 'taxi' | 'ferry' | 'retail' | 'other'
+  category: 'restaurant' | 'taxi' | 'lancha' | 'retail' | 'other'
-  description: string
+  description?: string
   address?: string
+  town?: string
+  mapsUrl?: string
   contact?: string
+  contactType?: ('whatsapp' | 'telegram')[]
+  lightning?: string
   coordinates?: {
     lat: number
     lng: number
   }
   imageUrl?: string
-} 
+}