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>

182
frontend/src/data/casesData.ts Normal file
View file

@ -0,0 +1,182 @@
export interface Case {
id: number;
title: string;
category: CaseCategory;
description: string;
result: string;
clientStory: string;
amount: string;
duration: string;
image: string;
tags: string[];
featured?: boolean;
}
export type CaseCategory =
| 'insurance'
| 'rights'
| 'accident'
| 'court'
| 'consultation';
export const categories = [
{
id: 'all',
label: 'Все кейсы',
icon: '📋'
},
{
id: 'insurance',
label: 'Споры со страховыми',
icon: '🛡️'
},
{
id: 'rights',
label: 'Возврат прав',
icon: '🚗'
},
{
id: 'accident',
label: 'ДТП и возмещение',
icon: '💥'
},
{
id: 'court',
label: 'Судебные дела',
icon: '⚖️'
},
] as const;
export const casesData: Case[] = [
{
id: 1,
title: 'Взыскание 450 000 ₽ со страховой компании',
category: 'insurance',
description: 'Клиент обратился после ДТП — страховая выплатила только 50 000 ₽ вместо положенных 500 000 ₽',
result: 'Выплачено 500 000 ₽ + неустойка 50 000 ₽',
clientStory: 'Попал в ДТП по вине другого водителя. Страховая насчитала смешную сумму. Ребята из Автоюриста 086 сделали независимую экспертизу и выиграли суд.',
amount: '500 000 ₽',
duration: '3 месяца',
image: '/images/cases/case-insurance-1.jpg',
tags: ['ОСАГО', 'Независимая экспертиза', 'Суд'],
featured: true,
},
{
id: 2,
title: 'Возврат водительских прав после лишения',
category: 'rights',
description: 'Клиент был лишён прав на 1,5 года за отказ от медосвидетельствования. Нашли procedural violations.',
result: 'Права возвращены через 4 месяца',
clientStory: 'Остановили ночью, сказали пройти освидетельствование. Я попросил показать документы врача — отказали. Лишили прав. Юристы нашли нарушения в процедуре.',
amount: 'Сохранены права',
duration: '4 месяца',
image: '/images/cases/case-rights-1.jpg',
tags: ['Лишение прав', 'Медосвидетельствование', 'Апелляция'],
featured: true,
},
{
id: 3,
title: 'Оспаривание вины в ДТП на перекрёстке',
category: 'accident',
description: 'Сложное ДТП на регулируемом перекрёстке. ГИБДД признала виновным нашего клиента.',
result: 'Виность пересмотрена, выплата 320 000 ₽',
clientStory: 'Ехал на зелёный, а мне врезались сбоку. Инспектор составил протокол против меня. Адвокаты собрали видеозаписи и доказали мою невиновность.',
amount: '320 000 ₽',
duration: '5 месяцев',
image: '/images/cases/case-accident-1.jpg',
tags: ['ДТП', 'Видеозапись', 'Перекрёсток'],
},
{
id: 4,
title: 'Защита от необоснованного штрафа с камеры',
category: 'court',
description: 'Клиент получил штраф 5000 ₽ с камеры фотовидеофиксации за нарушение, которого не совершал.',
result: 'Штраф отменён полностью',
clientStory: 'Пришел штраф за проезд на красный. Но я там не был! Оказалось, камера ошиблась. Юристы помогли оспорить.',
amount: 'Экономия 5 000 ₽',
duration: '1 месяц',
image: '/images/cases/case-court-1.jpg',
tags: ['Штрафы', 'Камеры', 'Обжалование'],
},
{
id: 5,
title: 'Возмещение ущерба от града по КАСКО',
category: 'insurance',
description: 'После сильного града автомобиль получил серьёзные повреждения. Страховая отказала в выплате.',
result: 'Выплачено 680 000 ₽ по КАСКО',
clientStory: 'Градом побило стёкла и крышу. Страховая сказала, что это не страховой случай. Обратился сюда — выплатили всё до копейки.',
amount: '680 000 ₽',
duration: '2 месяца',
image: '/images/cases/case-insurance-2.jpg',
tags: ['КАСКО', 'Град', 'Отказ страховой'],
},
{
id: 6,
title: 'Возврат прав после лишения за алкоголь',
category: 'rights',
description: 'Клиента лишили прав на 2 года за управление в состоянии опьянения. Нашли ошибки в протоколе.',
result: 'Дело прекращено, права возвращены',
clientStory: 'Остановили, заподозрили опьянение. Составили протокол с ошибками. Благодаря юристам удалось доказать невиновность.',
amount: 'Сохранены права',
duration: '6 месяцев',
image: '/images/cases/case-rights-2.jpg',
tags: ['Лишение прав', 'Алкоголь', 'Протокол'],
featured: true,
},
{
id: 7,
title: 'Спор о виновности при столкновении на парковке',
category: 'accident',
description: 'На подземной парковке произошло столкновение. Владелец соседнего авто обвинил нашего клиента.',
result: 'Доказана невиновность клиента',
clientStory: 'Парковался, задел чужую машину. Но оказалось, что тот автомобиль стоял в неположенном месте. Юристы разобрались.',
amount: '0 ₽ (виность не доказана)',
duration: '2 месяца',
image: '/images/cases/case-accident-2.jpg',
tags: ['Парковка', 'Столкновение', 'Защита'],
},
{
id: 8,
title: 'Консультация по покупке автомобиля с пробегом',
category: 'consultation',
description: 'Клиент хотел купить б/у авто, но боялся нарваться на проблемы с документами или скрытыми дефектами.',
result: 'Безопасная покупка автомобиля',
clientStory: 'Хотел купить машину с рук. Юристы проверили все документы, историю, залоги. Всё оказалось чисто — купил без проблем.',
amount: 'Предотвращены риски',
duration: '1 неделя',
image: '/images/cases/case-consultation-1.jpg',
tags: ['Покупка авто', 'Проверка документов', 'Консультация'],
},
{
id: 9,
title: 'Судебный иск к автосалону за скрытые дефекты',
category: 'court',
description: 'Клиент купил автомобиль в салоне, но обнаружил скрытые дефекты, о которых не предупредили.',
result: 'Возврат 1 200 000 ₽ за автомобиль',
clientStory: 'Купил машину в салоне. Через месяц посыпались проблемы. Оказалось, defects были скрыты. Выиграли суд и вернули деньги.',
amount: '1 200 000 ₽',
duration: '7 месяцев',
image: '/images/cases/case-court-2.jpg',
tags: ['Автосалон', 'Скрытые дефекты', 'Возврат денег'],
featured: true,
},
{
id: 10,
title: 'Компенсация морального вреда после ДТП',
category: 'accident',
description: 'После серьёзного ДТП клиент получил травмы и моральный вред. Нужно было взыскать компенсацию.',
result: 'Компенсация 250 000 ₽ морального вреда',
clientStory: 'Попал в аварию, получил травмы. Страховая покрыла только лечение. Юристы помогли получить компенсацию за моральный вред.',
amount: '250 000 ₽',
duration: '4 месяца',
image: '/images/cases/case-accident-3.jpg',
tags: ['Моральный вред', 'Травмы', 'Компенсация'],
},
];
export const statsData = {
totalCases: '500+',
successRate: '98%',
totalRecovered: '50+ млн ₽',
averageDuration: '3-4 месяца',
} as const;

