redi/astro_avtourist
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Новый дизан

Browse source
This commit is contained in:
Web-serfer 2026-04-08 20:15:49 +05:00
parent 0678c81284
commit 32bcc76021
11 changed files with 1639 additions and 622 deletions
Download patch file Download diff file Expand all files Collapse all files

435
frontend/src/components/base/PageHero.astro Normal file
View file

@ -0,0 +1,435 @@
---
import Button from '@components/base/Button.astro';
interface PageHeroProps {
badgeText: string;
titleWhite: string;
titleGold: string;
description: string;
btnText?: string;
btnHref?: string;
bgImage?: string;
minHeight?: string;
layout?: 'default' | 'with-image';
sideImage?: string;
sideImageAlt?: string;
experienceBadge?: {
number: string;
text: string;
};
}
const {
badgeText,
titleWhite,
titleGold,
description,
btnText,
btnHref = "#contact",
bgImage = "",
minHeight = "80vh",
layout = "default",
sideImage = "",
sideImageAlt = "",
experienceBadge
} = Astro.props as PageHeroProps;
const showImage = layout === 'with-image' && sideImage;
---
<section class="hero-section" style:min-height={minHeight}>
<div class="hero-overlay"></div>
<div class="site-container hero-grid">
<div class="hero-content">
<div class="badge animate-load" data-delay="100">
<span class="status-dot"></span>
{badgeText}
</div>
<h1 class="hero-title">
<span class="text-white animate-load" data-delay="300">{titleWhite}</span>
<br />
<span class="text-gold animate-load" data-delay="500">{titleGold}</span>
</h1>
<p class="hero-description animate-load" data-delay="700">{description}</p>
{btnText && (
<div class="hero-actions animate-load" data-delay="900">
<Button variant="gold" size="lg" href={btnHref}>
{btnText}
</Button>
</div>
)}
</div>
{showImage && (
<div class="hero-image-wrapper animate-load" data-delay="400">
<div class="image-composition">
<img src={sideImage} alt={sideImageAlt || "Юрист"} class="main-image" />
{experienceBadge && (
<div class="experience-badge animate-load" data-delay="1100">
<span class="exp-number">{experienceBadge.number}</span>
<span class="exp-text">{experienceBadge.text}</span>
</div>
)}
</div>
</div>
)}
</div>
</section>
<script>
const initAnimations = () => {
const animatedElements = document.querySelectorAll('.animate-load');
animatedElements.forEach((el) => {
const delay = parseInt((el as HTMLElement).dataset.delay || '0');
setTimeout(() => {
el.classList.add('is-visible');
}, delay);
});
};
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initAnimations);
} else {
initAnimations();
}
</script>
<style define:vars={{ bgImage: bgImage ? `url("${bgImage}")` : "none" }}>
.hero-section {
position: relative;
width: 100%;
min-height: 80vh;
display: flex;
align-items: center;
background-image: var(--bgImage);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
margin: 0 !important;
padding-top: 80px;
box-sizing: border-box;
overflow: hidden;
}
.hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, #0a2540 0%, rgba(10, 37, 64, 0.9) 50%, rgba(10, 37, 64, 0.7) 100%);
z-index: 1;
}
.site-container {
position: relative;
z-index: 2;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
width: 100%;
}
/* --- GRID LAYOUT --- */
.hero-grid {
display: flex;
justify-content: space-between;
align-items: center;
gap: 3rem;
width: 100%;
padding-bottom: 4rem;
}
.hero-content {
flex: 1.2;
max-width: 700px;
}
/* --- АНИМАЦИИ ПРИ ЗАГРУЗКЕ --- */
.animate-load {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
will-change: opacity, transform;
}
.animate-load.is-visible {
opacity: 1;
transform: translateY(0);
}
/* Специальная анимация для изображения */
.hero-image-wrapper.animate-load {
opacity: 0;
transform: translateX(50px) scale(0.95);
transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1),
transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}
.hero-image-wrapper.animate-load.is-visible {
opacity: 1;
transform: translateX(0) scale(1);
}
/* Анимация для бейджа опыта */
.experience-badge.animate-load {
opacity: 0;
transform: translateY(20px) scale(0.9);
transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.experience-badge.animate-load.is-visible {
opacity: 1;
transform: translateY(0) scale(1);
}
/* --- BADGE --- */
.badge {
display: inline-flex;
align-items: center;
gap: 0.6rem;
background-color: rgba(234, 194, 110, 0.15);
border: 1px solid rgba(234, 194, 110, 0.3);
color: #eac26e;
padding: 0.5rem 1rem;
border-radius: 6px;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 1.5px;
margin-bottom: 2.5rem;
}
/* Мерцающая точка */
.status-dot {
width: 10px;
height: 10px;
background: #22c55e;
border-radius: 50%;
animation: pulse 2s ease-in-out infinite;
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
flex-shrink: 0;
}
@keyframes pulse {
0% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
}
70% {
transform: scale(1);
box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
}
100% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
}
}
/* --- TITLE --- */
.hero-title {
font-size: clamp(2rem, 5vw, 3.8rem);
font-weight: 800;
line-height: 1.15;
margin: 0 0 2rem 0;
}
.text-white {
color: #ffffff;
}
.text-gold {
color: #eac26e;
}
/* --- DESCRIPTION --- */
.hero-description {
color: rgba(255, 255, 255, 0.85);
font-size: 1.15rem;
line-height: 1.6;
margin-bottom: 3.5rem;
max-width: 580px;
}
/* --- ACTIONS --- */
.hero-actions {
display: flex;
gap: 1.5rem;
align-items: stretch;
}
.hero-actions > * {
display: flex;
align-items: center;
}
/* --- IMAGE BLOCK --- */
.hero-image-wrapper {
flex: 1;
display: flex;
justify-content: flex-end;
position: relative;
}
.image-composition {
position: relative;
width: 100%;
max-width: 480px;
}
.image-composition::before {
content: '';
position: absolute;
top: -10px;
left: 20px;
right: -20px;
bottom: 10px;
background-color: #ffffff;
border-radius: 12px;
transform: rotate(3deg);
z-index: -1;
opacity: 0;
animation: fadeInRotate 0.8s ease 0.6s forwards;
}
@keyframes fadeInRotate {
from {
opacity: 0;
transform: rotate(0deg) translateY(20px);
}
to {
opacity: 1;
transform: rotate(3deg) translateY(0);
}
}
.main-image {
width: 100%;
border-radius: 12px;
border: 8px solid #ffffff;
filter: grayscale(100%);
box-shadow: 0 30px 60px rgba(0,0,0,0.4);
}
.experience-badge {
position: absolute;
bottom: 30px;
left: -30px;
background: #ffffff;
padding: 1.5rem;
border-radius: 8px;
box-shadow: 0 15px 35px rgba(0,0,0,0.2);
min-width: 180px;
}
.exp-number {
font-size: 2.2rem;
font-weight: 900;
color: #1e3050;
line-height: 1;
display: block;
}
.exp-text {
font-size: 0.7rem;
font-weight: 800;
color: #535e6c;
text-transform: uppercase;
}
/* --- МОБИЛЬНАЯ АДАПТАЦИЯ --- */
@media (max-width: 992px) {
.hero-section {
padding-top: 70px;
min-height: 60vh;
}
.hero-grid {
flex-direction: column;
text-align: center;
padding: 1.5rem 1.5rem 4rem;
}
.hero-content {
align-items: center;
}
.hero-actions {
justify-content: center;
}
.hero-image-wrapper {
margin-top: 3rem;
justify-content: center;
}
.experience-badge {
left: 0;
bottom: -20px;
}
.hero-image-wrapper.animate-load {
transform: translateY(40px) scale(0.95);
}
.hero-image-wrapper.animate-load.is-visible {
transform: translateY(0) scale(1);
}
}
@media (max-width: 767px) {
.hero-section {
padding-top: 64px;
}
.hero-title {
font-size: 1.8rem;
}
.hero-actions {
flex-direction: column;
width: 100%;
}
.hero-actions > * {
width: 100%;
}
.image-composition::before {
display: none;
}
}
@media (max-width: 480px) {
.hero-section {
padding-top: 64px;
}
.hero-title {
font-size: 1.8rem;
}
}
/* Уважаем prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
.animate-load,
.hero-image-wrapper.animate-load,
.experience-badge.animate-load {
opacity: 1;
transform: none;
transition: none;
}
.image-composition::before {
animation: none;
opacity: 1;
}
}
</style>

178
frontend/src/components/blog/BlogHero.astro
View file

@ -1,178 +0,0 @@
---
const badgeText = "БЛОГ И СТАТЬИ";
const titleWhite = "Полезные статьи";
const titleGold = "для автовладельцев";
const description = "Разбираем сложные юридические вопросы простым языком. Советы юриста по автоспорам, ДТП, ОСАГО и защите прав водителей.";
---
<section class="blog-hero">
<div class="hero-overlay"></div>
<div class="site-container hero-content">
<div class="badge animate-on-scroll" data-animation="fade-up">
<span class="status-dot"></span>
{badgeText}
</div>
<h1 class="hero-title">
<span class="text-white animate-on-scroll" data-animation="fade-up" data-delay="100">{titleWhite}</span>
<br />
<span class="text-gold animate-on-scroll" data-animation="fade-up" data-delay="200">{titleGold}</span>
</h1>
<p class="hero-description animate-on-scroll" data-animation="fade-up" data-delay="300">{description}</p>
</div>
</section>
<style>
.blog-hero {
position: relative;
width: 100%;
padding: 8rem 0 5rem;
background: linear-gradient(135deg, #0a2540 0%, #1e3a5f 100%);
overflow: hidden;
}
.blog-hero::before {
content: '';
position: absolute;
top: -30%;
right: -5%;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(212, 175, 55, 0.08) 0%, transparent 70%);
border-radius: 50%;
}
.hero-overlay {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
z-index: 0;
}
.hero-content {
position: relative;
z-index: 1;
text-align: center;
max-width: 750px;
margin: 0 auto;
}
.badge {
display: inline-flex;
align-items: center;
gap: 0.6rem;
background-color: rgba(234, 194, 110, 0.15);
border: 1px solid rgba(234, 194, 110, 0.3);
color: #eac26e;
padding: 0.5rem 1rem;
border-radius: 6px;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 1.5px;
margin-bottom: 2rem;
}
.status-dot {
width: 10px;
height: 10px;
background: #22c55e;
border-radius: 50%;
animation: pulse 2s ease-in-out infinite;
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
flex-shrink: 0;
}
@keyframes pulse {
0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
.hero-title {
font-size: clamp(2.5rem, 5vw, 4rem);
line-height: 1.15;
margin: 0 0 1.5rem 0;
font-weight: 800;
letter-spacing: -0.02em;
}
.hero-title .text-white,
.hero-title .text-gold {
display: inline-block;
}
.text-white { color: #ffffff; }
.text-gold { color: #eac26e; }
.hero-description {
color: rgba(255, 255, 255, 0.8);
font-size: 1.15rem;
line-height: 1.6;
margin: 0;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
/* Анимации */
.animate-on-scroll {
opacity: 0;
will-change: opacity, transform;
}
[data-animation="fade-up"] {
transform: translateY(30px);
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 (prefers-reduced-motion: reduce) {
.animate-on-scroll {
opacity: 1;
transform: none;
transition: none;
}
}
@media (max-width: 768px) {
.blog-hero {
padding: 7rem 0 3.5rem;
}
.hero-title {
font-size: 2.2rem;
}
.hero-description {
font-size: 1rem;
}
}
</style>
<script>
const setupAnimations = () => {
const observerOptions = { 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));
};
setupAnimations();
document.addEventListener('astro:after-swap', setupAnimations);
</script>

