| 123456789101112131415161718192021222324252627282930 |
- <template>
- <header class="absolute top-0 left-0 w-full z-50 bg-[#0A0B09]/85 backdrop-blur-sm">
- <nav class="w-full flex items-center justify-center gap-10 h-[52px] px-8">
- <NuxtLink
- v-for="item in navItems"
- :key="item.label"
- :to="item.href"
- class="relative text-xs font-semibold tracking-widest uppercase transition-colors duration-200 pb-1 whitespace-nowrap"
- :class="[
- item.active
- ? 'text-[#E3FA6D] after:absolute after:bottom-0 after:left-0 after:w-full after:h-[2px] after:bg-[#E3FA6D]'
- : 'text-white/80 hover:text-white'
- ]"
- >
- {{ item.label }}
- </NuxtLink>
- </nav>
- </header>
- </template>
- <script setup lang="ts">
- const navItems = [
- { label: 'Home', href: '#hero', active: true },
- { label: 'A Imersão', href: '#imersao', active: false },
- { label: 'Metodologia', href: '#metodologia', active: false },
- { label: 'Executores', href: '#executores', active: false },
- { label: 'Próximos Destinos', href: '#destinos', active: false },
- { label: 'Contato', href: '#contato', active: false },
- ]
- </script>
|
