src/components/CustomNavbar.vue

```vue
<template>
  <nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-300" :class="{ 'scrolled': isScrolled }">
    <div class="container mx-auto px-4 py-4 flex justify-between items-center">
      <router-link to="/" class="logo flex items-center gap-2">
        <i data-feather="shield" class="text-blue-500"></i>
        <span class="font-serif font-bold text-white">SolStrategies</span>
      </router-link>

      <ul class="hidden md:flex gap-8 items-center">
        <li v-for="item in navItems" :key="item.name">
          <router-link :to="item.path" class="nav-link text-white hover:text-white transition-colors duration-200">
            {{ item.name }}
          </router-link>
        </li>
        <li>
          <router-link to="/contact" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md transition-all duration-200">
            Contact
          </router-link>
        </li>
      </ul>

      <button @click="toggleMobileMenu" class="md:hidden text-white">
        <i :data-feather="mobileMenuOpen ? 'x' : 'menu'"></i>
      </button>
    </div>

    <div v-if="mobileMenuOpen" class="md:hidden bg-gray-900 py-4 px-4">
      <ul class="flex flex-col gap-4">
        <li v-for="item in navItems" :key="item.name">
          <router-link 
            :to="item.path" 
            class="block text-white py-2 border-b border-gray-800 hover:text-blue-400 transition-colors duration-200"
            @click="mobileMenuOpen = false"
          >
            {{ item.name }}
          </router-link>
        </li>
        <li>
          <router-link 
            to="/contact" 
            class="block bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-center mt-2 transition-all duration-200"
            @click="mobileMenuOpen = false"
          >
            Contact
          </router-link>
        </li>
      </ul>
    </div>
  </nav>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue'
import feather from 'feather-icons'

export default {
  setup() {
    const isScrolled = ref(false)
    const mobileMenuOpen = ref(false)
    const navItems = [
      { name: 'Home', path: '/' },
      { name: 'Services', path: '/services' },
      { name: 'About', path: '/about' },
      { name: 'Insights', path: '/insights' }
    ]

    const handleScroll = () => {
      isScrolled.value = window.scrollY > 50
    }

    const toggleMobileMenu = () => {
      mobileMenuOpen.value = !mobileMenuOpen.value
    }

    onMounted(() => {
      window.addEventListener('scroll', handleScroll)
      feather.replace()
    })

    onUnmounted(() => {
      window.removeEventListener('scroll', handleScroll)
    })

    return {
      isScrolled,
      mobileMenuOpen,
      navItems,
      toggleMobileMenu
    }
  }
}
</script>

<style scoped>
.scrolled {
  @apply bg-gray-900 py-2 shadow-md;
}

.nav-link {
  @apply relative;
}

.nav-link::after {
  content: '';
  @apply absolute bottom-0 left-0 w-0 h-0.5 bg-blue-500 transition-all duration-300;
}

.nav-link:hover::after {
  @apply w-full;
}

.router-link-active::after {
  @apply w-full;
}
</style>
```