Новые изменения в проекте

frontend/src/components/cases/CaseSidebar.astro

@@ -0,0 +1,66 @@
+---
+import AdBanner from "@components/base/AdBanner.astro";
+import { EXPERIENCE_YEARS } from '@constants';
+
+interface Props {
+    category: string;
+    duration: string;
+    result: string;
+}
+
+const { category, duration, result } = Astro.props;
+---
+
+<div class="case-sidebar__card">
+    <h3 class="case-sidebar__title">Детали кейса</h3>
+    <div class="case-sidebar__info">
+        <div class="case-sidebar__row">
+            <span>Категория</span>
+            <strong>{category}</strong>
+        </div>
+        <div class="case-sidebar__row">
+            <span>Срок ведения</span>
+            <strong>{duration}</strong>
+        </div>
+        <div class="case-sidebar__row">
+            <span>Результат</span>
+            <strong class="success">{result}</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>

frontend/src/components/cases/CasesList.astro

@@ -69,7 +69,7 @@ const categoriesList = [
         <!-- Список кейсов -->
         <div class="cases-list">
             {paginatedCases.map((caseItem: Case, index: number) => (
-                <article class="case-card animate-on-scroll" data-animation="slide-up" data-delay={index * 100 + 300} data-category={caseItem.category}>
+                <a href={caseItem.href} class="case-card animate-on-scroll" data-animation="slide-up" data-delay={index * 100 + 300} data-category={caseItem.category}>
                     <div class="case-card__inner">
                         <!-- Верхняя часть -->
                         <div class="case-card__header">
@@ -130,15 +130,15 @@ const categoriesList = [
                         </div>
 
                         <!-- Кнопка -->
-                        <a href={caseItem.href} class="case-card__link">
+                        <span class="case-card__link">
                             <span>Подробнее о деле</span>
                             <svg 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>
-                        </a>
+                        </span>
                     </div>
-                </article>
+                </a>
             ))}
         </div>
 
@@ -302,7 +302,7 @@ const categoriesList = [
     }
 
     .case-card {
-        display: flex;
+        display: block;
         text-decoration: none;
         color: inherit;
         cursor: pointer;

frontend/src/layouts/CaseLayout.astro

@@ -0,0 +1,361 @@
+---
+import Layout from '@layouts/Layout.astro';
+import { SITE_URL } from '@constants';
+import PageHero from "@components/base/PageHero.astro";
+import CaseSidebar from '@components/cases/CaseSidebar.astro';
+import RelatedCases from "@components/cases/RelatedCases.astro";
+
+interface Props {
+    title: string;
+    description: string;
+    canonicalPath: string;
+    badgeText: string;
+    titleWhite: string;
+    titleGold: string;
+    heroDescription: string;
+    currentCaseId: number;
+    category: string;
+    duration: string;
+    result: string;
+}
+
+const {
+    title,
+    description,
+    canonicalPath,
+    badgeText,
+    titleWhite,
+    titleGold,
+    heroDescription,
+    currentCaseId,
+    category,
+    duration,
+    result
+} = Astro.props;
+
+const breadcrumbs = [
+    { label: 'Главная', href: '/' },
+    { label: 'Кейсы', href: '/cases' },
+    { label: badgeText.replace('КЕЙС #', 'Кейс ') }
+];
+---
+
+<Layout
+    title={title}
+    description={description}
+    canonicalLink={`${SITE_URL}${canonicalPath}`}
+    breadcrumbs={breadcrumbs}
+>
+    <PageHero
+        badgeText={badgeText}
+        titleWhite={titleWhite}
+        titleGold={titleGold}
+        description={heroDescription}
+        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">
+                        <slot />
+                    </article>
+
+                    <aside class="case-sidebar">
+                        <CaseSidebar
+                            category={category}
+                            duration={duration}
+                            result={result}
+                        />
+                    </aside>
+                </div>
+            </div>
+        </section>
+    </div>
+
+    <RelatedCases
+        title="Другие кейсы"
+        subtitle="ПОХОЖИЕ ДЕЛА"
+        currentCaseId={currentCaseId}
+    />
+</Layout>
+
+<style is:global>
+    .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: 1rem 0;
+    }
+
+    .case-list li {
+        position: relative;
+        padding-left: 1.5rem;
+        margin-bottom: 0.75rem;
+        color: #475569;
+    }
+
+    .case-list li::before {
+        content: '•';
+        position: absolute;
+        left: 0;
+        color: #eac26e;
+        font-weight: bold;
+    }
+
+    .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;
+    }
+
+    @media (max-width: 1024px) {
+        .case-grid {
+            grid-template-columns: 1fr;
+        }
+
+        .case-sidebar {
+            position: static;
+            display: grid;
+            grid-template-columns: 1fr;
+            gap: 1rem;
+        }
+    }
+
+    @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;
+        }
+    }
+
+    @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;
+        }
+    }
+</style>

