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

<script lang='ts' setup>
import tempItem from './comp/temp_item.vue'
import BlockImg from '~/assets/images/block_icon.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: BlockImg,
  },
  {
    title: 'Unique & Engaging Aesthetics',
    desc:
      'Products featuring unique, engaging aesthetics that enhance shelf appeal and create memorable shopping experiences.',
    img: BlockImg,
  },
  {
    title: 'Quality & Supply Chain Reliability',
    desc:
      'Premium products supported by a dependable supply network, ensuring both product integrity and reliable inventory flow.',
    img: BlockImg,
  },
]
</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-bg">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>
.custom-title-bg {
  position: relative;
  display: inline-block;
  background: url(~/assets/images/title_bg03.png);
  background-repeat: no-repeat;
  background-position: center 100%;
  background-size: 100% auto;
  padding-bottom: 8px;
}
</style>