From f06f86ac53a148464ce482f531004198678313db Mon Sep 17 00:00:00 2001
From: Web-serfer <user@example.com>
Date: Wed, 15 Apr 2026 23:48:07 +0500
Subject: [PATCH] =?UTF-8?q?=D0=9D=D0=BE=D1=8B=D0=B5=20=D0=BF=D1=80=D0=B0?=
 =?UTF-8?q?=D0=B2=D0=BA=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/base/PageHero.astro | 107 ++++++++++++++++++--
 frontend/src/components/home/Hero.astro     |   2 +-
 frontend/src/pages/index.astro              |  23 ++++-
 3 files changed, 120 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/base/PageHero.astro b/frontend/src/components/base/PageHero.astro
index e0cf12b..3171dd0 100644
--- a/frontend/src/components/base/PageHero.astro
+++ b/frontend/src/components/base/PageHero.astro
@@ -9,6 +9,10 @@ interface PageHeroProps {
     description: string;
     btnText?: string;
     btnHref?: string;
+    btnSecondary?: string;
+    btnSecondaryHref?: string;
+    btnSecondaryClass?: string;
+    modalTarget?: string;
     bgImage?: string;
     minHeight?: string;
     layout?: 'default' | 'with-image';
@@ -18,7 +22,7 @@ interface PageHeroProps {
         number: string;
         text: string;
     };
-    icon?: string; // Название иконки из /src/icons/
+    icon?: string;
 }
 
 const {
@@ -28,8 +32,12 @@ const {
     description,
     btnText,
     btnHref = "#contact",
+    btnSecondary,
+    btnSecondaryHref = "/services",
+    btnSecondaryClass = "",
+    modalTarget,
     bgImage = "",
-    minHeight = "80vh",
+    minHeight = "100vh",
     layout = "default",
     sideImage = "",
     sideImageAlt = "",
@@ -41,6 +49,7 @@ const showImage = layout === 'with-image' && sideImage;
 ---
 
 <section class="hero-section" style:min-height={minHeight}>
+    {bgImage && <img src={bgImage} alt="" class="hero-bg-image" decoding="async" />}
     <div class="hero-overlay"></div>
 
     <div class="site-container hero-grid">
@@ -66,9 +75,20 @@ const showImage = layout === 'with-image' && sideImage;
 
             {btnText && (
                 <div class="hero-actions animate-load" data-delay="900">
-                    <Button variant="gold" size="lg" href={btnHref}>
-                        {btnText}
-                    </Button>
+                    {modalTarget ? (
+                        <Button variant="gold" size="lg" data-modal-target={modalTarget}>
+                            {btnText}
+                        </Button>
+                    ) : (
+                        <Button variant="gold" size="lg" href={btnHref}>
+                            {btnText}
+                        </Button>
+                    )}
+                    {btnSecondary && (
+                        <Button variant="outline" size="lg" href={btnSecondaryHref} class={btnSecondaryClass}>
+                            {btnSecondary}
+                        </Button>
+                    )}
                 </div>
             )}
         </div>
@@ -113,7 +133,7 @@ const showImage = layout === 'with-image' && sideImage;
     .hero-section {
         position: relative;
         width: 100%;
-        min-height: 80vh;
+        min-height: 100vh;
         display: flex;
         align-items: center;
         background-image: var(--bgImage);
@@ -126,6 +146,14 @@ const showImage = layout === 'with-image' && sideImage;
         overflow: hidden;
     }
 
+    .hero-bg-image {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        opacity: 0;
+        pointer-events: none;
+    }
+
     .hero-overlay {
         position: absolute;
         top: 0;
@@ -371,17 +399,17 @@ const showImage = layout === 'with-image' && sideImage;
         text-transform: uppercase;
     }
 
-    /* --- МОБИЛЬНАЯ АДАПТАЦИЯ --- */
+    /* --- АДАПТАЦИЯ --- */
     @media (max-width: 992px) {
         .hero-section {
             padding-top: 70px;
-            min-height: 60vh;
+            min-height: auto;
         }
 
         .hero-grid {
             flex-direction: column;
             text-align: center;
-            padding-top: 0;
+            padding: 1.5rem 1.5rem 2rem;
         }
 
         .hero-content {
@@ -444,6 +472,67 @@ const showImage = layout === 'with-image' && sideImage;
         }
     }
 
+    /* Кастомные стили для кнопки "Мои услуги" */
+    :global(.btn-services) {
+        background: transparent !important;
+        border: 2px solid #ffffff !important;
+        color: #ffffff !important;
+        padding: 0.875rem 1.5rem !important;
+        font-size: 1.125rem !important;
+        line-height: 1.75rem !important;
+        position: relative;
+        overflow: hidden;
+        z-index: 1;
+        height: auto !important;
+        min-height: 3.25rem !important;
+        transition: all 0.3s ease;
+    }
+
+    :global(.btn-services)::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: -100%;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+        transition: left 0.5s ease;
+        z-index: -1;
+    }
+
+    :global(.btn-services)::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 0;
+        height: 100%;
+        background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.2));
+        transition: width 0.4s ease;
+        z-index: -1;
+    }
+
+    :global(.btn-services:hover) {
+        background: rgba(255, 255, 255, 0.1) !important;
+        border-color: #eac26e !important;
+        color: #eac26e !important;
+        transform: translateY(-3px);
+        box-shadow: 0 8px 25px rgba(234, 194, 110, 0.3);
+    }
+
+    :global(.btn-services:hover)::before {
+        left: 100%;
+    }
+
+    :global(.btn-services:hover)::after {
+        width: 100%;
+    }
+
+    :global(.btn-services:active) {
+        transform: translateY(-1px);
+        box-shadow: 0 4px 15px rgba(234, 194, 110, 0.2);
+    }
+
     /* Уважаем prefers-reduced-motion */
     @media (prefers-reduced-motion: reduce) {
         .animate-load,
diff --git a/frontend/src/components/home/Hero.astro b/frontend/src/components/home/Hero.astro
index bc277b4..bb15fe6 100644
--- a/frontend/src/components/home/Hero.astro
+++ b/frontend/src/components/home/Hero.astro
@@ -13,7 +13,7 @@ const lawyerImageUrl = "/images/home/avtourist-surgut.avif";
 ---
 
 <section class="hero-section">
-    <img src={bgImageUrl} alt="" class="hero-bg-image" fetchpriority="high" decoding="async" />
+    <img src={bgImageUrl} alt="" class="hero-bg-image" decoding="async" />
     <div class="hero-overlay"></div>
 
     <div class="site-container hero-grid">
diff --git a/frontend/src/pages/index.astro b/frontend/src/pages/index.astro
index cd62297..29d71ee 100644
--- a/frontend/src/pages/index.astro
+++ b/frontend/src/pages/index.astro
@@ -1,6 +1,6 @@
 ---
 import Layout from '@layouts/Layout.astro';
-import Hero from '@components/home/Hero.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";
@@ -14,7 +14,26 @@ import { SITE_URL } from '@constants';
 	description="Профессиональная юридическая помощь автовладельцам в Сургуте. Споры со страховыми, возврат прав, ДТП, споры с автосалонами."
 	canonicalLink={SITE_URL}
 >
-	<Hero />
+	<PageHero
+		badgeText="ЗАЩИТА ВОДИТЕЛЕЙ В СУРГУТЕ"
+		titleWhite="Защитите свои права"
+		titleGold="и водительское удостоверение"
+		description="Профессиональная юридическая помощь при ДТП, спорах с ГИБДД и страховыми компаниями. Работаем на результат в судах ХМАО-Югры."
+		btnText="Бесплатная консультация"
+		modalTarget="consultation-modal"
+		btnSecondary="Мои услуги"
+		btnSecondaryHref="/services"
+		btnSecondaryClass="btn-services"
+		layout="with-image"
+		sideImage="/images/home/avtourist-surgut.avif"
+		sideImageAlt="Юрист"
+		bgImage="/images/home/bg_hero.avif"
+		minHeight="100vh"
+		experienceBadge={{
+			number: "20+",
+			text: "ЛЕТ ОПЫТА В СУДАХ"
+		}}
+	/>
 	<Services />
 	<Steps />
 	<WhyUs />