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

<!-- @format -->

<script lang="ts" setup>
import solutionEcommerce from '~/assets/images/solutions_ecommerce.png'
import solutionBrands from '~/assets/images/solutions_brand.png'
import solutionRetailers from '~/assets/images/solutions_retailers.png'
import solutionEcommerce01 from '~/assets/images/solutions_ecommerce01.png'
import solutionEcommerce02 from '~/assets/images/solutions_ecommerce02.png'
import solutionEcommerce03 from '~/assets/images/solutions_ecommerce03.png'
import solutionEcommerce04 from '~/assets/images/solutions_ecommerce04.png'
import solutionBrand01 from '~/assets/images/solutions_brand01.png'
import solutionBrand02 from '~/assets/images/solutions_brand02.png'
import solutionBrand03 from '~/assets/images/solutions_brand03.png'
import solutionBrand04 from '~/assets/images/solutions_brand04.png'
import solutionRetailers01 from '~/assets/images/solutions_retailers01.png'
import solutionRetailers02 from '~/assets/images/solutions_retailers02.png'
import solutionRetailers03 from '~/assets/images/solutions_retailers03.png'
import solutionRetailers04 from '~/assets/images/solutions_retailers04.png'

const solution = ref('ecommerce')
const list = ref([
  {
    key: 'ecommerce',
    title: 'Ecommerce',
    description: 'Scale Smarter with Viral-Ready Products for Online Growth',
    masterImg: solutionEcommerce,
    list: [
      {
        title: 'Real-Time Trend Curation',
        img: solutionEcommerce01,
        subTitle:
          'Our team constantly monitors market shifts, viral demand, and emerging bestsellers to deliver high-potential products to you.',
      },
      {
        img: solutionEcommerce02,
        title: 'Low MOQ Limits',
        subTitle:
          'With zero MOQ, you can test products risk-free and scale only what sells. Perfect for agile sellers and fast-moving trends!',
      },
      {
        img: solutionEcommerce03,
        title: 'Flexible Fulfillment Options',
        subTitle:
          'Whether you need dropshipping, bulk shipping, or FBA Prep, we adapt to your business with reliable logistics solutions.',
      },
      {
        img: solutionEcommerce04,
        title: 'Winning Product Portfolios',
        subTitle:
          'Our pre-built product bundles and curated collections combine complementary bestsellers to boost average order value.',
      },
    ],
  },
  {
    key: 'brands',
    title: 'Brands & Distributors',
    description:
      'Power Your Product Line with Trend Intelligence & Agile Supply',
    masterImg: solutionBrands,
    list: [
      {
        title: 'OEM/ODM Trend Support',
        img: solutionBrand01,
        subTitle:
          'We provide trend-based design, packaging, and product development to help brands create unique, market-driven products.',
      },
      {
        img: solutionBrand02,
        title: 'Co-Branded Development',
        subTitle:
          'Quick-turn co-branded collections to help brands launch exclusive, limited-edition products and increase market impact.',
      },
      {
        img: solutionBrand03,
        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: solutionBrand04,
        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',
    masterImg: solutionRetailers,
    list: [
      {
        title: 'Ready-to-Display Portfolios',
        img: solutionRetailers01,
        subTitle:
          'Curated product bundles that align with current trends, ready for effortless shelf display and enhanced retail appeal.',
      },
      {
        img: solutionRetailers02,
        title: 'Trend-Aligned Launch Plan',
        subTitle:
          'Tailored product launch plans based on market cycles to create a differentiated product portfolio that engages customers.',
      },
      {
        img: solutionRetailers03,
        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: solutionRetailers04,
        title: 'Go-to Market Support',
        subTitle:
          'Customizable marketing assets to support both online and offline promotions — helping you boost visibility and drive sales.',
      },
    ],
  },
])
const solutionList = computed(() => {
  return list.value.find((item: any) => item.key === solution.value)?.list
})
</script>

<template>
  <div
    class="bg-#F3F4FB pt-250px pb-120px data-section"
    data-section-color="#F3F4FB"
  >
    <div class="w-1200-auto text-center">
      <h2 class="text-36px fw-800 text-#333 !mb-20px custom-title-font">
        Creative, Trend-Driven <span class="custom-title-bg">Solutions</span>
      </h2>
      <div class="text-#999 text-22px mb-40px">
        EJET SPARK FOR
      </div>
      <div class="flex gap-20px justify-center mb-60px">
        <div
          v-for="(item, index) in list"
          :key="index"
          class="py-12px px-30px b-rd-200px text-18px cursor-pointer hover:bg-#9B6CFF hover:text-#fff transition-all duration-300"
          :class="
            solution === item.key
              ? '!bg-#9B6CFF !text-#fff'
              : 'bg-#fff text-#767676'
          "
          @click="solution = item.key"
        >
          <div>{{ item.title }}</div>
        </div>
      </div>
      <div class="flex gap-120px text-left">
        <div class="b-rd-10px w-360px overflow-hidden">
          <img
            :src="list.find((item) => item.key === solution)?.masterImg"
            class="w-100% h-258px"
            alt=""
          >
          <div
            class="py-20px px-30px b-rd-tl-10px b-rd-tr-10px mt--60px bg-#fff pos-relative z-100"
          >
            <h3 class="text-24px fw-bold text-#333">
              {{ list.find((item) => item.key === solution)?.title }}
            </h3>
            <div class="my-22px lh-24px text-#666">
              {{ list.find((item) => item.key === solution)?.description }}
            </div>
            <el-button class="!bg-#fff !b-rd-6px !h-40px">
              <nuxt-link to="/solutions">
                View Catalogs
              </nuxt-link>
            </el-button>
          </div>
        </div>
        <div class="flex-1">
          <div class="grid grid-cols-2 gap-col-80px gap-row-50px">
            <div v-for="(item, index) in solutionList" :key="index">
              <img :src="item.img" class="w-50px h-50px" alt="" srcset="">
              <h4
                class="!mt-20px !mb-10px text-#333 text-18px fw-800 custom-title-font"
              >
                {{ item.title }}
              </h4>
              <div class="text-#666 lh-24px">
                {{ item.subTitle }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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