imen_pishghaman/app/components/layout/Footer.vue

<script setup lang="ts">
import { AtSign, Globe, Phone, Send } from "lucide-vue-next";
import { CATEGORIES } from "#shared/data/categories";
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 PRODUCT_LINKS = CATEGORIES.map((c) => ({
  label: c.name,
  href: `/categories/${c.slug}`,
}));

const SOCIALS = [
  { icon: Globe, label: "وب‌سایت" },
  { icon: Send, label: "تلگرام" },
  { icon: AtSign, label: "ایمیل" },
  { icon: Phone, label: "تماس" },
];
</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">
            تأمین‌کننده تخصصی تجهیزات حفاظت فردی و راهکارهای ایمنی صنعتی؛
            همراه سازمان‌ها از سال ۱۳۸۶ در مسیر صفر شدن حوادث کاری.
          </p>
          <div class="mt-7 flex gap-3">
            <a
              v-for="s in SOCIALS"
              :key="s.label"
              href="/#contact"
              :aria-label="s.label"
              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">
              تهران، خیابان کارگر شمالی،
              <br />
              خیابان فر، کوچه دوم، پلاک ۱۲
            </p>
            <p class="font-mono tracking-wider" dir="ltr">۰۲۱ - ۹۱ ۰۰ ۸۸ ۰۰</p>
            <p class="font-mono tracking-wider" dir="ltr">info@imenpishgaman.ir</p>
            <p class="pt-2 text-xs leading-6">
              شنبه تا پنجشنبه — ۸:۰۰ تا ۱۷:۰۰
              <br />
              پشتیبانی اضطراری: ۲۴/۷
            </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]">
          ایمن پیشگامان
        </div>
      </div>

      <div
        class="flex flex-wrap items-center justify-between gap-4 border-t border-line py-6 text-xs text-muted"
      >
        <div>© ۱۴۰۴ ایمن پیشگامان — تمامی حقوق محفوظ است.</div>
        <div class="font-mono text-[10px] tracking-[0.25em]">
          ISO 9001:2015 — CE CERTIFIED PPE SUPPLIER
        </div>
      </div>
    </div>
  </footer>
</template>