НовыÐе компоентяÐы для страницы услуг

frontend/src/components/services/Hero.astro

@@ -1,135 +0,0 @@
----
-// Здесь можно добавить пропсы, если захотите сделать компонент переиспользуемым
-// 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>

frontend/src/components/services/HeroServices.astro

@@ -0,0 +1,241 @@
+---
+import Button from '@components/base/Button.astro';
+
+const badgeText = "АВТОЮРИСТ СУРГУТ & ЮГРА";
+const titleWhite = "Наши юридические";
+const titleGold = "услуги";
+const description = "Мы обеспечиваем экспертную защиту прав водителей в Сургуте и Ханты-Мансийском автономном округе. Профессиональный подход к сложным дорожным спорам с акцентом на результат.";
+const btnPrimary = "Получить помощь";
+
+const bgImageUrl = "/images/services/office.png";
+---
+
+<section class="hero-section">
+    <div class="hero-overlay"></div>
+
+    <div class="site-container">
+        <div class="hero-content">
+            <div class="badge animate-load" data-delay="100">
+                <span class="status-dot"></span>
+                {badgeText}
+            </div>
+
+            <h1 class="hero-title">
+                <span class="text-white animate-load" data-delay="300">{titleWhite}</span>
+                <br />
+                <span class="text-gold animate-load" data-delay="500">{titleGold}</span>
+            </h1>
+
+            <p class="hero-description animate-load" data-delay="700">{description}</p>
+
+            <div class="hero-actions animate-load" data-delay="900">
+                <Button variant="gold" size="lg" href="#contact">
+                    {btnPrimary}
+                </Button>
+            </div>
+        </div>
+    </div>
+</section>
+
+<script>
+    // Анимация при загрузке страницы
+    const initAnimations = () => {
+        const animatedElements = document.querySelectorAll('.animate-load');
+
+        animatedElements.forEach((el) => {
+            const delay = parseInt((el as HTMLElement).dataset.delay || '0');
+
+            setTimeout(() => {
+                el.classList.add('is-visible');
+            }, delay);
+        });
+    };
+
+    // Пробуем сразу, если DOM готов
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', initAnimations);
+    } else {
+        initAnimations();
+    }
+</script>
+
+<style define:vars={{ bgImageUrl: `url("${bgImageUrl}")` }}>
+    .hero-section {
+        position: relative;
+        width: 100%;
+        min-height: 80vh;
+        display: flex;
+        align-items: center;
+        background-image: var(--bgImageUrl);
+        background-size: cover;
+        background-position: center;
+        margin: 0 !important;
+        padding: 60px 0;
+        box-sizing: border-box;
+        overflow: hidden;
+    }
+
+    .hero-overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(90deg, #0a2540 0%, rgba(10, 37, 64, 0.9) 50%, rgba(10, 37, 64, 0.7) 100%);
+        z-index: 1;
+    }
+
+    .site-container {
+        position: relative;
+        z-index: 2;
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: 0 20px;
+        width: 100%;
+    }
+
+    .hero-content {
+        max-width: 700px;
+    }
+
+    /* --- АНИМАЦИИ ПРИ ЗАГРУЗКЕ --- */
+    .animate-load {
+        opacity: 0;
+        transform: translateY(30px);
+        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);
+    }
+
+    .badge {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.6rem;
+        background-color: rgba(234, 194, 110, 0.15);
+        border: 1px solid rgba(234, 194, 110, 0.3);
+        color: #eac26e;
+        padding: 0.5rem 1rem;
+        border-radius: 6px;
+        font-size: 0.8rem;
+        font-weight: 700;
+        letter-spacing: 1.5px;
+        margin-bottom: 2.5rem;
+    }
+
+    /* Мерцающая точка "На связи" */
+    .status-dot {
+        width: 10px;
+        height: 10px;
+        background: #22c55e;
+        border-radius: 50%;
+        animation: pulse 2s ease-in-out infinite;
+        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
+        flex-shrink: 0;
+    }
+
+    @keyframes pulse {
+        0% {
+            transform: scale(0.95);
+            box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
+        }
+        70% {
+            transform: scale(1);
+            box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
+        }
+        100% {
+            transform: scale(0.95);
+            box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
+        }
+    }
+
+    .hero-title {
+        font-size: clamp(2.5rem, 5vw, 4rem);
+        font-weight: 800;
+        line-height: 1.1;
+        margin: 0 0 24px 0;
+    }
+
+    .text-white {
+        color: #ffffff;
+    }
+
+    .text-gold {
+        color: #eac26e;
+    }
+
+    .hero-description {
+        color: rgba(255, 255, 255, 0.85);
+        font-size: 1.15rem;
+        line-height: 1.6;
+        margin-bottom: 40px;
+        max-width: 600px;
+    }
+
+    .hero-actions {
+        display: flex;
+        gap: 1.5rem;
+        align-items: stretch;
+    }
+
+    .hero-actions > * {
+        display: flex;
+        align-items: center;
+    }
+
+    /* Мобильная адаптация */
+    @media (max-width: 768px) {
+        .hero-section {
+            text-align: center;
+            min-height: 60vh;
+        }
+
+        .hero-overlay {
+            background: rgba(10, 37, 64, 0.85);
+        }
+
+        .hero-content {
+            margin: 0 auto;
+        }
+
+        .badge {
+            justify-content: center;
+        }
+
+        .hero-actions {
+            justify-content: center;
+        }
+    }
+
+    @media (max-width: 480px) {
+        .hero-section {
+            padding: 40px 0;
+            min-height: 50vh;
+        }
+
+        .hero-title {
+            font-size: 2rem;
+        }
+
+        .hero-description {
+            font-size: 1rem;
+        }
+    }
+
+    /* Уважаем prefers-reduced-motion */
+    @media (prefers-reduced-motion: reduce) {
+        .animate-load {
+            opacity: 1;
+            transform: none;
+            transition: none;
+        }
+
+        .status-dot {
+            animation: none;
+        }
+    }
+</style>

