소스 검색

feat: :sparkles: adicionar card da secao destinations

joykepler 3 일 전
부모
커밋
45622fd565
1개의 변경된 파일29개의 추가작업 그리고 0개의 파일을 삭제
  1. 29 0
      app/components/DestinationCard.vue

+ 29 - 0
app/components/DestinationCard.vue

@@ -0,0 +1,29 @@
+<template>
+  <div
+    class="rounded-2xl bg-cover bg-position-[center_80%] border border-[#E3FA6D] relative w-full"
+    :class="bgPositionClass"
+    :style="{ backgroundImage: `url('${image}')` }"
+  >
+    <div class="bg-[url('/img/destinations_card_bg.svg')] bg-cover bg-top bg-no-repeat absolute bottom-0 w-full h-1/3 md:h-1/4 rounded-t-xl rounded-b-2xl bg-[#080E00] flex flex-col justify-center items-center">
+      <span v-if="label" class="text-sm lg:text-xl text-gradient font-semibold leading-tight">
+        {{ label }}
+      </span>
+      <span class="text-xl md:text-2xl lg:text-3xl text-gradient font-semibold leading-tight">
+        {{ name }}
+      </span>
+      <span v-if="date" class="text-sm lg:text-xl text-gradient font-semibold">
+        {{ date }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  image: string
+  name: string
+  label?: string
+  date?: string
+  bgPositionClass?: string
+}>()
+</script>