Montech_Landing/apps/landing/components/SiteFooter.vue

<template>
  <footer id="contact" class="relative overflow-hidden border-t border-white/[0.07]">
    <div class="border-b border-white/[0.07] py-8 md:py-10">
      <SiteMarquee
        :items="data.marquee"
        :duration="20"
        class-name="font-display text-xl font-bold md:text-3xl"
      />
    </div>

    <div class="mx-auto max-w-[1500px] px-6 py-20 md:px-10 md:py-28">
      <SectionTag index="۰۶" :title="data.tag" right="پاسخ تا ۲۴ ساعت" />
      <div class="mt-14 grid gap-12 lg:grid-cols-[1.4fr_1fr]">
        <div>
          <h2 class="font-display text-[clamp(2.2rem,6vw,4.5rem)] font-extrabold leading-[1.15] tracking-[-0.02em]">
            {{ data.cta }}
          </h2>
          <a
            :href="`mailto:${data.email}`"
            class="mt-8 inline-flex items-center gap-3 border border-volt bg-volt px-6 py-3 text-sm text-ink transition hover:bg-transparent hover:text-volt"
            dir="ltr"
          >
            {{ data.email }} ↗
          </a>
        </div>
        <div class="grid gap-8 sm:grid-cols-3 lg:grid-cols-1">
          <div>
            <p class="text-xs text-ash">کسب‌وکار جدید</p>
            <p class="mt-2 text-sm" dir="ltr">{{ data.email }}</p>
            <p class="text-sm text-ash" dir="ltr">{{ data.phone }}</p>
          </div>
          <div>
            <p class="text-xs text-ash">استودیو</p>
            <p v-for="line in data.address" :key="line" class="mt-1 text-sm text-ash">{{ line }}</p>
          </div>
          <div>
            <p class="text-xs text-ash">شبکه‌های اجتماعی</p>
            <p v-for="s in data.socials" :key="s" class="mt-1 text-sm text-ash">{{ s }}</p>
          </div>
        </div>
      </div>
      <div class="mt-20 flex flex-wrap items-center justify-between gap-4 border-t border-white/[0.07] pt-6 text-xs text-ash">
        <span>© {{ year }} گروه نرم‌افزاری منتک</span>
        <span>{{ brand || "منتک" }}®</span>
      </div>
    </div>
  </footer>
</template>

<script setup lang="ts">
defineProps<{
  brand?: string;
  data: {
    tag: string;
    marquee: string[];
    cta: string;
    email: string;
    phone: string;
    address: string[];
    socials: string[];
  };
}>();
const year = new Date().getFullYear();
</script>