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>
23 lines
740 B
Vue
23 lines
740 B
Vue
<script setup lang="ts">
|
|
import { AnimatePresence, motion } from "motion-v";
|
|
import { ArrowUp } from "lucide-vue-next";
|
|
|
|
const show = useScrolledPast(700);
|
|
</script>
|
|
|
|
<template>
|
|
<AnimatePresence>
|
|
<motion.a
|
|
v-if="show"
|
|
href="#home"
|
|
aria-label="بازگشت به بالا"
|
|
:initial="{ opacity: 0, y: 24 }"
|
|
:animate="{ opacity: 1, y: 0 }"
|
|
:exit="{ opacity: 0, y: 24 }"
|
|
class="fixed bottom-6 left-6 z-[70] flex size-12 items-center justify-center rounded-full border border-line bg-panel/90 text-ink shadow-[0_10px_40px_rgba(0,0,0,0.5)] backdrop-blur transition-colors hover:border-accent hover:text-accent"
|
|
>
|
|
<ArrowUp class="size-5" />
|
|
</motion.a>
|
|
</AnimatePresence>
|
|
</template>
|