<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>