Browse Source

feat: :sparkles: add footer e header do checkin

Joyce Kepler 2 months ago
parent
commit
bd61b5a69c

+ 5 - 0
app/components/AppFooter.vue

@@ -0,0 +1,5 @@
+<template>
+  <footer class="border-t border-[#C5C5C5] py-12 text-center">
+    <p class="font-medium text-sm text-black">© 2025 Viver de Café. Todos os direitos reservados.</p>
+  </footer>
+</template>

+ 3 - 0
app/components/AppHeader.vue

@@ -0,0 +1,3 @@
+<template>
+  <div></div>
+</template>

+ 3 - 0
app/components/CheckinHeader.vue

@@ -0,0 +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%]"/>
+</template>

+ 4 - 2
app/layouts/checkin.vue

@@ -1,7 +1,9 @@
 <template>
 <template>
-  <div>
-    <main>
+  <div class="flex flex-col min-h-screen">
+    <CheckinHeader />
+    <main class="flex-grow">
       <slot />
       <slot />
     </main>
     </main>
+    <AppFooter />
   </div>
   </div>
 </template>
 </template>

+ 8 - 12
app/pages/checkin.vue

@@ -1,43 +1,39 @@
 <template>
 <template>
-  <div class="bg-white p-8 rounded-lg shadow-md text-center w-full max-w-md mx-4">
-    <h2 class="text-2xl font-bold text-gray-800">Check-in do Evento</h2>
-    <p class="text-gray-600 mt-2">Preencha seus dados para confirmar a presença.</p>
+  <div>
+    <h2>Check-in do Evento</h2>
+    <p>Preencha seus dados para confirmar a presença.</p>
 
 
-    <form @submit.prevent="handleCheckin" class="flex flex-col gap-4 mt-6">
+    <form @submit.prevent="handleCheckin">
       <input
       <input
         v-model="name"
         v-model="name"
         type="text"
         type="text"
         placeholder="Nome Completo"
         placeholder="Nome Completo"
         :disabled="isLoading"
         :disabled="isLoading"
         required
         required
-        class="px-4 py-3 border border-gray-300 rounded-md w-full focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:bg-gray-100"
-      />
+      >
       <input
       <input
         v-model="email"
         v-model="email"
         type="email"
         type="email"
         placeholder="Seu melhor e-mail"
         placeholder="Seu melhor e-mail"
         :disabled="isLoading"
         :disabled="isLoading"
         required
         required
-        class="px-4 py-3 border border-gray-300 rounded-md w-full focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:bg-gray-100"
-      />
+      >
       <input
       <input
         v-model="eventCode"
         v-model="eventCode"
         type="text"
         type="text"
         placeholder="Código do Evento"
         placeholder="Código do Evento"
         :disabled="isLoading"
         :disabled="isLoading"
         required
         required
-        class="px-4 py-3 border border-gray-300 rounded-md w-full focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:bg-gray-100"
-      />
+      >
       <button 
       <button 
         type="submit" 
         type="submit" 
         :disabled="isLoading" 
         :disabled="isLoading" 
-        class="px-4 py-3 bg-blue-600 text-white font-semibold rounded-md cursor-pointer hover:bg-blue-700 transition-colors duration-200 disabled:bg-gray-400 disabled:cursor-not-allowed"
       >
       >
         {{ isLoading ? 'Confirmando...' : 'Confirmar Presença' }}
         {{ isLoading ? 'Confirmando...' : 'Confirmar Presença' }}
       </button>
       </button>
     </form>
     </form>
     
     
-    <p v-if="statusMessage" class="mt-4 font-semibold text-gray-700">{{ statusMessage }}</p>
+    <p v-if="statusMessage">{{ statusMessage }}</p>
   </div>
   </div>
 </template>
 </template>
 
 

BIN
public/img/landing_background.png