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>
36 lines
1.1 KiB
Vue
36 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import { ShieldCheck } from "lucide-vue-next";
|
|
|
|
const ITEMS = [
|
|
"ISO 9001:2015",
|
|
"CE CERTIFIED",
|
|
"گارانتی اصالت کالا",
|
|
"تحویل سراسری کشوری",
|
|
"مشاوره و بازرسی تخصصی رایگان",
|
|
"EN STANDARDS",
|
|
"پشتیبانی ۲۴/۷ قراردادهای سازمانی",
|
|
"تست نمونه قبل از خرید",
|
|
];
|
|
</script>
|
|
|
|
<template>
|
|
<section aria-hidden="true" class="pointer-events-none relative z-20 overflow-hidden py-10">
|
|
<div class="-rotate-[1.6deg] scale-[1.04]">
|
|
<div class="hazard h-2.5" />
|
|
<div dir="ltr" class="overflow-hidden bg-hazard py-3.5 text-bg">
|
|
<div class="animate-marquee flex w-max">
|
|
<span
|
|
v-for="(item, i) in [...ITEMS, ...ITEMS]"
|
|
:key="i"
|
|
class="flex items-center gap-7 px-7 text-sm font-extrabold whitespace-nowrap"
|
|
>
|
|
{{ item }}
|
|
<ShieldCheck class="size-4 shrink-0" :stroke-width="2.5" />
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="hazard h-2.5" />
|
|
</div>
|
|
</section>
|
|
</template>
|