ShowEasyFrontEnd/FrontEnd/components/home/ChoiceReason.vue

<template>
  <section class="xl:tw-max-w-[1246px] xl:tw-mx-auto">
    <div class="tw-relative tw-px-[30px] xl:tw-px-[30px] tw-mt-[40px] md:tw-mt-[50px]">
        <div class="tw-absolute tw-top-0 tw-right-0 tw-left-0 tw-bottom-0 md:tw-block xl:tw-block">
          <div class="tw-grid tw-grid-cols-10 tw-gap-[20px] md:tw-gap-[30px] xl:tw-grid-cols-10" style="height:100%;">
            <div class="tw-col-span-10 md:tw-col-span-6 xl:tw-col-span-6 col-span-4-bg tw-rounded-r-[50px]"></div>
            <div class="tw-col-span-0 md:tw-col-span-4 xl:tw-col-span-4 tw-hidden">
            </div>
          </div>
        </div>
        <div class="tw-relative tw-py-20">
          <div class="tw-grid tw-grid-cols-1 md:tw-grid-cols-7 xl:tw-grid-cols-7  xl:tw-mx-auto">
            <!-- <div class="tw-col-span-2 tw-h-16"></div> -->
            <div class="tw-col-span-7 xl:tw-col-span-3 md:tw-col-span-7">
              <div class="tw-flex tw-flex-col tw-justify-center tw-pb-[30px]">
                <div class="tw-flex tw-justify-center">
                  <div class="tw-flex tw-justify-center tw-flex-col">
                  <h1 class="tw-text-2xl tw-text-left tw-font-black tw-text-primary-default tw-mt-[5px] md:tw-mt-[15px] xl:tw-mt-[25px] md:tw-text-3xl xl:tw-text-4xl">
                    {{$t("Four reasons for choosing ShowEasy")}}
                  </h1>
                  <p class="t14 tw-text-left tw-font-medium tw-text-neutrals-600 tw-py-[5px] md:tw-py-[10px] xl:tw-py-[10px] md:t16 xl:t18">{{$t("ShowEasy is an online exhibition service business platform, where you can find exhibition information and related services from around the world.")}}</p>
                </div>
                </div>
                <div class="tw-flex tw-justify-center tw-w-full">
                  <img class="tw-self-center tw-w-3/5 md:tw-w-3/5 xl:tw-w-4/6" src="~/assets/svg/reason.svg">
                </div>
              </div>
            </div>
            <div class="tw-col-span-7 xl:tw-col-span-4 md:tw-col-span-7">
              <div class="tw-grid tw-grid-cols-1 tw-gap-[30px] md:tw-gap-[30px] xl:tw-grid-cols-2 tw-px-[20px] md:tw-px-[20px] xl:tw-px-[0px]">
                <div class="tw-relative card tw-rounded-[20px] tw-overflow-hidden tw-h-full tw-shadow-md tw-bg-white tw-px-5 tw-py-1" v-for="(item,index) in reasons" :key="index">
                  <div :class="['tw-absolute tw-left-0 tw-top-0 tw-w-full tw-h-[6px] tw-rounded-t',(index === 0 || index === 3) ? 'tw-bg-[#3f3d56]' : 'tw-bg-[#e68000]']"></div>
                  <a :href="item.url" class="tw-relative tw-w-full tw-h-full tw-text-center tw-content-center">
                    <div class="tw-content-center tw-mb-3 tw-mt-5"><img class="tw-h-[42px] tw-w-[42px] md:tw-h-[64px] xl:tw-h-[64px] md:tw-w-[64px] xl:tw-w-[64px]" :src="item.image"></div>
                    <div class="t14 tw-text-center tw-mt-[5px] md:tw-mt-[15px] xl:tw-mt-[25px] md:t16 xl:t18 tw-text-black tw-font-black tw-mb-3">{{ item.name }}</div>
                    <div class="t12 tw-text-center tw-text-neutral-700 tw-mt-[5px] md:tw-mt-[15px] xl:tw-mt-[25px] tw-mb-[15px] md:t14 xl:t16 tw-text-left tw-font-medium">{{ item.content }}</div>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
    </div>
  </section>
</template>

<script>
export default {
  props: {
    reasons: {
      type: Array,
    },
    title: {
      type: String,
    },
  },
  created() {
    if (this.$props.reasons.length > 4) {
      this.$props.reasons = this.$props.reasons.slice(0, 4);
    }
  },
};
</script>
<style lang="scss" scoped>
.col-span-4-bg{
  background-image: radial-gradient(circle at 118% 118%, rgba(250, 174, 105, 0.2), rgba(250, 174, 105, 0.03) 89%);
}
</style>