sfp_front_nuxt_serprati_landing/app/pages/index.vue

<template>
  <div>

    <section
      id="quem-somos"
      class="relative min-h-screen flex flex-col bg-cover bg-center"
      :style="{ backgroundImage: `url(${heroBg})` }"
    >
      <div class="absolute inset-0 bg-violet-normal/80"></div>

      <div class="relative z-10 flex-1 flex items-center">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full py-16 lg:py-24">
          <div class="max-w-2xl">

            <h1
              class="reveal text-h2 text-white mb-6"
              style="font-size: clamp(2rem, 5vw, 3.75rem);"
            >
              Ser PRATI é fazer parte de algo maior
            </h1>

            <p class="reveal reveal-delay-1 text-subtitle-1 text-white/85 mb-10 leading-relaxed">
              Benefícios exclusivos, parceiros de qualidade e uma comunidade
              que cuida de você e sua família.
            </p>

            <div class="reveal reveal-delay-2 flex flex-col sm:flex-row gap-4">
              <button
                @click="scrollTo('associe-se')"
                class="btn-primary"
              >
                ASSOCIE-SE AGORA
              </button>
              <button
                @click="scrollTo('beneficios')"
                class="btn-outline"
              >
                CONHEÇA OS BENEFÍCIOS
              </button>
            </div>

          </div>
        </div>
      </div>

      <div class="relative z-10 bg-violet-dark/60 backdrop-blur-sm">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
          <div class="grid grid-cols-3 gap-4 text-center">

            <div class="reveal reveal-delay-1 flex flex-col items-center gap-1">
              <span class="material-icons text-white/80 text-3xl lg:text-4xl">group</span>
              <span class="text-h5 text-white font-bold" style="font-size: clamp(1.1rem, 2.5vw, 1.5rem);">1.000+</span>
              <span class="text-caption text-white/70 lg:text-sm">Associados</span>
            </div>

            <div class="reveal reveal-delay-2 flex flex-col items-center gap-1">
              <span class="material-icons text-white/80 text-3xl lg:text-4xl">handshake</span>
              <span class="text-h5 text-white font-bold" style="font-size: clamp(1.1rem, 2.5vw, 1.5rem);">50+</span>
              <span class="text-caption text-white/70 lg:text-sm">Parceiros</span>
            </div>

            <div class="reveal reveal-delay-3 flex flex-col items-center gap-1">
              <span class="material-icons text-white/80 text-3xl lg:text-4xl">history</span>
              <span class="text-h5 text-white font-bold" style="font-size: clamp(1.1rem, 2.5vw, 1.5rem);">30+</span>
              <span class="text-caption text-white/70 lg:text-sm">Anos de História</span>
            </div>

          </div>
        </div>
      </div>
    </section>

    <section id="beneficios" class="bg-neutral-light py-16 lg:py-24">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

        <div class="reveal text-center mb-12 lg:mb-16">
          <h2 class="text-h4 text-text" style="font-size: clamp(1.5rem, 3vw, 2.125rem);">
            Benefícios para você
          </h2>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">

          <div
            v-for="(benefit, index) in benefits"
            :key="benefit.title"
            :class="`reveal reveal-delay-${index + 1}`"
            class="benefit-card"
          >
            <div class="benefit-icon-wrap">
              <span class="material-icons text-violet-normal text-2xl">{{ benefit.icon }}</span>
            </div>
            <h3 class="text-subtitle-1 font-semibold text-text mt-4 mb-2">
              {{ benefit.title }}
            </h3>
            <p class="text-body-2 text-text-2 leading-relaxed">
              {{ benefit.description }}
            </p>
          </div>

        </div>
      </div>
    </section>

    <section id="associe-se" class="bg-violet-light py-16 lg:py-24">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

        <div class="reveal text-center mb-10 lg:mb-12">
          <h2 class="text-h4 text-text" style="font-size: clamp(1.5rem, 3vw, 2.125rem);">
            Associe-se
          </h2>
        </div>

        <div class="reveal reveal-delay-1 max-w-3xl mx-auto">

          <div class="mb-0">
            <button class="tab-active">
              NOVA ASSOCIAÇÃO
            </button>
          </div>

          <div class="bg-white rounded-b-2xl rounded-tr-2xl shadow-md p-6 lg:p-10">
            <form @submit.prevent="handleSubmit" novalidate>

              <div class="grid grid-cols-1 sm:grid-cols-2 gap-5 mb-6">

                <div class="field-group">
                  <label class="field-label">Nome Completo</label>
                  <div class="field-input-wrap">
                    <span class="material-icons field-icon">person</span>
                    <input
                      v-model="form.nomeCompleto"
                      type="text"
                      placeholder="Seu Nome"
                      class="field-input"
                    />
                  </div>
                </div>

                <div class="field-group">
                  <label class="field-label">CPF</label>
                  <div class="field-input-wrap">
                    <span class="material-icons field-icon">badge</span>
                    <input
                      :value="form.cpf"
                      @input="handleCPF"
                      type="text"
                      placeholder="000.000.000-00"
                      maxlength="14"
                      class="field-input"
                    />
                  </div>
                </div>

                <div class="field-group">
                  <label class="field-label">E-mail</label>
                  <div class="field-input-wrap">
                    <span class="material-icons field-icon">email</span>
                    <input
                      v-model="form.email"
                      type="email"
                      placeholder="nome@conta.com"
                      class="field-input"
                    />
                  </div>
                </div>

                <div class="field-group">
                  <label class="field-label">Telefone</label>
                  <div class="field-input-wrap">
                    <span class="material-icons field-icon">phone</span>
                    <input
                      v-model="form.telefone"
                      type="tel"
                      placeholder="00000000"
                      class="field-input"
                    />
                  </div>
                </div>

                <div class="field-group">
                  <label class="field-label">Cargo</label>
                  <div class="field-input-wrap">
                    <span class="material-icons field-icon">work</span>
                    <input
                      v-model="form.cargo"
                      type="text"
                      placeholder="Assistente Financeiro"
                      class="field-input"
                    />
                  </div>
                </div>

                <div class="field-group">
                  <label class="field-label">Setor</label>
                  <div class="field-input-wrap">
                    <span class="material-icons field-icon">business</span>
                    <input
                      v-model="form.setor"
                      type="text"
                      placeholder="Financeiro"
                      class="field-input"
                    />
                  </div>
                </div>

              </div>

              <div class="flex justify-center">
                <button type="submit" class="btn-submit">
                  ENVIAR SOLICITAÇÃO
                </button>
              </div>

            </form>
          </div>
        </div>
      </div>
    </section>

    <Transition name="toast">
      <div
        v-if="showSuccess"
        class="fixed bottom-6 right-6 z-50 bg-violet-normal text-white px-5 py-4 rounded-xl shadow-xl flex items-center gap-3"
      >
        <span class="material-icons text-xl">check_circle</span>
        <span class="text-sm font-medium">Solicitação enviada com sucesso!</span>
      </div>
    </Transition>

  </div>
