imen_pishghaman/apps/web/app/components/layout/Footer.vue

<script setup lang="ts">
import type { SocialType } from "@imen/shared";
import {
  AtSign,
  Globe,
  Instagram,
  Linkedin,
  MessageCircle,
  Phone,
  Send,
  Youtube,
} from "lucide-vue-next";
import type { Component } from "vue";
import Logo from "~/components/ui/Logo.vue";

const QUICK_LINKS = [
  { href: "/#home", label: "خانه" },
  { href: "/#products", label: "محصولات" },
  { href: "/#about", label: "درباره ما" },
  { href: "/#services", label: "خدمات" },
  { href: "/#standards", label: "استانداردها" },
  { href: "/#industries", label: "صنایع" },
];

const SOCIAL_META: Record<SocialType, { icon: Component; label: string }> = {
  website: { icon: Globe, label: "وب‌سایت" },
  telegram: { icon: Send, label: "تلگرام" },
  instagram: { icon: Instagram, label: "اینستاگرام" },
  linkedin: { icon: Linkedin, label: "لینکدین" },
  whatsapp: { icon: MessageCircle, label: "واتساپ" },
  bale: { icon: MessageCircle, label: "بله" },
  eitaa: { icon: MessageCircle, label: "ایتا" },
  aparat: { icon: Youtube, label: "آپارات" },
  youtube: { icon: Youtube, label: "یوتیوب" },
  email: { icon: AtSign, label: "ایمیل" },
  phone: { icon: Phone, label: "تماس" },
};

const site = useSiteStore();
const footer = computed(() => site.sections.footer);
const settings = computed(() => site.settings);

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"
            >
              <component :is="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>