49
frontend/src/pages/blog/index.astro
View file

@ -1,7 +1,7 @@
---
import Layout from '@layouts/Layout.astro';
import { SITE_URL } from '@constants';
import BlogHero from '@components/blog/BlogHero.astro';
import PageHero from '@components/base/PageHero.astro';
import BlogCategories from '@components/blog/BlogCategories.astro';
import BlogCard from '@components/blog/BlogCard.astro';
import BlogPagination from '@components/blog/BlogPagination.astro';
@ -26,7 +26,20 @@ const paginatedPosts = blogPosts.slice(startIndex, endIndex);
{ label: "Блог" }
]}
>
<BlogHero />
<PageHero
badgeText="БЛОГ И СТАТЬИ"
titleWhite="Полезные статьи"
titleGold="для автовладельцев"
description="Разбираем сложные юридические вопросы простым языком. Советы юриста по автоспорам, ДТП, ОСАГО и защите прав водителей."
layout="with-image"
sideImage="/images/home/avtourist-surgut.avif"
sideImageAlt="Автоюрист Сургут"
experienceBadge={{
number: "50+",
text: "ПОЛЕЗНЫХ СТАТЕЙ"
}}
bgImage="/images/home/bg_hero.avif"
/>
<BlogCategories categories={categories} activeCategory="Все" currentPage={currentPage} />
@ -167,3 +180,35 @@ const paginatedPosts = blogPosts.slice(startIndex, endIndex);
}
}
</style>
<script>
const setupAnimations = () => {
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);
});
};
setupAnimations();
document.addEventListener('astro:after-swap', setupAnimations);
</script>

