S. EsmaeiliandClaude Opus 4.6
e31ef5a21f
Full 1:1 migration preserving all visuals, animations and behavior: - Nuxt 4 + Vue 3 (script setup, TypeScript strict) with SSG output - Tailwind CSS v4 with @tailwindcss/vite - Ant Design Vue 4 (dark theme, RTL, Persian locale) for design system - Pinia for state management (ui + contact stores) - motion-v (framer-motion port) for all animations - lucide-vue-next for icons - SEO improvements: og:image, canonical fix, real 404 page, JSON-LD services - JS bundle reduced from 302KB to 239KB gzip - Docker/nginx deployment preserved (out/ -> nginx) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
104 lines
4.5 KiB
Vue
104 lines
4.5 KiB
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-7xl 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>
|