✨ feat(landing): integrar formulário de associação com a API Laravel

Fase: dev | Origin: ajuste-cliente

app/composables/useRegisterApi.ts

@@ -0,0 +1,21 @@
+interface RegisterPayload {
+  name: string
+  cpf: string
+  email: string
+  phone: string
+  position_label: string
+  sector_label: string
+}
+
+export const useRegisterApi = () => {
+  const { apiUrl } = useRuntimeConfig().public
+
+  const registerLandingUser = async (data: RegisterPayload): Promise<void> => {
+    await $fetch(`${apiUrl}/api/landing-page-register-user`, {
+      method: 'POST',
+      body: data,
+    })
+  }
+
+  return { registerLandingUser }
+}

app/pages/index.vue

@@ -204,8 +204,8 @@
               </div>
 
               <div class="flex justify-center">
-                <button type="submit" class="btn-submit">
-                  ENVIAR SOLICITAÇÃO
+                <button type="submit" class="btn-submit" :disabled="isLoading" :style="isLoading ? 'opacity: 0.7; cursor: not-allowed;' : ''">
+                  {{ isLoading ? 'ENVIANDO...' : 'ENVIAR SOLICITAÇÃO' }}
                 </button>
               </div>
 
@@ -225,6 +225,16 @@
       </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>
 
@@ -293,20 +303,46 @@ const handleCPF = (e: Event) => {
   form.cpf = formatCPF((e.target as HTMLInputElement).value)
 }
 
+const { registerLandingUser } = useRegisterApi()
+
+const isLoading = ref(false)
 const showSuccess = ref(false)
+const showError = ref(false)
+const errorMessage = ref('')
+
+const resetForm = () => {
+  Object.assign(form, { nomeCompleto: '', cpf: '', email: '', telefone: '', cargo: '', setor: '' })
+}
 
-const handleSubmit = () => {
-  console.log({ ...form })
-  showSuccess.value = true
-  setTimeout(() => { showSuccess.value = false }, 4000)
-  Object.assign(form, {
-    nomeCompleto: '',
-    cpf: '',
-    email: '',
-    telefone: '',
-    cargo: '',
-    setor: '',
-  })
+const handleSubmit = async () => {
+  isLoading.value = true
+  showError.value = false
+
+  try {
+    await registerLandingUser({
+      name:           form.nomeCompleto,
+      cpf:            form.cpf,
+      email:          form.email,
+      phone:          form.telefone,
+      position_label: form.cargo,
+      sector_label:   form.setor,
+    })
+
+    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(() => {

nuxt.config.ts

@@ -39,6 +39,7 @@ export default defineNuxtConfig({
   },
   runtimeConfig: {
     public: {
+      apiUrl: process.env.NUXT_PUBLIC_API_URL || 'http://localhost:3000',
       studentPlatform: process.env.STUDENT_PLATFORM_URL || 'http://localhost:9000'
     }
   }