imen_pishghaman/app/components/sections/About.vue

<script setup lang="ts">
import { Globe, Headset, Users } from "lucide-vue-next";
import Reveal from "~/components/ui/Reveal.vue";
import SectionHead from "~/components/ui/SectionHead.vue";

const TIMELINE = [
  { year: "۱۳۸۶", text: "تأسیس ایمن پیشگامان در تهران با تمرکز بر تجهیزات حفاظت فردی" },
  { year: "۱۳۹۲", text: "توسعه شبکه توزیع به تمام ۳۱ استان کشور" },
  { year: "۱۳۹۸", text: "راه‌اندازی آزمایشگاه کنترل کیفیت و تست تجهیزات" },
  { year: "۱۴۰۲", text: "افتتاح مرکز تخصصی آموزش و بازرسی HSE" },
];

const FEATURES = [
  { icon: Globe, label: "نماینده رسمی ۴۰+ برند جهانی" },
  { icon: Users, label: "تیم مهندسی و بازرسی HSE" },
  { icon: Headset, label: "پشتیبانی ۲۴/۷ قراردادها" },
];
</script>

<template>
  <section
    id="about"
    aria-labelledby="about-title"
    class="relative overflow-hidden border-t border-line py-24 md:py-32"
  >
    <div class="absolute inset-0 bg-grid-fine opacity-50" />

    <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="انبار تجهیزات ایمنی ایمن پیشگامان"
              width="800"
              height="600"
              loading="lazy"
              decoding="async"
              class="aspect-[4/3] w-full object-cover"
            />
            <div class="absolute inset-0 bg-gradient-to-t from-bg/80 via-transparent to-transparent" />
            <div
              class="absolute bottom-5 start-5 flex items-center gap-4 rounded-xl border border-line bg-bg/80 px-5 py-4 backdrop-blur-md"
            >
              <span class="font-mono text-3xl font-bold text-accent">۱۸+</span>
              <span class="text-xs leading-5 text-muted">
                سال حفاظت از
                <br />
                جان نیروی کار
              </span>
            </div>
          </div>
          <div class="hazard absolute -top-3 -end-3 h-6 w-28 rounded-full opacity-90" />
        </Reveal>

        <!-- ---- text ---- -->
        <div class="order-1 lg:order-2">
          <SectionHead heading-id="about-title" tag="۰۲ — درباره ما">
            <template #title>
              ایمنی برای ما شعار نیست؛
              <br />
              <span class="text-accent">قرارداد است.</span>
            </template>
          </SectionHead>
          <Reveal :delay="0.2">
            <p class="mt-6 leading-9 text-muted">
              از سال ۱۳۸۶، زمانی که اولین کلاه ایمنی را به یک کارگاه کوچک در
              جنوب تهران فروختیم، باور ما همین یک جمله بود: پشت هر تجهیز
              ایمنی، یک خانواده هست که منتظر بازگشت عزیزش است. امروز با بیش
              از ۸۵۰ سازمان، از پالایشگاه‌ها تا معادن و سایت‌های ساختمانی، در
              کنار کسانی هستیم که ایمنی را یک خط قرمز می‌دانند.
            </p>
          </Reveal>

          <div class="mt-10 space-y-1">
            <Reveal v-for="(t, i) in TIMELINE" :key="t.year" :delay="0.25 + i * 0.07">
              <div
                class="group border-s-2 border-accent/30 ps-6 transition-colors duration-300 hover:border-accent"
              >
                <span class="font-mono text-sm font-bold text-accent">{{ t.year }}</span>
                <p class="mt-1 pb-5 text-sm leading-7 text-ink/75">{{ t.text }}</p>
              </div>
            </Reveal>
          </div>

          <Reveal :delay="0.5">
            <div class="mt-4 flex flex-wrap gap-3">
              <span
                v-for="f in FEATURES"
                :key="f.label"
                class="inline-flex items-center gap-2 rounded-full border border-line bg-panel/60 px-4 py-2 text-xs text-ink/80 transition-colors hover:border-accent/50 hover:text-ink"
              >
                <component :is="f.icon" class="size-4 text-accent" />
                {{ f.label }}
              </span>
            </div>
          </Reveal>
        </div>
      </div>
    </div>
  </section>
</template>