49
frontend/src/pages/blog/page/[page].astro
View file

@ -1,7 +1,7 @@
---
import Layout from '@layouts/Layout.astro';
import { SITE_URL } from '@constants';
import BlogHero from '@components/blog/BlogHero.astro';
import PageHero from '@components/base/PageHero.astro';
import BlogCategories from '@components/blog/BlogCategories.astro';
import BlogCard from '@components/blog/BlogCard.astro';
import BlogPagination from '@components/blog/BlogPagination.astro';
@ -27,7 +27,20 @@ const paginatedPosts = blogPosts.slice(startIndex, endIndex);
{ label: `Страница ${currentPage}` }
]}
>
<BlogHero />
<PageHero
badgeText="БЛОГ И СТАТЬИ"
titleWhite="Полезные статьи"
titleGold="для автовладельцев"
description="Разбираем сложные юридические вопросы простым языком. Советы юриста по автоспорам, ДТП, ОСАГО и защите прав водителей."
layout="with-image"
sideImage="/images/home/avtourist-surgut.avif"
sideImageAlt="Автоюрист Сургут"
experienceBadge={{
number: "50+",
text: "ПОЛЕЗНЫХ СТАТЕЙ"
}}
bgImage="/images/home/bg_hero.avif"
/>
<BlogCategories categories={categories} activeCategory="Все" currentPage={currentPage} />
@ -168,3 +181,35 @@ const paginatedPosts = blogPosts.slice(startIndex, endIndex);
}
}
</style>
<script>
const setupAnimations = () => {
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);
});
};
setupAnimations();
document.addEventListener('astro:after-swap', setupAnimations);
</script>

21
frontend/src/pages/cases.astro
View file

@ -1,16 +1,33 @@
---
import Layout from '@layouts/Layout.astro';
import { SITE_URL } from '@constants';
import PageHero from "@components/base/PageHero.astro";
import CasesList from "@components/cases/CasesList.astro";
---
<Layout
title="Кейсы — выигранные дела автоюриста в Сургуте"
description="Примеры выигранных дел по спорам со страховыми, возврату прав и другим автоспорам."
description="Примеры выигранных дел по спорам со страховыми, возврату прав и другим автоспорам. Реальные результаты работы."
canonicalLink={`${SITE_URL}/cases`}
breadcrumbs={[
{ label: 'Главная', href: '/' },
{ label: 'Кейсы' }
]}
>
<h1>Кейсы</h1>
<PageHero
badgeText="РЕЗУЛЬТАТЫ РАБОТЫ"
titleWhite="Выигранные"
titleGold="кейсы"
description="Реальные примеры нашей работы по защите прав автовладельцев. Каждое дело — это история успеха, основанная на профессионализме и опыте."
btnText="Получить консультацию"
layout="with-image"
sideImage="/images/home/avtourist-surgut.avif"
sideImageAlt="Автоюрист Сургут"
experienceBadge={{
number: "500+",
text: "ВЫИГРАННЫХ ДЕЛ"
}}
bgImage="/images/home/bg_hero.avif"
/>
<CasesList />
</Layout>

