612 lines
15 KiB
Text
612 lines
15 KiB
Text
---
|
||
import Layout from '@layouts/Layout.astro';
|
||
import Button from '@components/base/Button.astro';
|
||
import { SITE_URL } from '@constants';
|
||
|
||
const breadcrumbs = [
|
||
{ label: 'Главная', href: '/' },
|
||
{ label: 'Страница не найдена' },
|
||
];
|
||
---
|
||
|
||
<Layout
|
||
title="Страница не найдена — 404"
|
||
description="Запрашиваемая страница не найдена. Вернитесь на главную или перейдите к услугам."
|
||
canonicalLink={`${SITE_URL}404`}
|
||
breadcrumbs={breadcrumbs}
|
||
>
|
||
<section class="not-found-section">
|
||
<!-- Анимированные фоновые элементы -->
|
||
<div class="floating-elements">
|
||
<div class="floating-shape shape-1"></div>
|
||
<div class="floating-shape shape-2"></div>
|
||
<div class="floating-shape shape-3"></div>
|
||
<div class="floating-shape shape-4"></div>
|
||
<div class="floating-shape shape-5"></div>
|
||
</div>
|
||
|
||
<div class="site-container not-found-content">
|
||
<!-- Анимированная цифра 404 -->
|
||
<div class="error-code animate-fade-in" data-delay="200">
|
||
<span class="error-digit digit-1">4</span>
|
||
<span class="error-digit digit-2">0</span>
|
||
<span class="error-digit digit-3">4</span>
|
||
</div>
|
||
|
||
<!-- Светящийся эффект -->
|
||
<div class="glow-effect"></div>
|
||
|
||
<!-- Заголовок и описание -->
|
||
<h1 class="error-title animate-fade-in" data-delay="400">
|
||
Упс! Страница <span class="text-gold">не найдена</span>
|
||
</h1>
|
||
|
||
<p class="error-description animate-fade-in" data-delay="600">
|
||
Похоже, мы свернули не на тот поворот. Запрашиваемая страница могла быть удалена,
|
||
переименована или временно недоступна. Давайте вернёмся на правильный маршрут!
|
||
</p>
|
||
|
||
<!-- Предупреждающий знак -->
|
||
<div class="warning-sign animate-fade-in" data-delay="800">
|
||
<div class="warning-triangle">
|
||
<svg viewBox="0 0 100 90" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M50 10L90 80H10L50 10Z" stroke="currentColor" stroke-width="3" stroke-linejoin="round"/>
|
||
<line x1="50" y1="35" x2="50" y2="55" stroke="currentColor" stroke-width="4" stroke-linecap="round"/>
|
||
<circle cx="50" cy="67" r="3" fill="currentColor"/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Кнопки действий -->
|
||
<div class="error-actions animate-fade-in" data-delay="1000">
|
||
<Button variant="gold" size="lg" href="/">
|
||
<span class="btn-content">
|
||
<svg class="btn-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
|
||
<polyline points="9 22 9 12 15 12 15 22"></polyline>
|
||
</svg>
|
||
На главную
|
||
</span>
|
||
</Button>
|
||
<Button variant="outline" size="lg" href="/services" class="btn-services">
|
||
<span class="btn-content">
|
||
<svg class="btn-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<circle cx="12" cy="12" r="10"></circle>
|
||
<polyline points="12 6 12 12 16 14"></polyline>
|
||
</svg>
|
||
Наши услуги
|
||
</span>
|
||
</Button>
|
||
</div>
|
||
|
||
<!-- Дополнительная помощь -->
|
||
<div class="additional-help animate-fade-in" data-delay="1200">
|
||
<p class="help-text">Или свяжитесь с нами для консультации:</p>
|
||
<a href="tel:+79222538375" class="phone-link">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
|
||
</svg>
|
||
+7 (922) 253-83-75
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</Layout>
|
||
|
||
<script>
|
||
// Анимация при загрузке страницы
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
const animatedElements = document.querySelectorAll('.animate-fade-in');
|
||
|
||
animatedElements.forEach((el) => {
|
||
const delay = parseInt((el as HTMLElement).dataset.delay || '0');
|
||
|
||
setTimeout(() => {
|
||
el.classList.add('is-visible');
|
||
}, delay);
|
||
});
|
||
});
|
||
|
||
// Для Astro View Transitions
|
||
document.addEventListener('astro:page-load', () => {
|
||
const animatedElements = document.querySelectorAll('.animate-fade-in');
|
||
|
||
animatedElements.forEach((el) => {
|
||
const delay = parseInt((el as HTMLElement).dataset.delay || '0');
|
||
|
||
setTimeout(() => {
|
||
el.classList.add('is-visible');
|
||
}, delay);
|
||
});
|
||
});
|
||
</script>
|
||
|
||
<style>
|
||
.not-found-section {
|
||
position: relative;
|
||
width: 100%;
|
||
min-height: calc(100vh - 300px);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: linear-gradient(135deg, #0a2540 0%, #1e3a5f 50%, #0a2540 100%);
|
||
padding: 4rem 1rem;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* ===== ПЛАВАЮЩИЕ ФОНОВЫЕ ЭЛЕМЕНТЫ ===== */
|
||
.floating-elements {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
pointer-events: none;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.floating-shape {
|
||
position: absolute;
|
||
border-radius: 50%;
|
||
opacity: 0.1;
|
||
animation: float 20s ease-in-out infinite;
|
||
}
|
||
|
||
.shape-1 {
|
||
width: 300px;
|
||
height: 300px;
|
||
background: linear-gradient(135deg, #eac26e, #f5d799);
|
||
top: 10%;
|
||
left: -5%;
|
||
animation-delay: 0s;
|
||
animation-duration: 25s;
|
||
}
|
||
|
||
.shape-2 {
|
||
width: 200px;
|
||
height: 200px;
|
||
background: linear-gradient(135deg, #ffffff, #e5e5e5);
|
||
top: 60%;
|
||
right: 10%;
|
||
animation-delay: 2s;
|
||
animation-duration: 20s;
|
||
}
|
||
|
||
.shape-3 {
|
||
width: 150px;
|
||
height: 150px;
|
||
background: linear-gradient(135deg, #eac26e, #d4a843);
|
||
bottom: 10%;
|
||
left: 20%;
|
||
animation-delay: 4s;
|
||
animation-duration: 22s;
|
||
}
|
||
|
||
.shape-4 {
|
||
width: 250px;
|
||
height: 250px;
|
||
background: linear-gradient(135deg, #ffffff, #f0f0f0);
|
||
top: 20%;
|
||
right: -5%;
|
||
animation-delay: 6s;
|
||
animation-duration: 28s;
|
||
}
|
||
|
||
.shape-5 {
|
||
width: 180px;
|
||
height: 180px;
|
||
background: linear-gradient(135deg, #eac26e, #f5d799);
|
||
bottom: 20%;
|
||
right: 30%;
|
||
animation-delay: 8s;
|
||
animation-duration: 24s;
|
||
}
|
||
|
||
@keyframes float {
|
||
0%, 100% {
|
||
transform: translate(0, 0) rotate(0deg) scale(1);
|
||
}
|
||
25% {
|
||
transform: translate(30px, -40px) rotate(90deg) scale(1.1);
|
||
}
|
||
50% {
|
||
transform: translate(-20px, -80px) rotate(180deg) scale(0.95);
|
||
}
|
||
75% {
|
||
transform: translate(-40px, -40px) rotate(270deg) scale(1.05);
|
||
}
|
||
}
|
||
|
||
/* ===== ОСНОВНОЙ КОНТЕНТ ===== */
|
||
.not-found-content {
|
||
position: relative;
|
||
z-index: 2;
|
||
text-align: center;
|
||
max-width: 900px;
|
||
}
|
||
|
||
/* ===== АНИМАЦИЯ ПОЯВЛЕНИЯ ===== */
|
||
.animate-fade-in {
|
||
opacity: 0;
|
||
transform: translateY(30px);
|
||
transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
|
||
transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
|
||
.animate-fade-in.is-visible {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
/* ===== ЦИФРА 404 ===== */
|
||
.error-code {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
margin-bottom: 2rem;
|
||
position: relative;
|
||
}
|
||
|
||
.error-digit {
|
||
font-size: clamp(6rem, 15vw, 12rem);
|
||
font-weight: 900;
|
||
color: transparent;
|
||
background: linear-gradient(180deg, #ffffff 0%, #eac26e 100%);
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
line-height: 1;
|
||
position: relative;
|
||
animation: digitGlow 3s ease-in-out infinite;
|
||
text-shadow: 0 0 40px rgba(234, 194, 110, 0.5);
|
||
}
|
||
|
||
.digit-1 {
|
||
animation-delay: 0s;
|
||
}
|
||
|
||
.digit-2 {
|
||
animation-delay: 0.3s;
|
||
}
|
||
|
||
.digit-3 {
|
||
animation-delay: 0.6s;
|
||
}
|
||
|
||
@keyframes digitGlow {
|
||
0%, 100% {
|
||
filter: drop-shadow(0 0 20px rgba(234, 194, 110, 0.6));
|
||
transform: translateY(0);
|
||
}
|
||
50% {
|
||
filter: drop-shadow(0 0 40px rgba(234, 194, 110, 1));
|
||
transform: translateY(-10px);
|
||
}
|
||
}
|
||
|
||
/* ===== СВЕЧЕНИЕ ===== */
|
||
.glow-effect {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 400px;
|
||
height: 400px;
|
||
background: radial-gradient(circle, rgba(234, 194, 110, 0.3) 0%, transparent 70%);
|
||
border-radius: 50%;
|
||
animation: glowPulse 4s ease-in-out infinite;
|
||
pointer-events: none;
|
||
z-index: -1;
|
||
}
|
||
|
||
@keyframes glowPulse {
|
||
0%, 100% {
|
||
opacity: 0.5;
|
||
transform: translate(-50%, -50%) scale(1);
|
||
}
|
||
50% {
|
||
opacity: 0.8;
|
||
transform: translate(-50%, -50%) scale(1.2);
|
||
}
|
||
}
|
||
|
||
/* ===== ЗАГОЛОВОК И ОПИСАНИЕ ===== */
|
||
.error-title {
|
||
font-size: clamp(1.8rem, 4vw, 3rem);
|
||
font-weight: 800;
|
||
color: #ffffff;
|
||
margin: 0 0 1.5rem 0;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.error-title .text-gold {
|
||
color: #eac26e;
|
||
position: relative;
|
||
display: inline-block;
|
||
}
|
||
|
||
.error-title .text-gold::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -4px;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 3px;
|
||
background: linear-gradient(90deg, transparent, #eac26e, transparent);
|
||
animation: underlineGlow 2s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes underlineGlow {
|
||
0%, 100% {
|
||
opacity: 0.5;
|
||
}
|
||
50% {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
.error-description {
|
||
font-size: clamp(1rem, 2vw, 1.25rem);
|
||
color: rgba(255, 255, 255, 0.85);
|
||
line-height: 1.6;
|
||
margin: 0 auto 3rem;
|
||
max-width: 700px;
|
||
}
|
||
|
||
/* ===== ПРЕДУПРЕЖДАЮЩИЙ ЗНАК ===== */
|
||
.warning-sign {
|
||
margin-bottom: 3rem;
|
||
}
|
||
|
||
.warning-triangle {
|
||
display: inline-block;
|
||
color: #eac26e;
|
||
animation: warningPulse 2s ease-in-out infinite;
|
||
}
|
||
|
||
.warning-triangle svg {
|
||
width: 60px;
|
||
height: 54px;
|
||
filter: drop-shadow(0 5px 15px rgba(234, 194, 110, 0.5));
|
||
}
|
||
|
||
@keyframes warningPulse {
|
||
0%, 100% {
|
||
transform: scale(1);
|
||
opacity: 0.8;
|
||
}
|
||
50% {
|
||
transform: scale(1.1);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
/* ===== КНОПКИ ===== */
|
||
.error-actions {
|
||
display: flex;
|
||
gap: 1.5rem;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 3rem;
|
||
}
|
||
|
||
.error-actions > * {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.btn-content {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.btn-icon {
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* Кастомные стили для кнопки "Наши услуги" */
|
||
.btn-services {
|
||
background: transparent !important;
|
||
border: 2px solid #ffffff !important;
|
||
color: #ffffff !important;
|
||
padding: 0.875rem 1.5rem !important;
|
||
font-size: 1.125rem !important;
|
||
line-height: 1.75rem !important;
|
||
position: relative;
|
||
overflow: hidden;
|
||
z-index: 1;
|
||
height: auto !important;
|
||
min-height: 3.25rem !important;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.btn-services::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: -100%;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
||
transition: left 0.5s ease;
|
||
z-index: -1;
|
||
}
|
||
|
||
.btn-services::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 0;
|
||
height: 100%;
|
||
background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.2));
|
||
transition: width 0.4s ease;
|
||
z-index: -1;
|
||
}
|
||
|
||
.btn-services:hover {
|
||
background: rgba(255, 255, 255, 0.1) !important;
|
||
border-color: #eac26e !important;
|
||
color: #eac26e !important;
|
||
transform: translateY(-3px);
|
||
box-shadow: 0 8px 25px rgba(234, 194, 110, 0.3);
|
||
}
|
||
|
||
.btn-services:hover::before {
|
||
left: 100%;
|
||
}
|
||
|
||
.btn-services:hover::after {
|
||
width: 100%;
|
||
}
|
||
|
||
.btn-services:active {
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 4px 15px rgba(234, 194, 110, 0.2);
|
||
}
|
||
|
||
/* ===== ДОПОЛНИТЕЛЬНАЯ ПОМОЩЬ ===== */
|
||
.additional-help {
|
||
text-align: center;
|
||
}
|
||
|
||
.help-text {
|
||
color: rgba(255, 255, 255, 0.7);
|
||
font-size: 1rem;
|
||
margin: 0 0 0.75rem 0;
|
||
}
|
||
|
||
.phone-link {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
color: #eac26e;
|
||
font-size: 1.25rem;
|
||
font-weight: 700;
|
||
text-decoration: none;
|
||
transition: all 0.3s ease;
|
||
position: relative;
|
||
}
|
||
|
||
.phone-link::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -4px;
|
||
left: 0;
|
||
width: 0;
|
||
height: 2px;
|
||
background: #eac26e;
|
||
transition: width 0.3s ease;
|
||
}
|
||
|
||
.phone-link:hover {
|
||
color: #f5d799;
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.phone-link:hover::after {
|
||
width: 100%;
|
||
}
|
||
|
||
.phone-link svg {
|
||
animation: phoneRing 2s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes phoneRing {
|
||
0%, 100% {
|
||
transform: rotate(0deg);
|
||
}
|
||
10% {
|
||
transform: rotate(15deg);
|
||
}
|
||
20% {
|
||
transform: rotate(-15deg);
|
||
}
|
||
30% {
|
||
transform: rotate(10deg);
|
||
}
|
||
40% {
|
||
transform: rotate(-10deg);
|
||
}
|
||
50% {
|
||
transform: rotate(0deg);
|
||
}
|
||
}
|
||
|
||
/* ===== АДАПТИВНОСТЬ ===== */
|
||
@media (max-width: 768px) {
|
||
.not-found-section {
|
||
min-height: calc(100vh - 250px);
|
||
padding: 3rem 1rem;
|
||
}
|
||
|
||
.error-code {
|
||
gap: 0.25rem;
|
||
}
|
||
|
||
.error-digit {
|
||
font-size: clamp(4rem, 18vw, 8rem);
|
||
}
|
||
|
||
.glow-effect {
|
||
width: 300px;
|
||
height: 300px;
|
||
}
|
||
|
||
.error-actions {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.error-actions > * {
|
||
width: 100%;
|
||
}
|
||
|
||
.warning-triangle svg {
|
||
width: 50px;
|
||
height: 45px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.not-found-section {
|
||
padding: 2rem 1rem;
|
||
}
|
||
|
||
.error-title {
|
||
font-size: clamp(1.5rem, 6vw, 2rem);
|
||
}
|
||
|
||
.error-description {
|
||
font-size: 1rem;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.phone-link {
|
||
font-size: 1.1rem;
|
||
}
|
||
}
|
||
|
||
/* Уважаем prefers-reduced-motion */
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.animate-fade-in {
|
||
opacity: 1;
|
||
transform: none;
|
||
transition: none;
|
||
}
|
||
|
||
.floating-shape,
|
||
.error-digit,
|
||
.glow-effect,
|
||
.warning-triangle,
|
||
.phone-link svg {
|
||
animation: none;
|
||
}
|
||
|
||
.error-title .text-gold::after {
|
||
animation: none;
|
||
opacity: 1;
|
||
}
|
||
}
|
||
</style>
|