</template>

<script setup lang="ts">
import heroBg from '~/assets/images/imagem_fundo.png'

useHead({ title: 'Ser Prati — Associação dos Servidores' })
definePageMeta({ layout: 'default' })

const scrollTo = (id: string) => {
  document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' })
}

const benefits = [
  {
    icon: 'local_offer',
    title: 'Descontos Exclusivos',
    description: 'Até 50% de desconto em parceiros selecionados.',
  },
  {
    icon: 'health_and_safety',
    title: 'Convênios Médicos',
    description: 'Planos de saúde com condições especiais.',
  },
  {
    icon: 'store',
    title: 'Loja do Associado',
    description: 'Produtos com preços diferenciados.',
  },
  {
    icon: 'badge',
    title: 'Carteirinha Digital',
    description: 'Acesso rápido aos benefícios pelo celular.',
  },
  {
    icon: 'notifications',
    title: 'Notificações',
    description: 'Fique por dentro das novidades e promoções.',
  },
  {
    icon: 'family_restroom',
    title: 'Dependentes',
    description: 'Inclua sua família nos benefícios.',
  },
]

const form = reactive({
  nomeCompleto: '',
  cpf: '',
  email: '',
  telefone: '',
  cargo: '',
  setor: '',
})

const formatCPF = (value: string): string => {
  return value
    .replace(/\D/g, '')
    .replace(/(\d{3})(\d)/, '$1.$2')
    .replace(/(\d{3})(\d)/, '$1.$2')
    .replace(/(\d{3})(\d{1,2})$/, '$1-$2')
    .slice(0, 14)
}

