146 lines
5.4 KiB
Vue
146 lines
5.4 KiB
Vue
<script setup lang="ts">
|
|
import type { SocialType } from "@imen/shared";
|
|
import VuesaxIcon from "~/components/ui/VuesaxIcon.vue";
|
|
import Logo from "~/components/ui/Logo.vue";
|
|
|
|
const ALL_QUICK_LINKS = [
|
|
{ href: "/#home", label: "خانه", section: "hero" },
|
|
{ href: "/#products", label: "محصولات", section: "productsIntro" },
|
|
{ href: "/#about", label: "درباره ما", section: "about" },
|
|
{ href: "/#services", label: "خدمات", section: "services" },
|
|
{ href: "/#standards", label: "استانداردها", section: "standards" },
|
|
{ href: "/#industries", label: "صنایع", section: "industries" },
|
|
] as const;
|
|
|
|
const SOCIAL_META: Record<SocialType, { icon: string; label: string }> = {
|
|
website: { icon: "global", label: "وبسایت" },
|
|
telegram: { icon: "send-2", label: "تلگرام" },
|
|
instagram: { icon: "instagram", label: "اینستاگرام" },
|
|
linkedin: { icon: "link", label: "لینکدین" },
|
|
whatsapp: { icon: "messages-2", label: "واتساپ" },
|
|
bale: { icon: "messages-2", label: "بله" },
|
|
eitaa: { icon: "messages-2", label: "ایتا" },
|
|
aparat: { icon: "video-play", label: "آپارات" },
|
|
youtube: { icon: "video-play", label: "یوتیوب" },
|
|
email: { icon: "sms", label: "ایمیل" },
|
|
phone: { icon: "call", label: "تماس" },
|
|
};
|
|
|
|
const site = useSiteStore();
|
|
const footer = computed(() => site.sections.footer);
|
|
const settings = computed(() => site.settings);
|
|
|
|
const QUICK_LINKS = computed(() =>
|
|
ALL_QUICK_LINKS.filter(
|
|
(l) =>
|
|
(site.sections as Record<string, { enabled?: boolean }>)?.[l.section]?.enabled !== false,
|
|
),
|
|
);
|
|
|
|
const PRODUCT_LINKS = computed(() =>
|
|
site.categories.map((c) => ({ label: c.name, href: `/categories/${c.slug}` })),
|
|
);
|
|
|
|
const SOCIALS = computed(() =>
|
|
settings.value.socials.map((s) => ({
|
|
...SOCIAL_META[s.type],
|
|
href: s.url,
|
|
external: /^https?:\/\//.test(s.url),
|
|
})),
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<footer class="relative overflow-hidden border-t border-line">
|
|
<div class="hazard h-2.5" />
|
|
|
|
<div class="mx-auto max-w-[1480px] px-5 md:px-8">
|
|
<div class="grid gap-12 py-16 md:grid-cols-12 md:py-20">
|
|
<!-- brand -->
|
|
<div class="md:col-span-5">
|
|
<Logo />
|
|
<p class="mt-6 max-w-sm text-sm leading-8 text-muted">
|
|
{{ footer.about }}
|
|
</p>
|
|
<div class="mt-7 flex gap-3">
|
|
<a
|
|
v-for="s in SOCIALS"
|
|
:key="s.href"
|
|
:href="s.href"
|
|
:aria-label="s.label"
|
|
:target="s.external ? '_blank' : undefined"
|
|
:rel="s.external ? 'noopener' : undefined"
|
|
class="flex size-10 items-center justify-center rounded-lg border border-line text-muted transition-all duration-300 hover:border-accent hover:bg-accent hover:text-bg"
|
|
>
|
|
<VuesaxIcon :name="s.icon" class="size-4" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- quick links -->
|
|
<div class="md:col-span-2">
|
|
<div class="font-mono text-xs tracking-[0.25em] text-accent">// دسترسی</div>
|
|
<ul class="mt-5 space-y-3">
|
|
<li v-for="l in QUICK_LINKS" :key="l.href">
|
|
<a :href="l.href" class="text-sm text-muted transition-colors hover:text-ink">
|
|
{{ l.label }}
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- products -->
|
|
<div class="md:col-span-2">
|
|
<div class="font-mono text-xs tracking-[0.25em] text-accent">// محصولات</div>
|
|
<ul class="mt-5 space-y-3">
|
|
<li v-for="p in PRODUCT_LINKS" :key="p.href">
|
|
<NuxtLink :to="p.href" class="text-sm text-muted transition-colors hover:text-ink">
|
|
{{ p.label }}
|
|
</NuxtLink>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- contact -->
|
|
<div class="md:col-span-3">
|
|
<div class="font-mono text-xs tracking-[0.25em] text-accent">// ارتباط</div>
|
|
<address class="mt-5 space-y-3 text-sm text-muted not-italic">
|
|
<p class="leading-7">
|
|
{{ settings.address.locality }}، {{ settings.address.street }}
|
|
</p>
|
|
<p class="font-mono tracking-wider" dir="ltr">
|
|
<a :href="`tel:${settings.phone}`" class="transition-colors hover:text-ink">{{ settings.phoneDisplay }}</a>
|
|
</p>
|
|
<p class="font-mono tracking-wider" dir="ltr">
|
|
<a :href="`mailto:${settings.email}`" class="transition-colors hover:text-ink">{{ settings.email }}</a>
|
|
</p>
|
|
<p class="pt-2 text-xs leading-6">
|
|
{{ settings.workingHours }}
|
|
<template v-if="footer.emergencyNote">
|
|
<br />
|
|
{{ footer.emergencyNote }}
|
|
</template>
|
|
</p>
|
|
</address>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- giant wordmark -->
|
|
<div aria-hidden="true" class="pointer-events-none select-none pb-6">
|
|
<div class="text-outline text-center text-[17vw] font-black leading-[0.85] md:text-[11vw]">
|
|
{{ settings.name }}
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="flex flex-wrap items-center justify-between gap-4 border-t border-line py-6 text-xs text-muted"
|
|
>
|
|
<div>{{ footer.copyright }}</div>
|
|
<div v-if="footer.certLine" class="font-mono text-[10px] tracking-[0.25em]">
|
|
{{ footer.certLine }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</template>
|