feat: :sparkles: add tela de checkin

app/assets/css/main.css

@@ -4,4 +4,14 @@
 
 html {
   font-family: "Poppins", sans-serif;
+}
+
+@theme {
+  --color-primary: #7E8C54;
+
+  --color-text-2: #505050;
+  
+  --color-border: #C0C0C0;
+
+  --color-error: #D4183D;
 }

app/components/CheckinHeader.vue

@@ -1,3 +1,3 @@
 <template>
-  <div class="w-full h-[123px] bg-[url(/img/landing_background.png)] bg-no-repeat bg-cover rounded-br-[300px] bg-[center_22%]"/>
+  <div class="w-full h-[123px] bg-no-repeat bg-cover rounded-br-[300px] bg-[center_24%] bg-[linear-gradient(rgba(0,0,0,0.35)),url('/img/landing_background.png')]"/>
 </template>

app/pages/checkin.vue

@@ -1,35 +1,50 @@
 <template>
-  <div>
-    <h2>Check-in do Evento</h2>
-    <p>Preencha seus dados para confirmar a presença.</p>
-
-    <form @submit.prevent="handleCheckin">
-      <input
-        v-model="name"
-        type="text"
-        placeholder="Nome Completo"
-        :disabled="isLoading"
-        required
-      >
-      <input
-        v-model="email"
-        type="email"
-        placeholder="Seu melhor e-mail"
-        :disabled="isLoading"
-        required
-      >
-      <input
-        v-model="eventCode"
-        type="text"
-        placeholder="Código do Evento"
-        :disabled="isLoading"
-        required
-      >
+  <div class="flex flex-col justify-center items-center mt-10">
+    <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"
+          :disabled="isLoading"
+          required
+          class="border-[1px] border-border rounded-lg text-center h-10 w-full text-sm"
+        >
+      </div>
       <button 
         type="submit" 
         :disabled="isLoading" 
+        class="bg-primary text-white rounded-lg uppercase w-full h-[50px] mt-5"
       >
-        {{ isLoading ? 'Confirmando...' : 'Confirmar Presença' }}
+        {{ isLoading ? 'Registrando...' : 'Registrar Presença' }}
       </button>
     </form>
     

public/img/coffee.svg

@@ -0,0 +1,3 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M48.0002 21.3337H50.6668C53.4958 21.3337 56.2089 22.4575 58.2093 24.4579C60.2097 26.4582 61.3335 29.1713 61.3335 32.0003C61.3335 34.8293 60.2097 37.5424 58.2093 39.5428C56.2089 41.5432 53.4958 42.667 50.6668 42.667H48.0002M48.0002 21.3337H5.3335V45.3337C5.3335 48.1626 6.4573 50.8757 8.45769 52.8761C10.4581 54.8765 13.1712 56.0003 16.0002 56.0003H37.3335C40.1625 56.0003 42.8756 54.8765 44.876 52.8761C46.8764 50.8757 48.0002 48.1626 48.0002 45.3337V21.3337ZM16.0002 2.66699V10.667M26.6668 2.66699V10.667M37.3335 2.66699V10.667" stroke="#FEFCFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>