859
frontend/src/components/cases/CasesList.astro Normal file
View 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>

241
frontend/src/components/services/HeroServices.astro
View file

@ -1,241 +0,0 @@
---
import Button from '@components/base/Button.astro';
const badgeText = "АВТОЮРИСТ СУРГУТ & ЮГРА";
const titleWhite = "Наши юридические";
const titleGold = "услуги";
const description = "Мы обеспечиваем экспертную защиту прав водителей в Сургуте и Ханты-Мансийском автономном округе. Профессиональный подход к сложным дорожным спорам с акцентом на результат.";
const btnPrimary = "Получить помощь";
const bgImageUrl = "/images/services/office.png";
---
<section class="hero-section">
<div class="hero-overlay"></div>
<div class="site-container">
<div class="hero-content">
<div class="badge animate-load" data-delay="100">
<span class="status-dot"></span>
{badgeText}
</div>
<h1 class="hero-title">
<span class="text-white animate-load" data-delay="300">{titleWhite}</span>
<br />
<span class="text-gold animate-load" data-delay="500">{titleGold}</span>
</h1>
<p class="hero-description animate-load" data-delay="700">{description}</p>
<div class="hero-actions animate-load" data-delay="900">
<Button variant="gold" size="lg" href="#contact">
{btnPrimary}
</Button>
</div>
</div>
</div>
</section>
<script>
// Анимация при загрузке страницы
const initAnimations = () => {
const animatedElements = document.querySelectorAll('.animate-load');
animatedElements.forEach((el) => {
const delay = parseInt((el as HTMLElement).dataset.delay || '0');
setTimeout(() => {
el.classList.add('is-visible');
}, delay);
});
};
// Пробуем сразу, если DOM готов
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initAnimations);
} else {
initAnimations();
}
</script>
<style define:vars={{ bgImageUrl: `url("${bgImageUrl}")` }}>
.hero-section {
position: relative;
width: 100%;
min-height: 80vh;
display: flex;
align-items: center;
background-image: var(--bgImageUrl);
background-size: cover;
background-position: center;
margin: 0 !important;
padding: 60px 0;
box-sizing: border-box;
overflow: hidden;
}
.hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, #0a2540 0%, rgba(10, 37, 64, 0.9) 50%, rgba(10, 37, 64, 0.7) 100%);
z-index: 1;
}
.site-container {
position: relative;
z-index: 2;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
width: 100%;
}
.hero-content {
max-width: 700px;
}
/* --- АНИМАЦИИ ПРИ ЗАГРУЗКЕ --- */
.animate-load {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
will-change: opacity, transform;
}
.animate-load.is-visible {
opacity: 1;
transform: translateY(0);
}
.badge {
display: inline-flex;
align-items: center;
gap: 0.6rem;
background-color: rgba(234, 194, 110, 0.15);
border: 1px solid rgba(234, 194, 110, 0.3);
color: #eac26e;
padding: 0.5rem 1rem;
border-radius: 6px;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 1.5px;
margin-bottom: 2.5rem;
}
/* Мерцающая точка "На связи" */
.status-dot {
width: 10px;
height: 10px;
background: #22c55e;
border-radius: 50%;
animation: pulse 2s ease-in-out infinite;
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
flex-shrink: 0;
}
@keyframes pulse {
0% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
}
70% {
transform: scale(1);
box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
}
100% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
}
}
.hero-title {
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 800;
line-height: 1.1;
margin: 0 0 24px 0;
}
.text-white {
color: #ffffff;
}
.text-gold {
color: #eac26e;
}
.hero-description {
color: rgba(255, 255, 255, 0.85);
font-size: 1.15rem;
line-height: 1.6;
margin-bottom: 40px;
max-width: 600px;
}
.hero-actions {
display: flex;
gap: 1.5rem;
align-items: stretch;
}
.hero-actions > * {
display: flex;
align-items: center;
}
/* Мобильная адаптация */
@media (max-width: 768px) {
.hero-section {
text-align: center;
min-height: 60vh;
}
.hero-overlay {
background: rgba(10, 37, 64, 0.85);
}
.hero-content {
margin: 0 auto;
}
.badge {
justify-content: center;
}
.hero-actions {
justify-content: center;
}
}
@media (max-width: 480px) {
.hero-section {
padding: 40px 0;
min-height: 50vh;
}
.hero-title {
font-size: 2rem;
}
.hero-description {
font-size: 1rem;
}
}
/* Уважаем prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
.animate-load {
opacity: 1;
transform: none;
transition: none;
}
.status-dot {
animation: none;
}
}
</style>