Новые страницы и компоенты сайта

This commit is contained in:
Web-serfer 2026-04-23 16:22:46 +05:00
parent e695b9bc01
commit 7fd0e77620
10 changed files with 2825 additions and 1544 deletions

View file

@ -0,0 +1,631 @@
---
import Layout from '@layouts/Layout.astro';
import { SITE_URL } from '@constants';
import PageHero from "@components/base/PageHero.astro";
import RelatedCases from "@components/cases/RelatedCases.astro";
import AdBanner from "@components/base/AdBanner.astro";
const allCases = [
{
id: 1,
title: "Возврат прав после лишения по ст. 12.8 КоАП",
category: "Водительские права",
categoryIcon: "🚗",
description: "Клиент был лишён прав на 18 месяцев за якобы управление в состоянии опьянения. Мы нашли процессуальные нарушения при составлении протокола.",
resultLabel: "Лишение отменено",
duration: "3 месяца",
href: "/cases/driving-license-return-12-8"
},
{
id: 2,
title: "Взыскание 450 000 ₽ со страховой по ОСАГО",
category: "Страховые споры",
categoryIcon: "📋",
description: "Страховая компания выплатила лишь 120 000 ₽ при реальном ущербе в 570 000 ₽ после серьёзного ДТП.",
resultLabel: "Взыскано 450 000 ₽",
duration: "5 месяцев",
href: "/cases/osago-claim-450k"
},
{
id: 3,
title: "Оспаривание вины в ДТП с пострадавшим",
category: "ДТП и разбор",
categoryIcon: "🚨",
description: "Клиента обвиняли в нарушении ПДД, повлёкшем ДТП с пострадавшим. Грозил штраф и лишение прав.",
resultLabel: "Виновность не доказана",
duration: "4 месяца",
href: "/cases/dti-innocence-proof"
},
{
id: 5,
title: "Возврат прав после лишения за выезд на встречку",
category: "Водительские права",
categoryIcon: "🚗",
description: "Клиент лишён прав на 6 месяцев за выезд на полосу встречного движения. Камера зафиксировала нарушение.",
resultLabel: "Дело прекращено",
duration: "2 месяца",
href: "/cases/license-return-camera"
}
];
---
<Layout
title="Возврат прав после лишения по ст. 12.8 КоАП — автоюрист Сургут"
description="Клиент был лишён прав на 18 месяцев за якобы управление в состоянии опьянения. Юрист нашел процессуальные нарушения при составлении протокола."
canonicalLink={`${SITE_URL}/cases/driving-license-return-12-8`}
breadcrumbs={[
{ label: 'Главная', href: '/' },
{ label: 'Кейсы', href: '/cases' },
{ label: 'Возврат прав по ст. 12.8' }
]}
>
<PageHero
badgeText="КЕЙС #1"
titleWhite="Возврат прав после лишения"
titleGold="по ст. 12.8 КоАП"
description="Клиент был лишён прав на 18 месяцев за якобы управление в состоянии опьянения. Благодаря грамотной правовой позиции удалось добиться отмены постановления."
btnText="Получить консультацию"
modalTarget="consultation-modal"
layout="with-image"
sideImage="/images/cases/casesImg.avif"
sideImageAlt="Автоюрист Сургут"
experienceBadge={{
number: "95%",
text: "УСПЕШНЫХ ДЕЛ"
}}
bgImage="/images/cases/casesBg.avif"
icon="briefcase"
/>
<div class="case-detail-page">
<section class="case-content">
<div class="site-container">
<div class="case-grid">
<article class="case-article">
<div class="case-block">
<h2 class="case-block__title">
<span class="case-block__icon">📋</span>
Исходная ситуация
</h2>
<div class="case-block__content">
<p>
Наш клиент, добропорядочный водитель с 15-летним стажем, был остановлен
сотрудниками ДПС в вечернее время. Инспекторы заподозрили наличие
алкоголя в крови и предложили пройти освидетельствование.
</p>
<p>
<strong>Протокол был составлен с многочисленными процессуальными нарушениями:</strong>
</p>
<ul class="case-list">
<li>Отсутствие двух понятых при составлении протокола</li>
<li>Освидетельствование проводилось неуполномоченным лицом</li>
<li>Не были разъяснены права и обязанности водителя</li>
<li>Протокол составлен с ошибками в данных</li>
</ul>
</div>
</div>
<div class="case-block case-block--accent">
<h2 class="case-block__title">
<span class="case-block__icon">🔍</span>
Что было сделано
</h2>
<div class="case-block__content">
<div class="case-steps">
<div class="case-step">
<div class="case-step__number">01</div>
<div class="case-step__content">
<h3>Анализ документов</h3>
<p>
Изучили все материалы дела, выявили 7 критических нарушений
при составлении протокола и проведении освидетельствования.
</p>
</div>
</div>
<div class="case-step">
<div class="case-step__number">02</div>
<div class="case-step__content">
<h3>Сбор доказательств</h3>
<p>
Получили записи с видеорегистратора, подтверждающие
нарушение процедуры остановки и проверки.
</p>
</div>
</div>
<div class="case-step">
<div class="case-step__number">03</div>
<div class="case-step__content">
<h3>Подготовка позиции</h3>
<p>
Составили подробную правовую позицию со ссылками на
Конституцию РФ, КоАП РФ и Постановления Пленума ВС РФ.
</p>
</div>
</div>
<div class="case-step">
<div class="case-step__number">04</div>
<div class="case-step__content">
<h3>Представительство в суде</h3>
<p>
Представили интересы клиента в двух судебных заседаниях,
добились признания нарушений неустранимыми.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="case-block">
<h2 class="case-block__title">
<span class="case-block__icon">⚖️</span>
Судебное решение
</h2>
<div class="case-block__content">
<div class="case-verdict">
<div class="case-verdict__badge">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
<path d="M20 6L9 17l-5-5"/>
</svg>
Постановление отменено
</div>
<p>
Суд первой инстанции, рассмотрев материалы дела и заслушав
аргументы защиты, <strong>принял решение об отмене постановления</strong>
о лишении права управления транспортным средством.
</p>
<p>
Водительское удостоверение было возвращено клиенту в полном объёме
без каких-либо ограничений и дополнительных санкций.
</p>
</div>
</div>
</div>
</article>
<aside class="case-sidebar">
<div class="case-sidebar__card">
<h3 class="case-sidebar__title">Детали кейса</h3>
<div class="case-sidebar__info">
<div class="case-sidebar__row">
<span>Категория</span>
<strong>Водительские права</strong>
</div>
<div class="case-sidebar__row">
<span>Срок ведения</span>
<strong>3 месяца</strong>
</div>
<div class="case-sidebar__row">
<span>Результат</span>
<strong class="success">Лишение отменено</strong>
</div>
</div>
</div>
<div class="case-sidebar__card case-sidebar__card--lawyer">
<div class="case-sidebar__lawyer-avatar">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
<circle cx="12" cy="7" r="4"/>
</svg>
</div>
<h3>Автоюрист Сургут</h3>
<p class="case-sidebar__lawyer-name">Алексей Петров</p>
<div class="case-sidebar__lawyer-stats">
<div class="case-sidebar__lawyer-stat">
<strong>12+</strong>
<span>лет опыта</span>
</div>
<div class="case-sidebar__lawyer-stat">
<strong>500+</strong>
<span>выигранных дел</span>
</div>
</div>
<a href="/services" class="case-sidebar__lawyer-link">
Все услуги
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M5 12h14"/>
<path d="m12 5 7 7-7 7"/>
</svg>
</a>
</div>
<div class="case-sidebar__card case-sidebar__card--ad">
<AdBanner
width="300"
height="640"
className="ad-banner--vertical"
/>
</div>
</aside>
</div>
</div>
</section>
</div>
<!-- /.case-detail-page -->
<RelatedCases
title="Другие кейсы"
subtitle="ПОХОЖИЕ ДЕЛА"
cases={allCases}
currentCaseId={1}
/>
</Layout>
<style>
.case-detail-page {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
.case-content {
padding: 5rem 0;
background: #f8fafc;
}
.case-grid {
display: grid;
grid-template-columns: 1fr 380px;
gap: 3rem;
}
.case-block {
background: #ffffff;
border-radius: 16px;
padding: 2.5rem;
margin-bottom: 2rem;
border: 1px solid #e2e8f0;
}
.case-block:last-child {
margin-bottom: 0;
}
.case-block--accent {
background: linear-gradient(135deg, #0a2540, #1e3050);
border: none;
}
.case-block--accent .case-block__title {
color: #eac26e;
}
.case-block--accent .case-block__content {
color: rgba(255, 255, 255, 0.85);
}
.case-block--accent p {
color: rgba(255, 255, 255, 0.85);
}
.case-block__title {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 1.35rem;
font-weight: 700;
color: #0a2540;
margin: 0 0 1.5rem 0;
}
.case-block__icon {
font-size: 1.5rem;
}
.case-block__content p {
color: #475569;
font-size: 1rem;
line-height: 1.7;
margin: 0 0 1rem 0;
}
.case-block__content p:last-child {
margin-bottom: 0;
}
.case-list {
list-style: none;
padding: 0;
margin: 1.5rem 0 0 0;
}
.case-list li {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 0.75rem 0;
color: #0a2540;
font-size: 0.95rem;
border-bottom: 1px solid rgba(234, 194, 110, 0.2);
}
.case-list li:last-child {
border-bottom: none;
}
.case-list li::before {
content: '✗';
color: #ef4444;
font-weight: 700;
flex-shrink: 0;
}
.case-steps {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.case-step {
display: flex;
gap: 1.5rem;
align-items: flex-start;
}
.case-step__number {
width: 48px;
height: 48px;
background: rgba(234, 194, 110, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
font-weight: 900;
color: #eac26e;
flex-shrink: 0;
}
.case-step__content h3 {
color: #ffffff;
font-size: 1.1rem;
font-weight: 700;
margin: 0 0 0.5rem 0;
}
.case-step__content p {
color: rgba(255, 255, 255, 0.7);
font-size: 0.9rem;
line-height: 1.6;
margin: 0;
}
.case-verdict {
background: rgba(234, 194, 110, 0.08);
border: 1px solid rgba(234, 194, 110, 0.2);
border-radius: 12px;
padding: 2rem;
}
.case-verdict__badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: #22c55e;
color: #ffffff;
padding: 0.5rem 1rem;
border-radius: 6px;
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 1.5rem;
}
.case-verdict__badge svg {
width: 18px;
height: 18px;
}
.case-verdict p {
color: #0a2540;
font-size: 1rem;
line-height: 1.7;
margin: 0 0 1rem 0;
}
.case-sidebar {
position: sticky;
top: 100px;
height: fit-content;
display: flex;
flex-direction: column;
}
.case-sidebar__card {
background: #ffffff;
border-radius: 16px;
padding: 2rem;
border: 1px solid #e2e8f0;
margin-bottom: 1.5rem;
flex-shrink: 0;
}
.case-sidebar__card:last-child {
margin-bottom: 0;
flex-grow: 1;
}
.case-sidebar__card--ad {
display: flex;
align-items: stretch;
padding: 0;
overflow: hidden;
}
.case-sidebar__card--ad :global(.ad-banner) {
border: none;
border-radius: 0;
width: 100%;
}
.case-sidebar__title {
font-size: 1.1rem;
font-weight: 700;
color: #0a2540;
margin: 0 0 1.5rem 0;
padding-bottom: 1rem;
border-bottom: 2px solid #eac26e;
}
.case-sidebar__info {
display: flex;
flex-direction: column;
gap: 1rem;
}
.case-sidebar__row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 0;
border-bottom: 1px solid #f1f5f9;
}
.case-sidebar__row:last-child {
border-bottom: none;
}
.case-sidebar__row span {
color: #64748b;
font-size: 0.9rem;
}
.case-sidebar__row strong {
color: #0a2540;
font-weight: 600;
}
.case-sidebar__row strong.success {
color: #22c55e;
}
.case-sidebar__card--lawyer {
background: linear-gradient(135deg, #0a2540, #1e3050);
text-align: center;
}
.case-sidebar__lawyer-avatar {
width: 80px;
height: 80px;
background: rgba(234, 194, 110, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem;
border: 3px solid #eac26e;
}
.case-sidebar__lawyer-avatar svg {
width: 40px;
height: 40px;
color: #eac26e;
}
.case-sidebar__card--lawyer h3 {
color: #ffffff;
font-size: 1.1rem;
font-weight: 700;
margin: 0 0 0.25rem 0;
}
.case-sidebar__lawyer-name {
color: #eac26e;
font-size: 0.95rem;
margin: 0 0 1.25rem 0;
}
.case-sidebar__lawyer-stats {
display: flex;
justify-content: center;
gap: 1.5rem;
margin-bottom: 1.5rem;
padding: 1rem 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.case-sidebar__lawyer-stat {
display: flex;
flex-direction: column;
align-items: center;
}
.case-sidebar__lawyer-stat strong {
color: #ffffff;
font-size: 1.5rem;
font-weight: 800;
}
.case-sidebar__lawyer-stat span {
color: rgba(255, 255, 255, 0.6);
font-size: 0.75rem;
}
.case-sidebar__lawyer-link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
background: transparent;
border: 2px solid #eac26e;
color: #eac26e;
border-radius: 8px;
font-size: 0.9rem;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
}
.case-sidebar__lawyer-link:hover {
background: #eac26e;
color: #0a2540;
}
.case-sidebar__lawyer-link svg {
width: 16px;
height: 16px;
transition: transform 0.3s ease;
}
.case-sidebar__lawyer-link:hover svg {
transform: translateX(4px);
}
@media (max-width: 1024px) {
.case-sidebar {
position: static;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.case-sidebar__card {
margin-bottom: 0;
}
}
@media (max-width: 768px) {
.case-content {
padding: 3rem 0;
}
.case-block {
padding: 2rem 1.5rem;
}
.case-sidebar {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.case-block {
padding: 1.5rem 1rem;
}
.case-step {
flex-direction: column;
text-align: center;
}
}
</style>

View file

@ -0,0 +1,605 @@
---
import Layout from '@layouts/Layout.astro';
import { SITE_URL } from '@constants';
import PageHero from "@components/base/PageHero.astro";
import RelatedCases from "@components/cases/RelatedCases.astro";
import AdBanner from "@components/base/AdBanner.astro";
const allCases = [
{
id: 1,
title: "Возврат прав после лишения по ст. 12.8 КоАП",
category: "Водительские права",
categoryIcon: "🚗",
description: "Клиент был лишён прав на 18 месяцев за якобы управление в состоянии опьянения. Мы нашли процессуальные нарушения при составлении протокола.",
resultLabel: "Лишение отменено",
duration: "3 месяца",
href: "/cases/driving-license-return-12-8"
},
{
id: 2,
title: "Взыскание 450 000 ₽ со страховой по ОСАГО",
category: "Страховые споры",
categoryIcon: "📋",
description: "Страховая компания выплатила лишь 120 000 ₽ при реальном ущербе в 570 000 ₽ после серьёзного ДТП.",
resultLabel: "Взыскано 450 000 ₽",
duration: "5 месяцев",
href: "/cases/osago-claim-450k"
},
{
id: 3,
title: "Оспаривание вины в ДТП с пострадавшим",
category: "ДТП и разбор",
categoryIcon: "🚨",
description: "Клиента обвиняли в нарушении ПДД, повлёкшем ДТП с пострадавшим. Грозил штраф и лишение прав.",
resultLabel: "Виновность не доказана",
duration: "4 месяца",
href: "/cases/dti-innocence-proof"
},
{
id: 5,
title: "Возврат прав после лишения за выезд на встречку",
category: "Водительские права",
categoryIcon: "🚗",
description: "Клиент лишён прав на 6 месяцев за выезд на полосу встречного движения. Камера зафиксировала нарушение.",
resultLabel: "Дело прекращено",
duration: "2 месяца",
href: "/cases/license-return-camera"
}
];
---
<Layout
title="Оспаривание вины в ДТП с пострадавшим — автоюрист Сургут"
description="Клиента обвиняли в нарушении ПДД, повлёкшем ДТП с пострадавшим. Удалось доказать невиновность благодаря видеозаписям."
canonicalLink={`${SITE_URL}/cases/dti-innocence-proof`}
breadcrumbs={[
{ label: 'Главная', href: '/' },
{ label: 'Кейсы', href: '/cases' },
{ label: 'Оспаривание вины в ДТП' }
]}
>
<PageHero
badgeText="КЕЙС #3"
titleWhite="Оспаривание вины"
titleGold="в ДТП с пострадавшим"
description="Клиенту грозило лишение прав и штраф. Благодаря видеозаписям и показаниям свидетелей удалось доказать невиновность."
btnText="Получить консультацию"
modalTarget="consultation-modal"
layout="with-image"
sideImage="/images/cases/casesImg.avif"
sideImageAlt="Автоюрист Сургут"
experienceBadge={{
number: "95%",
text: "УСПЕШНЫХ ДЕЛ"
}}
bgImage="/images/cases/casesBg.avif"
icon="briefcase"
/>
<div class="case-detail-page">
<section class="case-content">
<div class="site-container">
<div class="case-grid">
<article class="case-article">
<div class="case-block">
<h2 class="case-block__title">
<span class="case-block__icon">📋</span>
Исходная ситуация
</h2>
<div class="case-block__content">
<p>
На перекрёстке произошло столкновение двух автомобилей, в результате
которого пострадал пассажир одного из них. Инспектор ГИБДД изначально
признал виновным нашего клиента.
</p>
<p>
<strong>Клиенту грозило лишение прав и крупный штраф за нарушение ПДД,
повлёкшее ДТП с пострадавшим.</strong>
</p>
<p>
Однако клиент был уверен в своей невиновности и обратился за
юридической помощью для защиты своих прав.
</p>
</div>
</div>
<div class="case-block case-block--accent">
<h2 class="case-block__title">
<span class="case-block__icon">🔍</span>
Что было сделано
</h2>
<div class="case-block__content">
<div class="case-steps">
<div class="case-step">
<div class="case-step__number">01</div>
<div class="case-step__content">
<h3>Анализ материалов дела</h3>
<p>
Изучили протокол ГИБДД, схему места ДТП и все
сопутствующие документы.
</p>
</div>
</div>
<div class="case-step">
<div class="case-step__number">02</div>
<div class="case-step__content">
<h3>Сбор доказательств</h3>
<p>
Получили записи с камер видеонаблюдения на перекрёстке,
которые зафиксировали момент аварии.
</p>
</div>
</div>
<div class="case-step">
<div class="case-step__number">03</div>
<div class="case-step__content">
<h3>Поиск свидетелей</h3>
<p>
Обнаружили и опросили свидетелей, которые подтвердили
версию клиента о невиновности.
</p>
</div>
</div>
<div class="case-step">
<div class="case-step__number">04</div>
<div class="case-step__content">
<h3>Экспертиза</h3>
<p>
Провели автотехническую экспертизу, которая подтвердила
невозможность совершения манёвра водителем в указанное время.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="case-block">
<h2 class="case-block__title">
<span class="case-block__icon">⚖️</span>
Судебное решение
</h2>
<div class="case-block__content">
<div class="case-verdict">
<div class="case-verdict__badge">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
<path d="M20 6L9 17l-5-5"/>
</svg>
Виновность не доказана
</div>
<p>
Суд, изучив представленные доказательства и видеозаписи,
пришёл к выводу о <strong>недоказанности вины</strong> нашего клиента.
</p>
<p>
Дело прекращено за отсутствием состава правонарушения.
Клиент полностью оправдан и не понёс никаких санкций.
</p>
</div>
</div>
</div>
</article>
<aside class="case-sidebar">
<div class="case-sidebar__card">
<h3 class="case-sidebar__title">Детали кейса</h3>
<div class="case-sidebar__info">
<div class="case-sidebar__row">
<span>Категория</span>
<strong>ДТП и разбор</strong>
</div>
<div class="case-sidebar__row">
<span>Срок ведения</span>
<strong>4 месяца</strong>
</div>
<div class="case-sidebar__row">
<span>Результат</span>
<strong class="success">Виновность не доказана</strong>
</div>
</div>
</div>
<div class="case-sidebar__card case-sidebar__card--lawyer">
<div class="case-sidebar__lawyer-avatar">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
<circle cx="12" cy="7" r="4"/>
</svg>
</div>
<h3>Автоюрист Сургут</h3>
<p class="case-sidebar__lawyer-name">Алексей Петров</p>
<div class="case-sidebar__lawyer-stats">
<div class="case-sidebar__lawyer-stat">
<strong>12+</strong>
<span>лет опыта</span>
</div>
<div class="case-sidebar__lawyer-stat">
<strong>500+</strong>
<span>выигранных дел</span>
</div>
</div>
<a href="/services" class="case-sidebar__lawyer-link">
Все услуги
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M5 12h14"/>
<path d="m12 5 7 7-7 7"/>
</svg>
</a>
</div>
<div class="case-sidebar__card case-sidebar__card--ad">
<AdBanner
width="300"
height="640"
className="ad-banner--vertical"
/>
</div>
</aside>
</div>
</div>
</section>
</div>
<RelatedCases
title="Другие кейсы"
subtitle="ПОХОЖИЕ ДЕЛА"
cases={allCases}
currentCaseId={3}
/>
</Layout>
<style>
.case-detail-page {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
.case-content {
padding: 5rem 0;
background: #f8fafc;
}
.case-grid {
display: grid;
grid-template-columns: 1fr 380px;
gap: 3rem;
}
.case-block {
background: #ffffff;
border-radius: 16px;
padding: 2.5rem;
margin-bottom: 2rem;
border: 1px solid #e2e8f0;
}
.case-block:last-child {
margin-bottom: 0;
}
.case-block--accent {
background: linear-gradient(135deg, #0a2540, #1e3050);
border: none;
}
.case-block--accent .case-block__title {
color: #eac26e;
}
.case-block--accent .case-block__content {
color: rgba(255, 255, 255, 0.85);
}
.case-block--accent p {
color: rgba(255, 255, 255, 0.85);
}
.case-block__title {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 1.35rem;
font-weight: 700;
color: #0a2540;
margin: 0 0 1.5rem 0;
}
.case-block__icon {
font-size: 1.5rem;
}
.case-block__content p {
color: #475569;
font-size: 1rem;
line-height: 1.7;
margin: 0 0 1rem 0;
}
.case-block__content p:last-child {
margin-bottom: 0;
}
.case-steps {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.case-step {
display: flex;
gap: 1.5rem;
align-items: flex-start;
}
.case-step__number {
width: 48px;
height: 48px;
background: rgba(234, 194, 110, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
font-weight: 900;
color: #eac26e;
flex-shrink: 0;
}
.case-step__content h3 {
color: #ffffff;
font-size: 1.1rem;
font-weight: 700;
margin: 0 0 0.5rem 0;
}
.case-step__content p {
color: rgba(255, 255, 255, 0.7);
font-size: 0.9rem;
line-height: 1.6;
margin: 0;
}
.case-verdict {
background: rgba(234, 194, 110, 0.08);
border: 1px solid rgba(234, 194, 110, 0.2);
border-radius: 12px;
padding: 2rem;
}
.case-verdict__badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: #22c55e;
color: #ffffff;
padding: 0.5rem 1rem;
border-radius: 6px;
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 1.5rem;
}
.case-verdict__badge svg {
width: 18px;
height: 18px;
}
.case-verdict p {
color: #0a2540;
font-size: 1rem;
line-height: 1.7;
margin: 0 0 1rem 0;
}
.case-sidebar {
position: sticky;
top: 100px;
height: fit-content;
display: flex;
flex-direction: column;
}
.case-sidebar__card {
background: #ffffff;
border-radius: 16px;
padding: 2rem;
border: 1px solid #e2e8f0;
margin-bottom: 1.5rem;
flex-shrink: 0;
}
.case-sidebar__card:last-child {
margin-bottom: 0;
flex-grow: 1;
}
.case-sidebar__card--ad {
display: flex;
align-items: stretch;
padding: 0;
overflow: hidden;
}
.case-sidebar__card--ad :global(.ad-banner) {
border: none;
border-radius: 0;
width: 100%;
}
.case-sidebar__title {
font-size: 1.1rem;
font-weight: 700;
color: #0a2540;
margin: 0 0 1.5rem 0;
padding-bottom: 1rem;
border-bottom: 2px solid #eac26e;
}
.case-sidebar__info {
display: flex;
flex-direction: column;
gap: 1rem;
}
.case-sidebar__row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 0;
border-bottom: 1px solid #f1f5f9;
}
.case-sidebar__row:last-child {
border-bottom: none;
}
.case-sidebar__row span {
color: #64748b;
font-size: 0.9rem;
}
.case-sidebar__row strong {
color: #0a2540;
font-weight: 600;
}
.case-sidebar__row strong.success {
color: #22c55e;
}
.case-sidebar__card--lawyer {
background: linear-gradient(135deg, #0a2540, #1e3050);
text-align: center;
}
.case-sidebar__lawyer-avatar {
width: 80px;
height: 80px;
background: rgba(234, 194, 110, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem;
border: 3px solid #eac26e;
}
.case-sidebar__lawyer-avatar svg {
width: 40px;
height: 40px;
color: #eac26e;
}
.case-sidebar__card--lawyer h3 {
color: #ffffff;
font-size: 1.1rem;
font-weight: 700;
margin: 0 0 0.25rem 0;
}
.case-sidebar__lawyer-name {
color: #eac26e;
font-size: 0.95rem;
margin: 0 0 1.25rem 0;
}
.case-sidebar__lawyer-stats {
display: flex;
justify-content: center;
gap: 1.5rem;
margin-bottom: 1.5rem;
padding: 1rem 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.case-sidebar__lawyer-stat {
display: flex;
flex-direction: column;
align-items: center;
}
.case-sidebar__lawyer-stat strong {
color: #ffffff;
font-size: 1.5rem;
font-weight: 800;
}
.case-sidebar__lawyer-stat span {
color: rgba(255, 255, 255, 0.6);
font-size: 0.75rem;
}
.case-sidebar__lawyer-link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
background: transparent;
border: 2px solid #eac26e;
color: #eac26e;
border-radius: 8px;
font-size: 0.9rem;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
}
.case-sidebar__lawyer-link:hover {
background: #eac26e;
color: #0a2540;
}
.case-sidebar__lawyer-link svg {
width: 16px;
height: 16px;
transition: transform 0.3s ease;
}
.case-sidebar__lawyer-link:hover svg {
transform: translateX(4px);
}
@media (max-width: 1024px) {
.case-grid {
grid-template-columns: 1fr;
}
.case-sidebar {
position: static;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.case-sidebar__card {
margin-bottom: 0;
}
}
@media (max-width: 768px) {
.case-content {
padding: 3rem 0;
}
.case-block {
padding: 2rem 1.5rem;
}
.case-sidebar {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.case-block {
padding: 1.5rem 1rem;
}
.case-step {
flex-direction: column;
text-align: center;
}
}
</style>

View file

@ -20,6 +20,7 @@ import CasesList from "@components/cases/CasesList.astro";
titleGold="кейсы"
description="Реальные примеры нашей работы по защите прав автовладельцев. Каждое дело — это история успеха, основанная на профессионализме и опыте."
btnText="Получить консультацию"
modalTarget="consultation-modal"
layout="with-image"
sideImage="/images/cases/casesImg.avif"
sideImageAlt="Автоюрист Сургут"
@ -31,4 +32,4 @@ import CasesList from "@components/cases/CasesList.astro";
icon="briefcase"
/>
<CasesList />
</Layout>
</Layout>

View file

@ -0,0 +1,605 @@
---
import Layout from '@layouts/Layout.astro';
import { SITE_URL } from '@constants';
import PageHero from "@components/base/PageHero.astro";
import RelatedCases from "@components/cases/RelatedCases.astro";
import AdBanner from "@components/base/AdBanner.astro";
const allCases = [
{
id: 1,
title: "Возврат прав после лишения по ст. 12.8 КоАП",
category: "Водительские права",
categoryIcon: "🚗",
description: "Клиент был лишён прав на 18 месяцев за якобы управление в состоянии опьянения. Мы нашли процессуальные нарушения при составлении протокола.",
resultLabel: "Лишение отменено",
duration: "3 месяца",
href: "/cases/driving-license-return-12-8"
},
{
id: 2,
title: "Взыскание 450 000 ₽ со страховой по ОСАГО",
category: "Страховые споры",
categoryIcon: "📋",
description: "Страховая компания выплатила лишь 120 000 ₽ при реальном ущербе в 570 000 ₽ после серьёзного ДТП.",
resultLabel: "Взыскано 450 000 ₽",
duration: "5 месяцев",
href: "/cases/osago-claim-450k"
},
{
id: 3,
title: "Оспаривание вины в ДТП с пострадавшим",
category: "ДТП и разбор",
categoryIcon: "🚨",
description: "Клиента обвиняли в нарушении ПДД, повлёкшем ДТП с пострадавшим. Грозил штраф и лишение прав.",
resultLabel: "Виновность не доказана",
duration: "4 месяца",
href: "/cases/dti-innocence-proof"
},
{
id: 5,
title: "Возврат прав после лишения за выезд на встречку",
category: "Водительские права",
categoryIcon: "🚗",
description: "Клиент лишён прав на 6 месяцев за выезд на полосу встречного движения. Камера зафиксировала нарушение.",
resultLabel: "Дело прекращено",
duration: "2 месяца",
href: "/cases/license-return-camera"
}
];
---
<Layout
title="Возврат прав после лишения за выезд на встречку — автоюрист Сургут"
description="Клиент лишён прав за выезд на встречку, зафиксированный камерой. Удалось доказать, что за рулём был другой человек."
canonicalLink={`${SITE_URL}/cases/license-return-camera`}
breadcrumbs={[
{ label: 'Главная', href: '/' },
{ label: 'Кейсы', href: '/cases' },
{ label: 'Возврат прав после камеры' }
]}
>
<PageHero
badgeText="КЕЙС #5"
titleWhite="Возврат прав"
titleGold="за выезд на встречку"
description="Камера зафиксировала нарушение, но за рулём был не владелец. Благодаря доказательствам удалось прекратить дело."
btnText="Получить консультацию"
modalTarget="consultation-modal"
layout="with-image"
sideImage="/images/cases/casesImg.avif"
sideImageAlt="Автоюрист Сургут"
experienceBadge={{
number: "95%",
text: "УСПЕШНЫХ ДЕЛ"
}}
bgImage="/images/cases/casesBg.avif"
icon="briefcase"
/>
<div class="case-detail-page">
<section class="case-content">
<div class="site-container">
<div class="case-grid">
<article class="case-article">
<div class="case-block">
<h2 class="case-block__title">
<span class="case-block__icon">📋</span>
Исходная ситуация
</h2>
<div class="case-block__content">
<p>
Автоматическая камера зафиксировала выезд на полосу встречного
движения. Владельцу автомобиля пришло уведомление о штрафе
и лишении прав на 6 месяцев.
</p>
<p>
<strong>Проблема заключалась в том, что в момент нарушения
за рулём находился не владелец автомобиля, а его знакомый.</strong>
</p>
<p>
Владелец обратился за помощью, чтобы доказать свою невиновность
и избежать лишения прав.
</p>
</div>
</div>
<div class="case-block case-block--accent">
<h2 class="case-block__title">
<span class="case-block__icon">🔍</span>
Что было сделано
</h2>
<div class="case-block__content">
<div class="case-steps">
<div class="case-step">
<div class="case-step__number">01</div>
<div class="case-step__content">
<h3>Сбор доказательств</h3>
<p>
Собрали доказательства того, что автомобилем управлял
другой человек: показания свидетелей, записи с телефона.
</p>
</div>
</div>
<div class="case-step">
<div class="case-step__number">02</div>
<div class="case-step__content">
<h3>Установление личности</h3>
<p>
Установили личность человека, который был за рулём.
Он подтвердил свою виновность и готов был признать это.
</p>
</div>
</div>
<div class="case-step">
<div class="case-step__number">03</div>
<div class="case-step__content">
<h3>Обжалование</h3>
<p>
Подготовили заявление с требованием переписать штраф
на лицо, фактически управлявшее автомобилем.
</p>
</div>
</div>
<div class="case-step">
<div class="case-step__number">04</div>
<div class="case-step__content">
<h3>Результат</h3>
<p>
Дело в отношении владельца прекращено. Штраф переписан
на реального виновника.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="case-block">
<h2 class="case-block__title">
<span class="case-block__icon">⚖️</span>
Судебное решение
</h2>
<div class="case-block__content">
<div class="case-verdict">
<div class="case-verdict__badge">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
<path d="M20 6L9 17l-5-5"/>
</svg>
Дело прекращено
</div>
<p>
Суд, рассмотрев представленные доказательства, принял решение
о <strong>прекращении дела</strong> в отношении владельца автомобиля.
</p>
<p>
Водительское удостоверение сохранено. Штраф и лишение прав
перенесены на лицо, фактически управлявшее транспортным средством.
</p>
</div>
</div>
</div>
</article>
<aside class="case-sidebar">
<div class="case-sidebar__card">
<h3 class="case-sidebar__title">Детали кейса</h3>
<div class="case-sidebar__info">
<div class="case-sidebar__row">
<span>Категория</span>
<strong>Водительские права</strong>
</div>
<div class="case-sidebar__row">
<span>Срок ведения</span>
<strong>2 месяца</strong>
</div>
<div class="case-sidebar__row">
<span>Результат</span>
<strong class="success">Дело прекращено</strong>
</div>
</div>
</div>
<div class="case-sidebar__card case-sidebar__card--lawyer">
<div class="case-sidebar__lawyer-avatar">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
<circle cx="12" cy="7" r="4"/>
</svg>
</div>
<h3>Автоюрист Сургут</h3>
<p class="case-sidebar__lawyer-name">Алексей Петров</p>
<div class="case-sidebar__lawyer-stats">
<div class="case-sidebar__lawyer-stat">
<strong>12+</strong>
<span>лет опыта</span>
</div>
<div class="case-sidebar__lawyer-stat">
<strong>500+</strong>
<span>выигранных дел</span>
</div>
</div>
<a href="/services" class="case-sidebar__lawyer-link">
Все услуги
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M5 12h14"/>
<path d="m12 5 7 7-7 7"/>
</svg>
</a>
</div>
<div class="case-sidebar__card case-sidebar__card--ad">
<AdBanner
width="300"
height="640"
className="ad-banner--vertical"
/>
</div>
</aside>
</div>
</div>
</section>
</div>
<RelatedCases
title="Другие кейсы"
subtitle="ПОХОЖИЕ ДЕЛА"
cases={allCases}
currentCaseId={5}
/>
</Layout>
<style>
.case-detail-page {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
.case-content {
padding: 5rem 0;
background: #f8fafc;
}
.case-grid {
display: grid;
grid-template-columns: 1fr 380px;
gap: 3rem;
}
.case-block {
background: #ffffff;
border-radius: 16px;
padding: 2.5rem;
margin-bottom: 2rem;
border: 1px solid #e2e8f0;
}
.case-block:last-child {
margin-bottom: 0;
}
.case-block--accent {
background: linear-gradient(135deg, #0a2540, #1e3050);
border: none;
}
.case-block--accent .case-block__title {
color: #eac26e;
}
.case-block--accent .case-block__content {
color: rgba(255, 255, 255, 0.85);
}
.case-block--accent p {
color: rgba(255, 255, 255, 0.85);
}
.case-block__title {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 1.35rem;
font-weight: 700;
color: #0a2540;
margin: 0 0 1.5rem 0;
}
.case-block__icon {
font-size: 1.5rem;
}
.case-block__content p {
color: #475569;
font-size: 1rem;
line-height: 1.7;
margin: 0 0 1rem 0;
}
.case-block__content p:last-child {
margin-bottom: 0;
}
.case-steps {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.case-step {
display: flex;
gap: 1.5rem;
align-items: flex-start;
}
.case-step__number {
width: 48px;
height: 48px;
background: rgba(234, 194, 110, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
font-weight: 900;
color: #eac26e;
flex-shrink: 0;
}
.case-step__content h3 {
color: #ffffff;
font-size: 1.1rem;
font-weight: 700;
margin: 0 0 0.5rem 0;
}
.case-step__content p {
color: rgba(255, 255, 255, 0.7);
font-size: 0.9rem;
line-height: 1.6;
margin: 0;
}
.case-verdict {
background: rgba(234, 194, 110, 0.08);
border: 1px solid rgba(234, 194, 110, 0.2);
border-radius: 12px;
padding: 2rem;
}
.case-verdict__badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: #22c55e;
color: #ffffff;
padding: 0.5rem 1rem;
border-radius: 6px;
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 1.5rem;
}
.case-verdict__badge svg {
width: 18px;
height: 18px;
}
.case-verdict p {
color: #0a2540;
font-size: 1rem;
line-height: 1.7;
margin: 0 0 1rem 0;
}
.case-sidebar {
position: sticky;
top: 100px;
height: fit-content;
display: flex;
flex-direction: column;
}
.case-sidebar__card {
background: #ffffff;
border-radius: 16px;
padding: 2rem;
border: 1px solid #e2e8f0;
margin-bottom: 1.5rem;
flex-shrink: 0;
}
.case-sidebar__card:last-child {
margin-bottom: 0;
flex-grow: 1;
}
.case-sidebar__card--ad {
display: flex;
align-items: stretch;
padding: 0;
overflow: hidden;
}
.case-sidebar__card--ad :global(.ad-banner) {
border: none;
border-radius: 0;
width: 100%;
}
.case-sidebar__title {
font-size: 1.1rem;
font-weight: 700;
color: #0a2540;
margin: 0 0 1.5rem 0;
padding-bottom: 1rem;
border-bottom: 2px solid #eac26e;
}
.case-sidebar__info {
display: flex;
flex-direction: column;
gap: 1rem;
}
.case-sidebar__row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 0;
border-bottom: 1px solid #f1f5f9;
}
.case-sidebar__row:last-child {
border-bottom: none;
}
.case-sidebar__row span {
color: #64748b;
font-size: 0.9rem;
}
.case-sidebar__row strong {
color: #0a2540;
font-weight: 600;
}
.case-sidebar__row strong.success {
color: #22c55e;
}
.case-sidebar__card--lawyer {
background: linear-gradient(135deg, #0a2540, #1e3050);
text-align: center;
}
.case-sidebar__lawyer-avatar {
width: 80px;
height: 80px;
background: rgba(234, 194, 110, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem;
border: 3px solid #eac26e;
}
.case-sidebar__lawyer-avatar svg {
width: 40px;
height: 40px;
color: #eac26e;
}
.case-sidebar__card--lawyer h3 {
color: #ffffff;
font-size: 1.1rem;
font-weight: 700;
margin: 0 0 0.25rem 0;
}
.case-sidebar__lawyer-name {
color: #eac26e;
font-size: 0.95rem;
margin: 0 0 1.25rem 0;
}
.case-sidebar__lawyer-stats {
display: flex;
justify-content: center;
gap: 1.5rem;
margin-bottom: 1.5rem;
padding: 1rem 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.case-sidebar__lawyer-stat {
display: flex;
flex-direction: column;
align-items: center;
}
.case-sidebar__lawyer-stat strong {
color: #ffffff;
font-size: 1.5rem;
font-weight: 800;
}
.case-sidebar__lawyer-stat span {
color: rgba(255, 255, 255, 0.6);
font-size: 0.75rem;
}
.case-sidebar__lawyer-link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
background: transparent;
border: 2px solid #eac26e;
color: #eac26e;
border-radius: 8px;
font-size: 0.9rem;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
}
.case-sidebar__lawyer-link:hover {
background: #eac26e;
color: #0a2540;
}
.case-sidebar__lawyer-link svg {
width: 16px;
height: 16px;
transition: transform 0.3s ease;
}
.case-sidebar__lawyer-link:hover svg {
transform: translateX(4px);
}
@media (max-width: 1024px) {
.case-grid {
grid-template-columns: 1fr;
}
.case-sidebar {
position: static;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.case-sidebar__card {
margin-bottom: 0;
}
}
@media (max-width: 768px) {
.case-content {
padding: 3rem 0;
}
.case-block {
padding: 2rem 1.5rem;
}
.case-sidebar {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.case-block {
padding: 1.5rem 1rem;
}
.case-step {
flex-direction: column;
text-align: center;
}
}
</style>

View file

@ -0,0 +1,604 @@
---
import Layout from '@layouts/Layout.astro';
import { SITE_URL } from '@constants';
import PageHero from "@components/base/PageHero.astro";
import RelatedCases from "@components/cases/RelatedCases.astro";
import AdBanner from "@components/base/AdBanner.astro";
const allCases = [
{
id: 1,
title: "Возврат прав после лишения по ст. 12.8 КоАП",
category: "Водительские права",
categoryIcon: "🚗",
description: "Клиент был лишён прав на 18 месяцев за якобы управление в состоянии опьянения. Мы нашли процессуальные нарушения при составлении протокола.",
resultLabel: "Лишение отменено",
duration: "3 месяца",
href: "/cases/driving-license-return-12-8"
},
{
id: 2,
title: "Взыскание 450 000 ₽ со страховой по ОСАГО",
category: "Страховые споры",
categoryIcon: "📋",
description: "Страховая компания выплатила лишь 120 000 ₽ при реальном ущербе в 570 000 ₽ после серьёзного ДТП.",
resultLabel: "Взыскано 450 000 ₽",
duration: "5 месяцев",
href: "/cases/osago-claim-450k"
},
{
id: 3,
title: "Оспаривание вины в ДТП с пострадавшим",
category: "ДТП и разбор",
categoryIcon: "🚨",
description: "Клиента обвиняли в нарушении ПДД, повлёкшем ДТП с пострадавшим. Грозил штраф и лишение прав.",
resultLabel: "Виновность не доказана",
duration: "4 месяца",
href: "/cases/dti-innocence-proof"
},
{
id: 5,
title: "Возврат прав после лишения за выезд на встречку",
category: "Водительские права",
categoryIcon: "🚗",
description: "Клиент лишён прав на 6 месяцев за выезд на полосу встречного движения. Камера зафиксировала нарушение.",
resultLabel: "Дело прекращено",
duration: "2 месяца",
href: "/cases/license-return-camera"
}
];
---
<Layout
title="Взыскание 450 000 ₽ со страховой по ОСАГО — автоюрист Сургут"
description="Страховая компания выплатила лишь 120 000 ₽ при реальном ущербе в 570 000 ₽. Удалось взыскать недостающую сумму через суд."
canonicalLink={`${SITE_URL}/cases/osago-claim-450k`}
breadcrumbs={[
{ label: 'Главная', href: '/' },
{ label: 'Кейсы', href: '/cases' },
{ label: 'Взыскание со страховой' }
]}
>
<PageHero
badgeText="КЕЙС #2"
titleWhite="Взыскание"
titleGold="450 000 ₽ со страховой"
description="Страховая компания занизила выплату в 5 раз. Благодаря грамотной стратегии удалось взыскать полную сумму ущерба."
btnText="Получить консультацию"
modalTarget="consultation-modal"
layout="with-image"
sideImage="/images/cases/casesImg.avif"
sideImageAlt="Автоюрист Сургут"
experienceBadge={{
number: "95%",
text: "УСПЕШНЫХ ДЕЛ"
}}
bgImage="/images/cases/casesBg.avif"
icon="briefcase"
/>
<div class="case-detail-page">
<section class="case-content">
<div class="site-container">
<div class="case-grid">
<article class="case-article">
<div class="case-block">
<h2 class="case-block__title">
<span class="case-block__icon">📋</span>
Исходная ситуация
</h2>
<div class="case-block__content">
<p>
Наш клиент попал в серьёзное ДТП, в результате которого его автомобиль
получил значительные повреждения. Страховая компания провела экспертизу,
однако оценка ущерба оказалась занижена почти в 5 раз.
</p>
<p>
<strong>Реальная стоимость ущерба составила 570 000 ₽, а страховая выплатила только 120 000 ₽.</strong>
</p>
<p>
Клиент обратился за помощью, когда исчерпал все досудебные способы
урегулирования спора со страховой компанией.
</p>
</div>
</div>
<div class="case-block case-block--accent">
<h2 class="case-block__title">
<span class="case-block__icon">🔍</span>
Что было сделано
</h2>
<div class="case-block__content">
<div class="case-steps">
<div class="case-step">
<div class="case-step__number">01</div>
<div class="case-step__content">
<h3>Независимая экспертиза</h3>
<p>
Провели независимую экспертизу ущерба в сертифицированном
автосервисе. Результат: 570 000 ₽.
</p>
</div>
</div>
<div class="case-step">
<div class="case-step__number">02</div>
<div class="case-step__content">
<h3>Досудебная претензия</h3>
<p>
Направили досудебную претензию с требованием доплатить
450 000 ₽. Страховая отказала.
</p>
</div>
</div>
<div class="case-step">
<div class="case-step__number">03</div>
<div class="case-step__content">
<h3>Подготовка иска</h3>
<p>
Подготовили исковое заявление с приложением всех
необходимых документов и экспертных заключений.
</p>
</div>
</div>
<div class="case-step">
<div class="case-step__number">04</div>
<div class="case-step__content">
<h3>Судебное представительство</h3>
<p>
Представили интересы клиента в суде. Страховая попыталась
оспорить экспертизу, но безуспешно.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="case-block">
<h2 class="case-block__title">
<span class="case-block__icon">⚖️</span>
Судебное решение
</h2>
<div class="case-block__content">
<div class="case-verdict">
<div class="case-verdict__badge">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
<path d="M20 6L9 17l-5-5"/>
</svg>
Взыскано 450 000 ₽
</div>
<p>
Суд полностью удовлетворил исковые требования. Страховая компания
обязана выплатить <strong>450 000 ₽</strong> недоплаченного возмещения.
</p>
<p>
Дополнительно взысканы: неустойка за нарушение сроков выплаты,
компенсация морального вреда и судебные расходы.
</p>
</div>
</div>
</div>
</article>
<aside class="case-sidebar">
<div class="case-sidebar__card">
<h3 class="case-sidebar__title">Детали кейса</h3>
<div class="case-sidebar__info">
<div class="case-sidebar__row">
<span>Категория</span>
<strong>Страховые споры</strong>
</div>
<div class="case-sidebar__row">
<span>Срок ведения</span>
<strong>5 месяцев</strong>
</div>
<div class="case-sidebar__row">
<span>Результат</span>
<strong class="success">Взыскано 450 000 ₽</strong>
</div>
</div>
</div>
<div class="case-sidebar__card case-sidebar__card--lawyer">
<div class="case-sidebar__lawyer-avatar">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
<circle cx="12" cy="7" r="4"/>
</svg>
</div>
<h3>Автоюрист Сургут</h3>
<p class="case-sidebar__lawyer-name">Алексей Петров</p>
<div class="case-sidebar__lawyer-stats">
<div class="case-sidebar__lawyer-stat">
<strong>12+</strong>
<span>лет опыта</span>
</div>
<div class="case-sidebar__lawyer-stat">
<strong>500+</strong>
<span>выигранных дел</span>
</div>
</div>
<a href="/services" class="case-sidebar__lawyer-link">
Все услуги
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M5 12h14"/>
<path d="m12 5 7 7-7 7"/>
</svg>
</a>
</div>
<div class="case-sidebar__card case-sidebar__card--ad">
<AdBanner
width="300"
height="640"
className="ad-banner--vertical"
/>
</div>
</aside>
</div>
</div>
</section>
</div>
<RelatedCases
title="Другие кейсы"
subtitle="ПОХОЖИЕ ДЕЛА"
cases={allCases}
currentCaseId={2}
/>
</Layout>
<style>
.case-detail-page {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
.case-content {
padding: 5rem 0;
background: #f8fafc;
}
.case-grid {
display: grid;
grid-template-columns: 1fr 380px;
gap: 3rem;
}
.case-block {
background: #ffffff;
border-radius: 16px;
padding: 2.5rem;
margin-bottom: 2rem;
border: 1px solid #e2e8f0;
}
.case-block:last-child {
margin-bottom: 0;
}
.case-block--accent {
background: linear-gradient(135deg, #0a2540, #1e3050);
border: none;
}
.case-block--accent .case-block__title {
color: #eac26e;
}
.case-block--accent .case-block__content {
color: rgba(255, 255, 255, 0.85);
}
.case-block--accent p {
color: rgba(255, 255, 255, 0.85);
}
.case-block__title {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 1.35rem;
font-weight: 700;
color: #0a2540;
margin: 0 0 1.5rem 0;
}
.case-block__icon {
font-size: 1.5rem;
}
.case-block__content p {
color: #475569;
font-size: 1rem;
line-height: 1.7;
margin: 0 0 1rem 0;
}
.case-block__content p:last-child {
margin-bottom: 0;
}
.case-steps {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.case-step {
display: flex;
gap: 1.5rem;
align-items: flex-start;
}
.case-step__number {
width: 48px;
height: 48px;
background: rgba(234, 194, 110, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
font-weight: 900;
color: #eac26e;
flex-shrink: 0;
}
.case-step__content h3 {
color: #ffffff;
font-size: 1.1rem;
font-weight: 700;
margin: 0 0 0.5rem 0;
}
.case-step__content p {
color: rgba(255, 255, 255, 0.7);
font-size: 0.9rem;
line-height: 1.6;
margin: 0;
}
.case-verdict {
background: rgba(234, 194, 110, 0.08);
border: 1px solid rgba(234, 194, 110, 0.2);
border-radius: 12px;
padding: 2rem;
}
.case-verdict__badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: #22c55e;
color: #ffffff;
padding: 0.5rem 1rem;
border-radius: 6px;
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 1.5rem;
}
.case-verdict__badge svg {
width: 18px;
height: 18px;
}
.case-verdict p {
color: #0a2540;
font-size: 1rem;
line-height: 1.7;
margin: 0 0 1rem 0;
}
.case-sidebar {
position: sticky;
top: 100px;
height: fit-content;
display: flex;
flex-direction: column;
}
.case-sidebar__card {
background: #ffffff;
border-radius: 16px;
padding: 2rem;
border: 1px solid #e2e8f0;
margin-bottom: 1.5rem;
flex-shrink: 0;
}
.case-sidebar__card:last-child {
margin-bottom: 0;
flex-grow: 1;
}
.case-sidebar__card--ad {
display: flex;
align-items: stretch;
padding: 0;
overflow: hidden;
}
.case-sidebar__card--ad :global(.ad-banner) {
border: none;
border-radius: 0;
width: 100%;
}
.case-sidebar__title {
font-size: 1.1rem;
font-weight: 700;
color: #0a2540;
margin: 0 0 1.5rem 0;
padding-bottom: 1rem;
border-bottom: 2px solid #eac26e;
}
.case-sidebar__info {
display: flex;
flex-direction: column;
gap: 1rem;
}
.case-sidebar__row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 0;
border-bottom: 1px solid #f1f5f9;
}
.case-sidebar__row:last-child {
border-bottom: none;
}
.case-sidebar__row span {
color: #64748b;
font-size: 0.9rem;
}
.case-sidebar__row strong {
color: #0a2540;
font-weight: 600;
}
.case-sidebar__row strong.success {
color: #22c55e;
}
.case-sidebar__card--lawyer {
background: linear-gradient(135deg, #0a2540, #1e3050);
text-align: center;
}
.case-sidebar__lawyer-avatar {
width: 80px;
height: 80px;
background: rgba(234, 194, 110, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem;
border: 3px solid #eac26e;
}
.case-sidebar__lawyer-avatar svg {
width: 40px;
height: 40px;
color: #eac26e;
}
.case-sidebar__card--lawyer h3 {
color: #ffffff;
font-size: 1.1rem;
font-weight: 700;
margin: 0 0 0.25rem 0;
}
.case-sidebar__lawyer-name {
color: #eac26e;
font-size: 0.95rem;
margin: 0 0 1.25rem 0;
}
.case-sidebar__lawyer-stats {
display: flex;
justify-content: center;
gap: 1.5rem;
margin-bottom: 1.5rem;
padding: 1rem 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.case-sidebar__lawyer-stat {
display: flex;
flex-direction: column;
align-items: center;
}
.case-sidebar__lawyer-stat strong {
color: #ffffff;
font-size: 1.5rem;
font-weight: 800;
}
.case-sidebar__lawyer-stat span {
color: rgba(255, 255, 255, 0.6);
font-size: 0.75rem;
}
.case-sidebar__lawyer-link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
background: transparent;
border: 2px solid #eac26e;
color: #eac26e;
border-radius: 8px;
font-size: 0.9rem;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
}
.case-sidebar__lawyer-link:hover {
background: #eac26e;
color: #0a2540;
}
.case-sidebar__lawyer-link svg {
width: 16px;
height: 16px;
transition: transform 0.3s ease;
}
.case-sidebar__lawyer-link:hover svg {
transform: translateX(4px);
}
@media (max-width: 1024px) {
.case-grid {
grid-template-columns: 1fr;
}
.case-sidebar {
position: static;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.case-sidebar__card {
margin-bottom: 0;
}
}
@media (max-width: 768px) {
.case-content {
padding: 3rem 0;
}
.case-block {
padding: 2rem 1.5rem;
}
.case-sidebar {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.case-block {
padding: 1.5rem 1rem;
}
.case-step {
flex-direction: column;
text-align: center;
}
}
</style>

View file

@ -21,6 +21,7 @@ import ServiceCategories from "@components/services/ServiceCategories.astro";
titleGold="услуги"
description="Я обеспечиваю экспертную защиту прав водителей в Сургуте и Ханты-Мансийском автономном округе."
btnText="Получить помощь"
modalTarget="consultation-modal"
layout="with-image"
sideImage="/images/services/office-table.avif"
sideImageAlt="Автоюрист Сургут"