Новые изменения

frontend/src/components/base/PageHero.astro

@@ -39,7 +39,7 @@ const {
     modalTarget,
     bgImage = "",
     minHeight = "100vh",
-    headerOffset = "10px",
+    headerOffset = "80px",
     layout = "default",
     sideImage = "",
     sideImageAlt = "",
@@ -50,17 +50,7 @@ const {
 const showImage = layout === 'with-image' && sideImage;
 ---
 
-<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"
@@ -83,7 +73,7 @@ const showImage = layout === 'with-image' && sideImage;
 
     <div class="site-container hero-grid">
         <div class="hero-content">
-            <div class="badge animate-load" data-delay="100">
+            <div class="badge">
                 {icon ? (
                         <span class="badge-icon">
                         <Icon name={icon} />
@@ -95,15 +85,15 @@ const showImage = layout === 'with-image' && sideImage;
             </div>
 
             <h1 class="hero-title">
-                <span class="text-white animate-load" data-delay="300">{titleWhite}</span>
+                <span class="text-white">{titleWhite}</span>
                 <br />
-                <span class="text-gold animate-load" data-delay="500">{titleGold}</span>
+                <span class="text-gold">{titleGold}</span>
             </h1>
 
-            <p class="hero-description animate-load" data-delay="700">{description}</p>
+            <p class="hero-description">{description}</p>
 
             {btnText && (
-                    <div class="hero-actions animate-load" data-delay="900">
+                    <div class="hero-actions">
                         {modalTarget ? (
                                 <Button variant="gold" size="lg" data-modal-target={modalTarget}>
                                     {btnText}
@@ -123,7 +113,7 @@ const showImage = layout === 'with-image' && sideImage;
         </div>
 
         {showImage && (
-                <div class="hero-image-wrapper animate-load" data-delay="400">
+                <div class="hero-image-wrapper">
                     <div class="image-composition">
                         <img
                                 src={sideImage}
@@ -136,7 +126,7 @@ const showImage = layout === 'with-image' && sideImage;
                                 decoding="async"
                         />
                         {experienceBadge && (
-                                <div class="experience-badge animate-load" data-delay="1100">
+                                <div class="experience-badge">
                                     <span class="exp-number">{experienceBadge.number}</span>
                                     <span class="exp-text">{experienceBadge.text}</span>
                                 </div>
@@ -147,27 +137,7 @@ const showImage = layout === 'with-image' && sideImage;
     </div>
 </section>
 
-<script>
-    const initAnimations = () => {
-        const animatedElements = document.querySelectorAll('.animate-load');
 
-        animatedElements.forEach((el) => {
-            const delay = parseInt((el as HTMLElement).dataset.delay || '0');
-
-            setTimeout(() => {
-                requestAnimationFrame(() => {
-                    el.classList.add('is-visible');
-                });
-            }, delay);
-        });
-    };
-
-    if (document.readyState === 'loading') {
-        document.addEventListener('DOMContentLoaded', initAnimations);
-    } else {
-        initAnimations();
-    }
-</script>
 
 <style>
     .hero-section {
@@ -182,6 +152,7 @@ const showImage = layout === 'with-image' && sideImage;
         margin: 0 !important;
         box-sizing: border-box;
         overflow: hidden;
+        transition: padding-top 0.3s ease;
     }
 
 
@@ -231,46 +202,6 @@ const showImage = layout === 'with-image' && sideImage;
         max-width: 700px;
     }
 
-    /* --- АНИМАЦИИ ПРИ ЗАГРУЗКЕ - ИСПРАВЛЕНО: opacity:1 по умолчанию --- */
-    .animate-load {
-        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;
-    }
-
-    .animate-load.is-visible {
-        opacity: 1;
-        transform: translateY(0);
-    }
-
-    /* Специальная анимация для изображения */
-    .hero-image-wrapper.animate-load {
-        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);
-    }
-
-    .hero-image-wrapper.animate-load.is-visible {
-        opacity: 1;
-        transform: translateX(0) scale(1);
-    }
-
-    /* Анимация для бейджа опыта */
-    .experience-badge.animate-load {
-        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);
-    }
-
-    .experience-badge.animate-load.is-visible {
-        opacity: 1;
-        transform: translateY(0) scale(1);
-    }
-
     /* --- BADGE --- */
     .badge {
         display: inline-flex;
@@ -480,14 +411,6 @@ const showImage = layout === 'with-image' && sideImage;
             left: 0;
             bottom: -20px;
         }
-
-        .hero-image-wrapper.animate-load {
-            transform: translateY(0) scale(1);
-        }
-
-        .hero-image-wrapper.animate-load.is-visible {
-            transform: translateY(0) scale(1);
-        }
     }
 
     @media (max-width: 767px) {
@@ -583,24 +506,4 @@ const showImage = layout === 'with-image' && sideImage;
         transform: translateY(-1px);
         box-shadow: 0 4px 15px rgba(234, 194, 110, 0.2);
     }
-
-    /* Уважаем prefers-reduced-motion */
-    @media (prefers-reduced-motion: reduce) {
-        .animate-load,
-        .hero-image-wrapper.animate-load,
-        .experience-badge.animate-load {
-            opacity: 1;
-            transform: none;
-            transition: none;
-        }
-
-        .image-composition::before {
-            animation: none;
-            opacity: 1;
-        }
-
-        .status-dot::before {
-            animation: none;
-        }
-    }
 </style>

frontend/src/layouts/Layout.astro

@@ -54,7 +54,7 @@ const { title, description, canonicalLink, breadcrumbs } = Astro.props;
   }
 
   .breadcrumbs-wrapper {
-    padding-top: 4.75rem;
+    padding-top: 0;
     background: #f8fafc;
     border-bottom: 1px solid rgba(30, 48, 80, 0.05);
   }