Montech_Landing/apps/landing/components/ProcessSection.vue

<template>
  <section id="process" class="px-6 py-28 md:px-10 md:py-40">
    <div class="mx-auto max-w-[1500px]">
      <SectionTag index="۰۴" :title="data.tag" right="معمولاً ۱۲ هفته" />
      <div class="mt-16 grid gap-8 md:grid-cols-2 lg:grid-cols-4">
        <div v-for="step in data.steps" :key="step.n" class="border-t border-white/[0.1] pt-6">
          <p class="font-mono text-[11px] tracking-[0.2em] text-volt">{{ step.n }}</p>
          <h3 class="mt-4 font-display text-xl font-bold tracking-[-0.02em] md:text-2xl">{{ step.title }}</h3>
          <p class="mt-3 text-sm leading-relaxed text-ash">{{ step.desc }}</p>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
defineProps<{
  data: {
    tag: string;
    steps: Array<{ n: string; title: string; desc: string }>;
  };
}>();
</script>