fashion-ssr-vue3/components/business/solutions/block_steps.vue

<script lang='ts' setup>
import imgStep01 from '~/assets/images/catalog_step01.png'
import imgStep02 from '~/assets/images/catalog_step02.png'
import imgStep03 from '~/assets/images/catalog_step03.png'

const steps = [
  {
    img: imgStep01,
    title: 'Catalog & Inquiry',
    describe: 'Browse our curated catalogs by category or season. Select your interested products or combinations and send us your inquiry.',
  },
  {
    img: imgStep02,
    title: 'Sampling & Comfirm',
    describe: 'Receive samples quickly to test quality and packaging. Finalize your selections and confirm order details with our support team.',
  },
  {
    img: imgStep03,
    title: 'Deliver & Launch',
    describe: 'We handle fast production and logistics. You get products delivered on time, ready to launch in-store or online with display support.',
  },
]
</script>

<template>
  <div class="py-120px bg-#fff">
    <div class="w-1200-auto">
      <h2 class="text-36px fw-800 text-#333 !mb-20px text-center custom-title-font">
        Partner With Us in 3  <span class="custom-title-bg03"> Steps </span>
      </h2>
      <div class="flex gap-112px text-center">
        <div v-for="item, index in steps" :key="index" class="custom-step">
          <img :src="item.img" class="w-200px h-200px mx-auto mb-10px " alt="">
          <div class="text-24px fw-800 text-#333 mb-10px ls-2 custom-title-font">
            Step {{ index + 1 }}
          </div>
          <div class="text-24px fw-800 text-#333 mb-10px custom-title-font">
            {{ item.title }}
          </div>
          <div class="text-16px text-#999 lh-22px">
            {{ item.describe }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang='less' scoped>
.custom-step {
    position: relative;
    &::after{
        position: absolute;
        content: '';
        right: -150px;
        top: 100px;
        width: 180px;
        height: 1px;
        border-bottom: 1px dashed #E9DEFF;
    }
    &:last-child::after {
        display: none;
    }
}
</style>