114 lines
4.1 KiB
Vue
114 lines
4.1 KiB
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 tracking-[-0.01em] 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.4rem,6.5vw,5.5rem)] font-extrabold leading-[1.08] tracking-[-0.03em]">
|
||
{{ data.cta || "شروع همکاری" }}
|
||
</h2>
|
||
<a
|
||
v-if="email"
|
||
:href="`mailto:${email}`"
|
||
class="mt-8 inline-flex items-center gap-3 border border-volt bg-volt px-6 py-3 font-mono text-[11px] tracking-[0.16em] text-ink transition hover:bg-transparent hover:text-volt"
|
||
dir="ltr"
|
||
>
|
||
{{ email }} ↗
|
||
</a>
|
||
</div>
|
||
<div class="grid gap-8 sm:grid-cols-3 lg:grid-cols-1">
|
||
<div>
|
||
<p class="font-mono text-[10px] tracking-[0.2em] text-ash">کسبوکار جدید</p>
|
||
<p v-if="email" class="mt-2 text-sm" dir="ltr">{{ email }}</p>
|
||
<p v-if="phone" class="text-sm text-ash" dir="ltr">{{ phone }}</p>
|
||
</div>
|
||
<div>
|
||
<p class="font-mono text-[10px] tracking-[0.2em] text-ash">استودیو</p>
|
||
<p v-for="line in addressLines" :key="line" class="mt-1 text-sm text-ash">{{ line }}</p>
|
||
</div>
|
||
<div>
|
||
<p class="font-mono text-[10px] tracking-[0.2em] text-ash">شبکههای اجتماعی</p>
|
||
<template v-if="socialLinks.length">
|
||
<a
|
||
v-for="s in socialLinks"
|
||
:key="s.label + s.url"
|
||
:href="s.url || undefined"
|
||
class="mt-1 block text-sm text-ash hover:text-volt"
|
||
:target="s.url ? '_blank' : undefined"
|
||
rel="noopener"
|
||
>{{ s.label }}</a>
|
||
</template>
|
||
<p v-else-if="legacySocials.length" v-for="s in legacySocials" :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 font-mono text-[10px] tracking-[0.16em] text-ash">
|
||
<span>© {{ year }} گروه نرمافزاری {{ brand || "منتک" }}</span>
|
||
<span>{{ brand || "منتک" }}®</span>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
const props = defineProps<{
|
||
brand?: string;
|
||
email?: string;
|
||
phone?: string;
|
||
address?: string;
|
||
socials?: Array<{ label: string; url: string }>;
|
||
data: {
|
||
tag?: string;
|
||
marquee?: string[];
|
||
cta?: string;
|
||
email?: string;
|
||
phone?: string;
|
||
address?: string[] | string;
|
||
socials?: string[] | Array<{ label: string; url: string }>;
|
||
};
|
||
}>();
|
||
|
||
const year = new Date().getFullYear();
|
||
|
||
const email = computed(() => props.email || props.data.email || "");
|
||
const phone = computed(() => props.phone || props.data.phone || "");
|
||
|
||
const addressLines = computed(() => {
|
||
if (props.address) {
|
||
return props.address
|
||
.split(/\n|,/)
|
||
.map((s) => s.trim())
|
||
.filter(Boolean);
|
||
}
|
||
const a = props.data.address;
|
||
if (Array.isArray(a)) return a;
|
||
if (typeof a === "string") return a.split(/\n|,/).map((s) => s.trim()).filter(Boolean);
|
||
return [];
|
||
});
|
||
|
||
const socialLinks = computed(() => {
|
||
if (props.socials?.length) return props.socials.filter((s) => s.label);
|
||
const raw = props.data.socials;
|
||
if (!Array.isArray(raw) || !raw.length) return [];
|
||
if (typeof raw[0] === "object" && raw[0] !== null) {
|
||
return (raw as Array<{ label: string; url: string }>).filter((s) => s.label);
|
||
}
|
||
return [];
|
||
});
|
||
|
||
const legacySocials = computed(() => {
|
||
const raw = props.data.socials;
|
||
if (!Array.isArray(raw) || !raw.length) return [] as string[];
|
||
if (typeof raw[0] === "string") return raw as string[];
|
||
return [];
|
||
});
|
||
</script>
|