fashion-ssr-vue3/components/business/categories/block.vue

<script lang='ts' setup>
import tempItem from './comp/temp_item.vue'
import trendy from '~/assets/images/trendy.png'
import quality from '~/assets/images/quality.png'
import unique from '~/assets/images/unique.png'

const list = [
  {
    title: 'Trendy & Market-Ready Designs',
    desc:
      'Selected products that taps into current consumer trends, ensuring businesses always offer fresh, in-demand products.',
    img: trendy,
  },
  {
    title: 'Unique & Engaging Aesthetics',
    desc:
      'Products featuring unique, engaging aesthetics that enhance shelf appeal and create memorable shopping experiences.',
    img: unique,
  },
  {
    title: 'Quality & Supply Chain Reliability',
    desc:
      'Premium products supported by a dependable supply network, ensuring both product integrity and reliable inventory flow.',
    img: quality,
  },
]
</script>

<template>
  <div class="bg-#F9FAFB py-120px">
    <div class="w-1200-auto text-center">
      <h2 class="text-36px fw-800 text-#333 !mb-80px custom-title-font">
        EJET Spark Selects Products <span class="custom-title-bg03">With</span>
      </h2>
      <div class="flex gap-40px">
        <div v-for="(item, index) in list" :key="index">
          <temp-item :item />
        </div>
      </div>
    </div>
  </div>
</template>

<style lang='less' scoped>

</style>