const handleCPF = (e: Event) => {
  form.cpf = formatCPF((e.target as HTMLInputElement).value)
}

const showSuccess = ref(false)

const handleSubmit = () => {
  console.log({ ...form })
  showSuccess.value = true
  setTimeout(() => { showSuccess.value = false }, 4000)
  Object.assign(form, {
    nomeCompleto: '',
    cpf: '',
    email: '',
    telefone: '',
    cargo: '',
    setor: '',
  })
}

onMounted(() => {
  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add('is-visible')
          observer.unobserve(entry.target)
        }
      })
    },
    { threshold: 0.1, rootMargin: '0px 0px -40px 0px' }
  )

  document.querySelectorAll('.reveal').forEach((el) => observer.observe(el))
})
</script>

<style scoped>
.btn-primary {
  background-color: #ffffff;
  color: #661d75;
  font-family: "Nunito", sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 1px;
  padding: 0.75rem 1.75rem;
  border-radius: 0.5rem;
  transition: background-color 0.2s, color 0.2s;
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary:hover {
  background-color: #f0e8f1;
}

.btn-outline {
  background-color: transparent;
  color: #ffffff;
  font-family: "Nunito", sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 1px;
  padding: 0.75rem 1.75rem;
  border-radius: 0.5rem;
  border: 2px solid rgba(255, 255, 255, 0.75);
  transition: background-color 0.2s, border-color 0.2s;
  cursor: pointer;
  white-space: nowrap;
}
.btn-outline:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: #ffffff;
}

.benefit-card {
  background-color: #ffffff;
  border-radius: 1rem;
  padding: 1.75rem;
  box-shadow: 0 2px 12px rgba(102, 29, 117, 0.07);
  transition: box-shadow 0.2s, transform 0.2s;
}
.benefit-card:hover {
  box-shadow: 0 6px 24px rgba(102, 29, 117, 0.13);
  transform: translateY(-2px);
}
.benefit-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background-color: #f0e8f1;
  border-radius: 0.75rem;
}

.tab-active {
  background-color: #661d75;
  color: #ffffff;
  font-family: "Nunito", sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 1.25px;
  padding: 0.625rem 1.5rem;
  border-radius: 0.5rem 0.5rem 0 0;
  cursor: default;
}

.field-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.field-label {
  font-family: "Nunito", sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #505050;
}
.field-input-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1.5px solid #C0C0C0;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  background-color: #fefefe;
  transition: border-color 0.2s;
}
.field-input-wrap:focus-within {
  border-color: #661d75;
}
.field-icon {
  font-size: 1.125rem;
  color: #b6b6b6;
  flex-shrink: 0;
}
.field-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: "Nunito", sans-serif;
  font-size: 0.875rem;
  color: #161616;
}
.field-input::placeholder {
  color: #b6b6b6;
}

.btn-submit {
  background-color: #661d75;
  color: #ffffff;
  font-family: "Nunito", sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 1.25px;
  padding: 0.875rem 3rem;
  border-radius: 0.5rem;
  transition: background-color 0.2s;
  cursor: pointer;
}
.btn-submit:hover {
  background-color: #5c1a69;
}

.toast-enter-active,
.toast-leave-active {
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.toast-enter-from,
.toast-leave-to {
  opacity: 0;
  transform: translateY(12px);
}
</style>