| 123456789101112131415161718192021222324252627282930 |
- <template>
- <header class="absolute top-7 center-0 z-50 bg-black/60">
- <nav class="w-full flex items-center justify-center h-[55px] px-4">
- <NuxtLink
- v-for="item in navItems"
- :key="item.label"
- :to="item.href"
- class="relative text-xs font-open-sans font-semibold px-3 uppercase transition-colors duration-200 pb-1 leading-7"
- :class="[
- item.active
- ? 'text-[#E3FA6D] after:absolute after:bottom-0 after:left-0 after:w-full after:h-0.5 after:bg-[#E3FA6D]'
- : 'text-white hover:text-white/85'
- ]"
- >
- {{ 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>
|
