Initial import of HarborSmith website

apps/website/components/AppNavbar.vue

@@ -0,0 +1,85 @@
+<template>
+  <nav
+    id="voyageNav"
+    :class="['voyage-nav', { scrolled: isScrolled }]"
+  >
+    <div class="nav-container">
+      <div class="nav-brand">
+        <img
+          :src="navLogo"
+          :alt="logoAlt"
+          class="nav-logo"
+          id="navLogo"
+        >
+        <span>HARBOR SMITH</span>
+      </div>
+      <div class="nav-links">
+        <a
+          v-for="link in navLinks"
+          :key="link.href"
+          :href="link.href"
+          class="nav-link"
+          @click="handleSmoothScroll($event, link.href)"
+        >
+          {{ link.label }}
+        </a>
+        <a
+          href="tel:510-701-2535"
+          class="nav-link nav-cta"
+        >
+          Call Now
+        </a>
+      </div>
+    </div>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
+
+const isScrolled = ref(false)
+
+const navLinks = [
+  { href: '#services', label: 'Services' },
+  { href: '#testimonials', label: 'Testimonials' },
+  { href: '#contact', label: 'Contact' }
+]
+
+const navLogo = computed(() =>
+  isScrolled.value ? '/HARBOR-SMITH_navy.png' : '/HARBOR-SMITH-white.png'
+)
+
+const logoAlt = computed(() =>
+  isScrolled.value ? 'Harbor Smith Navy Logo' : 'Harbor Smith White Logo'
+)
+
+const handleScroll = () => {
+  isScrolled.value = window.pageYOffset > 50
+}
+
+const handleSmoothScroll = (event: Event, href: string) => {
+  if (!href.startsWith('#')) {
+    return
+  }
+
+  const target = document.querySelector(href)
+  if (!target) {
+    return
+  }
+
+  event.preventDefault()
+  target.scrollIntoView({ behavior: 'smooth', block: 'start' })
+}
+
+onMounted(() => {
+  handleScroll()
+  window.addEventListener('scroll', handleScroll, { passive: true })
+})
+onBeforeUnmount(() => {
+  window.removeEventListener('scroll', handleScroll)
+})
+</script>
+
+<style scoped>
+/* Navigation styling handled in voyage-layout.css */
+</style>