소스 검색

feat: :sparkles: add footer e header do checkin

Joyce Kepler 2 달 전
부모
커밋
bd61b5a69c
6개의 변경된 파일23개의 추가작업 그리고 14개의 파일을 삭제
  1. 5 0
      app/components/AppFooter.vue
  2. 3 0
      app/components/AppHeader.vue
  3. 3 0
      app/components/CheckinHeader.vue
  4. 4 2
      app/layouts/checkin.vue
  5. 8 12
      app/pages/checkin.vue
  6. BIN
      public/img/landing_background.png

+ 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>
-  <div>
-    <main>
+  <div class="flex flex-col min-h-screen">
+    <CheckinHeader />
+    <main class="flex-grow">
       <slot />
     </main>
+    <AppFooter />
   </div>
 </template>

+ 8 - 12
app/pages/checkin.vue

@@ -1,43 +1,39 @@
 <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
         v-model="name"
         type="text"
         placeholder="Nome Completo"
         :disabled="isLoading"
         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
         v-model="email"
         type="email"
         placeholder="Seu melhor e-mail"
         :disabled="isLoading"
         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
         v-model="eventCode"
         type="text"
         placeholder="Código do Evento"
         :disabled="isLoading"
         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 
         type="submit" 
         :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' }}
       </button>
     </form>
     
-    <p v-if="statusMessage" class="mt-4 font-semibold text-gray-700">{{ statusMessage }}</p>
+    <p v-if="statusMessage">{{ statusMessage }}</p>
   </div>
 </template>
 

BIN
public/img/landing_background.png