CandidatePrimaryBox.vue

<template>
  <li class="candidate-primary-box" ref="candidateBox">
    <div
      class="
        candidate-primary-box--content

        container--wide flex gap-10 pt-16 pb-8 overflow-x-hidden

        lg:flex-row lg:gap-8 lg:py-16
      "
    >
      <div
        class="
          candidate-primary-box--text-column
          candidate-primary-box--text-column__hidden

          flex flex-col justify-between w-full duration-700
        "
        ref="text"
      >
        <div class="flex flex-col">
          <h2 class="head-9xl">
            {{ name }}
          </h2>

          <h3 class="head-6xl mb-5" v-if="subheading">
            {{ subheading }}
          </h3>

          <p v-if="position" class="font-bold text-lg mt-[-0.5rem] mb-3">
            {{ position }}
          </p>

          <div v-if="!socialLinks" class="mb-5"></div>

          <ul
            v-if="socialLinks"
            class="flex gap-2 mb-6"
          >
            <li
              v-for="social of socialLinks"
            >
              <a
                :href="social.url"
                target="_blank"
              >
                <i :class="social.icon"></i>
              </a>
            </li>
          </ul>

          <div class="text-lg mb-8 lg:mb-16">
            <div v-html="description"></div>
          </div>
        </div>

        <div class="flex justify-start">
          <a
            :href="url"
            class="
              flex items-center group rounded-full uppercase font-semibold tracking-normal bg-black text-white  pl-8 pr-3 py-3

              hover:no-underline

              xl:text-lg xl:pl-8 xl:pr-3 xl:py-4
            "
          >
            <span class="group-hover:-translate-x-2 duration-200">
              <div v-if="buttonText">{{ buttonText }}</div>
              <div v-else>Zjisti více</div>
            </span>

            <span class="opacity-0 group-hover:opacity-100 duration-200 mb-[0.03rem]">
              <svg width="20" height="21" viewBox="0 0 10 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g>
                  <path
                    d="M0 16.5H4.40178L11 10.0002L4.40228 3.5H0L6.60069 10.0002L0 16.5Z"
                    fill="#FEC900"
                    class="arrow-icon"
                  />
                </g>
              </svg>
            </span>
          </a>
        </div>
      </div>

      <div
        class="
          candidate-primary-box--image-column
          candidate-primary-box--image-column__hidden

          w-full flex items-start justify-center duration-700
        "
        ref="image"
      >
        <img
          class="w-3/4 lg:w-1/2"
          :src="imageSource"
        >
      </div>
    </div>
  </li>
</template>

<script>
export default {
  name: "CandidatePrimaryBox",
  props: ["name", "subheading", "position", "description", "url", "buttonText", "imageSource", "socialLinks"],
  mounted () {
    var intersectionOptions = {
      rootMargin: '0px',
      threshold: 0.25
    }

    const textRef = this.$refs.text
    const imageRef = this.$refs.image

    function intersectionCallback(entries, observer) {
      entries.forEach(entry => {
        if (entry.intersectionRatio >= 0.25) {
          textRef.classList.remove("candidate-primary-box--text-column__hidden")
          imageRef.classList.remove("candidate-primary-box--image-column__hidden")
        }
      })
    }

    var observer = new IntersectionObserver(intersectionCallback, intersectionOptions);

    observer.observe(this.$refs.candidateBox);
  }
}
</script>