frontend/src/pages/cases/casco-damage-claim.astro

@@ -0,0 +1,95 @@
+---
+import CaseLayout from '@layouts/CaseLayout.astro';
+---
+
+<CaseLayout
+    title="Взыскание ущерба с виновника ДТП по КАСКО — автоюрист Сургут"
+    description="Страховая по КАСКО выплатила не полную сумму. Разницу взыскали напрямую с виновника аварии через суд."
+    canonicalPath="/cases/casco-damage-claim"
+    badgeText="КЕЙС #7"
+    titleWhite="Взыскание ущерба"
+    titleGold="с виновника ДТП по КАСКО"
+    heroDescription="Страховая по КАСКО выплатила не полную сумму. Благодаря грамотной стратегии удалось взыскать разницу с виновника."
+    currentCaseId={7}
+    category="Страховые споры"
+    duration="4 месяца"
+    result="Взыскано 280 000 ₽"
+>
+    <div class="case-block" slot="situation">
+        <p>
+            Наш клиент стал участником серьёзного ДТП, в котором виновником
+            был признан другой водитель. Автомобиль клиента получил значительные
+            повреждения.
+        </p>
+        <p>
+            <strong>Страховая компания по КАСКО выплатила 320 000 ₽,
+            однако реальная стоимость ущерба составила 600 000 ₽.</strong>
+        </p>
+        <p>
+            Виновник ДТП отказался добровольно возмещать разницу, ссылаясь
+            на то, что у него есть ОСАГО и все претензии нужно предъявлять
+            страховым компаниям.
+        </p>
+    </div>
+
+    <div class="case-steps" slot="steps">
+        <div class="case-step">
+            <div class="case-step__number">01</div>
+            <div class="case-step__content">
+                <h3>Оценка ущерба</h3>
+                <p>
+                    Провели независимую экспертизу, которая установила
+                    реальную стоимость ущерба в 600 000 ₽.
+                </p>
+            </div>
+        </div>
+        <div class="case-step">
+            <div class="case-step__number">02</div>
+            <div class="case-step__content">
+                <h3>Претензия виновнику</h3>
+                <p>
+                    Направили досудебную претензию виновнику ДТП с
+                    требованием возместить разницу в 280 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 class="case-verdict" slot="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>
+            Взыскано 280 000 ₽
+        </div>
+        <p>
+            Суд полностью удовлетворил исковые требования. С виновника ДТП
+            взыскана разница между выплатой КАСКО и реальным ущербом —
+            <strong>280 000 ₽</strong>.
+        </p>
+        <p>
+            Дополнительно взысканы судебные расходы и расходы на
+            представительство в суде.
+        </p>
+    </div>
+</CaseLayout>

frontend/src/pages/cases/driving-license-return-12-8.astro

@@ -1,6 +1,6 @@
 ---
 import Layout from '@layouts/Layout.astro';
-import { SITE_URL } from '@constants';
+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";
@@ -170,7 +170,7 @@ import AdBanner from "@components/base/AdBanner.astro";
 						<p class="case-sidebar__lawyer-name">Алексей Петров</p>
 						<div class="case-sidebar__lawyer-stats">
 							<div class="case-sidebar__lawyer-stat">
-								<strong>12+</strong>
+								<strong>{EXPERIENCE_YEARS}</strong>
 								<span>лет опыта</span>
 							</div>
 							<div class="case-sidebar__lawyer-stat">
@@ -190,7 +190,7 @@ import AdBanner from "@components/base/AdBanner.astro";
 					<div class="case-sidebar__card case-sidebar__card--ad">
 						<AdBanner
 							width="300"
-							height="640"
+							height="470"
 							className="ad-banner--vertical"
 						/>
 					</div>

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

@@ -1,6 +1,6 @@
 ---
 import Layout from '@layouts/Layout.astro';
-import { SITE_URL } from '@constants';
+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";
@@ -168,7 +168,7 @@ import AdBanner from "@components/base/AdBanner.astro";
 						<p class="case-sidebar__lawyer-name">Алексей Петров</p>
 						<div class="case-sidebar__lawyer-stats">
 							<div class="case-sidebar__lawyer-stat">
-								<strong>12+</strong>
+								<strong>{EXPERIENCE_YEARS}</strong>
 								<span>лет опыта</span>
 							</div>
 							<div class="case-sidebar__lawyer-stat">
@@ -188,7 +188,7 @@ import AdBanner from "@components/base/AdBanner.astro";
 					<div class="case-sidebar__card case-sidebar__card--ad">
 						<AdBanner
 							width="300"
-							height="640"
+							height="470"
 							className="ad-banner--vertical"
 						/>
 					</div>

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

