Новый дизан
This commit is contained in:
Web-serfer
parent
0678c81284
commit
32bcc76021
11 changed files with 1639 additions and 622 deletions
859
frontend/src/components/cases/CasesList.astro
Normal file
859
frontend/src/components/cases/CasesList.astro
Normal file
|
|
@ -0,0 +1,859 @@
|
|||
---
|
||||
import Button from '@components/base/Button.astro';
|
||||
|
||||
interface Case {
|
||||
id: number;
|
||||
title: string;
|
||||
category: string;
|
||||
categoryIcon: string;
|
||||
description: string;
|
||||
situation: string;
|
||||
result: string;
|
||||
resultLabel: string;
|
||||
duration: string;
|
||||
sum?: string;
|
||||
href: string;
|
||||
}
|
||||
|
||||
const {
|
||||
sectionSubtitle = "НАША ПРАКТИКА",
|
||||
sectionTitle = "Последние выигранные дела",
|
||||
sectionDescription = "Каждое дело — это уникальная история с индивидуальным подходом. Вот лишь некоторые примеры нашей работы.",
|
||||
filterLabel = "Выберите категорию:",
|
||||
cases = [
|
||||
{
|
||||
id: 1,
|
||||
title: "Возврат прав после лишения по ст. 12.8 КоАП",
|
||||
category: "Водительские права",
|
||||
categoryIcon: "🚗",
|
||||
description: "Клиент был лишён прав на 18 месяцев за якобы управление в состоянии опьянения. Мы нашли процессуальные нарушения при составлении протокола.",
|
||||
situation: "Инспекторы ДПС допустили нарушения при освидетельствовании: не были приглашены понятые, протокол составлен без присутствия двух понятых.",
|
||||
result: "Суд первой инстанции отменил постановление. Права возвращены в полном объёме.",
|
||||
resultLabel: "Лишение отменено",
|
||||
duration: "3 месяца",
|
||||
href: "/cases/driving-license-return-12-8"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Взыскание 450 000 ₽ со страховой по ОСАГО",
|
||||
category: "Страховые споры",
|
||||
categoryIcon: "📋",
|
||||
description: "Страховая компания выплатила лишь 120 000 ₽ при реальном ущербе в 570 000 ₽ после серьёзного ДТП.",
|
||||
situation: "После аварии автомобиль клиента получил значительные повреждения. Оценка страховой оказалась занижена почти в 5 раз.",
|
||||
result: "Суд удовлетворил иск полностью. Взыскано 450 000 ₽ недоплаты + неустойка и штраф.",
|
||||
resultLabel: "Взыскано 450 000 ₽",
|
||||
duration: "5 месяцев",
|
||||
sum: "450 000 ₽",
|
||||
href: "/cases/osago-claim-450k"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Оспаривание вины в ДТП с пострадавшим",
|
||||
category: "ДТП и разбор",
|
||||
categoryIcon: "🚨",
|
||||
description: "Клиента обвиняли в нарушении ПДД, повлёкшем ДТП с пострадавшим. Грозил штраф и лишение прав.",
|
||||
situation: "На перекрёстке произошло столкновение. Инспектор ГИБДД изначально признал виновным нашего клиента.",
|
||||
result: "Благодаря видеозаписи с камеры и показаниям свидетелей удалось доказать невиновность.",
|
||||
resultLabel: "Виновность не доказана",
|
||||
duration: "4 месяца",
|
||||
href: "/cases/dti-innocence-proof"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Защита интересов в арбитражном суде",
|
||||
category: "Судебное представительство",
|
||||
categoryIcon: "🏛️",
|
||||
description: "Представляли интересы юридического лица в споре со страховой компанией по договору КАСКО на автопарк.",
|
||||
situation: "Страховая отказала в выплате по нескольким страховым случаям, ссылаясь на нарушения условий договора.",
|
||||
result: "Суд признал отказ необоснованным. Взыскано 1 200 000 ₽ по всем эпизодам.",
|
||||
resultLabel: "Взыскано 1 200 000 ₽",
|
||||
duration: "7 месяцев",
|
||||
sum: "1 200 000 ₽",
|
||||
href: "/cases/casaco-fleet-claim"
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: "Возврат прав после лишения за выезд на встречку",
|
||||
category: "Водительские права",
|
||||
categoryIcon: "🚗",
|
||||
description: "Клиент лишён прав на 6 месяцев за выезд на полосу встречного движения. Камера зафиксировала нарушение.",
|
||||
situation: "Нарушение было зафиксировано автоматической камерой. Клиент утверждал, что за рулём был другой человек.",
|
||||
result: "Суд учёл предоставленные доказательства. Лишение отменено, дело прекращено.",
|
||||
resultLabel: "Дело прекращено",
|
||||
duration: "2 месяца",
|
||||
href: "/cases/license-return-camera"
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: "Взыскание ущерба с виновника ДТП по КАСКО",
|
||||
category: "Страховые споры",
|
||||
categoryIcon: "🛡️",
|
||||
description: "Страховая по КАСКО выплатила не полную сумму. Разницу решили взыскать напрямую с виновника аварии.",
|
||||
situation: "Виновник ДТП отказался добровольно возмещать разницу между выплатой КАСКО и реальным ущербом.",
|
||||
result: "Суд вынес решение в пользу клиента. Взыскано 280 000 ₽ + судебные расходы.",
|
||||
resultLabel: "Взыскано 280 000 ₽",
|
||||
duration: "4 месяца",
|
||||
sum: "280 000 ₽",
|
||||
href: "/cases/casco-damage-claim"
|
||||
}
|
||||
] as Case[]
|
||||
} = Astro.props;
|
||||
|
||||
// Получаем уникальные категории
|
||||
const categories = ["Все", ...Array.from(new Set(cases.map((c: Case) => c.category)))];
|
||||
---
|
||||
|
||||
<section class="cases-section">
|
||||
<div class="site-container">
|
||||
<!-- Заголовок -->
|
||||
<div class="cases-header">
|
||||
<span class="cases-subtitle animate-on-scroll" data-animation="fade-up">{sectionSubtitle}</span>
|
||||
<h2 class="cases-title animate-on-scroll" data-animation="fade-up" data-delay="100">{sectionTitle}</h2>
|
||||
<p class="cases-desc animate-on-scroll" data-animation="fade-up" data-delay="150">{sectionDescription}</p>
|
||||
</div>
|
||||
|
||||
<!-- Фильтры -->
|
||||
<div class="cases-filters animate-on-scroll" data-animation="fade-up" data-delay="200">
|
||||
<span class="cases-filter-label">{filterLabel}</span>
|
||||
<div class="cases-filter-buttons">
|
||||
{categories.map((category, index) => (
|
||||
<button
|
||||
class="cases-filter-btn {index === 0 ? 'active' : ''}"
|
||||
data-filter={index === 0 ? 'all' : category}
|
||||
>
|
||||
{index > 0 && <span class="cases-filter-btn-icon">{cases.find((c: Case) => c.category === category)?.categoryIcon}</span>}
|
||||
{category}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Список кейсов -->
|
||||
<div class="cases-list">
|
||||
{cases.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}>
|
||||
<div class="case-card__inner">
|
||||
<!-- Верхняя часть -->
|
||||
<div class="case-card__header">
|
||||
<div class="case-card__category">
|
||||
<span class="case-card__category-icon">{caseItem.categoryIcon}</span>
|
||||
<span class="case-card__category-text">{caseItem.category}</span>
|
||||
</div>
|
||||
<h3 class="case-card__title">{caseItem.title}</h3>
|
||||
</div>
|
||||
|
||||
<!-- Описание -->
|
||||
<p class="case-card__desc">{caseItem.description}</p>
|
||||
|
||||
<!-- Ситуация -->
|
||||
<div class="case-card__situation">
|
||||
<div class="case-card__situation-label">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="12" cy="12" r="10"/>
|
||||
<path d="M12 16v-4"/>
|
||||
<path d="M12 8h.01"/>
|
||||
</svg>
|
||||
Ситуация
|
||||
</div>
|
||||
<p class="case-card__situation-text">{caseItem.situation}</p>
|
||||
</div>
|
||||
|
||||
<!-- Результат -->
|
||||
<div class="case-card__result">
|
||||
<div class="case-card__result-header">
|
||||
<div class="case-card__result-label">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M20 6L9 17l-5-5"/>
|
||||
</svg>
|
||||
Результат
|
||||
</div>
|
||||
<span class="case-card__result-badge">{caseItem.resultLabel}</span>
|
||||
</div>
|
||||
<p class="case-card__result-text">{caseItem.result}</p>
|
||||
</div>
|
||||
|
||||
<!-- Мета-информация -->
|
||||
<div class="case-card__meta">
|
||||
<div class="case-card__meta-item">
|
||||
<svg class="case-card__meta-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="12" cy="12" r="10"/>
|
||||
<path d="M12 6v6l4 2"/>
|
||||
</svg>
|
||||
<span class="case-card__meta-text">Срок: {caseItem.duration}</span>
|
||||
</div>
|
||||
{caseItem.sum && (
|
||||
<div class="case-card__meta-item case-card__meta-item--sum">
|
||||
<svg class="case-card__meta-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>
|
||||
</svg>
|
||||
<span class="case-card__meta-text case-card__meta-text--sum">Сумма: {caseItem.sum}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<!-- Кнопка -->
|
||||
<a href={caseItem.href} 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>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<!-- CTA -->
|
||||
<div class="cases-cta animate-on-scroll" data-animation="fade-up" data-delay="800">
|
||||
<div class="cases-cta__icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="cases-cta__title">Нужна помощь с похожей ситуацией?</h3>
|
||||
<p class="cases-cta__desc">Расскажите о вашей проблеме — мы найдём решение. Первая консультация бесплатно.</p>
|
||||
<Button variant="gold" size="lg" href="#contact">
|
||||
Получить консультацию
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--color-primary: #0a2540;
|
||||
--color-primary-light: #1e3050;
|
||||
--color-accent: #eac26e;
|
||||
--color-accent-dark: #ce9f40;
|
||||
--color-accent-glow: rgba(234, 194, 110, 0.15);
|
||||
--color-light: #ffffff;
|
||||
--color-gray: #94a3b8;
|
||||
--color-gray-light: #e2e8f0;
|
||||
--color-bg: #f8fafc;
|
||||
--color-bg-alt: #f1f5f9;
|
||||
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
--shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12);
|
||||
--shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.cases-section {
|
||||
padding: 6rem 1.5rem;
|
||||
background: linear-gradient(180deg, #ffffff 0%, var(--color-bg) 100%);
|
||||
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
||||
}
|
||||
|
||||
.site-container {
|
||||
max-width: var(--site-max-width, 1400px);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* --- Заголовок --- */
|
||||
.cases-header {
|
||||
margin-bottom: 3.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cases-subtitle {
|
||||
display: inline-block;
|
||||
color: var(--color-accent);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 3px;
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.5rem 1.25rem;
|
||||
background: rgba(234, 194, 110, 0.1);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.cases-title {
|
||||
color: var(--color-primary);
|
||||
font-size: clamp(2rem, 4vw, 3rem);
|
||||
font-weight: 800;
|
||||
margin: 0 0 1rem 0;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.cases-desc {
|
||||
color: var(--color-gray);
|
||||
font-size: 1.1rem;
|
||||
max-width: 750px;
|
||||
margin: 0 auto;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* --- Фильтры --- */
|
||||
.cases-filters {
|
||||
margin-bottom: 3rem;
|
||||
padding: 1.5rem 2rem;
|
||||
background: #ffffff;
|
||||
border-radius: 12px;
|
||||
box-shadow: var(--shadow-sm);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.cases-filter-label {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-primary);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.cases-filter-buttons {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.cases-filter-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.6rem 1.25rem;
|
||||
border: 2px solid var(--color-gray-light);
|
||||
background: #ffffff;
|
||||
border-radius: 8px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-primary);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.cases-filter-btn:hover {
|
||||
border-color: var(--color-accent);
|
||||
background: rgba(234, 194, 110, 0.05);
|
||||
}
|
||||
|
||||
.cases-filter-btn.active {
|
||||
border-color: var(--color-accent);
|
||||
background: var(--color-accent);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.cases-filter-btn-icon {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
/* --- Список кейсов --- */
|
||||
.cases-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2.5rem;
|
||||
margin-bottom: 5rem;
|
||||
}
|
||||
|
||||
/* --- Карточка кейса --- */
|
||||
.case-card {
|
||||
opacity: 0;
|
||||
transform: translateY(40px);
|
||||
transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.case-card.is-visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.case-card__inner {
|
||||
position: relative;
|
||||
background: #ffffff;
|
||||
border-radius: 16px;
|
||||
padding: 2.5rem;
|
||||
border: 1px solid var(--color-gray-light);
|
||||
box-shadow: var(--shadow-md);
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.case-card__inner::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 6px;
|
||||
height: 100%;
|
||||
background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.case-card:hover .case-card__inner {
|
||||
box-shadow: var(--shadow-xl);
|
||||
border-color: rgba(234, 194, 110, 0.3);
|
||||
}
|
||||
|
||||
.case-card:hover .case-card__inner::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.case-card__header {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.case-card__category {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.4rem 0.9rem;
|
||||
background: rgba(234, 194, 110, 0.1);
|
||||
border-radius: 6px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.case-card__category-icon {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.case-card__category-text {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-accent-dark);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.case-card__title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--color-primary);
|
||||
margin: 0;
|
||||
line-height: 1.3;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.case-card:hover .case-card__title {
|
||||
color: var(--color-accent-dark);
|
||||
}
|
||||
|
||||
/* Описание */
|
||||
.case-card__desc {
|
||||
font-size: 1rem;
|
||||
line-height: 1.6;
|
||||
color: var(--color-gray);
|
||||
margin: 0 0 1.75rem 0;
|
||||
}
|
||||
|
||||
/* Ситуация */
|
||||
.case-card__situation {
|
||||
padding: 1.25rem 1.5rem;
|
||||
background: var(--color-bg);
|
||||
border-radius: 10px;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.case-card__situation-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 700;
|
||||
color: var(--color-primary);
|
||||
margin-bottom: 0.5rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.case-card__situation-label svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.case-card__situation-text {
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.6;
|
||||
color: var(--color-primary-light);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Результат */
|
||||
.case-card__result {
|
||||
padding: 1.25rem 1.5rem;
|
||||
background: rgba(234, 194, 110, 0.08);
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(234, 194, 110, 0.2);
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.case-card__result-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.case-card__result-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 700;
|
||||
color: var(--color-primary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.case-card__result-label svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
color: #22c55e;
|
||||
}
|
||||
|
||||
.case-card__result-badge {
|
||||
padding: 0.35rem 0.75rem;
|
||||
background: #22c55e;
|
||||
color: #ffffff;
|
||||
border-radius: 6px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.case-card__result-text {
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.6;
|
||||
color: var(--color-primary);
|
||||
margin: 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Мета */
|
||||
.case-card__meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1.5rem;
|
||||
padding-top: 1.25rem;
|
||||
border-top: 1px solid var(--color-gray-light);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.case-card__meta-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
color: var(--color-primary-light);
|
||||
}
|
||||
|
||||
.case-card__meta-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
color: var(--color-gray);
|
||||
}
|
||||
|
||||
.case-card__meta-text {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.case-card__meta-item--sum {
|
||||
color: var(--color-accent-dark);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.case-card__meta-text--sum {
|
||||
color: var(--color-accent-dark);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Ссылка */
|
||||
.case-card__link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding-top: 1.25rem;
|
||||
border-top: 1px solid var(--color-gray-light);
|
||||
text-decoration: none;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-primary);
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.case-card__link svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
transition: transform 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
|
||||
.case-card:hover .case-card__link {
|
||||
color: var(--color-accent-dark);
|
||||
}
|
||||
|
||||
.case-card:hover .case-card__link svg {
|
||||
transform: translateX(6px);
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
/* --- CTA --- */
|
||||
.cases-cta {
|
||||
text-align: center;
|
||||
padding: 3.5rem 2.5rem;
|
||||
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
|
||||
border-radius: 20px;
|
||||
box-shadow: var(--shadow-xl);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cases-cta::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
right: -20%;
|
||||
width: 60%;
|
||||
height: 150%;
|
||||
background: radial-gradient(circle, var(--color-accent-glow) 0%, transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.cases-cta__icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
margin: 0 auto 1.5rem;
|
||||
background: rgba(234, 194, 110, 0.15);
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--color-accent);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.cases-cta__icon svg {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.cases-cta__title {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
margin: 0 0 0.75rem 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.cases-cta__desc {
|
||||
font-size: 1.05rem;
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
margin: 0 0 2rem 0;
|
||||
max-width: 600px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.cases-cta .btn {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* --- Анимации --- */
|
||||
.animate-on-scroll {
|
||||
opacity: 0;
|
||||
will-change: opacity, transform;
|
||||
}
|
||||
|
||||
[data-animation="fade-up"] {
|
||||
transform: translateY(40px);
|
||||
transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
[data-animation="slide-up"] {
|
||||
transform: translateY(40px);
|
||||
transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.animate-on-scroll.is-visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* --- Адаптивность --- */
|
||||
@media (max-width: 1024px) {
|
||||
.cases-filters {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.cases-filter-buttons {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.cases-section {
|
||||
padding: 4rem 1rem;
|
||||
}
|
||||
|
||||
.cases-header {
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.cases-title {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
.cases-desc {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.cases-filters {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.cases-filter-label {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cases-filter-btn {
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.case-card__inner {
|
||||
padding: 2rem 1.5rem;
|
||||
}
|
||||
|
||||
.case-card__title {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.case-card__result-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.cases-cta {
|
||||
padding: 2.5rem 1.5rem;
|
||||
}
|
||||
|
||||
.cases-cta__title {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.cases-cta__desc {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.cases-section {
|
||||
padding: 3rem 0.75rem;
|
||||
}
|
||||
|
||||
.cases-header {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.cases-subtitle {
|
||||
font-size: 0.65rem;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.cases-title {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.cases-filter-btn {
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.case-card__inner {
|
||||
padding: 1.5rem 1.25rem;
|
||||
}
|
||||
|
||||
.case-card__meta {
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.cases-cta {
|
||||
padding: 2rem 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.animate-on-scroll {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.case-card {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// Анимации при скролле
|
||||
const observerOptions = {
|
||||
root: null,
|
||||
rootMargin: '0px 0px -50px 0px',
|
||||
threshold: 0.1
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const el = entry.target as HTMLElement;
|
||||
const delay = parseInt(el.dataset.delay || '0');
|
||||
|
||||
setTimeout(() => {
|
||||
el.classList.add('is-visible');
|
||||
}, delay);
|
||||
|
||||
observer.unobserve(el);
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
document.querySelectorAll('.animate-on-scroll').forEach((el) => {
|
||||
observer.observe(el);
|
||||
});
|
||||
|
||||
// Фильтрация кейсов
|
||||
const filterButtons = document.querySelectorAll('.cases-filter-btn') as NodeListOf<HTMLElement>;
|
||||
const caseCards = document.querySelectorAll('.case-card') as NodeListOf<HTMLElement>;
|
||||
|
||||
filterButtons.forEach(button => {
|
||||
button.addEventListener('click', () => {
|
||||
// Обновляем активную кнопку
|
||||
filterButtons.forEach(btn => btn.classList.remove('active'));
|
||||
button.classList.add('active');
|
||||
|
||||
const filter = button.dataset.filter;
|
||||
|
||||
// Фильтруем карточки
|
||||
caseCards.forEach(card => {
|
||||
const category = card.dataset.category;
|
||||
|
||||
if (filter === 'all' || category === filter) {
|
||||
card.style.display = 'block';
|
||||
setTimeout(() => {
|
||||
card.classList.add('is-visible');
|
||||
}, 50);
|
||||
} else {
|
||||
card.style.display = 'none';
|
||||
card.classList.remove('is-visible');
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue