sfp_front_nuxt_serprati_landing/app/components/AppFooter.vue

<template>
  <footer class="bg-violet-dark text-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 lg:py-16">
      <div class="grid grid-cols-1 sm:grid-cols-3 gap-10 lg:gap-16">

        <div>
          <img
            class="h-9 mb-4 brightness-0 invert"
            src="~/assets/images/logo_desktop.svg"
            alt="Ser Prati"
          >
          <p class="text-sm leading-relaxed" style="color: rgba(254,254,254,0.65);">
            Associação dos Servidores — cuidando de você e sua família.
          </p>
        </div>

        <div>
          <h4 class="text-xs font-semibold uppercase tracking-widest mb-5 text-neutral-light">
            Links
          </h4>
          <ul class="space-y-3">
            <li>
              <button class="footer-link" @click="scrollTo('quem-somos')" >Quem Somos</button>
            </li>
            <li>
              <button class="footer-link" @click="scrollTo('beneficios')">Benefícios</button>
            </li>
            <li>
              <span class="footer-link opacity-50 cursor-default select-none">Parceiros</span>
            </li>
            <li>
              <button class="footer-link" @click="scrollTo('associe-se')">Associe-se</button>
            </li>
          </ul>
        </div>

        <div>
          <h4 class="text-xs font-semibold uppercase tracking-widest mb-5 text-neutral-light">
            Contato
          </h4>
          <ul class="space-y-3">
            <li class="flex items-center gap-2" style="color: rgba(254,254,254,0.65);">
              <span class="material-icons text-lg leading-none">email</span>
              <span class="text-sm">contato@serprati.com.br</span>
            </li>
            <li class="flex items-center gap-2" style="color: rgba(254,254,254,0.65);">
              <span class="material-icons text-lg leading-none">phone</span>
              <span class="text-sm">(51) 3000-0000</span>
            </li>
            <li class="flex items-center gap-2" style="color: rgba(254,254,254,0.65);">
              <span class="material-icons text-lg leading-none">location_on</span>
              <span class="text-sm">Porto Alegre - RS</span>
            </li>
          </ul>
        </div>

      </div>
    </div>

    <div class="border-t" style="border-color: rgba(255,255,255,0.1);">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
        <p class="text-center text-xs" style="color: rgba(254,254,254,0.4);">
          © 2025 SER PRATI. Todos os direitos reservados.
        </p>
      </div>
    </div>
  </footer>
</template>

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

<style scoped>
.footer-link {
  font-size: 0.875rem;
  color: rgba(254, 254, 254, 0.65);
  transition: color 0.2s;
  cursor: pointer;
}
.footer-link:hover {
  color: #fefefe;
}
</style>