Переписаны компоенты главной страницы

frontend/src/components/base/PageHero.astro

@@ -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;
+        opacity: 1;
-        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);
         will-change: opacity, transform;
@@ -236,8 +248,8 @@ const showImage = layout === 'with-image' && sideImage;
 
     /* Специальная анимация для изображения */
     .hero-image-wrapper.animate-load {
-        opacity: 0;
+        opacity: 1;
-        transform: translateX(50px) scale(0.95);
+        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;
+        opacity: 1;
-        transform: translateY(20px) scale(0.9);
+        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 {

frontend/src/components/home/Faq.astro

@@ -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;
+            opacity: 1 !important;
-            transform: none;
+            transform: none !important;
-            transition: none;
+            transition: none !important;
         }
 
         .faq-item,
@@ -389,8 +400,8 @@ const {
     // Intersection Observer для анимаций при скроллинге
     const observerOptions = {
         root: null,
-        rootMargin: '0px',
+        rootMargin: '50px', // Немного раньше начинаем анимацию
-        threshold: 0.15
+        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(() => {
+                    requestAnimationFrame(() => {
                         el.classList.add('is-visible');
+                    });
                 }, delay);
 
                 observer.unobserve(el);
@@ -408,9 +422,18 @@ const {
         });
     }, observerOptions);
 
+    // Инициализация после загрузки 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');

frontend/src/components/home/Reviews.astro

@@ -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;
+            opacity: 1 !important;
-            transform: none;
+            transform: none !important;
-            transition: none;
+            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(() => {
+                        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;

frontend/src/components/home/Services.astro

@@ -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;
+            opacity: 1 !important;
-            transform: none;
+            transform: none !important;
-            transition: none;
+            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) => {

frontend/src/components/home/Steps.astro

@@ -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,7 +70,6 @@ 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>
@@ -68,10 +78,8 @@ const {
                         )}
 
                         <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;
+            opacity: 1 !important;
-            transform: none;
+            transform: none !important;
-            transition: none;
+            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);
     });

frontend/src/components/home/WhyUs.astro

@@ -28,6 +28,23 @@ 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">
     <!-- Левая колонка: Изображение -->
@@ -89,38 +106,6 @@ 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 {
@@ -130,7 +115,7 @@ const features = [
         system-ui,
         -apple-system,
         sans-serif;
-    overflow: hidden; /* Предотвращаем горизонтальный скролл от анимаций */
+    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,7 +140,7 @@ 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);
@@ -163,7 +148,7 @@ const features = [
 
   /* 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);
@@ -171,7 +156,7 @@ const features = [
 
   /* 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);
@@ -179,7 +164,7 @@ const features = [
 
   /* 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);
@@ -187,7 +172,7 @@ const features = [
 
   /* 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);
@@ -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;
@@ -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;
+      opacity: 1 !important;
-      transform: none;
+      transform: none !important;
-      transition: none;
+      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>

frontend/src/pages/index1.astro

@@ -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>