feat: :sparkles: add mensagem de sucesso

app/pages/checkin.vue

@@ -1,54 +1,61 @@
 <template>
-  <div class="flex flex-col justify-center items-center mt-10">
+  <div class="flex flex-col justify-center items-center mt-10 text-center">
     <div class="bg-primary rounded-full w-31 h-31 flex justify-center items-center">
       <NuxtImg src="/img/coffee.svg" />
     </div>
-    <h1 class="text-2xl mt-3">Registre sua participação</h1>
-    <p class="text-sm text-[#505050] mt-4">Digite o Código do Evento/live que recebeu para registrar sua presença</p>
-    <form class="flex flex-col justify-center items-center mt-5 gap-2 w-[361px]" @submit.prevent="handleCheckin">
-      <div class="flex flex-col justify-center items-center w-full">
-        <label for="name" class="text-text-2 mb-1 font-medium text-sm">Nome Cadastrado na plataforma <span class="text-error">*</span></label>
-        <input
-          v-model="name"
-          type="text"
-          placeholder="João da Silva"
-          :disabled="isLoading"
-          required
-          class="border-[1px] border-border rounded-lg text-center h-10 w-full text-sm"
-        >
-      </div>
-      <div class="flex flex-col justify-center items-center w-full">
-        <label for="email" class="text-text-2 mb-1 font-medium text-sm">Email <span class="text-error">*</span></label>
-        <input
-          v-model="email"
-          type="email"
-          placeholder="email@email.com"
-          :disabled="isLoading"
-          required
-          class="border-[1px] border-border rounded-lg text-center h-10 w-full text-sm"
-        >
-      </div>
-      <div class="flex flex-col justify-center items-center w-full">
-        <label for="eventCode" class="text-text-2 mb-1 font-medium text-sm">Código do Evento/live <span class="text-error">*</span></label>
-        <input
-          v-model="eventCode"
-          type="text"
-          placeholder="Ex. Cafe123"
+
+    <template v-if="!checkinSuccess">
+      <h1 class="text-2xl mt-3">Registre sua participação</h1>
+      <p class="text-sm text-[#505050] mt-4 px-4">Digite o Código do Evento/live que recebeu para registrar sua presença</p>
+      <form class="flex flex-col justify-center items-center mt-5 gap-2 w-full max-w-[361px]" @submit.prevent="handleCheckin">
+        <div class="flex flex-col justify-center items-center w-full">
+          <label for="name" class="text-text-2 mb-1 font-medium text-sm">Nome Cadastrado na plataforma <span class="text-error">*</span></label>
+          <input
+            v-model="name"
+            type="text"
+            placeholder="João da Silva"
+            :disabled="isLoading"
+            required
+            class="border-[1px] border-border rounded-lg text-center h-10 w-full text-sm"
+          >
+        </div>
+        <div class="flex flex-col justify-center items-center w-full">
+          <label for="email" class="text-text-2 mb-1 font-medium text-sm">Email <span class="text-error">*</span></label>
+          <input
+            v-model="email"
+            type="email"
+            placeholder="email@email.com"
+            :disabled="isLoading"
+            required
+            class="border-[1px] border-border rounded-lg text-center h-10 w-full text-sm"
+          >
+        </div>
+        <div class="flex flex-col justify-center items-center w-full">
+          <label for="eventCode" class="text-text-2 mb-1 font-medium text-sm">Código do Evento/live <span class="text-error">*</span></label>
+          <input
+            v-model="eventCode"
+            type="text"
+            placeholder="Ex. Cafe123"
+            :disabled="isLoading"
+            required
+            class="border-[1px] border-border rounded-lg text-center h-10 w-full text-sm"
+          >
+        </div>
+        <button
+          type="submit"
           :disabled="isLoading"
-          required
-          class="border-[1px] border-border rounded-lg text-center h-10 w-full text-sm"
+          class="bg-primary text-white rounded-lg uppercase w-full h-[50px] mt-5 cursor-pointer hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed"
         >
-      </div>
-      <button 
-        type="submit" 
-        :disabled="isLoading" 
-        class="bg-primary text-white rounded-lg uppercase w-full h-[50px] mt-5"
-      >
-        {{ isLoading ? 'Registrando...' : 'Registrar Presença' }}
-      </button>
-    </form>
-    
-    <p v-if="statusMessage">{{ statusMessage }}</p>
+          {{ isLoading ? 'Registrando...' : 'Registrar Presença' }}
+        </button>
+      </form>
+
+      <p v-if="statusMessage" class="text-red-500 mt-4">{{ statusMessage }}</p>
+    </template>
+
+    <div v-else class="mt-24 px-4">
+      <h1 class="text-2xl max-w-[457px] text-text-2">Sua presença foi registrada em nosso evento, obrigada por participar!</h1>
+    </div>
   </div>
 </template>
 
@@ -64,6 +71,7 @@ const email = ref('');
 const eventCode = ref('');
 const statusMessage = ref('');
 const isLoading = ref(false);
+const checkinSuccess = ref(false);
 
 async function handleCheckin() {
   if (!name.value || !email.value || !eventCode.value) {
@@ -75,23 +83,18 @@ async function handleCheckin() {
   statusMessage.value = '';
 
   try {
-    const { data, error } = await useFetch('/api/perform-checkin', {
-      method: 'POST',
-      body: { 
-        name: name.value,
-        email: email.value, 
-        eventCode: eventCode.value 
-      },
-    });
+    await new Promise(resolve => setTimeout(resolve, 1000));
 
-    if (error.value) {
-      throw error.value;
+    if (eventCode.value.toLowerCase() === 'fail') {
+      throw new Error('Simulação de erro na API.');
     }
 
-    statusMessage.value = `Check-in realizado com sucesso, ${data.value.name}!`;
+    checkinSuccess.value = true;
+
     name.value = '';
     email.value = '';
     eventCode.value = '';
+
   } catch (err) {
     statusMessage.value = 'Erro ao realizar o check-in. Verifique os dados e tente novamente.';
     console.error(err);