your-gold/components/section/InvestmentZone.vue

<template>
  <UiContainer class="space-25-75">
    <h2 class="h2-bold-bounded">
      <span
        v-for="(item, index) in component.front_section_lang[0].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.front_section_lang[0].data.main_title.length - 1
          "
        />
      </span>
    </h2>

    <div class="space-25-55-75">
      <p>{{ component.front_section_lang[0].data.main_description }}</p>
      <h4 class="h4-uppercase-bold-inter">
        {{ component.front_section_lang[0].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',
        ]"
      >
        <Product v-for="product in productStore.productList" :key="product.id" :product="product" />
      </div>

      <nuxt-link :to="{ name: `id-slug___${$i18n.locale}`, params: { id: menuStore.getShopMenu()?.id, slug: menuStore.getShopMenu()?.front_menu_lang.at(0)?.link_rewrite } }">
        <UiButtonArrow type="fill" :arrow="true">
          {{ $t("eshop") }}
        </UiButtonArrow>
      </nuxt-link>
    </div>

    <!-- calculator-block -->
    <div
      class="flex flex-col xl:flex-row items-stretch gap-6 sm:gap-2 pt-5 sm:p-0 space-25-55"
    >
      <div class="flex flex-col space-y-[55px] sm:justify-between">
        <div class="space-25-55">
          <p>{{ component.front_section_lang[0].data.section_description }}</p>
          <h4 class="h4-uppercase-bold-inter">
            {{ component.front_section_lang[0].data.info_title }}
          </h4>
          <p>{{ component.front_section_lang[0].data.info_description }}</p>
        </div>
        <h4 class="h4-uppercase-bold-inter">
          {{ component.front_section_lang[0].data.cta_title }}
        </h4>
      </div>

      <!-- calculator -->
      <div
        class="w-full md:min-w-[680px] p-[25px] md:p-[50px] border border-button rounded-2xl block"
      >
        <h2 class="h2-bold-bounded text-center mb-10 sm:mb-20">
          {{ component.front_section_lang[0].data.calculator_title }}
        </h2>
        <div class="mb-14 flex flex-col gap-8 sm:gap-14">
          <div class="flex flex-col gap-4">
            <div class="flex justify-between">
              <p>{{ $t("monthly_savings") }}</p>
              <p
                class="text-accent-green-light dark:text-accent-green-dark font-bold"
              >
                {{ store.monthlySavings }}
                {{ menuStore.selectedCurrency?.sign }}
              </p>
            </div>
            <input
              v-model="store.monthlySavings"
              type="range"
              max="600"
              :min="store.minValue"
              class="w-full accent-button cursor-pointer"
              @mouseup="store.getCalculator()"
              @touchend="store.getCalculator()"
            >
          </div>
          <div class="flex flex-col gap-4">
            <div class="flex justify-between">
              <p>{{ $t("storage_period_years") }}</p>
              <p
                class="text-accent-green-light dark:text-accent-green-dark font-bold"
              >
                {{ store.storagePeriod }}
              </p>
            </div>
            <input
              v-model="store.storagePeriod"
              type="range"
              max="20"
              class="w-full accent-button cursor-pointer"
              @mouseup="store.getCalculator()"
              @touchend="store.getCalculator()"
            >
          </div>
        </div>
        <div
          class="flex flex-col items-start sm:flex-row gap-6 sm:gap-1 justify-between sm:items-center"
        >
          <div class="">
            <p>{{ $t("expected_savings_value") }}</p>
            <h2
              class="h2-bold-bounded text-accent-green-light dark:text-accent-green-dark"
            >
              {{ menuStore.selectedCurrency?.sign }} {{ store.totalInvestment }}
            </h2>
          </div>
          <UiButtonArrow :arrow="true"
                         type="fill"
                         class="mx-auto sm:m-0"
          >
            {{
              component.front_section_lang[0].data.button
            }}
          </UiButtonArrow>
        </div>
      </div>
    </div>
  </UiContainer>
</template>

<script lang="ts" setup>
import Product from './Product.vue'

defineProps<{
  component: {
    id: number
    name: string
    img: string[]
    component_name: string
    is_no_lang: boolean
    page_name: string
    front_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
      }
      id_front_section: number
      id_lang: number
    }[]
  }
}>()

const store = useStore()
const menuStore = useMenuStore()

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

async function updateItemCount() {
  const width = window.innerWidth
  if (width >= 1800) itemCount.value = 5
  else if (width >= 1600) itemCount.value = 4
  else if (width >= 1200) 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>