Montech_Landing/apps/landing/components/ManifestoSection.vue

<template>
  <section id="manifesto" class="px-6 py-28 md:px-10 md:py-40">
    <div class="mx-auto max-w-[1500px]">
      <SectionTag index="۰۱" :title="data.tag" right="نسخه کوتاه" />
      <p class="mt-14 max-w-5xl font-display text-[clamp(1.8rem,5vw,4.2rem)] font-extrabold leading-[1.35] tracking-[-0.01em]">
        <span
          v-for="(w, i) in data.words"
          :key="i"
          class="ml-[0.28em] inline-block"
          :class="{
            'text-outline': w.outline,
            'text-volt': w.volt,
          }"
        >{{ w.text }}</span>
      </p>
      <p class="mt-10 max-w-xl text-sm leading-relaxed text-ash md:text-base">{{ data.body }}</p>
    </div>
  </section>
</template>

<script setup lang="ts">
defineProps<{
  data: {
    tag: string;
    words: Array<{ text: string; outline?: boolean; volt?: boolean }>;
    body: string;
  };
}>();
</script>