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

<script lang='ts' setup>
import solutionIcon01 from '~/assets/images/solutions_icon01.png'
import solutionIcon02 from '~/assets/images/solutions_icon02.png'
import solutionIcon03 from '~/assets/images/solutions_icon03.png'
import solutionIcon04 from '~/assets/images/solutions_icon04.png'

const list = ref([
  {
    key: 'ecommerce',
    title: 'Ecommerce',
    description: 'Scale Smarter with Viral-Ready Products for Online Growth',
    list: [
      {
        title: 'Real-Time Trend Curation',
        img: solutionIcon01,
        subTitle:
      'Our team constantly monitors market shifts, viral demand, and emerging bestsellers to deliver high-potential products to you.',
      },
      {
        img: solutionIcon02,
        title: 'Real-Time Trend Curation',
        subTitle:
      'Our team constantly monitors market shifts, viral demand, and emerging bestsellers to deliver high-potential products to you.',
      },
      {
        img: solutionIcon03,
        title: 'Real-Time Trend Curation',
        subTitle:
      'Our team constantly monitors market shifts, viral demand, and emerging bestsellers to deliver high-potential products to you.',
      },
      {
        img: solutionIcon04,
        title: 'Real-Time Trend Curation',
        subTitle:
      'Our team constantly monitors market shifts, viral demand, and emerging bestsellers to deliver high-potential products to you.',
      },
    ],
  },
  {
    key: 'brands',
    title: 'Brands & Distributors',
    description: 'Power Your Product Line with Trend Intelligence & Agile Supply',
    list: [
      {
        title: 'OEM/ODM Trend Support',
        img: solutionIcon01,
        subTitle:
      'We provide trend-based design, packaging, and product development to help brands create unique, market-driven products.',
      },
      {
        img: solutionIcon02,
        title: 'Co-Branded Development',
        subTitle:
      'Quick-turn co-branded collections to help brands launch exclusive, limited-edition products and increase market impact.',
      },
      {
        img: solutionIcon03,
        title: 'Flexible Logistic Solution',
        subTitle:
      'Whether it’s bulk shipments, mixed containers, our flexible logistics solutions adapt to your business model and market goals.',
      },
      {
        img: solutionIcon04,
        title: 'Exclusive Channel Protection',
        subTitle:
      'We protect your brand with exclusive regional rights, limited distribution agreements, and secure your market position.',
      },
    ],
  },
  {
    key: 'retailers',
    title: 'Retailers & Chain Stores',
    description: 'Upgrade Your Shelves with Trendy, High-Margin Products',
    list: [
      {
        title: 'Ready-to-Display Portfolios',
        img: solutionIcon01,
        subTitle:
      'Curated product bundles that align with current trends, ready for effortless shelf display and enhanced retail appeal.',
      },
      {
        img: solutionIcon02,
        title: 'Trend-Aligned Launch Plan',
        subTitle:
      'Tailored product launch plans based on market cycles to create a differentiated product portfolio that engages customers.',
      },
      {
        img: solutionIcon03,
        title: 'Store Display Solution',
        subTitle:
      'Strategic display guides that show what to place where — helping your team position products by zone and boost visual appeal.',
      },
      {
        img: solutionIcon04,
        title: 'Go-to Market Support',
        subTitle:
      'Customizable marketing assets to support both online and offline promotions — helping you boost visibility and drive sales.',
      },
    ],
  },
])
const solution = ref('ecommerce')
const solutionList = computed(() => {
  return list.value.find((item: any) => item.key === solution.value)?.list
})
</script>

<template>
  <div class="w-1200-auto ">
    <div class="flex">
      <div v-for="item in list" :key="item.key" :class="solution === item.key ? '!bg-#9B6CFF !text-#fff' : ''" class="flex-1 bg-#F0F0F0 text-#333 py-20px text-center  custom-title-font  hover:text-#9B6CFF transition-all duration-300 cursor-pointer" @click="solution = item.key">
        {{ item.title }}
      </div>
    </div>
    <div class="py-120px text-center">
      <h2 class="text-36px fw-800 text-#333 !mb-20px">
        EJET Spark For <span class="custom-title-bg04"> {{ list.find(item => item.key === solution)?.title }} </span>
      </h2>
      <div class="lh-24px text-#999 text-22px mb-80px">
        {{ list.find(item => item.key === solution)?.description }}
      </div>
      <div class="flex gap-60px">
        <img
          src="~/assets/images/solutions_img02.png"
          alt=""
          class="w-420px h-520px"
          srcset=""
        >
        <div>
          <div class="flex flex-col gap-34px text-left">
            <div v-for="item in solutionList" :key="item.key" class="flex">
              <img :src="item.img" class="w-40px h-40px mr-20px" alt="">
              <div>
                <h3 class="text-18px fw-800 text-#333 !mb-10px custom-title-font">
                  {{ item.title }}
                </h3>
                <div class="text-#666 lh-24px">
                  {{ item.subTitle }}
                </div>
              </div>
            </div>
          </div>
          <div
            class="w-154px h-40px lh-40px text-center ml-60px 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="/contact">
              Contact Us
            </NuxtLink>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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