your-gold/components/section/investment-page/InvestmentZone.vue

<template>
  <UiContainer class="space-y-[25px] sm:space-y-[75px]">
    <h2 class="h2-bold-bounded">
      <span
        v-for="(item, index) in component.section_lang_data.main_title"
        :key="index"
        :class="[
          item.highlight
            ? 'text-accent-green-light dark:text-accent-green-dark'
            : '',
          'inline',
        ]"
      >
        {{ item.text }}
        <span
          v-if="index !== component.section_lang_data.main_title.length - 1"
        >
        </span>
      </span>
    </h2>

    <div class="space-25-55-75">
      <p>{{ component.section_lang_data.main_description }}</p>
      <h4 class="h4-uppercase-bold-inter">
        {{ component.section_lang_data.section_title }}
      </h4>
    </div>

    <!-- products -->
    <div class="space-25-55-75 flex flex-col items-center">
      <div
        :class="[
          'sm:mx-[50px] md:mx-0 xl:mx-[92px] flex items-stretch',
          itemCount === 1 ? 'justify-center' : 'justify-between gap-2',
        ]"
      >
        <div
          v-for="(item, index) in productStore.productList"
          :key="index"
          class="w-[200px] sm:w-[260px] md:w-[290px] sm:py-5 sm:px-[15px] py-[15px] px-[10px] bg-button-white rounded-2xl flex flex-col items-center gap-5 sm:gap-7"
        >
          <img
            :src="`https://www.yourgold.cz/api/public/file/${item.cover_picture_uuid}.webp`"
            alt="pics"
            class="max-h-[150px] sm:max-h-[180px] md:max-h-[205px]"
          />
          <div class="flex flex-col justify-between h-full">
            <div class="flex flex-col gap-[10px] sm:gap-[15px] w-full">
              <h3
                class="text-[13px] sm:text-base md:text-lg text-xl font-bold leading-[150%] text-bg-dark"
              >
                {{ item.name }}
              </h3>
              <p class="text-[10px] sm:text-[12px] text-sm text-bg-dark">
                {{ item.tax_name }}
              </p>
            </div>
            <div class="flex items-center justify-between">
              <p class="text-accent-green-light text-bold-24">
                {{ item.formatted_price }}
              </p>
              <button
                class="w-9 h-9 md:w-12 md:h-12 rounded-xl bg-button cursor-pointer hover:bg-button-hover transition-all flex items-center justify-center"
              >
                <i
                  class="uil uil-shopping-cart text-[25px] md:text-[24px] text-bg-light"
                ></i>
              </button>
            </div>
          </div>
        </div>
      </div>

      <UiButtonArrow class="mx-auto" type="fill">E-shop</UiButtonArrow>
    </div>
    <div class="flex items-stretch gap-2">
      <div class="flex flex-col justify-between">
        <div class="space-y-[55px]">
          <p>{{ component.section_lang_data.section_description }}</p>
          <h4 class="h4-uppercase-bold-inter">
            {{ component.section_lang_data.info_title }}
          </h4>
          <p>{{ component.section_lang_data.info_description }}</p>
        </div>
        <h4 class="h4-uppercase-bold-inter">
          {{ component.section_lang_data.cta_title }}
        </h4>
      </div>
      <div
        class="min-w-[680px] p-[50px] border border-button rounded-2xl block"
      >
        <h2 class="h2-bold-bounded mb-[80px]">
          {{ component.section_lang_data.calculator_title }}
        </h2>
        <div class="mb-[44px]">
          <div class="flex justify-between">
            <p>{{ $t("monthly_savings") }}</p>
            <p class="text-accent-green-light dark:accent-accent-green-dark font-bold">133,00 €</p>
          </div>
          <div class="flex justify-between">
            <p>{{ $t("storage_period") }}</p>
            <p class="text-accent-green-light dark:accent-accent-green-dark font-bold">133,00 €</p>
          </div>
        </div>
        <div class="flex justify-between items-center">
          <div class="">
            <p>{{ $t("expected_value") }}</p>
            <h2 class="h2-bold-bounded text-accent-green-light dark:text-accent-green-dark">
              39 444,87 €
            </h2>
          </div>
          <UiButtonArrow type="fill">{{
            component.section_lang_data.button
          }}</UiButtonArrow>
        </div>
      </div>
    </div>
  </UiContainer>
</template>

<script lang="ts" setup>
const props = defineProps<{ component: Component }>();
type Component = {
  image_collection: string;
  section_id: string;
  section_img: string;
  section_lang_data: {
    main_title: [
      {
        text: string;
        highlight: boolean;
      }
    ];
    main_description: string;
    section_title: string;
    section_description: string;
    info_title: string;
    info_description: string;
    cta_title: string;
    calculator_title: string;
    button: string;
  };
};

const itemCount = ref(4);
const productStore = useProductStore();

async function updateItemCount() {
  const width = window.innerWidth;
  if (width >= 1800) itemCount.value = 5;
  else if (width >= 1200) itemCount.value = 4;
  else if (width >= 768) itemCount.value = 3;
  else if (width >= 640) itemCount.value = 2;
  else itemCount.value = 1;
}

watch(itemCount, async () => {
  await productStore.getList(itemCount.value);
});

onMounted(async () => {
  await updateItemCount();
  window.addEventListener("resize", updateItemCount);
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", updateItemCount);
});
</script>