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>
38 lines
1.4 KiB
Vue
38 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import type { NuxtError } from "#app";
|
|
import { ShieldAlert } from "lucide-vue-next";
|
|
|
|
const props = defineProps<{ error: NuxtError }>();
|
|
const notFound = computed(() => props.error.statusCode === 404);
|
|
|
|
useSiteSeo();
|
|
useHead({ title: () => (notFound.value ? "صفحه پیدا نشد" : "خطا") });
|
|
useSeoMeta({ robots: "noindex, follow" });
|
|
|
|
const goHome = () => clearError({ redirect: "/" });
|
|
</script>
|
|
|
|
<template>
|
|
<main class="flex min-h-screen flex-col items-center justify-center px-5 text-center">
|
|
<div class="hazard absolute inset-x-0 top-0 h-2.5" />
|
|
<ShieldAlert class="size-16 text-accent" />
|
|
<h1 class="mt-8 text-4xl font-black md:text-6xl">
|
|
{{ notFound ? "صفحه مورد نظر پیدا نشد" : "خطایی رخ داد" }}
|
|
</h1>
|
|
<p class="mt-5 max-w-md leading-8 text-muted">
|
|
{{
|
|
notFound
|
|
? "ممکن است آدرس اشتباه وارد شده باشد یا این صفحه جابهجا شده باشد."
|
|
: "لطفاً چند لحظه بعد دوباره تلاش کنید."
|
|
}}
|
|
</p>
|
|
<a
|
|
href="/"
|
|
class="mt-9 inline-flex items-center gap-2.5 rounded-full bg-accent px-7 py-4 font-bold text-bg transition-all duration-300 hover:bg-accent-soft"
|
|
@click.prevent="goHome"
|
|
>
|
|
بازگشت به صفحه اصلی
|
|
</a>
|
|
</main>
|
|
</template>
|