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

<script lang='ts' setup>
import img_01 from '@/assets/images/solutions_power01.png'
import img_02 from '@/assets/images/solutions_power02.png'
import img_03 from '@/assets/images/solutions_power03.png'
import img_04 from '@/assets/images/solutions_power04.png'

const list = [
  {
    label: 'Data-Based Curation',
    key: 'data-curation',
    data: {
      img: img_01,
      title: 'Product selection based on real-time consumer data to boost sales',
      describe: 'We analyze evolving consumer trends and sales insights to provide curated product assortments that strategically selected for your market appeal and success.',
    },
  },
  {
    label: 'Weekly Catalog Updates',
    key: 'weekly-updates',
    data: {
      img: img_02,
      title: 'New, trending products are added weekly to keep your inventory fresh',
      describe: 'Stay ahead of the curve with weekly releases of fresh, eye-catching items. Carefully aligned with the latest market trends to keep assortments relevant and in demand.',
    },
  },
  {
    label: 'One Stop Solutions',
    key: 'one-stop-solutions',
    data: {
      img: img_03,
      title: 'From concept to packaging, we handle everything for you',
      describe: 'From initial product concept to final packaging, each selection is thoughtfully developed to align with modern consumer preferences and drive higher sell-through rates.',
    },
  },
  {
    label: 'Scalable Distribution',
    key: 'scalable-distribution',
    data: {
      img: img_04,
      title: 'Flexible logistics solutions that scale with your business growth',
      describe: 'Flexible supply options combined with dependable logistics empower seamless scaling—from small boutique operations to retail chains—ensuring consistent growth support.',
    },
  },
]
const active = ref('data-curation')
const diff_data: any = computed(() => {
  return list.find(item => item.key === active.value)?.data || {}
})
</script>

<template>
  <div class="w-1200-auto pb-110px">
    <h2 class="text-36px fw-800 text-#333 !mb-88px text-center custom-title-font">
      Power Your Retail Success with <span class="custom-title-bg04"> EJET Spark </span>
    </h2>
    <div class="flex gap-40px">
      <div class="flex flex-col gap-60px">
        <div v-for="item in list" :key="item.key" :class="active === item.key && 'text-#9B6CFF'" class="cursor-pointer text-#999 hover:text-#9B6CFF" @click="active = item.key">
          {{ item.label }}
        </div>
      </div>
      <img
        :src="diff_data.img"
        alt=""
        class="w-470px h-280px b-rd-6px"
        srcset=""
      >
      <div class="flex-1">
        <div class="flex flex-col justify-between">
          <div>
            <h3 class="text-24px text-#333 fw-800 lh-32px custom-title-font">
              {{ diff_data.title }}
            </h3>
            <div class="text-#999 lh-22px mt-20px">
              {{ diff_data.describe }}
            </div>
          </div>
          <div
            class="w-154px h-40px lh-40px text-center mt-60px b-rd-6px text-14px text-#9B6CFF fw-bold b-solid b-1px b-#9B6CFF cursor-pointer hover:bg-#9B6CFF hover:text-#fff"
          >
            <NuxtLink to="/categories">
              View Catalogs
            </NuxtLink>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang='less' scoped>

</style>