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>

app/components/layout/Footer.vue

@@ -1,24 +1,21 @@
 <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: "صنایع" },
+  { href: "/#home", label: "خانه" },
+  { href: "/#products", label: "محصولات" },
+  { href: "/#about", label: "درباره ما" },
+  { href: "/#services", label: "خدمات" },
+  { href: "/#standards", label: "استانداردها" },
+  { href: "/#industries", label: "صنایع" },
 ];
 
-const PRODUCT_LINKS = [
-  "کلاه ایمنی",
-  "دستکش ضدبرش",
-  "کفش ایمنی",
-  "عینک ایمنی",
-  "هارنس ضدسقوط",
-  "لباس کار بازتابنده",
-];
+const PRODUCT_LINKS = CATEGORIES.map((c) => ({
+  label: c.name,
+  href: `/categories/${c.slug}`,
+}));
 
 const SOCIALS = [
   { icon: Globe, label: "وب‌سایت" },
@@ -32,7 +29,7 @@ const SOCIALS = [
   <footer class="relative overflow-hidden border-t border-line">
     <div class="hazard h-2.5" />
 
-    <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="grid gap-12 py-16 md:grid-cols-12 md:py-20">
         <!-- brand -->
         <div class="md:col-span-5">
@@ -45,7 +42,7 @@ const SOCIALS = [
             <a
               v-for="s in SOCIALS"
               :key="s.label"
-              href="#contact"
+              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"
             >
@@ -70,10 +67,10 @@ const SOCIALS = [
         <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">
-              <a href="#products" class="text-sm text-muted transition-colors hover:text-ink">
-                {{ p }}
-              </a>
+            <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>
@@ -88,7 +85,7 @@ const SOCIALS = [
               خیابان فر، کوچه دوم، پلاک ۱۲
             </p>
             <p class="font-mono tracking-wider" dir="ltr">۰۲۱ - ۹۱ ۰۰ ۸۸ ۰۰</p>
-            <p class="font-mono tracking-wider" dir="ltr">info@ariaiman.ir</p>
+            <p class="font-mono tracking-wider" dir="ltr">info@imenpishgaman.ir</p>
             <p class="pt-2 text-xs leading-6">
               شنبه تا پنجشنبه — ۸:۰۰ تا ۱۷:۰۰
               <br />
@@ -101,14 +98,14 @@ const SOCIALS = [
       <!-- 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>© ۱۴۰۴ ایمن پیشگامان — تمامی حقوق محفوظ است.</div>
         <div class="font-mono text-[10px] tracking-[0.25em]">
           ISO 9001:2015 — CE CERTIFIED PPE SUPPLIER
         </div>

app/components/layout/Header.vue

@@ -4,13 +4,13 @@ import { Menu, Phone, X } from "lucide-vue-next";
 import Logo from "~/components/ui/Logo.vue";
 
 const LINKS = [
-  { href: "#home", label: "خانه" },
-  { href: "#products", label: "محصولات" },
-  { href: "#about", label: "درباره ما" },
-  { href: "#services", label: "خدمات" },
-  { href: "#standards", label: "استانداردها" },
-  { href: "#industries", label: "صنایع" },
-  { href: "#contact", label: "تماس" },
+  { href: "/#home", label: "خانه" },
+  { href: "/#products", label: "محصولات" },
+  { href: "/#about", label: "درباره ما" },
+  { href: "/#services", label: "خدمات" },
+  { href: "/#standards", label: "استانداردها" },
+  { href: "/#industries", label: "صنایع" },
+  { href: "/#contact", label: "تماس" },
 ];
 
 const ui = useUiStore();
@@ -37,7 +37,7 @@ onBeforeUnmount(() => {
       scrolled ? 'border-b border-line bg-bg/85 py-3 backdrop-blur-xl' : 'py-5'
     }`"
   >
-    <div class="mx-auto flex max-w-7xl items-center justify-between px-5 md:px-8">
+    <div class="mx-auto flex max-w-[1480px] items-center justify-between px-5 md:px-8">
       <Logo />
 
       <nav class="hidden items-center gap-7 lg:flex">
@@ -65,7 +65,7 @@ onBeforeUnmount(() => {
         </div>
 
         <a
-          href="#contact"
+          href="/#contact"
           class="hidden items-center gap-2 rounded-full bg-accent px-5 py-2.5 text-sm font-bold text-bg transition-all duration-300 hover:bg-accent-soft hover:shadow-[0_0_30px_rgba(255,90,0,0.4)] md:flex"
         >
           <Phone class="size-4" />

app/components/layout/Preloader.vue

@@ -54,7 +54,7 @@ const step = computed(
         <ShieldCheck class="size-7" />
       </span>
       <span class="font-mono text-xs tracking-[0.35em] text-muted">
-        ARIA IMEN CO.
+        IMEN PISHGAMAN CO.
       </span>
     </div>
 

app/components/sections/About.vue

@@ -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"

app/components/sections/Contact.vue

@@ -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>

app/components/sections/Hero.vue

@@ -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"

app/components/sections/Industries.vue

@@ -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="۰۵ — صنایع"

app/components/sections/Products.vue

@@ -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">

app/components/sections/Services.vue

@@ -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>
           فراتر از تأمین؛

app/components/sections/Standards.vue

@@ -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

app/components/sections/Stats.vue

@@ -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"

app/components/sections/Testimonials.vue

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

app/components/ui/ImagePlaceholder.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { ImageOff } from "lucide-vue-next";
+
+withDefaults(
+  defineProps<{
+    label?: string;
+    aspectClass?: string;
+  }>(),
+  {
+    label: "تصویر محصول",
+    aspectClass: "aspect-[4/3]",
+  },
+);
+</script>
+
+<template>
+  <div
+    :class="`flex flex-col items-center justify-center border border-dashed border-line bg-panel ${aspectClass}`"
+  >
+    <ImageOff class="size-10 text-muted/30" />
+    <span class="mt-2 font-mono text-[10px] tracking-wider text-muted/40">{{ label }}</span>
+  </div>
+</template>

app/components/ui/Logo.vue

@@ -1,19 +1,24 @@
 <script setup lang="ts">
-import { ShieldCheck } from "lucide-vue-next";
 </script>
 
 <template>
-  <a href="#home" class="flex items-center gap-3" aria-label="آریا ایمن">
+  <NuxtLink to="/" class="flex items-center gap-3" aria-label="ایمن پیشگامان">
     <span
-      class="flex size-10 items-center justify-center rounded-xl bg-accent text-bg shadow-[0_0_28px_rgba(255,90,0,0.35)]"
+      class="flex size-10 items-center justify-center rounded-xl bg-white shadow-[0_0_28px_rgba(10,30,92,0.45)]"
     >
-      <ShieldCheck class="size-6" />
+      <img
+        src="/images/logo.png"
+        alt="ایمن پیشگامان"
+        width="28"
+        height="28"
+        class="size-7 object-contain"
+      />
     </span>
     <span class="leading-tight">
-      <span class="block text-lg font-black">آریا ایمن</span>
+      <span class="block text-lg font-black">ایمن پیشگامان</span>
       <span class="block font-mono text-[9px] tracking-[0.32em] text-muted">
-        ARIA IMEN CO.
+        IMEN PISHGAMAN CO.
       </span>
     </span>
-  </a>
+  </NuxtLink>
 </template>