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 lg:bg-left"
      :style="{ backgroundImage: `url(${heroBackground})` }"
    >
      <div class="absolute inset-0 bg-violet-normal/45"/>

      <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 pt-8 pb-20 lg:py-18">
          <div class="flex flex-col lg:flex-row gap-4 lg:gap-12">

            <div class="max-w-2xl justifyBetween">
              <h1
                class="reveal text-h2 text-white font-black mb-10"
                style="font-size: clamp(2rem, 5vw, 3.75rem); font-weight: 900;"
              >
                {{ settings.hero_title }}
              </h1>

              <p class="reveal reveal-delay-1 text-white/90 mb-6 leading-relaxed" style="font-size: clamp(1rem, 1.5vw, 1.125rem); font-weight: 600;">
                {{ settings.hero_subtitle }}
              </p>

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

            <div class="reveal reveal-delay-3 flex flex-row lg:flex-col gap-6 lg:gap-8 shrink-0">

              <div class="flex flex-col items-start gap-1">
                <span class="material-icons text-white/90 text-3xl lg:text-4xl">group</span>
                <span class="text-white font-bold" style="font-size: clamp(1.25rem, 2.5vw, 1.75rem);">{{ settings.stat1_value }}</span>
                <span class="text-white/80 text-sm">{{ settings.stat1_label }}</span>
              </div>

              <div class="flex flex-col items-start gap-1">
                <span class="material-icons text-white/90 text-3xl lg:text-4xl">handshake</span>
                <span class="text-white font-bold" style="font-size: clamp(1.25rem, 2.5vw, 1.75rem);">{{ settings.stat2_value }}</span>
                <span class="text-white/80 text-sm">{{ settings.stat2_label }}</span>
              </div>

              <div class="flex flex-col items-start gap-1">
                <span class="material-icons text-white/90 text-3xl lg:text-4xl">favorite_border</span>
                <span class="text-white font-bold" style="font-size: clamp(1.25rem, 2.5vw, 1.75rem);">{{ settings.stat3_value }}</span>
                <span class="text-white/80 text-sm">{{ settings.stat3_label }}</span>
              </div>

            </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.id"
            :class="`reveal reveal-delay-${index + 1}`"
            class="benefit-card"
          >
            <div class="benefit-icon-wrap">
              <i :class="`mdi ${benefit.icon} text-violet-normal`" style="font-size: 1.5rem;" />
            </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 novalidate @submit.prevent="handleSubmit" >

              <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', { 'field-error': errors.cpf }]">
                    <span class="material-icons field-icon">badge</span>
                    <input
                      :value="form.cpf"
                      type="text"
                      placeholder="000.000.000-00"
                      maxlength="14"
                      class="field-input"
                      @input="handleCPF"
                      @blur="onCPFBlur"
                    >
                  </div>
                </div>

                <div class="field-group">
                  <label class="field-label">Crachá</label>
                  <div class="field-input-wrap">
                    <span class="material-icons field-icon">credit_card</span>
                    <input
                      v-model="form.cracha"
                      type="text"
                      placeholder="Número do seu crachá"
                      class="field-input"
                    >
                  </div>
                </div>

                <div class="field-group">
                  <label class="field-label">E-mail</label>
                  <div :class="['field-input-wrap', { 'field-error': errors.email }]">
                    <span class="material-icons field-icon">email</span>
                    <input
                      v-model="form.email"
                      type="email"
                      placeholder="nome@conta.com"
                      class="field-input"
                      @blur="onEmailBlur"
                    >
                  </div>
                </div>

                <div class="field-group">
                  <label class="field-label">Telefone</label>
                  <div :class="['field-input-wrap', { 'field-error': errors.telefone }]">
                    <span class="material-icons field-icon">phone</span>
                    <input
                      :value="form.telefone"
                      type="tel"
                      placeholder="(00) 00000-0000"
                      maxlength="15"
                      class="field-input"
                      @input="handlePhone"
                      @blur="onPhoneBlur"
                    >
                  </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>
                    <select v-model="form.cargoId" class="field-input">
                      <option :value="null" disabled>Selecione seu cargo</option>
                      <option v-for="position in positions" :key="position.id" :value="position.id">
                        {{ position.name }}
                      </option>
                    </select>
                  </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>
                    <select v-model="form.setorId" class="field-input">
                      <option :value="null" disabled>Selecione seu setor</option>
                      <option v-for="sector in sectors" :key="sector.id" :value="sector.id">
                        {{ sector.name }}
                      </option>
                    </select>
                  </div>
                </div>

              </div>

              <div class="flex justify-center">
                <button type="submit" class="btn-submit" :disabled="isLoading" :style="isLoading ? 'opacity: 0.7; cursor: not-allowed;' : ''">
                  {{ isLoading ? 'ENVIANDO...' : '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>

    <Transition name="toast">
      <div
        v-if="showError"
        class="fixed bottom-6 right-6 z-50 bg-red-600 text-white px-5 py-4 rounded-xl shadow-xl flex items-center gap-3"
      >
        <span class="material-icons text-xl">error_outline</span>
        <span class="text-sm font-medium">{{ errorMessage }}</span>
      </div>
    </Transition>

  </div>
</template>

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

useHead({ title: 'Serprati' })
definePageMeta({ layout: 'default' })

const { settings, benefits } = useCompanyData()

const heroBackground = computed(() => settings.value.hero_background_url ?? heroBgFallback)

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

const form = reactive({
  nomeCompleto: '',
  cpf: '',
  cracha: '',
  email: '',
  telefone: '',
  cargoId: null as number | null,
  setorId: null as number | null,
})

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 validateCPF = (cpf: string): boolean => {
  const d = cpf.replace(/\D/g, '')
  if (d.length !== 11 || /^(\d)\1{10}$/.test(d)) return false
  const calc = (n: number): number => {
    let sum = 0
    for (let i = 0; i < n; i++) sum += parseInt(d.charAt(i)) * (n + 1 - i)
    const rem = sum % 11
    return rem < 2 ? 0 : 11 - rem
  }
  return calc(9) === parseInt(d.charAt(9)) && calc(10) === parseInt(d.charAt(10))
}

const validateEmail = (email: string): boolean =>
  /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)

const formatPhone = (value: string): string =>
  value
    .replace(/\D/g, '')
    .replace(/^(\d{2})(\d)/, '($1) $2')
    .replace(/(\d{5})(\d{1,4})$/, '$1-$2')
    .slice(0, 15)

const errors = reactive({ cpf: '', email: '', telefone: '' })

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

const handlePhone = (e: Event) => {
  form.telefone = formatPhone((e.target as HTMLInputElement).value)
  if (errors.telefone) errors.telefone = ''
}

const onCPFBlur = () => {
  errors.cpf = form.cpf && !validateCPF(form.cpf) ? 'CPF inválido' : ''
}

const onEmailBlur = () => {
  errors.email = form.email && !validateEmail(form.email) ? 'E-mail inválido' : ''
}

const onPhoneBlur = () => {
  errors.telefone = form.telefone && form.telefone.replace(/\D/g, '').length < 10 ? 'Telefone inválido' : ''
}

watch(() => form.email, () => { if (errors.email) errors.email = '' })

const { registerLandingUser, positions, sectors } = useRegisterApi()

const isLoading = ref(false)
const showSuccess = ref(false)
const showError = ref(false)
const errorMessage = ref('')

const resetForm = () => {
  Object.assign(form, {
    nomeCompleto: '',
    cpf: '',
    cracha: '',
    email: '',
    telefone: '',
    cargoId: null,
    setorId: null,
  })
  Object.assign(errors, { cpf: '', email: '', telefone: '' })
}

const handleSubmit = async () => {
  errors.cpf = form.cpf && !validateCPF(form.cpf) ? 'CPF inválido' : ''
  errors.email = form.email && !validateEmail(form.email) ? 'E-mail inválido' : ''
  errors.telefone = form.telefone && form.telefone.replace(/\D/g, '').length < 10 ? 'Telefone inválido' : ''
  if (errors.cpf || errors.email || errors.telefone) return

  isLoading.value = true
  showError.value = false

  try {
    await registerLandingUser({
      name:         form.nomeCompleto,
      cpf:          form.cpf,
      registration: form.cracha,
      email:        form.email,
      phone:        form.telefone,
      position_id:  form.cargoId,
      sector_id:    form.setorId,
    })

    showSuccess.value = true
    setTimeout(() => { showSuccess.value = false }, 4000)
    resetForm()
  } catch (err: unknown) {
    const error = err as { data?: { errors?: Record<string, string[]>; message?: string } }
    const firstError = error?.data?.errors
      ? Object.values(error.data.errors)[0]?.[0]
      : error?.data?.message

    errorMessage.value = firstError || 'Erro ao enviar solicitação. Tente novamente.'
    showError.value = true
    setTimeout(() => { showError.value = false }, 5000)
  } finally {
    isLoading.value = false
  }
}

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>
@media (max-width: 1023px) {
  #quem-somos {
    background-position: 8% 65%;
  }
}

.btn-primary {
  background: linear-gradient(90deg, #4d1658 0%, #8b30a5 100%);
  color: #ffffff;
  font-family: "Nunito", sans-serif;
  font-weight: 800;
  font-size: 0.875rem;
  letter-spacing: 1px;
  padding: 0.75rem 1.75rem;
  border-radius: 0.5rem;
  transition: opacity 0.2s;
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary:hover {
  opacity: 0.88;
}

.btn-outline {
  background-color: rgba(102, 29, 117, 0.18);
  color: #ffffff;
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 1px;
  padding: 0.75rem 1.75rem;
  border-radius: 0.5rem;
  border: 2px solid #a855c8;
  transition: background-color 0.2s, border-color 0.2s;
  cursor: pointer;
  white-space: nowrap;
}
.btn-outline:hover {
  background-color: rgba(102, 29, 117, 0.32);
  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-input-wrap.field-error {
  border-color: #dc2626;
}
.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);
}

.justifyBetween {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
</style>