From 5567b2993ba92347b9376fe0822c5a62e5be15bb Mon Sep 17 00:00:00 2001
From: Web-serfer <user@example.com>
Date: Fri, 17 Apr 2026 18:04:41 +0500
Subject: [PATCH] =?UTF-8?q?=D0=9D=D0=BE=D0=B2=D1=8B=D0=B5=20=20=D0=B8?=
 =?UTF-8?q?=D0=B7=D0=BC=D0=B5=D0=BD=D0=B5=D0=BD=D0=B8=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/base/PageHero.astro | 115 ++------------------
 frontend/src/layouts/Layout.astro           |   2 +-
 2 files changed, 10 insertions(+), 107 deletions(-)

diff --git a/frontend/src/components/base/PageHero.astro b/frontend/src/components/base/PageHero.astro
index 474e86a..8c47ae4 100644
--- a/frontend/src/components/base/PageHero.astro
+++ b/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>
\ No newline at end of file
diff --git a/frontend/src/layouts/Layout.astro b/frontend/src/layouts/Layout.astro
index 6bc575a..f4b77f4 100644
--- a/frontend/src/layouts/Layout.astro
+++ b/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);
   }