initial layout with navbar and pages

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>