sfp_front_nuxt_iguassu_alliance/app/components/DestinationCard.vue

<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>