feat: update Dockerfile, add category pages, fonts and product images

Rebuild Docker setup with simplified nginx-only Dockerfile (build runs on host). Add category detail pages, IRANSans font files, product images, and update all landing sections. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-10-07 00:45:51 +03:30
parent e31ef5a21f
commit bb7f1e3378
33 changed files with 920 additions and 196 deletions
@@ -4,7 +4,7 @@ import Reveal from "~/components/ui/Reveal.vue";
 import SectionHead from "~/components/ui/SectionHead.vue";

 const TIMELINE = [
-  { year: "۱۳۸۶", text: "تأسیس آریا ایمن در تهران با تمرکز بر تجهیزات حفاظت فردی" },
+  { year: "۱۳۸۶", text: "تأسیس ایمن پیشگامان در تهران با تمرکز بر تجهیزات حفاظت فردی" },
  { year: "۱۳۹۲", text: "توسعه شبکه توزیع به تمام ۳۱ استان کشور" },
  { year: "۱۳۹۸", text: "راه‌اندازی آزمایشگاه کنترل کیفیت و تست تجهیزات" },
  { year: "۱۴۰۲", text: "افتتاح مرکز تخصصی آموزش و بازرسی HSE" },
@@ -25,14 +25,14 @@ const FEATURES = [
  >
    <div class="absolute inset-0 bg-grid-fine opacity-50" />

-    <div class="relative mx-auto max-w-7xl px-5 md:px-8">
+    <div class="relative mx-auto max-w-[1480px] px-5 md:px-8">
      <div class="grid items-center gap-14 lg:grid-cols-2">
        <!-- ---- image ---- -->
        <Reveal class="relative order-2 lg:order-1" :delay="0.1">
          <div class="relative overflow-hidden rounded-2xl border border-line">
            <img
              src="/images/about.jpg"
-              alt="انبار تجهیزات ایمنی آریا ایمن"
+              alt="انبار تجهیزات ایمنی ایمن پیشگامان"
              width="800"
              height="600"
              loading="lazy"
@@ -21,7 +21,7 @@ const INFO = [
    value: "تهران، خیابان کارگر شمالی، خیابان فر، کوچه دوم، پلاک ۱۲",
  },
  { icon: Phone, label: "تلفن تماس", value: "۰۲۱ - ۹۱ ۰۰ ۸۸ ۰۰", ltr: true },
-  { icon: Mail, label: "ایمیل", value: "info@ariaiman.ir", ltr: true },
+  { icon: Mail, label: "ایمیل", value: "info@imenpishgaman.ir", ltr: true },
  { icon: Clock, label: "ساعات کاری", value: "شنبه تا پنجشنبه — ۸:۰۰ تا ۱۷:۰۰" },
 ];

@@ -46,7 +46,7 @@ const contact = useContactStore();
  >
    <div class="absolute inset-0 bg-grid-fine opacity-40" />

-    <div class="relative mx-auto max-w-7xl px-5 md:px-8">
+    <div class="relative mx-auto max-w-[1480px] px-5 md:px-8">
      <div class="grid gap-14 lg:grid-cols-2">
        <!-- ---- info ---- -->
        <div>
@@ -44,7 +44,7 @@ const MINI_STATS = [

    <!-- ---- content ---- -->
    <div
-      class="relative z-10 mx-auto flex w-full max-w-7xl flex-1 items-center px-5 pb-24 pt-36 md:px-8"
+      class="relative z-10 mx-auto flex w-full max-w-[1480px] flex-1 items-center px-5 pb-24 pt-36 md:px-8"
    >
      <div class="grid w-full items-center gap-12 lg:grid-cols-12">
        <div class="lg:col-span-7">
@@ -72,7 +72,7 @@ const MINI_STATS = [
          <p
            class="animate-fade-up-3 mt-7 max-w-xl text-base leading-9 text-ink/70 md:text-lg md:leading-10"
          >
-            آریا ایمن با بیش از ۱۸ سال تجربه، تأمین‌کننده تخصصی تجهیزات ایمنی و
+            ایمن پیشگامان با بیش از ۱۸ سال تجربه، تأمین‌کننده تخصصی تجهیزات ایمنی و
            حفاظت فردی برای سازمان‌هایی است که جان انسان‌ها را جدی می‌گیرند؛ از
            کلاه ایمنی تا هارنس نجات، از مشاوره تا بازرسی و آموزش.
          </p>
@@ -121,7 +121,7 @@ const MINI_STATS = [
                  </defs>
                  <text font-size="9" letter-spacing="2.6" class="fill-ink/60 font-mono">
                    <textPath href="#badge-circle">
-                      ARIA IMEN SAFETY • ISO 9001 • CE CERTIFIED • EST 2007 •
+                      IMEN PISHGAMAN SAFETY • ISO 9001 • CE CERTIFIED • EST 2007 •
                    </textPath>
                  </text>
                </svg>
@@ -156,7 +156,7 @@ const MINI_STATS = [
            </div>
            <div class="my-4 h-px bg-line" />
            <div class="font-mono text-[11px] leading-6 text-muted">
-              سیستم پایش حرفه‌ای آریا ایمن<span class="animate-blink text-accent">▍</span>
+              سیستم پایش حرفه‌ای ایمن پیشگامان<span class="animate-blink text-accent">▍</span>
            </div>
          </div>
        </div>
@@ -173,7 +173,7 @@ const MINI_STATS = [

    <!-- ---- bottom bar ---- -->
    <div class="animate-fade-up-8 relative z-10 border-t border-ink/10 backdrop-blur-sm">
-      <div class="mx-auto grid max-w-7xl grid-cols-1 gap-px bg-ink/10 sm:grid-cols-3">
+      <div class="mx-auto grid max-w-[1480px] grid-cols-1 gap-px bg-ink/10 sm:grid-cols-3">
        <div
          v-for="s in MINI_STATS"
          :key="s.label"
@@ -51,7 +51,7 @@ const onMove = (e: MouseEvent) => {
    class="relative border-t border-line py-24 md:py-32"
    @mousemove="onMove"
  >
-    <div class="mx-auto max-w-7xl px-5 md:px-8">
+    <div class="mx-auto max-w-[1480px] px-5 md:px-8">
      <SectionHead
        heading-id="industries-title"
        tag="۰۵ — صنایع"
@@ -1,69 +1,20 @@
 <script setup lang="ts">
-import { AnimatePresence, motion } from "motion-v";
 import { ArrowLeft, BadgeCheck, PackageCheck, ShieldCheck } from "lucide-vue-next";
+import { CATEGORIES } from "#shared/data/categories";
 import Reveal from "~/components/ui/Reveal.vue";
 import SectionHead from "~/components/ui/SectionHead.vue";

-type Product = {
-  code: string;
-  name: string;
-  en: string;
-  desc: string;
-  img: string;
-  specs: string[];
+const CATEGORY_IMAGES: Record<string, string> = {
+  workwear: "/images/products/vest.jpg",
+  "safety-footwear": "/images/products/shoes.jpg",
+  "protective-gloves": "/images/products/gloves.jpg",
+  "safety-helmets": "/images/products/helmet.jpg",
+  "eye-protection": "/images/products/goggles.jpg",
+  "hearing-protection": "/images/products/hearing.jpg",
+  "respiratory-protection": "/images/products/respiratory.jpg",
+  "traffic-equipment": "/images/products/traffic.jpg",
 };

-const PRODUCTS: Product[] = [
-  {
-    code: "AP-101",
-    name: "کلاه ایمنی",
-    en: "SAFETY HELMET",
-    img: "/images/products/helmet.jpg",
-    desc: "کلاه‌های ایمنی با بدنه HDPE مقاوم به ضربه و ترتیه‌بند ضدتعریق؛ با قابلیت نصب هدفون و شیشه محافظ صورت برای محیط‌های ساختمانی و صنعتی.",
-    specs: ["EN 397", "مقاوم به ضربه ۵۰ ژول", "بدنه HDPE"],
-  },
-  {
-    code: "AP-205",
-    name: "دستکش ضدبرش",
-    en: "CUT-RESISTANT GLOVE",
-    img: "/images/products/gloves.jpg",
-    desc: "دستکش‌های سطح ۵ ضدبرش با پوشش نیتریل؛ طراحی‌شده برای کار با ورق فلز، شیشه و ابزار برنده با چسبندگی عالی در محیط خشک و چرب.",
-    specs: ["EN 388 — 4X43C", "سطح ۵ ضدبرش", "پوشش نیتریل"],
-  },
-  {
-    code: "AP-310",
-    name: "کفش ایمنی",
-    en: "SAFETY BOOTS",
-    img: "/images/products/shoes.jpg",
-    desc: "کفش‌های ایمنی با پنجه فولادی و کف مقاوم در برابر سوراخ‌شدگی و روغن؛ راحتی تمام‌روز برای شیفت‌های طولانی در سایت.",
-    specs: ["EN ISO 20345", "پنجه فولادی", "کف ضدروغن"],
-  },
-  {
-    code: "AP-412",
-    name: "عینک ایمنی",
-    en: "SAFETY GOGGLES",
-    img: "/images/products/goggles.jpg",
-    desc: "عینک‌های محافظ ضدخش با پوشش UV400 و تهویه ضدمه؛ سازگار با عینک طبی برای کارهای جوشکاری، سنگ‌زنی و محیط‌های شیمیایی.",
-    specs: ["EN 166", "عدسی ضدخش", "پوشش UV400"],
-  },
-  {
-    code: "AP-508",
-    name: "هارنس ضدسقوط",
-    en: "FULL BODY HARNESS",
-    img: "/images/products/harness.jpg",
-    desc: "هارنس تمام‌بدنی با دو شیر پیچی و نوارهای دوخته‌شده با نخ نارنجی سیگنال؛ تست‌شده برای کار در ارتفاع با ظرفیت ۱۰۰ کیلوگرم.",
-    specs: ["EN 361", "ظرفیت ۱۰۰ کیلوگرم", "شیر دوگانه"],
-  },
-  {
-    code: "AP-615",
-    name: "لباس کار بازتابنده",
-    en: "HI-VIS WORKWEAR",
-    img: "/images/products/vest.jpg",
-    desc: "جلیقه‌ها و لباس‌های کار بازتابنده کلاس ۲ با نوارهای ۳M؛ دیده‌شدن کامل پرسنل در شب، مه و محیط‌های پرتردد خودرویی.",
-    specs: ["EN ISO 20471", "کلاس ۲", "نوار ۳M"],
-  },
-];
-
 const TRUST = [
  {
    icon: BadgeCheck,
@@ -87,12 +38,12 @@ const active = ref(0);

 <template>
  <section id="products" aria-labelledby="products-title" class="relative py-24 md:py-32">
-    <div class="mx-auto max-w-7xl px-5 md:px-8">
+    <div class="mx-auto max-w-[1480px] px-5 md:px-8">
      <div class="flex flex-wrap items-end justify-between gap-6">
        <SectionHead
          heading-id="products-title"
          tag="۰۱ — محصولات"
-          desc="هر محصول پیش از عرضه، زیر ذره‌بین کنترل کیفیت و تطبیق با استانداردهای جهانی قرار می‌گیرد. روی هر پنل کلیک کنید."
+          desc="هر محصول پیش از عرضه، زیر ذره‌بین کنترل کیفیت و تطبیق با استانداردهای جهانی قرار می‌گیرد."
        >
          <template #title>
            خط اول دفاع،
@@ -102,7 +53,7 @@ const active = ref(0);
        </SectionHead>
        <Reveal :delay="0.2" class="hidden md:block">
          <a
-            href="#contact"
+            href="/#contact"
            class="group inline-flex items-center gap-2 rounded-full border border-line px-6 py-3 text-sm text-muted transition-colors hover:border-accent hover:text-accent"
          >
            دریافت کاتالوگ کامل
@@ -112,29 +63,70 @@ const active = ref(0);
      </div>
    </div>

-    <div class="mx-auto mt-14 max-w-7xl px-5 md:px-8">
-      <div class="flex flex-col gap-2 md:h-[74vh] md:min-h-[580px] md:flex-row">
-        <div
-          v-for="(p, i) in PRODUCTS"
-          :key="p.code"
+    <!-- ---- mobile: card grid ---- -->
+    <div class="mx-auto mt-14 max-w-[1480px] px-5 md:hidden">
+      <div class="grid grid-cols-2 gap-3">
+        <Reveal v-for="(cat, i) in CATEGORIES" :key="cat.code" :delay="i * 0.05">
+          <NuxtLink
+            :to="`/categories/${cat.slug}`"
+            class="group relative block aspect-[3/4] overflow-hidden rounded-xl border border-line transition-colors duration-300 active:border-accent/60"
+          >
+            <img
+              v-if="CATEGORY_IMAGES[cat.slug]"
+              :src="CATEGORY_IMAGES[cat.slug]"
+              :alt="cat.name"
+              loading="lazy"
+              decoding="async"
+              class="absolute inset-0 size-full object-cover transition-transform duration-500 group-active:scale-105"
+            />
+            <div v-else class="absolute inset-0 bg-panel" />
+            <div class="absolute inset-0 bg-gradient-to-t from-bg via-bg/50 to-transparent" />
+
+            <div class="absolute inset-x-0 top-0 flex items-center justify-between p-3">
+              <span class="font-mono text-[9px] tracking-widest text-ink/50">{{ cat.code }}</span>
+              <span class="font-mono text-[10px] text-accent">
+                {{ faNum(String(i + 1).padStart(2, "0")) }}
+              </span>
+            </div>
+
+            <div class="absolute inset-x-0 bottom-0 p-3">
+              <h3 class="text-sm font-black leading-6">{{ cat.name }}</h3>
+              <p class="mt-0.5 font-mono text-[8px] tracking-[0.15em] text-muted">{{ cat.en }}</p>
+            </div>
+          </NuxtLink>
+        </Reveal>
+      </div>
+    </div>
+
+    <!-- ---- desktop: accordion panels ---- -->
+    <div class="mx-auto mt-14 hidden max-w-[1480px] px-8 md:block">
+      <div class="flex h-[74vh] min-h-[580px] flex-row gap-2">
+        <NuxtLink
+          v-for="(cat, i) in CATEGORIES"
+          :key="cat.code"
+          :to="`/categories/${cat.slug}`"
          data-hover
-          :class="`group relative cursor-pointer overflow-hidden rounded-xl border transition-all duration-700 ease-[cubic-bezier(0.22,1,0.36,1)] ${
+          :class="`group relative cursor-pointer overflow-hidden rounded-xl border transition-all duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] ${
            active === i
-              ? 'h-[500px] flex-[3.4] border-accent/60 md:h-auto'
-              : 'h-24 flex-[1] border-line hover:border-ink/30 md:h-auto'
+              ? 'flex-[3.4] border-accent/60'
+              : 'flex-[1] border-line hover:border-ink/30'
          }`"
          @mouseenter="active = i"
-          @click="active = i"
        >
          <img
-            :src="p.img"
-            :alt="p.name"
+            v-if="CATEGORY_IMAGES[cat.slug]"
+            :src="CATEGORY_IMAGES[cat.slug]"
+            :alt="cat.name"
            loading="lazy"
            decoding="async"
            :class="`absolute inset-0 size-full object-cover transition-all duration-700 ${
              active === i ? 'scale-100 grayscale-0' : 'scale-110 grayscale group-hover:grayscale-0'
            }`"
          />
+          <div
+            v-else
+            class="absolute inset-0 bg-panel"
+          />
          <div
            :class="`absolute inset-0 transition-opacity duration-700 ${
              active === i
@@ -144,7 +136,7 @@ const active = ref(0);
          />

          <div class="absolute inset-x-0 top-0 flex items-center justify-between p-5">
-            <span class="font-mono text-[10px] tracking-widest text-ink/60">{{ p.code }}</span>
+            <span class="font-mono text-[10px] tracking-widest text-ink/60">{{ cat.code }}</span>
            <span
              :class="`font-mono text-xs transition-colors duration-500 ${
                active === i ? 'text-accent' : 'text-ink/40'
@@ -154,42 +146,22 @@ const active = ref(0);
            </span>
          </div>

-          <div class="absolute inset-x-0 bottom-0 p-5 md:p-6">
+          <div class="absolute inset-x-0 bottom-0 p-6">
            <h3
              :class="`font-black transition-all duration-500 ${
-                active === i ? 'text-2xl' : 'text-base md:text-sm'
+                active === i ? 'text-2xl' : 'text-sm'
              }`"
            >
-              {{ p.name }}
+              {{ cat.name }}
            </h3>
-            <p class="mt-1 font-mono text-[10px] tracking-[0.2em] text-muted">{{ p.en }}</p>
-            <AnimatePresence>
-              <motion.div
-                v-if="active === i"
-                :initial="{ opacity: 0, y: 18 }"
-                :animate="{ opacity: 1, y: 0 }"
-                :exit="{ opacity: 0, y: 10 }"
-                :transition="{ duration: 0.45, delay: 0.12, ease: EASE }"
-              >
-                <p class="mt-4 max-w-md text-sm leading-8 text-ink/75">{{ p.desc }}</p>
-                <div class="mt-4 flex flex-wrap gap-2">
-                  <span
-                    v-for="s in p.specs"
-                    :key="s"
-                    class="rounded-full border border-accent/40 bg-accent/10 px-3 py-1 font-mono text-[10px] text-accent"
-                  >
-                    {{ s }}
-                  </span>
-                </div>
-              </motion.div>
-            </AnimatePresence>
+            <p class="mt-1 font-mono text-[10px] tracking-[0.2em] text-muted">{{ cat.en }}</p>
          </div>
-        </div>
+        </NuxtLink>
      </div>
    </div>

    <div
-      class="mx-auto mt-10 grid max-w-7xl gap-px overflow-hidden rounded-xl border border-line bg-line md:grid-cols-3"
+      class="mx-auto mt-10 grid max-w-[1480px] gap-px overflow-hidden rounded-xl border border-line bg-line md:grid-cols-3"
    >
      <Reveal v-for="(t, i) in TRUST" :key="t.title" :delay="i * 0.08">
        <div class="flex h-full items-center gap-4 bg-panel/60 p-6">
@@ -58,11 +58,11 @@ const open = ref(0);

 <template>
  <section id="services" aria-labelledby="services-title" class="border-t border-line py-24 md:py-32">
-    <div class="mx-auto max-w-7xl px-5 md:px-8">
+    <div class="mx-auto max-w-[1480px] px-5 md:px-8">
      <SectionHead
        heading-id="services-title"
        tag="۰۳ — خدمات"
-        desc="ما در آریا ایمن، تجهیزات را تحویل می‌دهیم و کنار شما می‌مانیم؛ از نخستین ارزیابی ریسک تا آخرین تست دوره‌ای."
+        desc="ما در ایمن پیشگامان، تجهیزات را تحویل می‌دهیم و کنار شما می‌مانیم؛ از نخستین ارزیابی ریسک تا آخرین تست دوره‌ای."
      >
        <template #title>
          فراتر از تأمین؛
@@ -27,7 +27,7 @@ const STANDARDS = [
      CE
    </div>

-    <div class="relative mx-auto max-w-7xl px-5 md:px-8">
+    <div class="relative mx-auto max-w-[1480px] px-5 md:px-8">
      <div class="grid items-center gap-14 lg:grid-cols-12">
        <div class="lg:col-span-5">
          <SectionHead
@@ -11,7 +11,7 @@ const STATS = [
 </script>

 <template>
-  <section class="relative" aria-label="آمار و دستاوردهای آریا ایمن">
+  <section class="relative" aria-label="آمار و دستاوردهای ایمن پیشگامان">
    <div class="grid grid-cols-2 gap-px border-y border-line bg-line lg:grid-cols-4">
      <div
        v-for="(s, i) in STATS"
@@ -5,7 +5,7 @@ import SectionHead from "~/components/ui/SectionHead.vue";

 const QUOTES = [
  {
-    text: "آریا ایمن فقط تأمین‌کننده نیست؛ شریک ایمنی ماست. بازرسی‌های دوره‌ای و آموزش‌های میدانی‌شان نرخ حوادث سایت را به کمترین رقم تاریخ مجموعه رساند.",
+    text: "ایمن پیشگامان فقط تأمین‌کننده نیست؛ شریک ایمنی ماست. بازرسی‌های دوره‌ای و آموزش‌های میدانی‌شان نرخ حوادث سایت را به کمترین رقم تاریخ مجموعه رساند.",
    name: "مهندس رضا کاظمی",
    role: "مدیر HSE — مجتمع پتروشیمی خلیج فارس",
  },