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>
95 lines
3.5 KiB
Vue
95 lines
3.5 KiB
Vue
<script setup lang="ts">
|
||
import { AnimatePresence, motion } from "motion-v";
|
||
import { Quote } from "lucide-vue-next";
|
||
import SectionHead from "~/components/ui/SectionHead.vue";
|
||
|
||
const QUOTES = [
|
||
{
|
||
text: "آریا ایمن فقط تأمین‌کننده نیست؛ شریک ایمنی ماست. بازرسی‌های دوره‌ای و آموزش‌های میدانی‌شان نرخ حوادث سایت را به کمترین رقم تاریخ مجموعه رساند.",
|
||
name: "مهندس رضا کاظمی",
|
||
role: "مدیر HSE — مجتمع پتروشیمی خلیج فارس",
|
||
},
|
||
{
|
||
text: "کیفیت تجهیزات و سرعت پاسخ‌گویی در سطحی بود که قرارداد سالانه را بدون هیچ تردیدی تمدید کردیم؛ از خط تولید تا دفتر مرکزی.",
|
||
name: "سارا محمدی",
|
||
role: "سرپرست تدارکات — هلدینگ ساختمانی آرکان",
|
||
},
|
||
{
|
||
text: "۱۴۰ کیلومتر دورتر از سایت، در عرض ۲۴ ساعت تجهیزات حیاتی را تحویل گرفتیم. به این می‌گویند شریک واقعی کاری.",
|
||
name: "امیرحسین راد",
|
||
role: "مدیر پروژه — صنایع معدنی کاوه",
|
||
},
|
||
];
|
||
|
||
const idx = ref(0);
|
||
const q = computed(() => QUOTES[idx.value]!);
|
||
let t: ReturnType<typeof setInterval> | undefined;
|
||
|
||
onMounted(() => {
|
||
t = setInterval(() => (idx.value = (idx.value + 1) % QUOTES.length), 7000);
|
||
});
|
||
onBeforeUnmount(() => clearInterval(t));
|
||
</script>
|
||
|
||
<template>
|
||
<section
|
||
aria-labelledby="testimonials-title"
|
||
class="relative overflow-hidden border-t border-line py-24 md:py-32"
|
||
>
|
||
<div class="absolute inset-0 bg-grid opacity-40" />
|
||
<div
|
||
class="pointer-events-none absolute -top-10 -end-10 select-none font-mono text-[18vw] font-bold leading-none text-outline opacity-50"
|
||
>
|
||
"
|
||
</div>
|
||
|
||
<div class="relative mx-auto max-w-4xl px-5 text-center md:px-8">
|
||
<SectionHead
|
||
heading-id="testimonials-title"
|
||
center
|
||
tag="۰۶ — اعتماد"
|
||
title="آنچه مشتریان ما می‌گویند"
|
||
/>
|
||
|
||
<div class="mt-14 flex min-h-[320px] flex-col items-center md:min-h-[280px]">
|
||
<span
|
||
class="flex size-16 items-center justify-center rounded-full border border-accent/30 bg-accent/10"
|
||
>
|
||
<Quote class="size-7 text-accent" />
|
||
</span>
|
||
|
||
<AnimatePresence mode="wait">
|
||
<motion.blockquote
|
||
:key="idx"
|
||
:initial="{ opacity: 0, y: 26 }"
|
||
:animate="{ opacity: 1, y: 0 }"
|
||
:exit="{ opacity: 0, y: -26 }"
|
||
:transition="{ duration: 0.55, ease: EASE }"
|
||
class="mt-8"
|
||
>
|
||
<p class="text-xl font-bold leading-[2.1] text-ink/90 md:text-2xl md:leading-[2]">
|
||
«{{ q.text }}»
|
||
</p>
|
||
<footer class="mt-8">
|
||
<div class="text-lg font-black">{{ q.name }}</div>
|
||
<div class="mt-2 font-mono text-xs text-muted">{{ q.role }}</div>
|
||
</footer>
|
||
</motion.blockquote>
|
||
</AnimatePresence>
|
||
</div>
|
||
|
||
<div class="mt-12 flex items-center justify-center gap-3">
|
||
<button
|
||
v-for="(_, i) in QUOTES"
|
||
:key="i"
|
||
:aria-label="`نظر شماره ${faNum(i + 1)}`"
|
||
:class="`h-1.5 rounded-full transition-all duration-500 ${
|
||
i === idx ? 'w-12 bg-accent' : 'w-4 bg-line hover:bg-muted'
|
||
}`"
|
||
@click="idx = i"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</template>
|