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

652 lines
No EOL
15 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, EXPERIENCE_YEARS } from '@constants';
import PageHero from "@components/base/PageHero.astro";
import RelatedCases from "@components/cases/RelatedCases.astro";
import AdBanner from "@components/base/AdBanner.astro";
---
<Layout
title="Доказывание невиновности в ДТП — автоюрист Сургут"
description="Клиента признали виновным в ДТП на основании рапорта инспектора. Мы доказали несостоятельность обвинения."
canonicalLink={`${SITE_URL}/cases/dtp-innocence-proof`}
breadcrumbs={[
{ label: 'Главная', href: '/' },
{ label: 'Кейсы', href: '/cases' },
{ label: 'Доказывание невиновности в ДТП' }
]}
>
<PageHero
badgeText="КЕЙС #4"
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>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>{EXPERIENCE_YEARS}</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="470"
className="ad-banner--vertical"
/>
</div>
</aside>
</div>
</div>
</section>
</div>
<RelatedCases
title="Другие кейсы"
subtitle="ПОХОЖИЕ ДЕЛА"
currentCaseId={4}
/>
</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: 1fr;
gap: 1rem;
}
.case-sidebar__card {
margin-bottom: 0;
}
}
@media (max-width: 768px) {
.case-detail-page {
padding: 0;
}
.case-content {
padding: 2rem 0;
}
.case-grid {
gap: 1.5rem;
}
.case-block {
padding: 1.5rem;
border-radius: 12px;
border-left: none;
border-right: none;
}
.case-block__title {
justify-content: center;
}
.case-block__content {
text-align: center;
}
.case-step {
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.75rem;
}
.case-sidebar {
grid-template-columns: 1fr;
}
.case-sidebar__card {
border-radius: 12px;
border-left: none;
border-right: none;
}
}
@media (max-width: 480px) {
.case-block {
padding: 1.25rem;
}
.case-block__title {
font-size: 1.15rem;
}
.case-block__content p {
font-size: 0.9rem;
}
.case-step {
flex-direction: column;
text-align: center;
gap: 0.75rem;
}
.case-step__number {
width: 40px;
height: 40px;
font-size: 0.9rem;
}
.case-step__content h3 {
font-size: 1rem;
}
.case-step__content p {
font-size: 0.85rem;
}
.case-verdict {
padding: 1.25rem;
}
.case-verdict__badge {
font-size: 0.8rem;
display: flex;
justify-content: center;
}
.case-sidebar__title {
font-size: 1rem;
text-align: center;
}
.case-sidebar__row {
font-size: 0.85rem;
flex-direction: column;
align-items: center;
gap: 0.5rem;
text-align: center;
}
.case-sidebar__lawyer-avatar {
width: 60px;
height: 60px;
}
.case-sidebar__lawyer-avatar svg {
width: 30px;
height: 30px;
}
.case-sidebar__lawyer-stat strong {
font-size: 1.25rem;
}
}
</style>