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>
98 lines
4.1 KiB
Vue
98 lines
4.1 KiB
Vue
<script setup lang="ts">
|
||
import { FileSearch, ShieldCheck } from "lucide-vue-next";
|
||
import Reveal from "~/components/ui/Reveal.vue";
|
||
import SectionHead from "~/components/ui/SectionHead.vue";
|
||
|
||
const STANDARDS = [
|
||
{ code: "EN 397", label: "کلاه ایمنی صنعتی" },
|
||
{ code: "EN 388", label: "دستکش‌های مکانیکی" },
|
||
{ code: "EN 166", label: "محافظ چشم و صورت" },
|
||
{ code: "EN 361", label: "هارنس ضدسقوط" },
|
||
{ code: "ISO 20345", label: "کفش ایمنی" },
|
||
{ code: "ISO 9001", label: "سیستم مدیریت کیفیت" },
|
||
];
|
||
</script>
|
||
|
||
<template>
|
||
<section
|
||
id="standards"
|
||
aria-labelledby="standards-title"
|
||
class="relative overflow-hidden border-t border-line py-24 md:py-32"
|
||
>
|
||
<!-- watermark -->
|
||
<div
|
||
aria-hidden="true"
|
||
class="text-outline pointer-events-none absolute -bottom-14 -start-8 select-none font-mono text-[24vw] font-bold leading-none opacity-60"
|
||
>
|
||
CE
|
||
</div>
|
||
|
||
<div class="relative mx-auto max-w-7xl px-5 md:px-8">
|
||
<div class="grid items-center gap-14 lg:grid-cols-12">
|
||
<div class="lg:col-span-5">
|
||
<SectionHead
|
||
heading-id="standards-title"
|
||
tag="۰۴ — استانداردها"
|
||
desc="ما فقط تجهیزاتی را عرضه می‌کنیم که تأییدیه معتبر بین‌المللی و تست آزمایشگاهی داشته باشند؛ بدون استثنا."
|
||
>
|
||
<template #title>
|
||
مهرتأیید جهانی
|
||
<br />
|
||
روی هر محصول
|
||
</template>
|
||
</SectionHead>
|
||
<Reveal :delay="0.25">
|
||
<div class="mt-8 flex items-start gap-4 rounded-xl border border-accent/25 bg-accent/5 p-5">
|
||
<FileSearch class="size-6 shrink-0 text-accent" />
|
||
<p class="text-sm leading-8 text-ink/80">
|
||
شماره سریال تمام محصولات در پایگاه داده استانداردهای اروپا
|
||
قابل استعلام است و گواهی تست هر بچ تحویل مشتری می‌شود.
|
||
</p>
|
||
</div>
|
||
</Reveal>
|
||
<Reveal :delay="0.35">
|
||
<a
|
||
href="#contact"
|
||
class="group mt-8 inline-flex items-center gap-2.5 rounded-full border border-line px-6 py-3.5 text-sm font-bold transition-colors hover:border-accent hover:text-accent"
|
||
>
|
||
<ShieldCheck class="size-4 text-accent" />
|
||
درخواست گواهی تست محصولات
|
||
</a>
|
||
</Reveal>
|
||
</div>
|
||
|
||
<div class="grid gap-4 sm:grid-cols-2 lg:col-span-7 xl:grid-cols-3">
|
||
<Reveal v-for="(s, i) in STANDARDS" :key="s.code" :delay="i * 0.06">
|
||
<div
|
||
data-hover
|
||
class="group relative h-full border border-line bg-panel/50 p-6 text-center transition-all duration-500 hover:-translate-y-1.5 hover:border-accent/50 hover:bg-panel"
|
||
>
|
||
<span class="absolute end-3 top-3 font-mono text-[9px] tracking-[0.2em] text-muted/50">
|
||
CERT
|
||
</span>
|
||
<div
|
||
class="mx-auto flex size-24 items-center justify-center rounded-full border border-dashed border-ink/20 transition-all duration-500 group-hover:rotate-12 group-hover:border-accent/60"
|
||
>
|
||
<div>
|
||
<div
|
||
class="font-mono text-base font-bold text-ink transition-colors duration-300 group-hover:text-accent"
|
||
>
|
||
{{ s.code }}
|
||
</div>
|
||
<div
|
||
class="mx-auto mt-1.5 h-px w-8 bg-line transition-colors duration-300 group-hover:bg-accent/50"
|
||
/>
|
||
<div class="mt-1.5 font-mono text-[8px] tracking-[0.25em] text-muted">
|
||
EURO NORM
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mt-4 text-sm font-medium text-ink/85">{{ s.label }}</div>
|
||
</div>
|
||
</Reveal>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</template>
|