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>
119 lines
4.3 KiB
Vue
119 lines
4.3 KiB
Vue
<script setup lang="ts">
|
||
import { AtSign, Globe, Phone, Send } from "lucide-vue-next";
|
||
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 = [
|
||
"کلاه ایمنی",
|
||
"دستکش ضدبرش",
|
||
"کفش ایمنی",
|
||
"عینک ایمنی",
|
||
"هارنس ضدسقوط",
|
||
"لباس کار بازتابنده",
|
||
];
|
||
|
||
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-7xl 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">
|
||
<a href="#products" class="text-sm text-muted transition-colors hover:text-ink">
|
||
{{ p }}
|
||
</a>
|
||
</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@ariaiman.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>
|