astro_avtourist/frontend/src/pages/cases/dti-innocence-proof.astro

605 lines
No EOL
16 KiB
Text
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
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>