110
frontend/src/pages/contacts.astro
View file

@ -1,6 +1,7 @@
---
import Layout from '@layouts/Layout.astro';
import { SITE_URL, COMPANY } from '@constants';
import PageHero from '@components/base/PageHero.astro';
// Логика авторизации (пока статичная переменная)
const isAuthorized = false; // Измените на true, чтобы увидеть форму
@ -15,23 +16,20 @@ const isAuthorized = false; // Измените на true, чтобы увиде
{ label: 'Контакты' }
]}
>
<!-- Hero-секция -->
<section class="contacts-hero">
<div class="site-container">
<div class="hero-content">
<div class="badge animate-on-scroll" data-animation="fade-up">
<span class="status-dot"></span>
БЕСПЛАТНАЯ КОНСУЛЬТАЦИЯ
</div>
<h1 class="title animate-on-scroll" data-animation="fade-up" data-delay="100">
Свяжитесь <span class="text-gold">с нами</span>
</h1>
<p class="description animate-on-scroll" data-animation="fade-up" data-delay="200">
Мы всегда на связи и готовы помочь вам в решении автоспоров. Оставьте заявку или позвоните — первая консультация бесплатно.
</p>
</div>
</div>
</section>
<PageHero
badgeText="БЕСПЛАТНАЯ КОНСУЛЬТАЦИЯ"
titleWhite="Свяжитесь"
titleGold="с нами"
description="Мы всегда на связи и готовы помочь вам в решении автоспоров. Оставьте заявку или позвоните — первая консультация бесплатно."
layout="with-image"
sideImage="/images/home/avtourist-surgut.avif"
sideImageAlt="Автоюрист Сургут"
experienceBadge={{
number: "15",
text: "МИНУТ НА СВЯЗИ"
}}
bgImage="/images/home/bg_hero.avif"
/>
<!-- Карточки контактов -->
<section class="contact-cards">
@ -194,82 +192,6 @@ const isAuthorized = false; // Измените на true, чтобы увиде
</Layout>
<style>
/* ===== HERO ===== */
.contacts-hero {
background: linear-gradient(135deg, #0a2540 0%, #1e3a5f 100%);
padding: 8rem 0 4rem;
position: relative;
overflow: hidden;
}
.contacts-hero::before {
content: '';
position: absolute;
top: -50%;
right: -10%;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(212, 175, 55, 0.08) 0%, transparent 70%);
border-radius: 50%;
}
.hero-content {
position: relative;
z-index: 1;
text-align: center;
max-width: 700px;
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); }
}
.title {
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 800;
color: #ffffff;
margin: 0 0 1.5rem;
line-height: 1.15;
letter-spacing: -0.02em;
}
.text-gold { color: #eac26e; }
.description {
color: rgba(255, 255, 255, 0.8);
font-size: 1.15rem;
line-height: 1.6;
margin: 0;
}
/* ===== CONTACT CARDS ===== */
.contact-cards {
padding: 5rem 0;
@ -497,4 +419,4 @@ const isAuthorized = false; // Измените на true, чтобы увиде
setupAnimations();
setupForm();
});
</script>
</script>

117
frontend/src/pages/reviews.astro
View file

