121 lines
4.2 KiB
TypeScript
121 lines
4.2 KiB
TypeScript
import { Link } from 'react-router-dom';
|
||
|
||
export default function NotFound() {
|
||
return (
|
||
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100">
|
||
<div className="max-w-2xl w-full mx-auto px-6 py-12 text-center">
|
||
{/* 404 число */}
|
||
<div className="mb-8">
|
||
<h1 className="text-9xl font-bold text-indigo-600 animate-bounce">
|
||
404
|
||
</h1>
|
||
</div>
|
||
|
||
{/* Иконка */}
|
||
<div className="mb-8">
|
||
<svg
|
||
className="w-32 h-32 mx-auto text-indigo-400"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth={2}
|
||
d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
|
||
{/* Текст */}
|
||
<h2 className="text-3xl font-bold text-gray-800 mb-4">
|
||
Страница не найдена
|
||
</h2>
|
||
<p className="text-lg text-gray-600 mb-8">
|
||
К сожалению, запрашиваемая страница не существует или была перемещена.
|
||
</p>
|
||
|
||
{/* Кнопки */}
|
||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||
<Link
|
||
to="/"
|
||
className="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 transition-colors shadow-lg hover:shadow-xl"
|
||
>
|
||
<svg
|
||
className="w-5 h-5 mr-2"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth={2}
|
||
d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
|
||
/>
|
||
</svg>
|
||
На главную
|
||
</Link>
|
||
|
||
<button
|
||
onClick={() => window.history.back()}
|
||
className="inline-flex items-center justify-center px-6 py-3 border-2 border-indigo-600 text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50 transition-colors"
|
||
>
|
||
<svg
|
||
className="w-5 h-5 mr-2"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth={2}
|
||
d="M10 19l-7-7m0 0l7-7m-7 7h18"
|
||
/>
|
||
</svg>
|
||
Назад
|
||
</button>
|
||
</div>
|
||
|
||
{/* Дополнительные ссылки */}
|
||
<div className="mt-12 pt-8 border-t border-gray-300">
|
||
<p className="text-sm text-gray-500 mb-4">
|
||
Возможно, вы искали одну из этих страниц:
|
||
</p>
|
||
<div className="flex flex-wrap gap-3 justify-center">
|
||
<Link
|
||
to="/tariffs"
|
||
className="text-sm text-indigo-600 hover:text-indigo-800 hover:underline"
|
||
>
|
||
Тарифы
|
||
</Link>
|
||
<span className="text-gray-400">•</span>
|
||
<Link
|
||
to="/dashboard"
|
||
className="text-sm text-indigo-600 hover:text-indigo-800 hover:underline"
|
||
>
|
||
Личный кабинет
|
||
</Link>
|
||
<span className="text-gray-400">•</span>
|
||
<Link
|
||
to="/about"
|
||
className="text-sm text-indigo-600 hover:text-indigo-800 hover:underline"
|
||
>
|
||
О нас
|
||
</Link>
|
||
<span className="text-gray-400">•</span>
|
||
<a
|
||
href="mailto:support@ospab.host"
|
||
className="text-sm text-indigo-600 hover:text-indigo-800 hover:underline"
|
||
>
|
||
Поддержка
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|