Переписаны компоенты главной страницы
This commit is contained in:
Web-serfer
parent
2b087c02b7
commit
284e37fa94
7 changed files with 320 additions and 227 deletions
|
|
@ -50,6 +50,19 @@ const {
|
|||
const showImage = layout === 'with-image' && sideImage;
|
||||
---
|
||||
|
||||
<!-- КРИТИЧНО: Инлайн-скрипт скрывает элементы ДО рендера, но только если JS работает -->
|
||||
<script is:inline>
|
||||
(function() {
|
||||
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
|
||||
|
||||
const style = document.createElement('style');
|
||||
style.textContent = '.animate-load{opacity:0;transform:translateY(30px)}' +
|
||||
'.hero-image-wrapper.animate-load{opacity:0;transform:translateX(50px) scale(0.95)}' +
|
||||
'.experience-badge.animate-load{opacity:0;transform:translateY(20px) scale(0.9)}';
|
||||
document.head.appendChild(style);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<section
|
||||
class="hero-section"
|
||||
style={`min-height: ${minHeight}; padding-top: ${headerOffset}; ${bgImage ? `background-image: url("${bgImage}")` : ''}`}
|
||||
|
|
@ -142,7 +155,6 @@ const showImage = layout === 'with-image' && sideImage;
|
|||
animatedElements.forEach((el) => {
|
||||
const delay = parseInt((el as HTMLElement).dataset.delay || '0');
|
||||
|
||||
// Используем requestAnimationFrame для лучшей производительности
|
||||
setTimeout(() => {
|
||||
requestAnimationFrame(() => {
|
||||
el.classList.add('is-visible');
|
||||
|
|
@ -220,10 +232,10 @@ const showImage = layout === 'with-image' && sideImage;
|
|||
max-width: 700px;
|
||||
}
|
||||
|
||||
/* --- АНИМАЦИИ ПРИ ЗАГРУЗКЕ --- */
|
||||
/* --- АНИМАЦИИ ПРИ ЗАГРУЗКЕ - ИСПРАВЛЕНО: opacity:1 по умолчанию --- */
|
||||
.animate-load {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
will-change: opacity, transform;
|
||||
|
|
@ -236,8 +248,8 @@ const showImage = layout === 'with-image' && sideImage;
|
|||
|
||||
/* Специальная анимация для изображения */
|
||||
.hero-image-wrapper.animate-load {
|
||||
opacity: 0;
|
||||
transform: translateX(50px) scale(0.95);
|
||||
opacity: 1;
|
||||
transform: translateX(0) scale(1);
|
||||
transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
transform 1s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
|
@ -249,8 +261,8 @@ const showImage = layout === 'with-image' && sideImage;
|
|||
|
||||
/* Анимация для бейджа опыта */
|
||||
.experience-badge.animate-load {
|
||||
opacity: 0;
|
||||
transform: translateY(20px) scale(0.9);
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
|
@ -281,7 +293,7 @@ const showImage = layout === 'with-image' && sideImage;
|
|||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Мерцающая точка - ИСПРАВЛЕНО: заменил box-shadow на opacity/transform */
|
||||
/* Мерцающая точка - оптимизированная анимация */
|
||||
.status-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
|
|
@ -317,7 +329,6 @@ const showImage = layout === 'with-image' && sideImage;
|
|||
stroke-width: 2 !important;
|
||||
}
|
||||
|
||||
/* Оптимизированная анимация pulse - только opacity и transform */
|
||||
@keyframes pulse-ring {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
|
|
@ -472,7 +483,7 @@ const showImage = layout === 'with-image' && sideImage;
|
|||
}
|
||||
|
||||
.hero-image-wrapper.animate-load {
|
||||
transform: translateY(40px) scale(0.95);
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
|
||||
.hero-image-wrapper.animate-load.is-visible {
|
||||
|
|
|
|||
|
|
@ -37,6 +37,19 @@ const {
|
|||
---
|
||||
|
||||
<section class="faq-section" id="faq">
|
||||
<!-- КРИТИЧНО: Инлайн-скрипт скрывает элементы ДО рендера, но только если JS работает -->
|
||||
<script is:inline>
|
||||
(function() {
|
||||
// Проверяем prefers-reduced-motion
|
||||
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
|
||||
|
||||
// Создаем стиль немедленно, чтобы избежать мигания (FOUC)
|
||||
const style = document.createElement('style');
|
||||
style.textContent = '.animate-on-scroll{opacity:0;transform:translateY(30px)}';
|
||||
document.head.appendChild(style);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<div class="site-container">
|
||||
<!-- Заголовок секции -->
|
||||
<div class="section-header">
|
||||
|
|
@ -180,18 +193,21 @@ const {
|
|||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Анимации при скроллинге */
|
||||
/*
|
||||
ИСПРАВЛЕНИЕ LCP:
|
||||
opacity: 1 по умолчанию!
|
||||
Если JS не загрузится - контент виден.
|
||||
Если JS загрузится - инлайн-скрипт выше добавит opacity:0 и анимация сработает.
|
||||
*/
|
||||
.animate-on-scroll {
|
||||
opacity: 0;
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
will-change: opacity, transform;
|
||||
}
|
||||
|
||||
[data-animation="fade-up"] {
|
||||
transform: translateY(40px);
|
||||
transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* Класс is-visible добавляется через JS при появлении в viewport */
|
||||
.animate-on-scroll.is-visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
|
|
@ -276,10 +292,6 @@ const {
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
/*
|
||||
КЛЮЧЕВОЕ ИЗМЕНЕНИЕ: ИСПОЛЬЗУЕМ GRID ВМЕСТО MAX-HEIGHT
|
||||
Это полностью устраняет дерганье и делает анимацию плавной
|
||||
*/
|
||||
.faq-answer {
|
||||
display: grid;
|
||||
grid-template-rows: 0fr;
|
||||
|
|
@ -290,7 +302,6 @@ const {
|
|||
grid-template-rows: 1fr;
|
||||
}
|
||||
|
||||
/* Внутренний контейнер для предотвращения сжатия содержимого */
|
||||
.answer-inner {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -362,9 +373,9 @@ const {
|
|||
/* Уважаем prefers-reduced-motion */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.animate-on-scroll {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
transition: none;
|
||||
opacity: 1 !important;
|
||||
transform: none !important;
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
.faq-item,
|
||||
|
|
@ -389,8 +400,8 @@ const {
|
|||
// Intersection Observer для анимаций при скроллинге
|
||||
const observerOptions = {
|
||||
root: null,
|
||||
rootMargin: '0px',
|
||||
threshold: 0.15
|
||||
rootMargin: '50px', // Немного раньше начинаем анимацию
|
||||
threshold: 0.1
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
|
|
@ -399,8 +410,11 @@ const {
|
|||
const el = entry.target as HTMLElement;
|
||||
const delay = parseInt(el.dataset.delay || '0');
|
||||
|
||||
// Используем requestAnimationFrame для плавности
|
||||
setTimeout(() => {
|
||||
el.classList.add('is-visible');
|
||||
requestAnimationFrame(() => {
|
||||
el.classList.add('is-visible');
|
||||
});
|
||||
}, delay);
|
||||
|
||||
observer.unobserve(el);
|
||||
|
|
@ -408,9 +422,18 @@ const {
|
|||
});
|
||||
}, observerOptions);
|
||||
|
||||
document.querySelectorAll('.animate-on-scroll').forEach((el) => {
|
||||
observer.observe(el);
|
||||
});
|
||||
// Инициализация после загрузки DOM
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
document.querySelectorAll('.animate-on-scroll').forEach((el) => {
|
||||
observer.observe(el);
|
||||
});
|
||||
});
|
||||
} else {
|
||||
document.querySelectorAll('.animate-on-scroll').forEach((el) => {
|
||||
observer.observe(el);
|
||||
});
|
||||
}
|
||||
|
||||
// Аккордеон FAQ - улучшенная версия
|
||||
document.querySelectorAll('[data-faq-toggle]').forEach((button) => {
|
||||
|
|
@ -419,7 +442,6 @@ const {
|
|||
const answer = faqItem?.querySelector('[data-faq-content]');
|
||||
const isExpanded = button.getAttribute('aria-expanded') === 'true';
|
||||
|
||||
// Если этот элемент уже открыт, просто закрываем его
|
||||
if (isExpanded) {
|
||||
faqItem?.classList.remove('active');
|
||||
button.setAttribute('aria-expanded', 'false');
|
||||
|
|
@ -427,7 +449,6 @@ const {
|
|||
return;
|
||||
}
|
||||
|
||||
// Закрываем все другие открытые элементы
|
||||
document.querySelectorAll('.faq-item.active').forEach((item) => {
|
||||
if (item !== faqItem) {
|
||||
item.classList.remove('active');
|
||||
|
|
@ -438,7 +459,6 @@ const {
|
|||
}
|
||||
});
|
||||
|
||||
// Открываем текущий
|
||||
faqItem?.classList.add('active');
|
||||
button.setAttribute('aria-expanded', 'true');
|
||||
answer?.classList.add('open');
|
||||
|
|
|
|||
|
|
@ -2,15 +2,35 @@
|
|||
import { reviewsData } from '@data/reviewsData';
|
||||
import ReviewCard from '@components/reviews/ReviewCard.astro';
|
||||
|
||||
// Берём 6 последних отзывов (сортируем по дате, берём последние)
|
||||
// Берём 6 последних отзывов
|
||||
const latestReviews = [...reviewsData]
|
||||
.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
|
||||
.slice(0, 6);
|
||||
|
||||
// Для эффекта бесконечности клонируем элементы (один набор в начало, один в конец)
|
||||
// Для эффекта бесконечности клонируем элементы
|
||||
const displayReviews = [...latestReviews, ...latestReviews, ...latestReviews];
|
||||
|
||||
// Функция для получения инициала из имени
|
||||
const getInitial = (name: string) => name.charAt(0).toUpperCase();
|
||||
|
||||
// Функция для получения цвета аватара (циклически из набора)
|
||||
const colors = ['#eac26e', '#22c55e', '#3b82f6', '#ef4444', '#8b5cf6', '#f59e0b'];
|
||||
const getColor = (index: number) => colors[index % colors.length];
|
||||
---
|
||||
|
||||
<!-- КРИТИЧНО: Скрипт скрывает элементы ДО рендера -->
|
||||
<script is:inline>
|
||||
(function() {
|
||||
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
|
||||
|
||||
const style = document.createElement('style');
|
||||
style.textContent = '.animate-on-scroll{opacity:0;transform:translateY(30px)}' +
|
||||
'[data-animation="scale-up"]{transform:translateY(40px) scale(0.95)}' +
|
||||
'[data-animation="fade-in"]{opacity:0;transform:none}';
|
||||
document.head.appendChild(style);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<section class="reviews-section py-16 bg-[#ffffff] overflow-hidden">
|
||||
<div class="site-container">
|
||||
<div class="section-header">
|
||||
|
|
@ -40,11 +60,11 @@ const displayReviews = [...latestReviews, ...latestReviews, ...latestReviews];
|
|||
car={review.car}
|
||||
text={review.text}
|
||||
rating={review.rating}
|
||||
initial={review.initial}
|
||||
color={review.color}
|
||||
date={review.date}
|
||||
votesCount={review.votesCount || 0}
|
||||
isHelpful={review.isHelpful || false}
|
||||
initial={getInitial(review.name)}
|
||||
color={getColor(index)}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
|
|
@ -69,33 +89,24 @@ const displayReviews = [...latestReviews, ...latestReviews, ...latestReviews];
|
|||
display: none;
|
||||
}
|
||||
|
||||
/* Карточка в слайдере — полностью сохраняет оригинальный дизайн ReviewCard */
|
||||
.card-item {
|
||||
scroll-snap-align: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* Центрирование карточки на мобильном */
|
||||
#sliderContainer {
|
||||
scroll-snap-type: x mandatory;
|
||||
}
|
||||
|
||||
#sliderTrack {
|
||||
scroll-snap-align: center;
|
||||
}
|
||||
|
||||
/* Убедимся, что карточка растягивается на всю ширину слайда */
|
||||
.card-item :global(.review-card) {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Уменьшаем имя для слайдера — влезает в одну строку */
|
||||
.card-item :global(.author-name) {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Заголовок секции */
|
||||
.section-header {
|
||||
margin-bottom: 4rem;
|
||||
text-align: center;
|
||||
|
|
@ -127,14 +138,14 @@ const displayReviews = [...latestReviews, ...latestReviews, ...latestReviews];
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
/* Анимации при скроллинге */
|
||||
/* ИСПРАВЛЕНИЕ LCP: opacity: 1 по умолчанию */
|
||||
.animate-on-scroll {
|
||||
opacity: 0;
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
will-change: opacity, transform;
|
||||
}
|
||||
|
||||
[data-animation="fade-up"] {
|
||||
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);
|
||||
}
|
||||
|
|
@ -144,7 +155,6 @@ const displayReviews = [...latestReviews, ...latestReviews, ...latestReviews];
|
|||
}
|
||||
|
||||
[data-animation="scale-up"] {
|
||||
transform: translateY(40px) scale(0.95);
|
||||
transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
|
@ -156,15 +166,14 @@ const displayReviews = [...latestReviews, ...latestReviews, ...latestReviews];
|
|||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.animate-on-scroll {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
transition: none;
|
||||
opacity: 1 !important;
|
||||
transform: none !important;
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// Intersection Observer для анимаций
|
||||
const setupAnimations = () => {
|
||||
const observerOptions = {
|
||||
root: null,
|
||||
|
|
@ -179,7 +188,9 @@ const displayReviews = [...latestReviews, ...latestReviews, ...latestReviews];
|
|||
const delay = parseInt(el.dataset.delay || '0');
|
||||
|
||||
setTimeout(() => {
|
||||
el.classList.add('is-visible');
|
||||
requestAnimationFrame(() => {
|
||||
el.classList.add('is-visible');
|
||||
});
|
||||
}, delay);
|
||||
|
||||
observer.unobserve(el);
|
||||
|
|
@ -194,12 +205,11 @@ const displayReviews = [...latestReviews, ...latestReviews, ...latestReviews];
|
|||
|
||||
const setupSlider = () => {
|
||||
const container = document.getElementById('sliderContainer');
|
||||
const track = document.getElementById('sliderTrack');
|
||||
const nextBtn = document.getElementById('nextBtn');
|
||||
const prevBtn = document.getElementById('prevBtn');
|
||||
const cards = document.querySelectorAll('.card-item');
|
||||
|
||||
if (!container || !track || !nextBtn || !prevBtn || cards.length === 0) return;
|
||||
if (!container || !nextBtn || !prevBtn || cards.length === 0) return;
|
||||
|
||||
const totalOriginal = cards.length / 3;
|
||||
const firstCard = cards[0] as HTMLElement;
|
||||
|
|
|
|||
|
|
@ -50,6 +50,18 @@ const {
|
|||
} = Astro.props;
|
||||
---
|
||||
|
||||
<!-- КРИТИЧНО: Инлайн-скрипт скрывает элементы ДО рендера, но только если JS работает -->
|
||||
<script is:inline>
|
||||
(function() {
|
||||
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
|
||||
|
||||
const style = document.createElement('style');
|
||||
style.textContent = '.animate-on-scroll{opacity:0;transform:translateY(30px)}' +
|
||||
'[data-animation="scale-up"]{opacity:0;transform:translateY(40px) scale(0.95)}';
|
||||
document.head.appendChild(style);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<section class="services-section" id="services">
|
||||
<div class="site-container">
|
||||
<!-- Заголовок секции -->
|
||||
|
|
@ -101,43 +113,6 @@ const {
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
// Intersection Observer для анимаций при скроллинге
|
||||
const observerOptions = {
|
||||
root: null,
|
||||
rootMargin: '0px 0px -50px 0px',
|
||||
threshold: 0.1
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const el = entry.target as HTMLElement;
|
||||
const delay = parseInt(el.dataset.delay || '0');
|
||||
|
||||
setTimeout(() => {
|
||||
el.classList.add('is-visible');
|
||||
|
||||
// Дополнительная анимация для иконки внутри карточки
|
||||
const icon = el.querySelector('.icon-emoji');
|
||||
if (icon) {
|
||||
setTimeout(() => {
|
||||
icon.classList.add('icon-bounce');
|
||||
}, 100);
|
||||
}
|
||||
}, delay);
|
||||
|
||||
observer.unobserve(el);
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
// Наблюдаем за всеми анимируемыми элементами
|
||||
document.querySelectorAll('.animate-on-scroll').forEach((el) => {
|
||||
observer.observe(el);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--color-primary: #1e3050;
|
||||
|
|
@ -190,22 +165,23 @@ const {
|
|||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
/* --- АНИМАЦИИ ПРИ СКРОЛЛИНГЕ --- */
|
||||
/* ИСПРАВЛЕНИЕ LCP: opacity: 1 по умолчанию! */
|
||||
.animate-on-scroll {
|
||||
opacity: 0;
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
will-change: opacity, transform;
|
||||
}
|
||||
|
||||
/* Fade Up - для заголовка */
|
||||
[data-animation="fade-up"] {
|
||||
transform: translateY(30px);
|
||||
transform: translateY(0);
|
||||
transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* Scale Up - для карточек */
|
||||
[data-animation="scale-up"] {
|
||||
transform: translateY(40px) scale(0.95);
|
||||
transform: translateY(0) scale(1);
|
||||
transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
|
@ -532,18 +508,17 @@ const {
|
|||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
/* На мобильных упрощаем анимации */
|
||||
[data-animation="scale-up"] {
|
||||
transform: translateY(30px) scale(0.98);
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* Уважаем prefers-reduced-motion */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.animate-on-scroll {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
transition: none;
|
||||
opacity: 1 !important;
|
||||
transform: none !important;
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
.icon-emoji.icon-bounce {
|
||||
|
|
@ -553,6 +528,41 @@ const {
|
|||
</style>
|
||||
|
||||
<script>
|
||||
// Intersection Observer для анимаций при скроллинге
|
||||
const observerOptions = {
|
||||
root: null,
|
||||
rootMargin: '0px 0px -50px 0px',
|
||||
threshold: 0.1
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const el = entry.target as HTMLElement;
|
||||
const delay = parseInt(el.dataset.delay || '0');
|
||||
|
||||
setTimeout(() => {
|
||||
requestAnimationFrame(() => {
|
||||
el.classList.add('is-visible');
|
||||
|
||||
const icon = el.querySelector('.icon-emoji');
|
||||
if (icon) {
|
||||
setTimeout(() => {
|
||||
icon.classList.add('icon-bounce');
|
||||
}, 100);
|
||||
}
|
||||
});
|
||||
}, delay);
|
||||
|
||||
observer.unobserve(el);
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
document.querySelectorAll('.animate-on-scroll').forEach((el) => {
|
||||
observer.observe(el);
|
||||
});
|
||||
|
||||
// Glow effect on mouse move
|
||||
document.querySelectorAll('.card').forEach((card) => {
|
||||
(card as HTMLElement).addEventListener('mousemove', (e: MouseEvent) => {
|
||||
|
|
|
|||
|
|
@ -40,6 +40,17 @@ const {
|
|||
} = Astro.props;
|
||||
---
|
||||
|
||||
<!-- КРИТИЧНО: Инлайн-скрипт скрывает элементы ДО рендера, но только если JS работает -->
|
||||
<script is:inline>
|
||||
(function() {
|
||||
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
|
||||
|
||||
const style = document.createElement('style');
|
||||
style.textContent = '.animate-on-scroll{opacity:0;transform:translateY(40px)}';
|
||||
document.head.appendChild(style);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<section class="steps-section" id="how-we-work">
|
||||
<div class="site-container">
|
||||
<!-- Заголовок секции -->
|
||||
|
|
@ -59,19 +70,16 @@ const {
|
|||
<div class="steps-container">
|
||||
{steps.map((step: Step, index: number) => (
|
||||
<div class="step-card-wrapper animate-on-scroll" data-animation="fade-up" data-delay={index * 100 + 200}>
|
||||
<!-- Вертикальный соединитель (только для мобильной версии, кроме первого элемента) -->
|
||||
{index > 0 && (
|
||||
<div class="mobile-connector mobile-only">
|
||||
<div class="mobile-connector-line"></div>
|
||||
<div class="mobile-connector-dot"></div>
|
||||
</div>
|
||||
<div class="mobile-connector mobile-only">
|
||||
<div class="mobile-connector-line"></div>
|
||||
<div class="mobile-connector-dot"></div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
<div class="step-card">
|
||||
<!-- Декоративный фон -->
|
||||
<div class="step-bg"></div>
|
||||
|
||||
<!-- Заголовок с номером и иконкой -->
|
||||
<div class="step-header">
|
||||
<div class="step-number">{step.number}</div>
|
||||
<div class="step-icon-wrapper">
|
||||
|
|
@ -82,7 +90,6 @@ const {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Контент -->
|
||||
<div class="step-content">
|
||||
<h3 class="step-title">{step.title}</h3>
|
||||
<p class="step-description">{step.description}</p>
|
||||
|
|
@ -146,7 +153,6 @@ const {
|
|||
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
||||
}
|
||||
|
||||
/* Декоративные элементы фона */
|
||||
.steps-section::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
|
|
@ -177,7 +183,6 @@ const {
|
|||
z-index: 2;
|
||||
}
|
||||
|
||||
/* Заголовок секции */
|
||||
.section-header {
|
||||
margin-bottom: 4rem;
|
||||
text-align: center;
|
||||
|
|
@ -226,14 +231,14 @@ const {
|
|||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* --- АНИМАЦИИ ПРИ СКРОЛЛИНГЕ --- */
|
||||
/* ИСПРАВЛЕНИЕ LCP: opacity: 1 по умолчанию! */
|
||||
.animate-on-scroll {
|
||||
opacity: 0;
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
will-change: opacity, transform;
|
||||
}
|
||||
|
||||
[data-animation="fade-up"] {
|
||||
transform: translateY(40px);
|
||||
transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
|
@ -243,7 +248,6 @@ const {
|
|||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Контейнер шагов */
|
||||
.steps-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
@ -258,7 +262,6 @@ const {
|
|||
position: relative;
|
||||
}
|
||||
|
||||
/* Вертикальный соединитель для мобильной версии (скрыт по умолчанию) */
|
||||
.mobile-connector {
|
||||
display: none;
|
||||
position: absolute;
|
||||
|
|
@ -288,7 +291,6 @@ const {
|
|||
box-shadow: 0 0 10px var(--color-accent);
|
||||
}
|
||||
|
||||
/* Карточка шага */
|
||||
.step-card {
|
||||
position: relative;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
|
|
@ -303,8 +305,6 @@ const {
|
|||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Убрана верхняя полоса внутри карточки */
|
||||
|
||||
.step-card:hover {
|
||||
transform: translateY(-8px);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
|
|
@ -328,7 +328,6 @@ const {
|
|||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Заголовок шага */
|
||||
.step-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -402,7 +401,6 @@ const {
|
|||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
/* Текст шага */
|
||||
.step-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
|
@ -422,7 +420,6 @@ const {
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
/* Статистика */
|
||||
.stats-bar {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
@ -465,7 +462,6 @@ const {
|
|||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* CTA кнопка */
|
||||
.steps-cta {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -515,7 +511,6 @@ const {
|
|||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
/* --- АДАПТИВНОСТЬ --- */
|
||||
@media (max-width: 1024px) {
|
||||
.steps-container {
|
||||
flex-direction: column;
|
||||
|
|
@ -531,7 +526,6 @@ const {
|
|||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Показываем вертикальные соединители */
|
||||
.mobile-connector {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -619,12 +613,11 @@ const {
|
|||
}
|
||||
}
|
||||
|
||||
/* Уважаем prefers-reduced-motion */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.animate-on-scroll {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
transition: none;
|
||||
opacity: 1 !important;
|
||||
transform: none !important;
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
.step-card,
|
||||
|
|
@ -651,7 +644,6 @@ const {
|
|||
const duration = 1500;
|
||||
const startTime = performance.now();
|
||||
|
||||
// Easing функция (ease-out cubic)
|
||||
const easeOutCubic = (t: number) => 1 - Math.pow(1 - t, 3);
|
||||
|
||||
function update(currentTime: number) {
|
||||
|
|
@ -679,11 +671,9 @@ const {
|
|||
setTimeout(() => {
|
||||
el.classList.add('is-visible');
|
||||
|
||||
// Если это stats-bar, запускаем анимацию счётчиков
|
||||
if (el.id === 'stats-bar') {
|
||||
const counters = el.querySelectorAll('.stat-number');
|
||||
counters.forEach((counter, index) => {
|
||||
// Небольшая задержка между счётчиками для каскадного эффекта
|
||||
setTimeout(() => {
|
||||
animateCounter(counter as HTMLElement);
|
||||
}, index * 150);
|
||||
|
|
@ -696,7 +686,6 @@ const {
|
|||
});
|
||||
}, observerOptions);
|
||||
|
||||
// Наблюдаем за всеми анимируемыми элементами
|
||||
document.querySelectorAll('.animate-on-scroll').forEach((el) => {
|
||||
observer.observe(el);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ const sectionData = {
|
|||
subtitle: "Почему мы?",
|
||||
title: "Локальная экспертиза в Сургуте",
|
||||
floatingText:
|
||||
"Знаем специфику судов Сургута и регламенты местной полиции изнутри.",
|
||||
"Знаем специфику судов Сургута и регламенты местной полиции изнутри.",
|
||||
imageUrl:
|
||||
"/images/home/dogovor.avif",
|
||||
};
|
||||
|
|
@ -28,25 +28,42 @@ const features = [
|
|||
];
|
||||
---
|
||||
|
||||
<!-- КРИТИЧНО: Инлайн-скрипт скрывает элементы ДО рендера, но только если JS работает -->
|
||||
<script is:inline>
|
||||
(function() {
|
||||
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
|
||||
|
||||
const style = document.createElement('style');
|
||||
style.textContent = '.animate-on-scroll{opacity:0}' +
|
||||
'[data-animation="fade-in"]{opacity:0}' +
|
||||
'[data-animation="fade-up"]{opacity:0;transform:translateY(30px)}' +
|
||||
'[data-animation="slide-up"]{opacity:0;transform:translateY(40px)}' +
|
||||
'[data-animation="slide-right"]{opacity:0;transform:translateX(-40px)}' +
|
||||
'[data-animation="scale-in"]{opacity:0;transform:scale(0.95)}' +
|
||||
'[data-animation="stagger-item"]{opacity:0;transform:translateX(-30px)}';
|
||||
document.head.appendChild(style);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<section class="why-us-section" id="why-us">
|
||||
<div class="site-container">
|
||||
<!-- Левая колонка: Изображение -->
|
||||
<div class="image-column">
|
||||
<div class="image-wrapper animate-on-scroll" data-animation="scale-in">
|
||||
<img
|
||||
src={sectionData.imageUrl}
|
||||
alt="Юридическая практика"
|
||||
class="main-image"
|
||||
loading="lazy"
|
||||
width="440"
|
||||
height="340"
|
||||
src={sectionData.imageUrl}
|
||||
alt="Юридическая практика"
|
||||
class="main-image"
|
||||
loading="lazy"
|
||||
width="440"
|
||||
height="340"
|
||||
/>
|
||||
|
||||
<!-- Плавающая бежевая плашка -->
|
||||
<div
|
||||
class="floating-card animate-on-scroll"
|
||||
data-animation="slide-up"
|
||||
data-delay="300"
|
||||
class="floating-card animate-on-scroll"
|
||||
data-animation="slide-up"
|
||||
data-delay="300"
|
||||
>
|
||||
<p>{sectionData.floatingText}</p>
|
||||
</div>
|
||||
|
|
@ -57,12 +74,12 @@ const features = [
|
|||
<div class="content-column">
|
||||
<div class="section-header">
|
||||
<span class="subtitle animate-on-scroll" data-animation="fade-up"
|
||||
>{sectionData.subtitle}</span
|
||||
>{sectionData.subtitle}</span
|
||||
>
|
||||
<h2
|
||||
class="title animate-on-scroll"
|
||||
data-animation="slide-right"
|
||||
data-delay="100"
|
||||
class="title animate-on-scroll"
|
||||
data-animation="slide-right"
|
||||
data-delay="100"
|
||||
>
|
||||
{sectionData.title}
|
||||
</h2>
|
||||
|
|
@ -71,17 +88,17 @@ const features = [
|
|||
<div class="features-list">
|
||||
{
|
||||
features.map((feature, index) => (
|
||||
<div
|
||||
class="feature-item animate-on-scroll"
|
||||
data-animation="stagger-item"
|
||||
data-delay={index * 150 + 200}
|
||||
>
|
||||
<div class="icon-box" set:html={feature.icon} />
|
||||
<div class="feature-text">
|
||||
<h3 class="feature-title">{feature.title}</h3>
|
||||
<p class="feature-desc">{feature.desc}</p>
|
||||
<div
|
||||
class="feature-item animate-on-scroll"
|
||||
data-animation="stagger-item"
|
||||
data-delay={index * 150 + 200}
|
||||
>
|
||||
<div class="icon-box" set:html={feature.icon} />
|
||||
<div class="feature-text">
|
||||
<h3 class="feature-title">{feature.title}</h3>
|
||||
<p class="feature-desc">{feature.desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
|
|
@ -89,48 +106,16 @@ const features = [
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
// Intersection Observer для анимаций при скроллинге
|
||||
const observerOptions = {
|
||||
root: null,
|
||||
rootMargin: "0px",
|
||||
threshold: 0.15,
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
const delay = (entry.target as HTMLElement).dataset.delay || "0";
|
||||
|
||||
setTimeout(
|
||||
() => {
|
||||
entry.target.classList.add("is-visible");
|
||||
},
|
||||
parseInt(delay as string),
|
||||
);
|
||||
|
||||
// Отключаем наблюдение после появления
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
// Наблюдаем за всеми анимируемыми элементами
|
||||
document.querySelectorAll(".animate-on-scroll").forEach((el) => {
|
||||
observer.observe(el);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* Общие стили секции */
|
||||
.why-us-section {
|
||||
padding: 6rem 2rem;
|
||||
background-color: #f4f6f9;
|
||||
font-family:
|
||||
system-ui,
|
||||
-apple-system,
|
||||
sans-serif;
|
||||
overflow: hidden; /* Предотвращаем горизонтальный скролл от анимаций */
|
||||
system-ui,
|
||||
-apple-system,
|
||||
sans-serif;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.site-container {
|
||||
|
|
@ -142,9 +127,9 @@ const features = [
|
|||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* --- Базовые стили анимаций --- */
|
||||
/* --- Базовые стили анимаций - ИСПРАВЛЕНО: opacity:1 по умолчанию --- */
|
||||
.animate-on-scroll {
|
||||
opacity: 0;
|
||||
opacity: 1;
|
||||
will-change: opacity, transform;
|
||||
}
|
||||
|
||||
|
|
@ -155,42 +140,42 @@ const features = [
|
|||
|
||||
/* Fade Up */
|
||||
[data-animation="fade-up"] {
|
||||
transform: translateY(30px);
|
||||
transform: translateY(0);
|
||||
transition:
|
||||
opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* Slide Up (снизу вверх) */
|
||||
[data-animation="slide-up"] {
|
||||
transform: translateY(40px);
|
||||
transform: translateY(0);
|
||||
transition:
|
||||
opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* Slide Right (справа налево) */
|
||||
[data-animation="slide-right"] {
|
||||
transform: translateX(-40px);
|
||||
transform: translateX(0);
|
||||
transition:
|
||||
opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* Scale In (с увеличением) */
|
||||
[data-animation="scale-in"] {
|
||||
transform: scale(0.95);
|
||||
transform: scale(1);
|
||||
transition:
|
||||
opacity 1s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
transform 1s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
opacity 1s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
transform 1s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* Stagger Item (для списка) */
|
||||
[data-animation="stagger-item"] {
|
||||
transform: translateX(-30px);
|
||||
transform: translateX(0);
|
||||
transition:
|
||||
opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* Активное состояние анимаций */
|
||||
|
|
@ -221,7 +206,7 @@ const features = [
|
|||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Бежевая плавающая плашка с дополнительной анимацией тени */
|
||||
/* Бежевая плавающая плашка */
|
||||
.floating-card {
|
||||
position: absolute;
|
||||
bottom: -30px;
|
||||
|
|
@ -275,7 +260,7 @@ const features = [
|
|||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
/* Список особенностей (Features) */
|
||||
/* Список особенностей */
|
||||
.features-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -288,7 +273,6 @@ const features = [
|
|||
align-items: flex-start;
|
||||
}
|
||||
|
||||
/* Иконки с hover-эффектом */
|
||||
.icon-box {
|
||||
flex-shrink: 0;
|
||||
width: 46px;
|
||||
|
|
@ -302,8 +286,8 @@ const features = [
|
|||
padding: 10px;
|
||||
box-shadow: 0 4px 10px rgba(18, 33, 56, 0.2);
|
||||
transition:
|
||||
transform 0.3s ease,
|
||||
box-shadow 0.3s ease;
|
||||
transform 0.3s ease,
|
||||
box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.feature-item:hover .icon-box {
|
||||
|
|
@ -311,7 +295,6 @@ const features = [
|
|||
box-shadow: 0 6px 15px rgba(18, 33, 56, 0.3);
|
||||
}
|
||||
|
||||
/* Типографика текстов особенностей */
|
||||
.feature-text {
|
||||
flex-grow: 1;
|
||||
padding-top: 0.2rem;
|
||||
|
|
@ -360,7 +343,6 @@ const features = [
|
|||
gap: 3rem;
|
||||
}
|
||||
|
||||
/* Центрирование заголовка на мобильных */
|
||||
.section-header {
|
||||
text-align: center;
|
||||
margin-bottom: 2.5rem;
|
||||
|
|
@ -375,13 +357,12 @@ const features = [
|
|||
font-size: clamp(1.5rem, 5vw, 2rem);
|
||||
}
|
||||
|
||||
/* Мобильные анимации - упрощаем направления */
|
||||
[data-animation="slide-right"] {
|
||||
transform: translateY(30px);
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
[data-animation="stagger-item"] {
|
||||
transform: translateY(20px);
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.image-column {
|
||||
|
|
@ -466,9 +447,39 @@ const features = [
|
|||
/* Уважаем prefers-reduced-motion */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.animate-on-scroll {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
transition: none;
|
||||
opacity: 1 !important;
|
||||
transform: none !important;
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// Intersection Observer для анимаций при скроллинге
|
||||
const observerOptions = {
|
||||
root: null,
|
||||
rootMargin: "0px",
|
||||
threshold: 0.15,
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
const delay = (entry.target as HTMLElement).dataset.delay || "0";
|
||||
|
||||
setTimeout(
|
||||
() => {
|
||||
entry.target.classList.add("is-visible");
|
||||
},
|
||||
parseInt(delay as string),
|
||||
);
|
||||
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
document.querySelectorAll(".animate-on-scroll").forEach((el) => {
|
||||
observer.observe(el);
|
||||
});
|
||||
</script>
|
||||
42
frontend/src/pages/index1.astro
Normal file
42
frontend/src/pages/index1.astro
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
---
|
||||
import Layout from '@layouts/Layout.astro';
|
||||
import PageHero from '@components/base/PageHero.astro';
|
||||
import Services from "@components/home/Services.astro";
|
||||
import Steps from "@components/home/Steps.astro";
|
||||
import WhyUs from "@components/home/WhyUs.astro";
|
||||
import Reviews from "@components/home/Reviews.astro";
|
||||
import Faq from "@components/home/Faq.astro";
|
||||
import { SITE_URL } from '@constants';
|
||||
---
|
||||
|
||||
<Layout
|
||||
title="Автоюрист в Сургуте — юридическая помощь автовладельцам"
|
||||
description="Профессиональная юридическая помощь автовладельцам в Сургуте. Споры со страховыми, возврат прав, ДТП, споры с автосалонами."
|
||||
canonicalLink={SITE_URL}
|
||||
>
|
||||
<PageHero
|
||||
badgeText="ЗАЩИТА ВОДИТЕЛЕЙ В СУРГУТЕ"
|
||||
titleWhite="Защитите свои права"
|
||||
titleGold="и водительское удостоверение"
|
||||
description="Профессиональная юридическая помощь при ДТП, спорах с ГИБДД и страховыми компаниями. Работаем на результат в судах ХМАО-Югры."
|
||||
btnText="Бесплатная консультация"
|
||||
modalTarget="consultation-modal"
|
||||
btnSecondary="Мои услуги"
|
||||
btnSecondaryHref="/services"
|
||||
btnSecondaryClass="btn-services"
|
||||
layout="with-image"
|
||||
sideImage="/images/avtourist-surgut.avif"
|
||||
sideImageAlt="Юрист"
|
||||
bgImage="/images/home/bg_hero.avif"
|
||||
minHeight="100vh"
|
||||
experienceBadge={{
|
||||
number: "20+",
|
||||
text: "ЛЕТ ОПЫТА В СУДАХ"
|
||||
}}
|
||||
/>
|
||||
<Services />
|
||||
<Steps />
|
||||
<WhyUs />
|
||||
<Reviews />
|
||||
<Faq />
|
||||
</Layout>
|
||||
Loading…
Add table
Add a link
Reference in a new issue