sfp_front_nuxt_serprati_landing/app/components/AppHeader.vue

<template>
  <header class="fixed top-0 left-0 right-0 z-50 bg-white shadow-sm h-16">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-full flex items-center justify-between">

      <button class="shrink-0 focus:outline-none" @click="scrollTo('quem-somos')" >
        <img
          class="hidden lg:block h-9"
          src="~/assets/images/logo_desktop.svg"
          alt="Ser Prati"
        >
        <img
          class="block lg:hidden h-8"
          src="~/assets/images/logo_mobile.svg"
          alt="Ser Prati"
        >
      </button>

      <nav class="hidden lg:flex items-center gap-8">
        <button class="nav-link" @click="scrollTo('quem-somos')" >Quem Somos</button>
        <button class="nav-link" @click="scrollTo('beneficios')" >Benefícios</button>
        <span class="nav-link opacity-50 cursor-default select-none">Parceiros</span>
        <button class="nav-link" @click="scrollTo('associe-se')" >Associe-se</button>
      </nav>

      <div class="flex items-center gap-3 lg:gap-4">
        <nav class="flex lg:hidden items-center gap-3">
          <button class="nav-link-mobile" @click="scrollTo('beneficios')" >Benefícios</button>
          <button class="nav-link-mobile" @click="scrollTo('associe-se')" >Associe-se</button>
        </nav>

        <button
          class="border border-violet-normal text-violet-normal text-xs lg:text-sm font-medium px-3 py-1.5 lg:px-5 lg:py-2 rounded-md hover:bg-violet-light transition-colors duration-200 cursor-pointer"
          @click="handleEntrar"
        >
          ENTRAR
        </button>
      </div>

    </div>
  </header>
</template>

<script setup lang="ts">
const scrollTo = (id: string) => {
  document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' })
}

const handleEntrar = () => {
  console.log('redirecionando para pagina de entrar')
}
</script>

<style scoped>
.nav-link {
  font-size: 0.875rem;
  font-weight: 500;
  color: #505050;
  transition: color 0.2s;
  cursor: pointer;
}
.nav-link:hover {
  color: #661d75;
}
.nav-link-mobile {
  font-size: 0.75rem;
  font-weight: 500;
  color: #505050;
  transition: color 0.2s;
  cursor: pointer;
}
.nav-link-mobile:hover {
  color: #661d75;
}
</style>