Montech_Landing/apps/landing/components/ServicesSection.vue

<template>
  <section id="services" class="px-6 py-28 md:px-10 md:py-40">
    <div class="mx-auto max-w-[1500px]">
      <SectionTag index="۰۲" :title="data.tag" :right="`${String(data.items.length).padStart(2, '0')} قابلیت`" />
      <ul class="mt-16 divide-y divide-white/[0.07] border-y border-white/[0.07]">
        <li
          v-for="(s, i) in data.items"
          :key="s.n"
          class="group cursor-pointer py-8 md:py-10"
          @click="open = open === i ? -1 : i"
        >
          <div class="flex items-start justify-between gap-6">
            <div class="flex flex-1 flex-col gap-3 md:flex-row md:items-baseline md:gap-10">
              <span class="text-sm text-ash">{{ s.n }}</span>
              <h3 class="font-display text-2xl font-bold md:text-4xl group-hover:text-volt transition-colors">
                {{ s.title }}
              </h3>
            </div>
            <span class="text-volt">{{ open === i ? "—" : "+" }}</span>
          </div>
          <div v-if="open === i" class="mt-6 max-w-3xl">
            <p class="text-sm leading-relaxed text-ash md:text-base">{{ s.desc }}</p>
            <div class="mt-4 flex flex-wrap gap-2">
              <span
                v-for="t in s.tags"
                :key="t"
                class="border border-white/10 px-3 py-1 text-xs text-ash"
              >{{ t }}</span>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </section>
</template>

<script setup lang="ts">
defineProps<{
  data: {
    tag: string;
    items: Array<{ n: string; title: string; desc: string; tags: string[] }>;
  };
}>();
const open = ref(0);
</script>