frontend/src/components/services/ServiceCategories.astro

@@ -0,0 +1,849 @@
+---
+import Button from '@components/base/Button.astro';
+
+interface ServiceCategory {
+    id: string;
+    category: string;
+    services: ServiceItem[];
+}
+
+interface ServiceItem {
+    title: string;
+    description: string;
+    price: string;
+    icon: string; // Now stores emoji (e.g., "🚗", "📄")
+    href: string;
+    features: string[];
+}
+
+const {
+    sectionSubtitle = "ПОЛНЫЙ СПЕКТР УСЛУГ",
+    sectionTitle = "Юридическая помощь автовладельцам",
+    sectionDescription = "Выберите нужную категорию услуг. Каждая включает полный цикл: от консультации до представительства в суде.",
+    categories = [
+        {
+            id: "driving-license",
+            category: "Водительские права",
+            services: [
+                {
+                    title: "Возврат прав после лишения",
+                    description: "Оспариваем лишение водительских прав в суде. Работаем с любыми статьями КоАП.",
+                    price: "от 15 000 ₽",
+                    icon: "🚗",
+                    href: "/services/license-return",
+                    features: ["Анализ протокола", "Представительство в суде", "Обжалование решения", "Сопровождение до результата"]
+                },
+                {
+                    title: "Оспаривание лишения",
+                    description: "Находим процессуальные нарушения и добиваемся отмены постановлений.",
+                    price: "от 20 000 ₽",
+                    icon: "⚖️",
+                    href: "/services/appeal",
+                    features: ["Аудит материалов дела", "Поиск нарушений процедуры", "Подготовка жалобы", "Защита в апелляционном суде"]
+                },
+                {
+                    title: "Замена прав",
+                    description: "Помощь в замене прав по окончании срока, при утере или порче.",
+                    price: "от 5 000 ₽",
+                    icon: "🔄",
+                    href: "/services/replacement",
+                    features: ["Подготовка документов", "Запись в ГИБДД", "Сопровождение процедуры", "Получение новых прав"]
+                }
+            ]
+        },
+        {
+            id: "insurance",
+            category: "Страховые споры",
+            services: [
+                {
+                    title: "Споры по ОСАГО",
+                    description: "Взыскиваем недоплату страховых компаний, оспариваем отказы в выплате.",
+                    price: "от 10 000 ₽",
+                    icon: "📋",
+                    href: "/services/osago",
+                    features: ["Оценка ущерба", "Претензия в страховую", "Судебный иск", "Исполнение решения"]
+                },
+                {
+                    title: "Споры по КАСКО",
+                    description: "Помогаем получить полную выплату по полису КАСКО при отказе страховой.",
+                    price: "от 15 000 ₽",
+                    icon: "🛡️",
+                    href: "/services/casco",
+                    features: ["Анализ договора", "Оспаривание отказа", "Независимая экспертиза", "Взыскание ущерба"]
+                },
+                {
+                    title: "Взыскание ущерба с виновника",
+                    description: "Когда страховая выплатила недостаточно — взыскиваем разницу с виновника ДТП.",
+                    price: "от 20 000 ₽",
+                    icon: "💰",
+                    href: "/services/damages",
+                    features: ["Расчёт ущерба", "Досудебная претензия", "Судебный процесс", "Работа с приставами"]
+                }
+            ]
+        },
+        {
+            id: "accident",
+            category: "ДТП и разбор",
+            services: [
+                {
+                    title: "Помощь при ДТП",
+                    description: "Оперативный выезд на место ДТП. Фиксация нарушений, защита на месте.",
+                    price: "от 8 000 ₽",
+                    icon: "🚨",
+                    href: "/services/accident-help",
+                    features: ["Выезд на место", "Фиксация доказательств", "Защита при опросе", "Консультация на месте"]
+                },
+                {
+                    title: "Оспаривание вины в ДТП",
+                    description: "Доказываем невиновность или снижаем степень ответственности.",
+                    price: "от 25 000 ₽",
+                    icon: "🔍",
+                    href: "/services/blame-appeal",
+                    features: ["Анализ видеозаписей", "Допрос свидетелей", "Экспертиза", "Оспаривание заключения"]
+                },
+                {
+                    title: "Разбор в ГИБДД",
+                    description: "Представляем ваши интересы на разборе ДТП в ГИБДД.",
+                    price: "от 10 000 ₽",
+                    icon: "📝",
+                    href: "/services/gibdd-review",
+                    features: ["Подготовка позиции", "Участие в разборе", "Обжалование определения", "Консультация"]
+                }
+            ]
+        },
+        {
+            id: "court",
+            category: "Судебное представительство",
+            services: [
+                {
+                    title: "Защита в суде",
+                    description: "Полное ведение дела в суде: от подготовки искового до исполнения решения.",
+                    price: "от 30 000 ₽",
+                    icon: "🏛️",
+                    href: "/services/court-defense",
+                    features: ["Подготовка иска/жалобы", "Представительство на заседаниях", "Сбор доказательств", "Исполнение решения"]
+                },
+                {
+                    title: "Обжалование постановлений",
+                    description: "Оспариваем постановления по делам об административных правонарушениях.",
+                    price: "от 15 000 ₽",
+                    icon: "📜",
+                    href: "/services/decree-appeal",
+                    features: ["Анализ постановления", "Подготовка жалобы", "Подача в суд", "Участие в заседании"]
+                }
+            ]
+        }
+    ] as ServiceCategory[]
+} = Astro.props;
+---
+
+<section class="service-categories" id="services-list">
+    <div class="site-container">
+        <!-- Заголовок -->
+        <div class="section-header">
+            <span class="subtitle animate-on-scroll" data-animation="fade-up">{sectionSubtitle}</span>
+            <h2 class="title animate-on-scroll" data-animation="fade-up" data-delay="100">{sectionTitle}</h2>
+            <p class="section-desc animate-on-scroll" data-animation="fade-up" data-delay="150">{sectionDescription}</p>
+        </div>
+
+        <!-- Категории -->
+        <div class="categories-wrapper">
+            {categories.map((category: ServiceCategory, catIndex: number) => (
+                    <div class="category-block animate-on-scroll" data-animation="fade-up" data-delay={catIndex * 150 + 200}>
+                        <!-- Заголовок категории -->
+                        <div class="category-header animate-on-scroll" data-animation="slide-left" data-delay={catIndex * 150 + 300}>
+                            <div class="category-icon">
+                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                    <path d="M12 2L2 7l10 5 10-5-10-5z"/>
+                                    <path d="M2 17l10 5 10-5"/>
+                                    <path d="M2 12l10 5 10-5"/>
+                                </svg>
+                            </div>
+                            <h3 class="category-title">{category.category}</h3>
+                            <div class="category-line"></div>
+                        </div>
+
+                        <!-- Карточки услуг -->
+                        <div class="services-grid">
+                            {category.services.map((service: ServiceItem, index: number) => (
+                                    <a href={service.href} class="service-card animate-on-scroll" data-animation="scale-up" data-delay={index * 120 + catIndex * 100 + 400}>
+                                        <div class="card-inner">
+                                            <!-- Emoji иконка -->
+                                            <div class="service-icon animate-on-scroll" data-animation="icon-pop" data-delay={index * 120 + catIndex * 100 + 500}>
+                                                <span class="emoji-icon">{service.icon}</span>
+                                            </div>
+
+                                            <!-- Заголовок -->
+                                            <h4 class="service-title">{service.title}</h4>
+
+                                            <!-- Описание -->
+                                            <p class="service-desc">{service.description}</p>
+
+                                            <!-- Цена -->
+                                            <div class="service-price">
+                                                <span class="price-label">Стоимость:</span>
+                                                <span class="price-value">{service.price}</span>
+                                            </div>
+
+                                            <!-- Список фич -->
+                                            <ul class="service-features">
+                                                {service.features.map((feature: string) => (
+                                                        <li class="feature-item animate-on-scroll" data-animation="fade-right" data-delay={index * 100 + 600}>
+                                                            <svg class="check-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                                                                <path d="M20 6L9 17l-5-5"/>
+                                                            </svg>
+                                                            <span>{feature}</span>
+                                                        </li>
+                                                ))}
+                                            </ul>
+
+                                            <!-- Кнопка -->
+                                            <div class="card-cta animate-on-scroll" data-animation="fade-up" data-delay={index * 100 + 800}>
+                                                <span class="cta-text">Подробнее</span>
+                                                <svg class="arrow-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                                    <path d="M5 12h14"/>
+                                                    <path d="m12 5 7 7-7 7"/>
+                                                </svg>
+                                            </div>
+                                        </div>
+                                    </a>
+                            ))}
+                        </div>
+                    </div>
+            ))}
+        </div>
+
+        <!-- CTA внизу -->
+        <div class="section-cta animate-on-scroll" data-animation="fade-up" data-delay="800">
+            <p class="cta-text-main">Не нашли нужную услугу?</p>
+            <p class="cta-text-sub">Позвоните — разберём вашу ситуацию бесплатно</p>
+            <Button variant="gold" size="lg" href="#contact">
+                Связаться с нами
+            </Button>
+        </div>
+    </div>
+</section>
+
+<script>
+    // Intersection Observer для анимаций при скроллинге
+    const observerOptions = {
+        root: null,
+        rootMargin: '0px 0px -50px 0px',
+        threshold: 0.1
+    };
+
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                const el = entry.target as HTMLElement;
+                const delay = parseInt(el.dataset.delay || '0');
+
+                setTimeout(() => {
+                    el.classList.add('is-visible');
+
+                    // Дополнительная анимация для emoji-иконки
+                    const emoji = el.querySelector('.emoji-icon');
+                    if (emoji && el.dataset.animation === 'icon-pop') {
+                        setTimeout(() => {
+                            emoji.classList.add('emoji-bounce');
+                        }, 100);
+                    }
+                }, delay);
+
+                observer.unobserve(el);
+            }
+        });
+    }, observerOptions);
+
+    document.querySelectorAll('.animate-on-scroll').forEach((el) => {
+        observer.observe(el);
+    });
+</script>
+
+<style>
+    :root {
+        --color-primary: #0a2540;
+        --color-primary-light: #1e3050;
+        --color-accent: #eac26e;
+        --color-accent-dark: #ce9f40;
+        --color-accent-glow: rgba(234, 194, 110, 0.15);
+        --color-light: #ffffff;
+        --color-gray: #94a3b8;
+        --color-gray-light: #e2e8f0;
+        --color-bg: #f8fafc;
+        --color-bg-alt: #f1f5f9;
+        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
+        --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
+        --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12);
+        --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.15);
+        --shadow-glow: 0 0 40px rgba(234, 194, 110, 0.15);
+    }
+
+    .service-categories {
+        padding: 6rem 1.5rem;
+        background: linear-gradient(180deg, #ffffff 0%, var(--color-bg) 100%);
+        font-family: 'Inter', system-ui, -apple-system, sans-serif;
+    }
+
+    .site-container {
+        max-width: var(--site-max-width, 1400px);
+        margin: 0 auto;
+    }
+
+    /* --- Заголовок секции --- */
+    .section-header {
+        margin-bottom: 4rem;
+        text-align: center;
+    }
+
+    .subtitle {
+        display: inline-block;
+        color: var(--color-accent);
+        font-size: 0.75rem;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: 3px;
+        margin-bottom: 1rem;
+        padding: 0.5rem 1rem;
+        background: rgba(234, 194, 110, 0.1);
+        border-radius: 6px;
+    }
+
+    .title {
+        color: var(--color-primary);
+        font-size: clamp(2rem, 4vw, 3rem);
+        font-weight: 800;
+        margin: 0 0 1rem 0;
+        line-height: 1.2;
+        letter-spacing: -0.02em;
+    }
+
+    .section-desc {
+        color: var(--color-gray);
+        font-size: 1.1rem;
+        max-width: 700px;
+        margin: 0 auto;
+        line-height: 1.6;
+    }
+
+    /* --- Анимации --- */
+    .animate-on-scroll {
+        opacity: 0;
+        will-change: opacity, transform;
+    }
+
+    /* Fade Up - снизу вверх */
+    [data-animation="fade-up"] {
+        transform: translateY(40px);
+        transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
+        transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    /* Fade Right - слева направо */
+    [data-animation="fade-right"] {
+        transform: translateX(-30px);
+        transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
+        transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    /* Slide Left - справа налево */
+    [data-animation="slide-left"] {
+        transform: translateX(-50px);
+        transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
+        transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    /* Scale Up - увеличение */
+    [data-animation="scale-up"] {
+        transform: translateY(40px) scale(0.95);
+        transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
+        transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    /* Icon Pop - иконка с эффектом отскока */
+    [data-animation="icon-pop"] {
+        transform: scale(0.5);
+        transition: opacity 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55),
+        transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+    }
+
+    /* Активное состояние */
+    .animate-on-scroll.is-visible {
+        opacity: 1;
+        transform: translateY(0) translateX(0) scale(1);
+    }
+
+    /* --- Категории --- */
+    .categories-wrapper {
+        display: flex;
+        flex-direction: column;
+        gap: 5rem;
+    }
+
+    .category-block {
+        position: relative;
+    }
+
+    /* Заголовок категории */
+    .category-header {
+        display: flex;
+        align-items: center;
+        gap: 1.5rem;
+        margin-bottom: 2.5rem;
+        padding-bottom: 1.5rem;
+        position: relative;
+    }
+
+    .category-icon {
+        width: 56px;
+        height: 56px;
+        background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
+        border-radius: 14px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--color-accent);
+        flex-shrink: 0;
+        box-shadow: var(--shadow-md);
+        transition: transform 0.3s ease, box-shadow 0.3s ease;
+    }
+
+    .category-icon svg {
+        width: 28px;
+        height: 28px;
+    }
+
+    .category-block:hover .category-icon {
+        transform: translateY(-4px);
+        box-shadow: var(--shadow-lg);
+    }
+
+    .category-title {
+        font-size: 1.75rem;
+        font-weight: 800;
+        color: var(--color-primary);
+        margin: 0;
+        letter-spacing: -0.01em;
+    }
+
+    .category-line {
+        flex: 1;
+        height: 2px;
+        background: linear-gradient(90deg, var(--color-accent-glow), transparent);
+        border-radius: 2px;
+    }
+
+    /* --- Сетка услуг --- */
+    .services-grid {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 2rem;
+    }
+
+    /* --- Карточка услуги --- */
+    .service-card {
+        display: block;
+        text-decoration: none;
+        color: inherit;
+    }
+
+    .card-inner {
+        position: relative;
+        background: #ffffff;
+        border-radius: 16px;
+        padding: 2rem;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        border: 1px solid var(--color-gray-light);
+        box-shadow: var(--shadow-sm);
+        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+        overflow: hidden;
+    }
+
+    .card-inner::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 4px;
+        background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
+        opacity: 0;
+        transition: opacity 0.3s ease;
+    }
+
+    .service-card:hover .card-inner {
+        transform: translateY(-8px);
+        box-shadow: var(--shadow-xl);
+        border-color: rgba(234, 194, 110, 0.3);
+    }
+
+    .service-card:hover .card-inner::before {
+        opacity: 1;
+    }
+
+    /* Emoji иконка услуги */
+    .service-icon {
+        width: 60px;
+        height: 60px;
+        background: rgba(234, 194, 110, 0.1);
+        border-radius: 14px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-bottom: 1.5rem;
+        margin-left: auto;
+        margin-right: auto;
+        transition: all 0.3s ease;
+    }
+
+    .emoji-icon {
+        font-size: 2.2rem;
+        line-height: 1;
+        display: inline-block;
+        transition: transform 0.3s ease;
+    }
+
+    /* Анимация emoji при появлении */
+    .emoji-icon.emoji-bounce {
+        animation: emojiBounce 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+    }
+
+    @keyframes emojiBounce {
+        0% { transform: scale(0) rotate(-45deg); }
+        50% { transform: scale(1.3) rotate(10deg); }
+        100% { transform: scale(1) rotate(0deg); }
+    }
+
+    .service-card:hover .service-icon {
+        background: var(--color-primary);
+        transform: scale(1.05);
+        box-shadow: 0 8px 20px rgba(10, 37, 64, 0.2);
+    }
+
+    .service-card:hover .emoji-icon {
+        transform: scale(1.1);
+    }
+
+    /* Текст */
+    .service-title {
+        font-size: 1.25rem;
+        font-weight: 700;
+        color: var(--color-primary);
+        margin: 0 0 0.75rem 0;
+        line-height: 1.3;
+        transition: color 0.3s ease;
+    }
+
+    .service-card:hover .service-title {
+        color: var(--color-accent-dark);
+    }
+
+    .service-desc {
+        font-size: 0.95rem;
+        line-height: 1.6;
+        color: var(--color-gray);
+        margin: 0 0 1.25rem 0;
+        flex-grow: 1;
+    }
+
+    /* Цена */
+    .service-price {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.75rem 1rem;
+        background: var(--color-bg);
+        border-radius: 10px;
+        margin-bottom: 1.25rem;
+    }
+
+    .price-label {
+        font-size: 0.8rem;
+        color: var(--color-gray);
+    }
+
+    .price-value {
+        font-size: 1.1rem;
+        font-weight: 800;
+        color: var(--color-primary);
+    }
+
+    /* Фичи */
+    .service-features {
+        list-style: none;
+        margin: 0 0 1.5rem 0;
+        padding: 0;
+        display: flex;
+        flex-direction: column;
+        gap: 0.6rem;
+    }
+
+    .feature-item {
+        display: flex;
+        align-items: center;
+        gap: 0.6rem;
+        font-size: 0.9rem;
+        color: var(--color-primary-light);
+    }
+
+    .check-icon {
+        width: 18px;
+        height: 18px;
+        color: var(--color-accent);
+        flex-shrink: 0;
+    }
+
+    /* CTA в карточке */
+    .card-cta {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        padding-top: 1.25rem;
+        border-top: 1px solid var(--color-gray-light);
+        margin-top: auto;
+        justify-content: flex-end;
+    }
+
+    .cta-text {
+        font-size: 0.95rem;
+        font-weight: 600;
+        color: var(--color-primary);
+        transition: color 0.3s ease;
+    }
+
+    .arrow-icon {
+        width: 20px;
+        height: 20px;
+        color: var(--color-primary);
+        transition: transform 0.3s ease, color 0.3s ease;
+    }
+
+    .service-card:hover .cta-text {
+        color: var(--color-accent-dark);
+    }
+
+    .service-card:hover .arrow-icon {
+        transform: translateX(6px);
+        color: var(--color-accent);
+    }
+
+    /* --- Нижний CTA --- */
+    .section-cta {
+        margin-top: 5rem;
+        text-align: center;
+        padding: 3rem 2rem;
+        background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
+        border-radius: 20px;
+        box-shadow: var(--shadow-xl);
+        position: relative;
+        overflow: hidden;
+    }
+
+    .section-cta::before {
+        content: '';
+        position: absolute;
+        top: -50%;
+        right: -20%;
+        width: 60%;
+        height: 150%;
+        background: radial-gradient(circle, var(--color-accent-glow) 0%, transparent 70%);
+        pointer-events: none;
+    }
+
+    .cta-text-main {
+        font-size: 1.5rem;
+        font-weight: 700;
+        color: #ffffff;
+        margin: 0 0 0.5rem 0;
+        position: relative;
+        z-index: 1;
+    }
+
+    .cta-text-sub {
+        font-size: 1rem;
+        color: rgba(255, 255, 255, 0.7);
+        margin: 0 0 1.5rem 0;
+        position: relative;
+        z-index: 1;
+    }
+
+    .section-cta .btn {
+        position: relative;
+        z-index: 1;
+    }
+
+    /* --- Адаптивность --- */
+    @media (max-width: 1200px) {
+        .services-grid {
+            grid-template-columns: repeat(2, 1fr);
+        }
+    }
+
+    @media (max-width: 768px) {
+        .service-categories {
+            padding: 4rem 1rem;
+        }
+
+        .section-header {
+            margin-bottom: 3rem;
+        }
+
+        .title {
+            font-size: 1.75rem;
+        }
+
+        .section-desc {
+            font-size: 1rem;
+        }
+
+        .categories-wrapper {
+            gap: 3rem;
+        }
+
+        .category-header {
+            gap: 1rem;
+            margin-bottom: 2rem;
+            padding-bottom: 1rem;
+            justify-content: center;
+            text-align: center;
+        }
+
+        .category-line {
+            display: none;
+        }
+
+        .category-icon {
+            width: 48px;
+            height: 48px;
+            border-radius: 12px;
+        }
+
+        .category-icon svg {
+            width: 24px;
+            height: 24px;
+        }
+
+        .category-title {
+            font-size: 1.4rem;
+        }
+
+        .services-grid {
+            grid-template-columns: 1fr;
+            gap: 1.5rem;
+            max-width: 480px;
+            margin: 0 auto;
+        }
+
+        .card-inner {
+            padding: 1.5rem;
+            text-align: center;
+            align-items: center;
+        }
+
+        .service-price {
+            width: 100%;
+        }
+
+        .service-features {
+            width: 100%;
+            text-align: left;
+        }
+
+        .card-cta {
+            justify-content: flex-end;
+            width: 100%;
+        }
+
+        .section-cta {
+            padding: 2rem 1.5rem;
+            margin-top: 3rem;
+        }
+
+        .cta-text-main {
+            font-size: 1.25rem;
+        }
+
+        .cta-text-sub {
+            font-size: 0.9rem;
+        }
+    }
+
+    @media (max-width: 480px) {
+        .service-categories {
+            padding: 3rem 0.75rem;
+        }
+
+        .section-header {
+            margin-bottom: 2rem;
+        }
+
+        .subtitle {
+            font-size: 0.65rem;
+            letter-spacing: 2px;
+        }
+
+        .title {
+            font-size: 1.5rem;
+        }
+
+        .category-title {
+            font-size: 1.25rem;
+        }
+
+        .card-inner {
+            padding: 1.25rem;
+        }
+
+        .service-icon {
+            width: 52px;
+            height: 52px;
+            border-radius: 12px;
+            margin-bottom: 1.25rem;
+        }
+
+        .emoji-icon {
+            font-size: 1.8rem;
+        }
+
+        .service-title {
+            font-size: 1.1rem;
+        }
+
+        .section-cta {
+            padding: 1.5rem 1rem;
+            border-radius: 16px;
+        }
+
+        .cta-text-main {
+            font-size: 1.1rem;
+        }
+
+        .cta-text-sub {
+            font-size: 0.85rem;
+        }
+    }
+
+    /* @media (prefers-reduced-motion: reduce) */
+    @media (prefers-reduced-motion: reduce) {
+        .animate-on-scroll {
+            opacity: 1;
+            transform: none;
+            transition: none;
+        }
+
+        .card-inner,
+        .service-icon,
+        .category-icon,
+        .arrow-icon,
+        .cta-text,
+        .emoji-icon {
+            transition: none;
+        }
+
+        .emoji-icon.emoji-bounce {
+            animation: none;
+        }
+    }
+</style>

frontend/src/pages/services.astro

@@ -1,6 +1,8 @@
 ---
 import Layout from '@layouts/Layout.astro';
 import { SITE_URL } from '@constants';
+import ServicesHeroServices from "@components/services/HeroServices.astro";
+import ServiceCategories from "@components/services/ServiceCategories.astro";
 ---
 
 <Layout
@@ -8,7 +10,6 @@ import { SITE_URL } from '@constants';
 	description="Полный спектр юридических услуг для автовладельцев: споры со страховыми, возврат прав, ДТП, автоспоры."
 	canonicalLink={`${SITE_URL}/services`}
 >
-
-		<h1>Услуги</h1>
-
+		<ServicesHeroServices />
+		<ServiceCategories />
 </Layout>