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>
39 lines
1.5 KiB
Vue
39 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
import Reveal from "~/components/ui/Reveal.vue";
|
|
import CountUp from "./CountUp.vue";
|
|
|
|
const STATS = [
|
|
{ end: 18, suffix: "+", label: "سال تجربه در صنعت ایمنی", note: "SINCE 2007" },
|
|
{ end: 2400, suffix: "+", label: "کد کالای ایمنی", note: "PPE CATALOG" },
|
|
{ end: 850, suffix: "+", label: "مشتری سازمانی فعال", note: "B2B CLIENTS" },
|
|
{ end: 98, suffix: "٪", label: "رضایت مشتریان", note: "SATISFACTION" },
|
|
];
|
|
</script>
|
|
|
|
<template>
|
|
<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"
|
|
:key="s.label"
|
|
class="group relative bg-bg p-8 transition-colors duration-500 hover:bg-panel md:p-10"
|
|
>
|
|
<span
|
|
class="absolute end-5 top-5 font-mono text-[10px] tracking-[0.25em] text-muted/50 transition-colors duration-500 group-hover:text-accent/70"
|
|
>
|
|
{{ s.note }}
|
|
</span>
|
|
<Reveal :delay="i * 0.08">
|
|
<div class="text-4xl font-black md:text-6xl">
|
|
<CountUp :end="s.end" :suffix="s.suffix" />
|
|
</div>
|
|
<div class="mt-3 text-sm text-muted">{{ s.label }}</div>
|
|
</Reveal>
|
|
<span
|
|
class="absolute bottom-0 start-0 h-0.5 w-0 bg-accent transition-all duration-500 group-hover:w-full"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|