Новые картинки

frontend/src/components/home/Hero.astro

@@ -8,8 +8,8 @@ const description = "Профессиональная юридическая п
 const btnPrimary = "Бесплатная консультация";
 const btnSecondary = "Мои услуги";
 
-const bgImageUrl = "/images/home/bg_hero.png";
+const bgImageUrl = "/images/home/bg_hero.avif";
-const lawyerImageUrl = "/images/home/heroImg.jpg";
+const lawyerImageUrl = "/images/home/avtourist-surgut.avif";
 ---
 
 <section class="hero-section">

frontend/src/components/home/WhyUs.astro

@@ -1,5 +1,4 @@
 ---
-// src/components/WhyUs.astro
 
 const sectionData = {
   subtitle: "Почему мы?",
@@ -7,7 +6,7 @@ const sectionData = {
   floatingText:
     "Знаем специфику судов Сургута и регламенты местной полиции изнутри.",
   imageUrl:
-    "https://images.unsplash.com/photo-1589829085413-56de8ae18c73?q=80&w=1000&auto=format&fit=crop",
+      "/images/home/dogovor.avif",
 };
 
 const features = [

frontend/src/components/services/Hero.astro

@@ -0,0 +1,135 @@
+---
+// Здесь можно добавить пропсы, если захотите сделать компонент переиспользуемым
+// const { title, subtitle } = Astro.props;
+---
+
+<section class="hero">
+    <div class="hero-overlay"></div>
+    <div class="container">
+        <div class="hero-content">
+            <span class="badge">Автоюрист Сургут & Югра</span>
+
+            <h1>Наши юридические <span class="accent">услуги</span></h1>
+
+            <p>
+                Мы обеспечиваем экспертную защиту прав водителей в Сургуте и Ханты-Мансийском автономном округе. Профессиональный подход к сложным дорожным спорам с акцентом на результат.
+            </p>
+
+            <a href="#contact" class="cta-button">
+                Получить помощь
+            </a>
+        </div>
+    </div>
+</section>
+
+<style>
+    /* Основные стили секции */
+    .hero {
+        position: relative;
+        min-height: 80vh; /* Высота секции */
+        display: flex;
+        align-items: center;
+        background-image: url('/path-to-your-office-image.jpg'); /* Укажите путь к вашему фону */
+        background-size: cover;
+        background-position: center;
+        color: #ffffff;
+        padding: 60px 0;
+        font-family: 'Inter', sans-serif; /* Или любой другой похожий шрифт */
+    }
+
+    /* Синий градиент-оверлей как на фото */
+    .hero-overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(
+                90deg,
+                rgba(0, 36, 82, 0.95) 0%,
+                rgba(0, 36, 82, 0.8) 50%,
+                rgba(0, 36, 82, 0.4) 100%
+        );
+        z-index: 1;
+    }
+
+    .container {
+        position: relative;
+        z-index: 2;
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: 0 20px;
+        width: 100%;
+    }
+
+    .hero-content {
+        max-width: 700px; /* Ограничиваем ширину текста */
+    }
+
+    /* Плашка сверху */
+    .badge {
+        display: inline-block;
+        background-color: #3b2b0e; /* Темно-золотистый фон */
+        color: #c19a5b; /* Золотистый текст */
+        padding: 6px 16px;
+        font-size: 0.75rem;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: 1px;
+        margin-bottom: 24px;
+        border-radius: 4px;
+    }
+
+    /* Заголовок */
+    h1 {
+        font-size: clamp(2.5rem, 5vw, 4rem); /* Адаптивный размер */
+        font-weight: 800;
+        line-height: 1.1;
+        margin-bottom: 24px;
+        margin-top: 0;
+    }
+
+    .accent {
+        color: #c19a5b; /* Золотистый цвет из макета */
+    }
+
+    /* Описание */
+    p {
+        font-size: 1.1rem;
+        line-height: 1.6;
+        color: rgba(255, 255, 255, 0.8);
+        margin-bottom: 40px;
+        max-width: 600px;
+    }
+
+    /* Кнопка */
+    .cta-button {
+        display: inline-block;
+        background-color: #c19a5b;
+        color: #1a1a1a;
+        padding: 16px 32px;
+        text-decoration: none;
+        font-weight: 600;
+        border-radius: 4px;
+        transition: transform 0.2s ease, background-color 0.2s ease;
+    }
+
+    .cta-button:hover {
+        background-color: #d4ae6d;
+        transform: translateY(-2px);
+    }
+
+    /* Мобильная адаптация */
+    @media (max-width: 768px) {
+        .hero {
+            text-align: center;
+            min-height: 60vh;
+        }
+        .hero-content {
+            margin: 0 auto;
+        }
+        .hero-overlay {
+            background: rgba(0, 36, 82, 0.85); /* Более плотный фон на мобильных */
+        }
+    }
+</style>