ShowEasyFrontEnd/FrontEnd/components/home/OtherInfo.vue

<template>
  <section
    class="other-info tw-px-[30px] tw-mt-[50px] tw-grid tw-grid-cols-1 tw-gap-[30px] md:tw-gap-[20px] md:tw-mt-[65px] xl:tw-mt-[80px] xl:tw-grid-cols-3 xl:tw-gap-[40px] xl:tw-px-[60px] xl:tw-max-w-[1366px] xl:tw-mx-auto">
    <div v-for="n in lengths" :key="n"
      class="tw-border tw-border-solid tw-border-neutrals-200 tw-h-auto tw-overflow-hidden tw-rounded-[20px] tw-px-[30px] tw-py-[20px] tw-flex tw-justify-between md:tw-grid-cols-none md:tw-gap-0 md:tw-px-[60px] md:tw-py-[42px] xl:tw-flex-col-reverse xl:tw-items-center xl:tw-px-[85px] xl:tw-py-[55px]">
      <div class="md:tw-flex md:tw-flex-col md:tw-justify-center xl:tw-items-center xl:tw-mt-[56px]">
        <div class="tw-body-3 tw-mb-[20px] md:tw-body-1">
          {{ $t(titleList[n - 1]) }}
        </div>
        <a v-if=" n == 2" :href="redirectLinkList[n - 1]" target="_blank"
          class="tw-transition tw-block tw-body-4 tw-border tw-border-solid tw-border-black tw-text-black tw-decoration-0 tw-px-[16px] tw-py-[9px] tw-rounded-[12px] md:tw-body-3 hover:tw-bg-neutrals-900 hover:tw-text-white">{{
          $t(btnTitleList[n - 1])
          }}</a>
        <a v-else :href="redirectLinkList[n - 1]"
          class="tw-transition tw-block tw-body-4 tw-border tw-border-solid tw-border-black tw-text-black tw-decoration-0 tw-px-[16px] tw-py-[9px] tw-rounded-[12px] md:tw-body-3 hover:tw-bg-neutrals-900 hover:tw-text-white">{{
          $t(btnTitleList[n - 1])
          }}</a>
      </div>
      <img :src="require(`@/assets/svg/${iconList[n - 1]}.svg`)"
        :class="'tw-max-w-[37%] md:tw-max-w-[30%] xl:tw-max-w-[218px]'" />
    </div>
  </section>
</template>

<script>
import lazyImg from "@/components/img/img.vue";

export default {
  components: {
    lazyImg,
  },
  data() {
    return {
      lengths: 3,
      iconList: ["OtherInfo1", "OtherInfo2", "OtherInfo3"],
      titleList: ["About Us", "Blog", "FAQ"],
      btnTitleList: ["Learn More", "Explore More", "Learn More"],
      redirectLinkList: [this.$i18n.locale == 'en' ? '/aboutUs' : `/aboutUs`, this.$i18n.locale == 'en' ? "https://medium.com/showeasy-eng" : "https://medium.com/showeasy", this.$i18n.locale == 'en' ? '/FAQ' : `/FAQ`],
    };
  },
};
</script>
<style lang="scss" scoped>
.remove-upper {
  text-transform: none !important;
}

.border-r-20px {
  border-radius: 20px !important;
}

.border-r-10px {
  border-radius: 10px !important;
}
</style>