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-12 19:21:14 +05:00
parent f5669e196f
commit 24be657ac6
20 changed files with 3219 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/components/home/Hero.astro
View file

@ -45,7 +45,7 @@ const lawyerImageUrl = "/images/home/avtourist-surgut.avif";
<img src={lawyerImageUrl} alt="Юрист" class="main-image" />
<div class="experience-badge animate-load" data-delay="1100">
<span class="exp-number">20+</span>
<span class="exp-text">ЛЕТ ОПЫТА В ХМАО</span>
<span class="exp-text">ЛЕТ ОПЫТА В СУДАХ</span>
</div>
</div>
</div>

9
frontend/src/components/home/Reviews.astro
View file

@ -75,6 +75,15 @@ const displayReviews = [...latestReviews, ...latestReviews, ...latestReviews];
display: flex;
}
/* Центрирование карточки на мобильном */
#sliderContainer {
scroll-snap-type: x mandatory;
}
#sliderTrack {
scroll-snap-align: center;
}
/* Убедимся, что карточка растягивается на всю ширину слайда */
.card-item :global(.review-card) {
width: 100%;

45
frontend/src/components/home/Steps.astro
View file

@ -93,19 +93,19 @@ const {
</div>
<!-- Статистика -->
<div class="stats-bar animate-on-scroll" data-animation="fade-up" data-delay="700">
<div class="stats-bar animate-on-scroll" data-animation="fade-up" data-delay="700" id="stats-bar">
<div class="stat-item">
<div class="stat-number">98%</div>
<div class="stat-number" data-target="98" data-suffix="%">0%</div>
<div class="stat-label">успешных дел</div>
</div>
<div class="stat-divider"></div>
<div class="stat-item">
<div class="stat-number">500+</div>
<div class="stat-number" data-target="500" data-suffix="+">0+</div>
<div class="stat-label">довольных клиентов</div>
</div>
<div class="stat-divider"></div>
<div class="stat-item">
<div class="stat-number">15 лет</div>
<div class="stat-number" data-target="15" data-suffix=" лет">0 лет</div>
<div class="stat-label">опыта</div>
</div>
</div>
@ -644,6 +644,32 @@ const {
threshold: 0.15
};
// Анимация счётчиков
function animateCounter(el: HTMLElement) {
const target = parseInt(el.dataset.target || '0');
const suffix = el.dataset.suffix || '';
const duration = 1500;
const startTime = performance.now();
// Easing функция (ease-out cubic)
const easeOutCubic = (t: number) => 1 - Math.pow(1 - t, 3);
function update(currentTime: number) {
const elapsed = currentTime - startTime;
const progress = Math.min(elapsed / duration, 1);
const easedProgress = easeOutCubic(progress);
const currentValue = Math.round(easedProgress * target);
el.textContent = `${currentValue}${suffix}`;
if (progress < 1) {
requestAnimationFrame(update);
}
}
requestAnimationFrame(update);
}
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
@ -652,6 +678,17 @@ const {
setTimeout(() => {
el.classList.add('is-visible');
// Если это stats-bar, запускаем анимацию счётчиков
if (el.id === 'stats-bar') {
const counters = el.querySelectorAll('.stat-number');
counters.forEach((counter, index) => {
// Небольшая задержка между счётчиками для каскадного эффекта
setTimeout(() => {
animateCounter(counter as HTMLElement);
}, index * 150);
});
}
}, delay);
observer.unobserve(el);

109
frontend/src/components/layout/footer/Footer.astro
View file

@ -1,4 +1,5 @@
---
import { COMPANY } from '@constants';
const sectionsLinks = [
{ label: 'Услуги', href: '/services' },
@ -37,31 +38,31 @@ const currentYear = new Date().getFullYear().toString();
</p>
</div>
<!-- Колонка 2: Разделы -->
<div class="footer-col">
<h4 class="col-title">Разделы</h4>
<ul class="footer-links">
{sectionsLinks.map(link => (
<li><a href={link.href}>{link.label}</a></li>
))}
</ul>
<!-- Колонка 2: Разделы и Разное -->
<div class="footer-col links-cols">
<div class="footer-links-group">
<h4 class="col-title">Разделы</h4>
<ul class="footer-links">
{sectionsLinks.map(link => (
<li><a href={link.href}>{link.label}</a></li>
))}
</ul>
</div>
<div class="footer-links-group">
<h4 class="col-title">Разное</h4>
<ul class="footer-links">
{otherLinks.map(link => (
<li><a href={link.href}>{link.label}</a></li>
))}
</ul>
</div>
</div>
<!-- Колонка 3: Правовая информация -->
<div class="footer-col">
<h4 class="col-title">Разное</h4>
<ul class="footer-links">
{otherLinks .map(link => (
<li><a href={link.href}>{link.label}</a></li>
))}
</ul>
</div>
<!-- Колонка 4: Контакты -->
<!-- Колонка 3: Контакты -->
<div class="footer-col">
<h4 class="col-title">Связь с нами</h4>
<p class="address">Сургут, ул. Мира, 15</p>
<a href="tel:+73462000000" class="footer-phone">+7 (3462) 00-00-00</a>
<p class="address">{COMPANY.address}</p>
<a href={`tel:${COMPANY.phoneClean}`} class="footer-phone">{COMPANY.phone}</a>
<!-- Иконка "Поделиться" -->
<button class="share-btn" aria-label="Share">
@ -226,14 +227,6 @@ const currentYear = new Date().getFullYear().toString();
color: #d1b06b;
}
/* Адаптивность для планшетов */
@media (max-width: 1024px) {
.footer-top {
grid-template-columns: 1fr 1fr; /* 2 колонки */
gap: 3rem 2rem;
}
}
/* Адаптивность для мобильных устройств */
@media (max-width: 640px) {
.footer {
@ -243,6 +236,40 @@ const currentYear = new Date().getFullYear().toString();
.footer-top {
grid-template-columns: 1fr; /* 1 колонка */
gap: 2.5rem;
text-align: center;
}
/* Разделы и Разное в одном ряду */
.links-cols {
display: flex;
gap: 2rem;
justify-content: center;
}
.footer-links-group {
flex: 1;
}
/* Центрируем все элементы */
.brand-col {
text-align: center;
}
.footer-links {
display: flex;
flex-direction: column;
align-items: center;
}
.footer-col:last-child {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.share-btn {
margin: 0 auto;
}
.footer-bottom {
@ -251,4 +278,28 @@ const currentYear = new Date().getFullYear().toString();
text-align: center;
}
}
/* Планшет - 2 колонки */
@media (min-width: 641px) and (max-width: 767px) {
.footer-top {
grid-template-columns: 1fr 1fr;
gap: 3rem 2rem;
}
.links-cols {
display: block;
}
}
/* Десктоп (md и выше) - 4 колонки в один ряд: Бренд | Разделы | Разное | Контакты */
@media (min-width: 768px) {
.footer-top {
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: 2rem;
}
.links-cols {
display: contents; /* Дочерние элементы становятся частью грида */
}
}
</style>

2
frontend/src/components/layout/header/Header.astro
View file

@ -23,7 +23,7 @@ import { COMPANY } from "@constants";
<!-- Phone -->
<div class="header-column header-right animate-load" data-delay="200">
<div class="header-actions">
<a href={`tel:${COMPANY.phone}`} class="header-phone">
<a href={`tel:${COMPANY.phoneClean}`} class="header-phone">
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"

732
frontend/src/components/services/AboutTabs.astro Normal file
View file

@ -0,0 +1,732 @@
---
const tabsData = {
problem: {
title: "Лишение прав — массовая практика",
description: "Ежегодно в России более <strong>300 000 водителей</strong> лишаются водительских прав. При этом значительная часть постановлений выносится с <strong>процессуальными нарушениями</strong>.",
description2: "Сотрудники ГИБДД часто допускают ошибки при составлении протоколов, нарушении порядка освидетельствования или не разъясняют права водителям.",
items: [
"Нарушение процедуры освидетельствования",
"Ошибки в протоколах и постановлениях",
"Отсутствие понятых или видеофиксации"
],
visualNumber: "300K+",
visualLabel: "водителей лишаются прав ежегодно",
visualNote: "Из них до 40% дел можно выиграть",
barWidth: 75
},
approach: {
title: "Индивидуальная стратегия для каждого дела",
description: "Мы не используем шаблонные решения. Каждое дело <strong>уникально</strong> и требует детального анализа материалов, видеозаписей и показаний свидетелей.",
description2: "Наш подход основан на <strong>глубоком знании практики</strong> судов Сургута и ХМАО. Мы изучаем каждую мелочь, чтобы найти слабые места обвинения.",
items: [
{ icon: "📋", title: "Анализ документов", desc: "Изучаем протоколы, постановления, рапорты" },
{ icon: "🔍", title: "Поиск нарушений", desc: "Находим процессуальные ошибки" },
{ icon: "📹", title: "Видеодоказательства", desc: "Запрашиваем и анализируем записи" }
],
steps: ["Консультация", "Анализ дела", "Стратегия", "Суд", "Результат"]
},
stats: {
bigStat: { number: 98, label: "Успешных дел", barWidth: 98 },
stats: [
{ number: 500, label: "Клиентов вернули права", suffix: "+" },
{ number: 15, label: "Лет практики", suffix: "" },
{ number: 2, label: "Недели — мин. срок", suffix: "" },
{ number: 100, label: "Возврат денег при неудаче", suffix: "%" }
]
},
guarantees: {
title: "Работаем на результат",
description: "Мы уверены в своих силах, поэтому предлагаем <strong>оплату по факту</strong> — только после успешного возврата прав.",
description2: "Если суд вынес решение не в вашу пользу — мы <strong>вернём деньги</strong> за наши услуги. Это прописано в договоре.",
items: [
{ title: "Без предоплаты", desc: "Оплата только после положительного результата" },
{ title: "Возврат денег", desc: "Если не вернули права — вернём оплату" },
{ title: "Договор", desc: "Официальный договор с прописанными гарантиями" },
{ title: "Честная оценка", desc: "Не берёмся за заведомо проигрышные дела" }
]
}
};
---
<section class="about-section" id="about">
<div class="about-section-inner">
<div class="section-header animate-on-scroll" data-animation="fade-up">
<span class="section-label center">Подробнее об услуге</span>
<h2>Всё о возврате водительских прав</h2>
<p class="section-desc">Полная информация об услуге возврата прав при лишении</p>
</div>
<div class="tabs-container animate-on-scroll" data-animation="fade-up" data-delay="200">
<div class="tabs-nav" role="tablist">
<button class="tab-btn active" role="tab" data-tab="problem" aria-selected="true">
<span class="tab-icon">⚖️</span>
<span class="tab-text">О проблеме</span>
</button>
<button class="tab-btn" role="tab" data-tab="approach" aria-selected="false">
<span class="tab-icon">🎯</span>
<span class="tab-text">Наш подход</span>
</button>
<button class="tab-btn" role="tab" data-tab="stats" aria-selected="false">
<span class="tab-icon">📊</span>
<span class="tab-text">Статистика</span>
</button>
<button class="tab-btn" role="tab" data-tab="guarantees" aria-selected="false">
<span class="tab-icon">🛡️</span>
<span class="tab-text">Гарантии</span>
</button>
</div>
<div class="tabs-content">
<!-- Таб 1: О проблеме -->
<div class="tab-panel active" id="tab-problem" role="tabpanel">
<div class="tab-grid">
<div class="tab-text">
<h3>{tabsData.problem.title}</h3>
<p set:html={tabsData.problem.description}></p>
<p set:html={tabsData.problem.description2}></p>
<div class="problem-list">
{tabsData.problem.items.map(item => (
<div class="problem-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
<span>{item}</span>
</div>
))}
</div>
</div>
<div class="tab-visual">
<div class="visual-card">
<div class="visual-number">{tabsData.problem.visualNumber}</div>
<div class="visual-label">{tabsData.problem.visualLabel}</div>
<div class="visual-bar">
<div class="visual-bar-fill" style={`width: ${tabsData.problem.barWidth}%`}></div>
</div>
<div class="visual-note">{tabsData.problem.visualNote}</div>
</div>
</div>
</div>
</div>
<!-- Таб 2: Наш подход -->
<div class="tab-panel" id="tab-approach" role="tabpanel">
<div class="tab-grid">
<div class="tab-text">
<h3>{tabsData.approach.title}</h3>
<p set:html={tabsData.approach.description}></p>
<p set:html={tabsData.approach.description2}></p>
<div class="approach-list">
{tabsData.approach.items.map(item => (
<div class="approach-item">
<div class="approach-icon">{item.icon}</div>
<div class="approach-info">
<strong>{item.title}</strong>
<span>{item.desc}</span>
</div>
</div>
))}
</div>
</div>
<div class="tab-visual">
<div class="visual-card">
<div class="steps-mini">
{tabsData.approach.steps.map((step, index) => (
<div class={`step-mini ${index === 0 ? 'active' : ''}`}>
<span class="step-mini-num">{index + 1}</span>
<span>{step}</span>
</div>
))}
</div>
<div class="visual-note">5 этапов до возврата ваших прав</div>
</div>
</div>
</div>
</div>
<!-- Таб 3: Статистика -->
<div class="tab-panel" id="tab-stats" role="tabpanel">
<div class="stats-grid">
<div class="stat-big-card">
<div class="stat-big-number" data-count={tabsData.stats.bigStat.number}>0%</div>
<div class="stat-big-label">{tabsData.stats.bigStat.label}</div>
<div class="stat-bar">
<div class="stat-bar-fill" data-width={tabsData.stats.bigStat.barWidth}></div>
</div>
</div>
{tabsData.stats.stats.map(stat => (
<div class="stat-card">
<div class="stat-number" data-count={stat.number}>0{stat.suffix}</div>
<div class="stat-label">{stat.label}</div>
</div>
))}
</div>
</div>
<!-- Таб 4: Гарантии -->
<div class="tab-panel" id="tab-guarantees" role="tabpanel">
<div class="tab-grid">
<div class="tab-text">
<h3>{tabsData.guarantees.title}</h3>
<p set:html={tabsData.guarantees.description}></p>
<p set:html={tabsData.guarantees.description2}></p>
<div class="guarantees-list">
{tabsData.guarantees.items.map(item => (
<div class="guarantee-item">
<div class="guarantee-check">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg>
</div>
<div>
<strong>{item.title}</strong>
<span>{item.desc}</span>
</div>
</div>
))}
</div>
</div>
<div class="tab-visual">
<div class="visual-card guarantee-card">
<div class="guarantee-shield">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
<path d="m9 12 2 2 4-4"/>
</svg>
</div>
<div class="guarantee-text">100% гарантия возврата оплаты</div>
<div class="guarantee-subtext">при неудачном исходе дела</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<style>
.about-section {
background: #f8fafc;
padding: 2.5rem 0;
}
.about-section-inner {
max-width: var(--site-max-width, 1400px);
margin: 0 auto;
padding: 0 1.5rem;
}
.section-header {
text-align: center;
margin-bottom: 2rem;
}
.section-label {
display: inline-block;
color: #eac26e;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 3px;
margin-bottom: 1rem;
padding: 0.5rem 1rem;
background: rgba(234, 194, 110, 0.1);
border-radius: 6px;
}
.section-label.center {
display: flex;
justify-content: center;
}
.section-header h2 {
color: #0a2540;
font-size: clamp(1.75rem, 3.5vw, 2.5rem);
font-weight: 800;
margin: 0 0 1rem 0;
line-height: 1.2;
}
.section-desc {
color: #64748b;
font-size: 1.05rem;
max-width: 650px;
margin: 0 auto;
line-height: 1.6;
}
.tabs-container {
max-width: 1000px;
margin: 0 auto;
}
.tabs-nav {
display: flex;
gap: 0.5rem;
background: #ffffff;
padding: 0.5rem;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
margin-bottom: 2rem;
flex-wrap: wrap;
}
.tab-btn {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.875rem 1.25rem;
background: transparent;
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
color: #64748b;
font-size: 0.9rem;
font-weight: 600;
}
.tab-btn:hover {
background: rgba(234, 194, 110, 0.1);
color: #0a2540;
}
.tab-btn.active {
background: linear-gradient(135deg, #eac26e, #ce9f40);
color: #0a2540;
box-shadow: 0 4px 12px rgba(234, 194, 110, 0.3);
}
.tab-icon {
font-size: 1.25rem;
}
.tabs-container {
max-width: 1200px;
margin: 0 auto;
width: 100%;
}
.tabs-content {
background: #ffffff;
border-radius: 16px;
padding: 2.5rem;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
overflow: hidden;
}
.tab-grid {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 2.5rem;
align-items: start;
}
.tab-panel {
display: none;
width: 100%;
max-width: 100%;
}
.tab-panel.active {
display: block;
}
.tab-text {
white-space: normal;
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
}
.tab-text h3 {
color: #0a2540;
font-size: clamp(1.25rem, 2.5vw, 1.5rem);
font-weight: 800;
margin: 0 0 1.25rem 0;
line-height: 1.3;
}
.tab-text p {
color: #475569;
font-size: 0.95rem;
line-height: 1.7;
margin-bottom: 1rem;
word-wrap: break-word;
overflow-wrap: break-word;
}
.tab-text strong {
color: #0a2540;
font-weight: 700;
}
.problem-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-top: 1.5rem;
}
.problem-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
background: #f8fafc;
border-radius: 8px;
color: #0a2540;
font-size: 0.9rem;
font-weight: 500;
}
.problem-item svg {
width: 20px;
height: 20px;
color: #eac26e;
flex-shrink: 0;
}
.tab-visual {
max-width: 100%;
}
.visual-card {
background: linear-gradient(135deg, #0a2540, #1e3050);
border-radius: 12px;
padding: 2rem;
color: #ffffff;
}
.visual-number {
font-size: 3rem;
font-weight: 900;
background: linear-gradient(135deg, #eac26e, #ce9f40);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
line-height: 1;
margin-bottom: 0.75rem;
}
.visual-label {
font-size: 1rem;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 1.5rem;
}
.visual-bar {
height: 8px;
background: rgba(255, 255, 255, 0.1);
border-radius: 4px;
overflow: hidden;
margin-bottom: 1rem;
}
.visual-bar-fill {
height: 100%;
background: linear-gradient(90deg, #eac26e, #ce9f40);
border-radius: 4px;
transition: width 1s ease;
}
.visual-note {
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.6);
padding-top: 1rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.approach-list {
display: flex;
flex-direction: column;
gap: 1rem;
margin-top: 1.5rem;
}
.approach-item {
display: flex;
gap: 1rem;
align-items: flex-start;
}
.approach-icon {
font-size: 1.75rem;
flex-shrink: 0;
}
.approach-info {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.approach-info strong {
color: #0a2540;
font-size: 0.95rem;
}
.approach-info span {
color: #64748b;
font-size: 0.85rem;
}
.steps-mini {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-bottom: 1.25rem;
}
.step-mini {
display: flex;
align-items: center;
gap: 0.75rem;
color: rgba(255, 255, 255, 0.7);
font-size: 0.9rem;
}
.step-mini-num {
width: 32px;
height: 32px;
background: rgba(234, 194, 110, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
color: #eac26e;
flex-shrink: 0;
}
.step-mini.active .step-mini-num {
background: linear-gradient(135deg, #eac26e, #ce9f40);
color: #0a2540;
}
.stats-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
.stat-big-card {
grid-column: 1 / -1;
background: linear-gradient(135deg, #0a2540, #1e3050);
border-radius: 12px;
padding: 2.5rem;
text-align: center;
}
.stat-big-number {
font-size: 4rem;
font-weight: 900;
background: linear-gradient(135deg, #eac26e, #ce9f40);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
line-height: 1;
margin-bottom: 0.5rem;
}
.stat-big-label {
font-size: 1.1rem;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 1.5rem;
}
.stat-bar {
height: 12px;
background: rgba(255, 255, 255, 0.1);
border-radius: 6px;
overflow: hidden;
}
.stat-bar-fill {
height: 100%;
background: linear-gradient(90deg, #eac26e, #ce9f40);
border-radius: 6px;
transition: width 1.5s ease;
width: 0%;
}
.stat-card {
background: #f8fafc;
border-radius: 12px;
padding: 1.5rem;
text-align: center;
border: 1px solid #e2e8f0;
}
.stat-number {
font-size: 2rem;
font-weight: 800;
background: linear-gradient(135deg, #eac26e, #ce9f40);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
line-height: 1;
margin-bottom: 0.5rem;
}
.stat-label {
font-size: 0.85rem;
color: #64748b;
}
.guarantees-list {
display: flex;
flex-direction: column;
gap: 1rem;
margin-top: 1.5rem;
}
.guarantee-item {
display: flex;
gap: 1rem;
align-items: flex-start;
}
.guarantee-check {
width: 36px;
height: 36px;
background: linear-gradient(135deg, #eac26e, #ce9f40);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.guarantee-check svg {
width: 18px;
height: 18px;
color: #0a2540;
}
.guarantee-item strong {
display: block;
color: #0a2540;
font-size: 0.95rem;
margin-bottom: 0.15rem;
}
.guarantee-item span {
color: #64748b;
font-size: 0.85rem;
}
.guarantee-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
min-height: 280px;
}
.guarantee-shield {
width: 80px;
height: 80px;
background: rgba(234, 194, 110, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
}
.guarantee-shield svg {
width: 40px;
height: 40px;
color: #eac26e;
}
.guarantee-text {
font-size: 1.25rem;
font-weight: 800;
color: #eac26e;
margin-bottom: 0.5rem;
}
.guarantee-subtext {
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.6);
}
@media (max-width: 1024px) {
.tab-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.tabs-content {
padding: 2rem;
}
}
@media (max-width: 768px) {
.about-section {
padding: 3.5rem 0;
}
.about-section-inner {
padding: 0 1rem;
}
.section-header {
margin-bottom: 2.5rem;
}
.tabs-nav {
flex-direction: column;
gap: 0.35rem;
}
.tab-btn {
justify-content: flex-start;
padding: 0.75rem 1rem;
}
.tabs-content {
padding: 1.5rem;
}
.tab-grid {
gap: 1.5rem;
}
.tab-text h3 {
font-size: 1.25rem;
}
.stat-big-number {
font-size: 3rem;
}
.stats-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.about-section {
padding: 2.5rem 0;
}
.about-section-inner {
padding: 0 0.75rem;
}
.tabs-content {
padding: 1.25rem;
}
.tab-text h3 {
font-size: 1.1rem;
}
.tab-text p {
font-size: 0.9rem;
}
}
</style>

158
frontend/src/components/services/AdvantagesList.astro Normal file
View file

@ -0,0 +1,158 @@
---
const advantages = [
{ number: "01", title: "Специализация на автоспорах", desc: "Мы занимаемся исключительно делами по лишению прав. Это даёт глубокое знание практики судов Сургута." },
{ number: "02", title: "98% успешных дел", desc: "Наша статистика говорит сама за себя. Большинство дел заканчиваются в пользу клиента." },
{ number: "03", title: "Бесплатная консультация", desc: "Первичная консультация бесплатно. Честно скажем о перспективах дела до начала работы." },
{ number: "04", title: "Работа без предоплаты", desc: "Оплата только после положительного результата. Мы уверены в своих силах." },
{ number: "05", title: "Полное сопровождение", desc: "Берём на себя весь процесс — от анализа документов до получения прав в ГИБДД." },
{ number: "06", title: "Связь 24/7", desc: "На связи в любое время. Оперативно отвечаем на вопросы и информируем о ходе дела." }
];
---
<section class="advantages-section" id="advantages">
<div class="advantages-section-inner">
<div class="section-header animate-on-scroll" data-animation="fade-up">
<span class="section-label center">Почему мы</span>
<h2>Преимущества работы с нами</h2>
<p class="section-desc">Доверьте своё дело профессионалам с многолетним опытом</p>
</div>
<div class="advantages-grid">
{advantages.map((adv, index) => (
<div class="advantage-card animate-on-scroll" data-animation="fade-up" data-delay={100 + index * 100}>
<div class="advantage-number">{adv.number}</div>
<h3>{adv.title}</h3>
<p>{adv.desc}</p>
</div>
))}
</div>
</div>
</section>
<style>
.advantages-section {
background: #ffffff;
padding: 2.5rem 0;
}
.advantages-section-inner {
max-width: var(--site-max-width, 1400px);
margin: 0 auto;
padding: 0 1.5rem;
}
.section-header {
text-align: center;
margin-bottom: 2rem;
}
.section-label {
display: inline-block;
color: #eac26e;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 3px;
margin-bottom: 1rem;
padding: 0.5rem 1rem;
background: rgba(234, 194, 110, 0.1);
border-radius: 6px;
}
.section-label.center {
display: flex;
justify-content: center;
}
.section-header h2 {
color: #0a2540;
font-size: clamp(1.75rem, 3.5vw, 2.5rem);
font-weight: 800;
margin: 0 0 1rem 0;
line-height: 1.2;
}
.section-desc {
color: #64748b;
font-size: 1.05rem;
max-width: 650px;
margin: 0 auto;
line-height: 1.6;
}
.advantages-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.advantage-card {
background: linear-gradient(135deg, #0a2540, #1e3050);
border-radius: 12px;
padding: 2rem;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.advantage-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 30px rgba(10, 37, 64, 0.3);
}
.advantage-number {
font-size: 2.5rem;
font-weight: 900;
color: rgba(234, 194, 110, 0.1);
position: absolute;
top: 1rem;
right: 1rem;
}
.advantage-card h3 {
color: #eac26e;
font-size: 1.1rem;
font-weight: 700;
margin: 0 0 0.75rem 0;
}
.advantage-card p {
color: rgba(255, 255, 255, 0.7);
font-size: 0.9rem;
line-height: 1.6;
margin: 0;
}
@media (max-width: 1024px) {
.advantages-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.advantages-section {
padding: 3.5rem 0;
}
.advantages-section-inner {
padding: 0 1rem;
}
.section-header {
margin-bottom: 2.5rem;
}
.advantages-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.advantages-section {
padding: 2.5rem 0;
}
.advantages-section-inner {
padding: 0 0.75rem;
}
}
</style>

174
frontend/src/components/services/ArticlesList.astro Normal file
View file

@ -0,0 +1,174 @@
---
const articles = [
{ icon: "🍺", title: "Ст. 12.8 — Управление в состоянии опьянения", desc: "Оспариваем результаты освидетельствования, проверяем соблюдение процедуры медосвидетельствования.", chance: "Высокий шанс" },
{ icon: "🚫", title: "Ст. 12.26 — Отказ от медосвидетельствования", desc: "Анализируем законность требований о прохождении освидетельствования, ищем нарушения процедуры.", chance: "Высокий шанс" },
{ icon: "🚦", title: "Ст. 12.12 — Проезд на красный свет", desc: "Проверяем работу камер, анализируем материалы дела, ищем свидетелей.", chance: "Средний шанс" },
{ icon: "🔄", title: "Ст. 12.15 — Выезд на встречную полосу", desc: "Анализируем дорожную разметку, знаки, показания инспекторов.", chance: "Высокий шанс" },
{ icon: "🚗", title: "Ст. 12.27 — Оставление места ДТП", desc: "Доказываем отсутствие умысла или необходимость покинуть место по уважительной причине.", chance: "Средний шанс" },
{ icon: "⚠️", title: "Другие статьи", desc: "Работаем с любыми статьями КоАП — каждая ситуация индивидуальна и требует анализа.", chance: "Зависит от дела" }
];
---
<section class="articles-section" id="articles">
<div class="articles-section-inner">
<div class="section-header animate-on-scroll" data-animation="fade-up">
<span class="section-label center">Работаем со статьями</span>
<h2>По каким статьям КоАП возвращаем права</h2>
<p class="section-desc">Оспариваем лишение по всем основным статьям КоАП РФ</p>
</div>
<div class="articles-grid">
{articles.map((article, index) => (
<div class="article-card animate-on-scroll" data-animation="fade-up" data-delay={100 + index * 100}>
<div class="article-icon">{article.icon}</div>
<h3>{article.title}</h3>
<p>{article.desc}</p>
<span class="article-chance">{article.chance}</span>
</div>
))}
</div>
</div>
</section>
<style>
.articles-section {
background: #ffffff;
padding: 2.5rem 0;
}
.articles-section-inner {
max-width: var(--site-max-width, 1400px);
margin: 0 auto;
padding: 0 1.5rem;
}
.section-header {
text-align: center;
margin-bottom: 2rem;
}
.section-label {
display: inline-block;
color: #eac26e;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 3px;
margin-bottom: 1rem;
padding: 0.5rem 1rem;
background: rgba(234, 194, 110, 0.1);
border-radius: 6px;
}
.section-label.center {
display: flex;
justify-content: center;
}
.section-header h2 {
color: #0a2540;
font-size: clamp(1.75rem, 3.5vw, 2.5rem);
font-weight: 800;
margin: 0 0 1rem 0;
line-height: 1.2;
}
.section-desc {
color: #64748b;
font-size: 1.05rem;
max-width: 650px;
margin: 0 auto;
line-height: 1.6;
}
.articles-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.article-card {
background: #f8fafc;
border-radius: 12px;
padding: 1.75rem;
border: 1px solid #e2e8f0;
transition: all 0.3s ease;
}
.article-card:hover {
border-color: rgba(234, 194, 110, 0.3);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
transform: translateY(-4px);
}
.article-icon {
font-size: 2rem;
margin-bottom: 1rem;
}
.article-card h3 {
color: #0a2540;
font-size: 1.1rem;
font-weight: 700;
margin: 0 0 0.75rem 0;
}
.article-card p {
color: #64748b;
font-size: 0.9rem;
line-height: 1.6;
margin-bottom: 1rem;
}
.article-chance {
display: inline-block;
padding: 0.4rem 0.75rem;
background: rgba(234, 194, 110, 0.1);
color: #ce9f40;
border-radius: 6px;
font-size: 0.8rem;
font-weight: 600;
}
@media (max-width: 1024px) {
.articles-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.articles-section {
padding: 3.5rem 0;
}
.articles-section-inner {
padding: 0 1rem;
}
.section-header {
margin-bottom: 2.5rem;
}
.articles-grid {
grid-template-columns: 1fr;
}
.article-card {
text-align: center;
}
.article-icon {
display: flex;
justify-content: center;
}
}
@media (max-width: 480px) {
.articles-section {
padding: 2.5rem 0;
}
.articles-section-inner {
padding: 0 0.75rem;
}
}
</style>

168
frontend/src/components/services/FaqList.astro Normal file
View file

@ -0,0 +1,168 @@
---
const faqs = [
{ question: "Можно ли реально вернуть права после лишения?", answer: "Да, в <strong>98% случаев</strong> нам удаётся вернуть права. Мы анализируем материалы дела и честно говорим о перспективах до начала работы." },
{ question: "Сколько времени занимает процесс?", answer: "В среднем процесс занимает <strong>от 2 недель до 3 месяцев</strong> в зависимости от сложности дела и загруженности судов." },
{ question: "Что если суд уже вынес решение?", answer: "Мы можем <strong>обжаловать решение</strong> в апелляционном суде в течение 10 дней с момента вынесения. Даже если срок прошёл, есть другие механизмы." },
{ question: "Какие гарантии результата?", answer: "Мы работаем <strong>без предоплаты</strong> — оплата только после положительного результата. Если не вернём права — вернём деньги." },
{ question: "Нужно ли моё присутствие в суде?", answer: "<strong>Нет</strong>, мы представляем ваши интересы по доверенности. Ваше присутствие не требуется — мы ведём дело полностью." },
{ question: "Что нужно для начала работы?", answer: "Достаточно <strong>позвонить нам</strong> или оставить заявку. На бесплатной консультации мы всё обсудим и начнём работу." }
];
---
<section class="faq-section" id="faq">
<div class="faq-section-inner">
<div class="section-header animate-on-scroll" data-animation="fade-up">
<span class="section-label center">Вопросы</span>
<h2>Частые вопросы</h2>
<p class="section-desc">Ответы на популярные вопросы о возврате прав</p>
</div>
<div class="faq-list">
{faqs.map((faq, index) => (
<details class="faq-item animate-on-scroll" data-animation="fade-up" data-delay={100 + index * 100}>
<summary>
<span class="faq-question">{faq.question}</span>
<svg class="faq-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="m6 9 6 6 6-6"/>
</svg>
</summary>
<div class="faq-answer">
<p set:html={faq.answer}></p>
</div>
</details>
))}
</div>
</div>
</section>
<style>
.faq-section {
background: #ffffff;
padding: 2.5rem 0;
}
.faq-section-inner {
max-width: var(--site-max-width, 1400px);
margin: 0 auto;
padding: 0 1.5rem;
}
.section-header {
text-align: center;
margin-bottom: 2rem;
}
.section-label {
display: inline-block;
color: #eac26e;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 3px;
margin-bottom: 1rem;
padding: 0.5rem 1rem;
background: rgba(234, 194, 110, 0.1);
border-radius: 6px;
}
.section-label.center {
display: flex;
justify-content: center;
}
.section-header h2 {
color: #0a2540;
font-size: clamp(1.75rem, 3.5vw, 2.5rem);
font-weight: 800;
margin: 0 0 1rem 0;
line-height: 1.2;
}
.section-desc {
color: #64748b;
font-size: 1.05rem;
max-width: 650px;
margin: 0 auto;
line-height: 1.6;
}
.faq-list {
max-width: 800px;
margin: 0 auto;
}
.faq-item {
border-bottom: 1px solid #e2e8f0;
}
.faq-item summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.5rem 0;
cursor: pointer;
list-style: none;
}
.faq-item summary::-webkit-details-marker {
display: none;
}
.faq-question {
color: #0a2540;
font-size: 1.05rem;
font-weight: 600;
flex: 1;
}
.faq-icon {
width: 24px;
height: 24px;
flex-shrink: 0;
color: #eac26e;
transition: transform 0.3s ease;
}
.faq-item[open] .faq-icon {
transform: rotate(180deg);
}
.faq-answer {
padding: 0 0 1.5rem 0;
}
.faq-answer p {
color: #475569;
font-size: 0.95rem;
line-height: 1.7;
margin: 0;
}
.faq-answer strong {
color: #0a2540;
}
@media (max-width: 768px) {
.faq-section {
padding: 3.5rem 0;
}
.faq-section-inner {
padding: 0 1rem;
}
.section-header {
margin-bottom: 2.5rem;
}
}
@media (max-width: 480px) {
.faq-section {
padding: 2.5rem 0;
}
.faq-section-inner {
padding: 0 0.75rem;
}
}
</style>

247
frontend/src/components/services/PricingPlans.astro Normal file
View file

@ -0,0 +1,247 @@
---
const plans = [
{ badge: "Базовый", title: "Консультация + анализ дела", price: "Бесплатно", features: ["Анализ материалов дела", "Оценка перспектив", "Рекомендации по действиям", "Консультация по статьям"], btnText: "Получить консультацию", btnClass: "" },
{ badge: "Популярный", title: "Полное сопровождение", price: "от 15 000 ₽", features: ["Всё из базового пакета", "Подготовка жалоб", "Представительство в суде", "Сбор доказательств", "Получение прав"], btnText: "Начать работу", btnClass: "gold", popular: true },
{ badge: "Премиум", title: "Сложные дела", price: "от 30 000 ₽", features: ["Всё из полного пакета", "Экспертиза", "Апелляция", "Работа с ГИБДД", "Приоритетная поддержка"], btnText: "Обсудить дело", btnClass: "" }
];
---
<section class="pricing-section" id="pricing">
<div class="pricing-section-inner">
<div class="section-header animate-on-scroll" data-animation="fade-up">
<span class="section-label center">Стоимость</span>
<h2>Сколько стоит возврат прав</h2>
<p class="section-desc">Прозрачные цены без скрытых платежей</p>
</div>
<div class="pricing-grid">
{plans.map((plan, index) => (
<div class={`pricing-card ${plan.popular ? 'featured' : ''} animate-on-scroll`} data-animation="fade-up" data-delay={100 + index * 100}>
<div class={`pricing-badge ${plan.popular ? 'popular' : ''}`}>{plan.badge}</div>
<h3>{plan.title}</h3>
<div class="price">
<span class="price-value">{plan.price}</span>
</div>
<ul class="pricing-features">
{plan.features.map(feature => <li>{feature}</li>)}
</ul>
<a href="#contact" class={`pricing-btn ${plan.btnClass}`}>{plan.btnText}</a>
</div>
))}
</div>
</div>
</section>
<style>
.pricing-section {
background: #f8fafc;
padding: 2.5rem 0;
}
.pricing-section-inner {
max-width: var(--site-max-width, 1400px);
margin: 0 auto;
padding: 0 1.5rem;
}
.section-header {
text-align: center;
margin-bottom: 2rem;
}
.section-label {
display: inline-block;
color: #eac26e;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 3px;
margin-bottom: 1rem;
padding: 0.5rem 1rem;
background: rgba(234, 194, 110, 0.1);
border-radius: 6px;
}
.section-label.center {
display: flex;
justify-content: center;
}
.section-header h2 {
color: #0a2540;
font-size: clamp(1.75rem, 3.5vw, 2.5rem);
font-weight: 800;
margin: 0 0 1rem 0;
line-height: 1.2;
}
.section-desc {
color: #64748b;
font-size: 1.05rem;
max-width: 650px;
margin: 0 auto;
line-height: 1.6;
}
.pricing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
align-items: start;
}
.pricing-card {
background: #ffffff;
border-radius: 16px;
padding: 2.5rem 2rem;
border: 1px solid #e2e8f0;
text-align: center;
transition: all 0.3s ease;
position: relative;
}
.pricing-card:hover {
border-color: rgba(234, 194, 110, 0.3);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
transform: translateY(-4px);
}
.pricing-card.featured {
border-color: #eac26e;
box-shadow: 0 12px 30px rgba(234, 194, 110, 0.2);
}
.pricing-badge {
display: inline-block;
padding: 0.4rem 1rem;
background: rgba(10, 37, 64, 0.1);
color: #0a2540;
border-radius: 100px;
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 1.25rem;
}
.pricing-badge.popular {
background: linear-gradient(135deg, #eac26e, #ce9f40);
color: #0a2540;
}
.pricing-card h3 {
color: #0a2540;
font-size: 1.25rem;
font-weight: 700;
margin: 0 0 1rem 0;
}
.price {
margin-bottom: 1.5rem;
}
.price-value {
font-size: 2rem;
font-weight: 800;
background: linear-gradient(135deg, #eac26e, #ce9f40);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.pricing-features {
list-style: none;
padding: 0;
margin: 0 0 2rem 0;
text-align: left;
}
.pricing-features li {
padding: 0.5rem 0;
color: #475569;
font-size: 0.9rem;
position: relative;
padding-left: 1.5rem;
}
.pricing-features li::before {
content: '✓';
position: absolute;
left: 0;
color: #eac26e;
font-weight: 700;
}
.pricing-btn {
display: inline-block;
padding: 0.875rem 2rem;
background: linear-gradient(135deg, #0a2540, #1e3050);
color: #eac26e;
border-radius: 8px;
text-decoration: none;
font-weight: 700;
font-size: 0.95rem;
transition: all 0.3s ease;
border: 1px solid rgba(234, 194, 110, 0.3);
}
.pricing-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(10, 37, 64, 0.3);
}
.pricing-btn.gold {
background: linear-gradient(135deg, #eac26e, #ce9f40);
color: #0a2540;
border: none;
}
.pricing-btn.gold:hover {
box-shadow: 0 8px 20px rgba(234, 194, 110, 0.4);
}
@media (max-width: 1024px) {
.pricing-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.pricing-section {
padding: 3.5rem 0;
}
.pricing-section-inner {
padding: 0 1rem;
}
.section-header {
margin-bottom: 2.5rem;
}
.pricing-grid {
grid-template-columns: 1fr;
}
.pricing-card {
text-align: center;
}
.pricing-card.featured {
order: -1;
}
.pricing-features {
text-align: left;
}
}
@media (max-width: 480px) {
.pricing-section {
padding: 2.5rem 0;
}
.pricing-section-inner {
padding: 0 0.75rem;
}
}
</style>

6
frontend/src/components/services/ServiceCategories.astro
View file

@ -27,9 +27,9 @@ const {
category: "Водительские права",
services: [
{
title: "Возврат прав после лишения",
title: "Возврат прав при лишении",
description: "Оспариваем лишение водительских прав в суде. Работаем с любыми статьями КоАП.",
price: "от 15 000 ₽",
price: "от 40 000 ₽",
icon: "🚗",
href: "/services/license-return",
features: ["Анализ протокола", "Представительство в суде", "Обжалование решения", "Сопровождение до результата"]
@ -37,7 +37,7 @@ const {
{
title: "Оспаривание лишения",
description: "Находим процессуальные нарушения и добиваемся отмены постановлений.",
price: "от 20 000 ₽",
price: "от 30 000 ₽",
icon: "⚖️",
href: "/services/appeal",
features: ["Аудит материалов дела", "Поиск нарушений процедуры", "Подготовка жалобы", "Защита в апелляционном суде"]

164
frontend/src/components/services/ServiceIncludes.astro Normal file
View file

@ -0,0 +1,164 @@
---
const includes = [
{ icon: "📄", title: "Анализ протокола и документов", desc: "Изучаем все материалы дела, ищем процессуальные нарушения" },
{ icon: "💬", title: "Консультация 24/7", desc: "На связи в любое время, отвечаем на все вопросы" },
{ icon: "📝", title: "Подготовка жалоб и ходатайств", desc: "Составляем все необходимые процессуальные документы" },
{ icon: "👨‍⚖️", title: "Представительство в суде", desc: "Полное ведение дела без вашего участия" },
{ icon: "🔍", title: "Сбор доказательств", desc: "Находим свидетелей, запрашиваем видеозаписи" },
{ icon: "✅", title: "Гарантия результата", desc: "Если не вернули права — вернём деньги" }
];
---
<section class="includes-section" id="includes">
<div class="includes-section-inner">
<div class="section-header animate-on-scroll" data-animation="fade-up">
<span class="section-label center">Что входит</span>
<h2>Что входит в услугу</h2>
<p class="section-desc">Полный спектр работ по возврату ваших прав</p>
</div>
<div class="includes-grid">
{includes.map((item, index) => (
<div class="include-item animate-on-scroll" data-animation="fade-up" data-delay={100 + index * 100}>
<div class="include-icon">
<span style="font-size: 1.75rem;">{item.icon}</span>
</div>
<h4>{item.title}</h4>
<p>{item.desc}</p>
</div>
))}
</div>
</div>
</section>
<style>
.includes-section {
background: #f8fafc;
padding: 2.5rem 0;
}
.includes-section-inner {
max-width: var(--site-max-width, 1400px);
margin: 0 auto;
padding: 0 1.5rem;
}
.section-header {
text-align: center;
margin-bottom: 2rem;
}
.section-label {
display: inline-block;
color: #eac26e;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 3px;
margin-bottom: 1rem;
padding: 0.5rem 1rem;
background: rgba(234, 194, 110, 0.1);
border-radius: 6px;
}
.section-label.center {
display: flex;
justify-content: center;
}
.section-header h2 {
color: #0a2540;
font-size: clamp(1.75rem, 3.5vw, 2.5rem);
font-weight: 800;
margin: 0 0 1rem 0;
line-height: 1.2;
}
.section-desc {
color: #64748b;
font-size: 1.05rem;
max-width: 650px;
margin: 0 auto;
line-height: 1.6;
}
.includes-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.include-item {
background: #ffffff;
border-radius: 12px;
padding: 1.75rem;
border: 1px solid #e2e8f0;
text-align: center;
transition: all 0.3s ease;
}
.include-item:hover {
border-color: rgba(234, 194, 110, 0.3);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
transform: translateY(-4px);
}
.include-icon {
width: 56px;
height: 56px;
margin: 0 auto 1.25rem;
background: linear-gradient(135deg, #0a2540, #1e3050);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #eac26e;
}
.include-item h4 {
color: #0a2540;
font-size: 1.05rem;
font-weight: 700;
margin: 0 0 0.5rem 0;
}
.include-item p {
color: #64748b;
font-size: 0.9rem;
line-height: 1.5;
margin: 0;
}
@media (max-width: 1024px) {
.includes-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.includes-section {
padding: 3.5rem 0;
}
.includes-section-inner {
padding: 0 1rem;
}
.section-header {
margin-bottom: 2.5rem;
}
.includes-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.includes-section {
padding: 2.5rem 0;
}
.includes-section-inner {
padding: 0 0.75rem;
}
}
</style>

189
frontend/src/components/services/WorkSteps.astro Normal file
View file

@ -0,0 +1,189 @@
---
const steps = [
{ number: "01", title: "Бесплатная консультация", desc: "Анализируем вашу ситуацию, оцениваем перспективы дела. Рассказываем о шансах и стоимости." },
{ number: "02", title: "Анализ материалов дела", desc: "Изучаем протоколы, постановления, видеозаписи. Ищем процессуальные нарушения." },
{ number: "03", title: "Подготовка стратегии", desc: "Разрабатываем линию защиты, собираем доказательства, готовим документы для суда." },
{ number: "04", title: "Защита в суде", desc: "Представляем ваши интересы в суде первой и апелляционной инстанции." },
{ number: "05", title: "Получение прав", desc: "Помогаем с процедурой возврата прав после успешного решения суда." }
];
---
<section class="steps-section" id="steps">
<div class="steps-section-inner">
<div class="section-header animate-on-scroll" data-animation="fade-up">
<span class="section-label center">Этапы работы</span>
<h2>Как мы возвращаем ваши права</h2>
<p class="section-desc">Прозрачный процесс от первой консультации до получения прав</p>
</div>
<div class="steps-timeline">
{steps.map((step, index) => (
<div class="step-item animate-on-scroll" data-animation="fade-up" data-delay={100 + index * 100}>
<div class="step-number">{step.number}</div>
<div class="step-content">
<h3>{step.title}</h3>
<p>{step.desc}</p>
</div>
</div>
))}
</div>
</div>
</section>
<style>
.steps-section {
background: linear-gradient(135deg, #0a2540 0%, #1e3050 100%);
color: #ffffff;
padding: 2.5rem 0;
}
.steps-section-inner {
max-width: var(--site-max-width, 1400px);
margin: 0 auto;
padding: 0 1.5rem;
}
.section-header {
text-align: center;
margin-bottom: 2rem;
}
.section-label {
display: inline-block;
color: #eac26e;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 3px;
margin-bottom: 1rem;
padding: 0.5rem 1rem;
background: rgba(234, 194, 110, 0.1);
border-radius: 6px;
}
.section-label.center {
display: flex;
justify-content: center;
}
.section-header h2 {
color: #ffffff;
font-size: clamp(1.75rem, 3.5vw, 2.5rem);
font-weight: 800;
margin: 0 0 1rem 0;
line-height: 1.2;
}
.section-desc {
color: rgba(255, 255, 255, 0.7);
font-size: 1.05rem;
max-width: 650px;
margin: 0 auto;
line-height: 1.6;
}
.steps-timeline {
max-width: 800px;
margin: 0 auto;
position: relative;
}
.steps-timeline::before {
content: '';
position: absolute;
left: 32px;
top: 0;
bottom: 0;
width: 2px;
background: linear-gradient(to bottom, #eac26e, rgba(234, 194, 110, 0.1));
}
.step-item {
display: flex;
gap: 2rem;
margin-bottom: 2.5rem;
position: relative;
}
.step-item:last-child {
margin-bottom: 0;
}
.step-number {
width: 64px;
height: 64px;
background: linear-gradient(135deg, #eac26e, #ce9f40);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
font-weight: 900;
color: #0a2540;
flex-shrink: 0;
position: relative;
z-index: 2;
box-shadow: 0 8px 20px rgba(234, 194, 110, 0.3);
}
.step-content h3 {
color: #eac26e;
font-size: 1.25rem;
font-weight: 700;
margin: 0 0 0.5rem 0;
}
.step-content p {
color: rgba(255, 255, 255, 0.7);
font-size: 0.95rem;
line-height: 1.6;
margin: 0;
}
@media (max-width: 768px) {
.steps-section {
padding: 3.5rem 0;
}
.steps-section-inner {
padding: 0 1rem;
}
.section-header {
margin-bottom: 2.5rem;
}
.steps-timeline::before {
left: 28px;
}
.step-number {
width: 56px;
height: 56px;
font-size: 1rem;
}
.step-item {
gap: 1.5rem;
}
}
@media (max-width: 480px) {
.steps-section {
padding: 2.5rem 0;
}
.steps-section-inner {
padding: 0 0.75rem;
}
.step-item {
flex-direction: column;
align-items: center;
text-align: center;
}
.steps-timeline::before {
display: none;
}
}
</style>

3
frontend/src/constants.ts
View file

@ -10,8 +10,9 @@ export const COMPANY = {
name: 'Автоюрист 086',
fullName: 'Центр защиты прав водителей "Автоюрист 086"',
phone: '+7 (922) 253-83-75',
phoneClean: '+79222538375',
email: 'redibedi2019@gmail.com',
address: 'г. Сургут, пр. Комсомольский, д. 19',
address: 'г. Сургут, ул. 50 лет ВЛКСМ д.1',
workHours: 'Пн-Пт: 9:00 - 18:00',
} as const;

6
frontend/src/pages/privacy.astro
View file

@ -1,6 +1,6 @@
---
import Layout from '@layouts/Layout.astro';
import { SITE_URL } from '@constants';
import { SITE_URL, COMPANY } from '@constants';
---
<Layout
@ -182,11 +182,11 @@ import { SITE_URL } from '@constants';
<div class="contact-cards">
<div class="contact-card">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
<span>г. Сургут, ул. Мира, 15</span>
<span>{COMPANY.address}</span>
</div>
<div class="contact-card">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
<a href="tel:+73462000000">+7 (3462) 00-00-00</a>
<a href={`tel:${COMPANY.phoneClean}`}>{COMPANY.phone}</a>
</div>
</div>
</section>

4
frontend/src/pages/services.astro → frontend/src/pages/services/index.astro
View file

@ -18,9 +18,9 @@ import ServiceCategories from "@components/services/ServiceCategories.astro";
>
<PageHero
badgeText="АВТОЮРИСТ СУРГУТ & ЮГРА"
titleWhite="Наши юридические"
titleWhite="Мои юридические"
titleGold="услуги"
description="Мы обеспечиваем экспертную защиту прав водителей в Сургуте и Ханты-Мансийском автономном округе. Профессиональный подход к сложным дорожным спорам с акцентом на результат."
description="Я обеспечиваю экспертную защиту прав водителей в Сургуте и Ханты-Мансийском автономном округе. Профессиональный подход к сложным дорожным спорам с акцентом на результат."
btnText="Получить помощь"
layout="with-image"
sideImage="/images/services/office-table.avif"

1142
frontend/src/pages/services/license-return.astro Normal file
View file

File diff suppressed because it is too large Load diff

28
frontend/src/scripts/animations.ts Normal file
View file

@ -0,0 +1,28 @@
export function setupScrollAnimations(): void {
if (typeof window === 'undefined') return;
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);
});
}

74
frontend/src/scripts/tabs.ts Normal file
View file

@ -0,0 +1,74 @@
export function setupTabs(): void {
if (typeof window === 'undefined') return;
const tabButtons = document.querySelectorAll('.tab-btn');
const tabPanels = document.querySelectorAll('.tab-panel');
tabButtons.forEach(btn => {
btn.addEventListener('click', () => {
const tabId = btn.getAttribute('data-tab');
// Remove active from all buttons
tabButtons.forEach(b => {
b.classList.remove('active');
b.setAttribute('aria-selected', 'false');
});
// Remove active from all panels
tabPanels.forEach(panel => {
panel.classList.remove('active');
});
// Activate current tab
btn.classList.add('active');
btn.setAttribute('aria-selected', 'true');
const targetPanel = document.getElementById(`tab-${tabId}`);
if (targetPanel) {
targetPanel.classList.add('active');
// Animate counters if stats tab
if (tabId === 'stats') {
animateCounters(targetPanel);
}
}
});
});
}
export function animateCounters(panel: HTMLElement): void {
const counters = panel.querySelectorAll('[data-count]');
counters.forEach(counter => {
const target = parseInt(counter.getAttribute('data-count') || '0');
const suffix = counter.textContent?.replace(/[0-9]/g, '') || '';
const duration = 1500;
const startTime = performance.now();
const easeOutCubic = (t: number) => 1 - Math.pow(1 - t, 3);
const update = (currentTime: number) => {
const elapsed = currentTime - startTime;
const progress = Math.min(elapsed / duration, 1);
const easedProgress = easeOutCubic(progress);
const currentValue = Math.round(easedProgress * target);
counter.textContent = `${currentValue}${suffix}`;
if (progress < 1) {
requestAnimationFrame(update);
}
};
requestAnimationFrame(update);
});
// Animate stat bars
const statBars = panel.querySelectorAll('[data-width]');
statBars.forEach(bar => {
const width = bar.getAttribute('data-width');
setTimeout(() => {
(bar as HTMLElement).style.width = `${width}%`;
}, 200);
});
}

2
frontend/tsconfig.json
View file

@ -9,7 +9,7 @@
"@components/*": ["src/components/*"],
"@data/*": ["src/data/*"],
"@constants": ["src/constants.ts"],
"@constants/*": ["src/constants/*"],
"@scripts/*": ["src/scripts/*"],
"@layouts/*": ["src/layouts/*"],
"@assets/*": ["src/assets/*"],
"@pages/*": ["src/pages/*"]