<script lang='ts' setup>
import icon_01 from '~/assets/images/products_in_stock.png'
import icon_02 from '~/assets/images/monthly_updating.png'
import icon_03 from '~/assets/images/product_portfolios.png'
import icon_04 from '~/assets/images/display_solutions.png'

const list = [
  {
    icon: icon_01,
    title: 'Products In Stock',
    total: '20,000',
  },
  {
    icon: icon_02,
    title: 'Monthly Updating',
    total: '5,000',
  },
  {
    icon: icon_03,
    title: 'Product Portfolios',
    total: '2,000',
  },
  {
    icon: icon_04,
    title: 'Display Solutions',
    total: '200',
  },
]
</script>

<template>
  <div
    class="bg-#0F0820 pt-110px pb-120px  data-section"
    data-section-color="#0F0820"
  >
    <div class="w-1200-auto text-center flex gap-150px justify-between">
      <div v-for="item, index in list" :key="index">
        <img
          :src="item.icon"
          alt=""
          class="w-80px h-80px mx-auto"
        >
        <div class="text-#fff text-36px fw-900 mt-20px mb-10px ls-2 custom-title-font">
          {{ item.total }}+
        </div>
        <div class="text-#fff text-20px fw-500 custom-title-font">
          {{ item.title }}
        </div>
      </div>
    </div>
  </div>
</template>

<style lang='less' scoped>
</style>
