DDAC/app/components/home/ProductTabs.vue

<template>
  <div class="product-tabs-container">
    <section class="product-tabs">
      <div v-for="(tab, index) in productTabs" :key="index" class="tab-item" :class="{ active: activeTab === index }"
        @click="activeTab = index">
        {{ tab.name }}
      </div>
    </section>

    <section class="product-cards-wrapper">
      <Transition name="fade" mode="out-in">
        <component :is="currentLayout" :key="activeTab" :cards="currentTabData.cards" />
      </Transition>
    </section>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import MultiCardLayout from './ProductTabs/MultiCardLayout.vue'
import SingleCardLayout from './ProductTabs/SingleCardLayout.vue'
import { productTabs } from '~/utils/product'
const activeTab = ref(0)


const currentTabData = computed(() => productTabs[activeTab.value])

const currentLayout = computed(() => {
  return currentTabData.value.layout === 'multi' ? MultiCardLayout : SingleCardLayout
})
</script>

<style scoped lang="scss">
.product-tabs-container {
  position: relative;
  width: 100%;
  margin-top: 60px;
  margin-bottom: 120px;
  z-index: 2;
}

.product-tabs {
  width: 100%;
  max-width: 1200px;
  padding: 0 20px;
  box-sizing: border-box;
  height: 100px;
  margin: 0 auto;
  border-radius: 150px;
  background: linear-gradient(177deg, rgba(165, 101, 255, 0.30) -20.47%, rgba(3, 0, 20, 0.30) 134.25%);
  backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  gap: 22px;

  .tab-item {

    font-size: 16px;
    font-weight: 400;
    line-height: 16px;
    color: #ffffff;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.3s ease, background 0.3s ease, transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 177px;
    height: 60px;
    padding: 0;
    border-radius: 46.5px;
    background: transparent;

    &.active {
      background: linear-gradient(62.84deg, rgba(130, 77, 255, 1) 0%, rgba(164, 125, 255, 1) 100%);
      color: #ffffff;
    }

    &:hover:not(.active) {
      color: #bdbdbd;
      transform: translateY(-2px);
    }
  }


}

.product-cards-wrapper {
  position: relative;
  width: 80%;
  max-width: 1200px;
  margin: 10px auto 0;
  box-sizing: border-box;
  z-index: 1;
  backdrop-filter: blur(10px);
}

.product-cards {
  width: 100%;
  height: 474px;
  border-radius: 20px;
  background: linear-gradient(177deg, rgba(165, 101, 255, 0.30) -20.47%, rgba(3, 0, 20, 0.30) 134.25%);
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade-enter-from {
  opacity: 0;
  transform: translateY(20px);
}

.fade-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}
</style>