<script lang='ts' setup> import solutionEcommerce from '~/assets/images/ecommerce_img.png' import solutionBrands from '~/assets/images/brands_img.png' import solutionRetailers from '~/assets/images/retailers_img.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' import { useUserStore } from '@/stores/modules/user' const { openLoginModal } = useLoginModal() const userStore = useUserStore() const { isLogin } = storeToRefs(userStore) 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 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="list.find((item) => item.key === solution)?.masterImg" alt="" class="w-420px h-520px object-cover" 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 v-if="!isLogin" 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" @click="openLoginModal" > Sign In </div> <div v-else 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" > <nuxt-link to="/categories"> view catalogs </nuxt-link> </div> </div> </div> </div> </div> </template> <style lang='less' scoped> </style>