@@ -1,6 +1,6 @@
 ---
 import Layout from '@layouts/Layout.astro';
-import { SITE_URL } from '@constants';
+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";
@@ -90,7 +90,7 @@ import AdBanner from "@components/base/AdBanner.astro";
 								<div class="case-step">
 									<div class="case-step__number">03</div>
 									<div class="case-step__content">
-										<h3>Автот<EFBFBD><EFBFBD>хническая экспертиза</h3>
+										<h3>Автотехническая экспертиза</h3>
 										<p>
 											Провели независимую экспертизу, которая установила
 											невозможность определения виновника по представленным материалам.
@@ -167,7 +167,7 @@ import AdBanner from "@components/base/AdBanner.astro";
 						<p class="case-sidebar__lawyer-name">Алексей Петров</p>
 						<div class="case-sidebar__lawyer-stats">
 							<div class="case-sidebar__lawyer-stat">
-								<strong>12+</strong>
+								<strong>{EXPERIENCE_YEARS}</strong>
 								<span>лет опыта</span>
 							</div>
 							<div class="case-sidebar__lawyer-stat">
@@ -187,7 +187,7 @@ import AdBanner from "@components/base/AdBanner.astro";
 					<div class="case-sidebar__card case-sidebar__card--ad">
 						<AdBanner
 							width="300"
-							height="640"
+							height="470"
 							className="ad-banner--vertical"
 						/>
 					</div>

frontend/src/pages/cases/health-damage-claim.astro

@@ -1,6 +1,6 @@
 ---
 import Layout from '@layouts/Layout.astro';
-import { SITE_URL } from '@constants';
+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";
@@ -164,7 +164,7 @@ import AdBanner from "@components/base/AdBanner.astro";
 						<p class="case-sidebar__lawyer-name">Алексей Петров</p>
 						<div class="case-sidebar__lawyer-stats">
 							<div class="case-sidebar__lawyer-stat">
-								<strong>12+</strong>
+								<strong>{EXPERIENCE_YEARS}</strong>
 								<span>лет опыта</span>
 							</div>
 							<div class="case-sidebar__lawyer-stat">
@@ -184,7 +184,7 @@ import AdBanner from "@components/base/AdBanner.astro";
 					<div class="case-sidebar__card case-sidebar__card--ad">
 						<AdBanner
 							width="300"
-							height="640"
+							height="470"
 							className="ad-banner--vertical"
 						/>
 					</div>

frontend/src/pages/cases/license-return-camera.astro

@@ -1,6 +1,6 @@
 ---
 import Layout from '@layouts/Layout.astro';
-import { SITE_URL } from '@constants';
+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";
@@ -168,7 +168,7 @@ import AdBanner from "@components/base/AdBanner.astro";
 						<p class="case-sidebar__lawyer-name">Алексей Петров</p>
 						<div class="case-sidebar__lawyer-stats">
 							<div class="case-sidebar__lawyer-stat">
-								<strong>12+</strong>
+								<strong>{EXPERIENCE_YEARS}</strong>
 								<span>лет опыта</span>
 							</div>
 							<div class="case-sidebar__lawyer-stat">
@@ -188,7 +188,7 @@ import AdBanner from "@components/base/AdBanner.astro";
 					<div class="case-sidebar__card case-sidebar__card--ad">
 						<AdBanner
 							width="300"
-							height="640"
+							height="470"
 							className="ad-banner--vertical"
 						/>
 					</div>

frontend/src/pages/cases/osago-claim-450k.astro

@@ -1,6 +1,6 @@
 ---
 import Layout from '@layouts/Layout.astro';
-import { SITE_URL } from '@constants';
+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";
@@ -167,7 +167,7 @@ import AdBanner from "@components/base/AdBanner.astro";
 						<p class="case-sidebar__lawyer-name">Алексей Петров</p>
 						<div class="case-sidebar__lawyer-stats">
 							<div class="case-sidebar__lawyer-stat">
-								<strong>12+</strong>
+								<strong>{EXPERIENCE_YEARS}</strong>
 								<span>лет опыта</span>
 							</div>
 							<div class="case-sidebar__lawyer-stat">
@@ -187,7 +187,7 @@ import AdBanner from "@components/base/AdBanner.astro";
 					<div class="case-sidebar__card case-sidebar__card--ad">
 						<AdBanner
 							width="300"
-							height="640"
+							height="470"
 							className="ad-banner--vertical"
 						/>
 					</div>

frontend/src/pages/cases/page/[page].astro

@@ -3,7 +3,6 @@ import Layout from '@layouts/Layout.astro';
 import { SITE_URL, EXPERIENCE_YEARS } from '@constants';
 import PageHero from '@components/base/PageHero.astro';
 import CasesList from '@components/cases/CasesList.astro';
-import CTA from '@components/base/CTA.astro';
 
 export const prerender = false;