From d25a119e11c4ceb69786440826b6689f7b32fca3 Mon Sep 17 00:00:00 2001
From: Web-serfer <user@example.com>
Date: Thu, 23 Apr 2026 19:34:33 +0500
Subject: [PATCH] =?UTF-8?q?=D0=9D=D0=BE=D0=B2=D1=8B=D0=B5=20=D0=B8=D0=B7?=
 =?UTF-8?q?=D0=BC=D0=B5=D0=BD=D0=B5=D0=BD=D0=B8=D1=8F=20=D0=BD=D0=B0=20?=
 =?UTF-8?q?=D1=81=D0=B0=D0=B9=D1=82=D0=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/home/Steps.astro | 41 ++++++++++++++++++++++--
 1 file changed, 38 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/home/Steps.astro b/frontend/src/components/home/Steps.astro
index 2ce17a8..c318047 100644
--- a/frontend/src/components/home/Steps.astro
+++ b/frontend/src/components/home/Steps.astro
@@ -1,5 +1,6 @@
 ---
 import Button from '@components/base/Button.astro';
+import { EXPERIENCE_YEARS } from '@constants';
 
 interface Step {
     number: number;
@@ -103,7 +104,7 @@ const {
             </div>
             <div class="stat-divider"></div>
             <div class="stat-item">
-                <div class="stat-number" data-target="15" data-suffix=" лет">0 лет</div>
+                <div class="stat-number" data-target={EXPERIENCE_YEARS.replace('+', '')} data-suffix="+ лет">0+ лет</div>
                 <div class="stat-label">опыта</div>
             </div>
         </div>
@@ -112,6 +113,40 @@ const {
     </div>
 </section>
 
+<script>
+    function animateCounters() {
+        document.querySelectorAll('.stat-number[data-target]').forEach(counter => {
+            const target = parseInt(counter.getAttribute('data-target') || '0');
+            const suffix = counter.getAttribute('data-suffix') || '';
+            const duration = 2000;
+            const step = target / (duration / 16);
+            let current = 0;
+
+            const update = () => {
+                current = Math.min(current + step, target);
+                counter.textContent = Math.round(current) + suffix;
+                if (current < target) {
+                    requestAnimationFrame(update);
+                }
+            };
+            update();
+        });
+    }
+
+    const statsBar = document.getElementById('stats-bar');
+    if (statsBar) {
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    animateCounters();
+                    observer.unobserve(entry.target);
+                }
+            });
+        }, { threshold: 0.3 });
+        observer.observe(statsBar);
+    }
+</script>
+
 <style>
     :root {
         --color-primary: #0a2540;
@@ -219,8 +254,8 @@ const {
 
     /* ИСПРАВЛЕНИЕ LCP: opacity: 1 по умолчанию! */
     .animate-on-scroll {
-        opacity: 1;
-        transform: translateY(0);
+        opacity: 0;
+        transform: translateY(30px);
         will-change: opacity, transform;
     }