@ -1,6 +1,7 @@
---
import Layout from '@layouts/Layout.astro';
import { SITE_URL } from '@constants';
import PageHero from '@components/base/PageHero.astro';
import ReviewCard from '@components/reviews/ReviewCard.astro';
import VotingSummary from '@components/reviews/VotingSummary.astro';
import { reviewsData, votingSummary } from '@data/reviewsData';
@ -15,29 +16,26 @@ import { reviewsData, votingSummary } from '@data/reviewsData';
{ label: 'Отзывы' }
]}
>
<section class="reviews-page">
<!-- Hero-секция -->
<section class="reviews-hero">
<div class="site-container">
<div class="hero-content">
<div class="badge animate-on-scroll" data-animation="fade-up">
<span class="status-dot"></span>
ОТЗЫВЫ КЛИЕНТОВ
</div>
<h1 class="title animate-on-scroll" data-animation="fade-up" data-delay="100">
Реальные истории <span class="text-gold">водителей</span> из Сургута
</h1>
<p class="description animate-on-scroll" data-animation="fade-up" data-delay="200">
Узнайте, как мы помогли нашим клиентам решить их проблемы с автоспорами
</p>
</div>
</div>
</section>
<PageHero
badgeText="ОТЗЫВЫ КЛИЕНТОВ"
titleWhite="Реальные истории"
titleGold="водителей из Сургута"
description="Узнайте, как мы помогли нашим клиентам решить их проблемы с автоспорами"
layout="with-image"
sideImage="/images/home/avtourist-surgut.avif"
sideImageAlt="Автоюрист Сургут"
experienceBadge={{
number: "95%",
text: "ДОВОЛЬНЫХ КЛИЕНТОВ"
}}
bgImage="/images/home/bg_hero.avif"
/>
<section class="reviews-page">
<div class="site-container">
<!-- Блок статистики голосования -->
<VotingSummary
<VotingSummary
averageRating={votingSummary.averageRating}
totalVotes={votingSummary.totalVotes}
totalReviews={votingSummary.totalReviews}
@ -81,84 +79,7 @@ import { reviewsData, votingSummary } from '@data/reviewsData';
background: #f8fafc;
}
/* ===== HERO ===== */
.reviews-hero {
background: linear-gradient(135deg, #0a2540 0%, #1e3a5f 100%);
padding: 8rem 0 4rem;
position: relative;
overflow: hidden;
}
.reviews-hero::before {
content: '';
position: absolute;
top: -50%;
right: -10%;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(212, 175, 55, 0.08) 0%, transparent 70%);
border-radius: 50%;
}
.hero-content {
position: relative;
z-index: 1;
text-align: center;
max-width: 700px;
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); }
}
.title {
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 800;
color: #ffffff;
margin: 0 0 1.5rem;
line-height: 1.15;
letter-spacing: -0.02em;
}
.text-gold { color: #eac26e; }
.description {
color: rgba(255, 255, 255, 0.8);
font-size: 1.15rem;
line-height: 1.6;
margin: 0;
}
/* ===== GRID ===== */
.reviews-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
@ -235,10 +156,6 @@ import { reviewsData, votingSummary } from '@data/reviewsData';
}
@media (max-width: 768px) {
.reviews-hero {
padding: 7rem 0 3rem;
}
.reviews-grid {
grid-template-columns: 1fr;
gap: 1.5rem;

20
frontend/src/pages/services.astro
View file

@ -1,7 +1,7 @@
---
import Layout from '@layouts/Layout.astro';
import { SITE_URL } from '@constants';
import ServicesHeroServices from "@components/services/HeroServices.astro";
import PageHero from "@components/base/PageHero.astro";
import ServiceCategories from "@components/services/ServiceCategories.astro";
---
@ -14,6 +14,20 @@ import ServiceCategories from "@components/services/ServiceCategories.astro";
{ label: 'Услуги' }
]}
>
<ServicesHeroServices />
<ServiceCategories />
<PageHero
badgeText="АВТОЮРИСТ СУРГУТ & ЮГРА"
titleWhite="Наши юридические"
titleGold="услуги"
description="Мы обеспечиваем экспертную защиту прав водителей в Сургуте и Ханты-Мансийском автономном округе. Профессиональный подход к сложным дорожным спорам с акцентом на результат."
btnText="Получить помощь"
layout="with-image"
sideImage="/images/home/avtourist-surgut.avif"
sideImageAlt="Автоюрист Сургут"
experienceBadge={{
number: "12+",
text: "НАПРАВЛЕНИЙ ПРАКТИКИ"
}}
bgImage="/images/home/bg_hero.avif"
/>
<ServiceCategories />
</Layout>