Создана новая страница - license-challenge
This commit is contained in:
Web-serfer
parent
24be657ac6
commit
2795a4653c
9 changed files with 593 additions and 56 deletions
|
|
@ -1,5 +1,52 @@
|
|||
---
|
||||
const tabsData = {
|
||||
interface Props {
|
||||
tabsData?: {
|
||||
problem: {
|
||||
title: string;
|
||||
description: string;
|
||||
description2: string;
|
||||
items: string[];
|
||||
visualNumber: string;
|
||||
visualLabel: string;
|
||||
visualNote: string;
|
||||
barWidth: number;
|
||||
};
|
||||
approach: {
|
||||
title: string;
|
||||
description: string;
|
||||
description2: string;
|
||||
items: Array<{ icon: string; title: string; desc: string }>;
|
||||
steps: string[];
|
||||
};
|
||||
stats: {
|
||||
bigStat: { number: number; label: string; barWidth: number };
|
||||
stats: Array<{ number: number; label: string; suffix: string }>;
|
||||
};
|
||||
guarantees: {
|
||||
title: string;
|
||||
description: string;
|
||||
description2: string;
|
||||
items: Array<{ title: string; desc: string }>;
|
||||
};
|
||||
};
|
||||
sectionLabel?: string;
|
||||
sectionTitle?: string;
|
||||
sectionDesc?: string;
|
||||
}
|
||||
|
||||
const { tabsData: tabsDataProp, sectionLabel, sectionTitle, sectionDesc } = Astro.props;
|
||||
|
||||
const defaultProps = {
|
||||
sectionLabel: "Подробнее об услуге",
|
||||
sectionTitle: "Всё о возврате водительских прав",
|
||||
sectionDesc: "Полная информация об услуге возврата прав при лишении"
|
||||
};
|
||||
|
||||
const finalSectionLabel = sectionLabel || defaultProps.sectionLabel;
|
||||
const finalSectionTitle = sectionTitle || defaultProps.sectionTitle;
|
||||
const finalSectionDesc = sectionDesc || defaultProps.sectionDesc;
|
||||
|
||||
const defaultTabsData = {
|
||||
problem: {
|
||||
title: "Лишение прав — массовая практика",
|
||||
description: "Ежегодно в России более <strong>300 000 водителей</strong> лишаются водительских прав. При этом значительная часть постановлений выносится с <strong>процессуальными нарушениями</strong>.",
|
||||
|
|
@ -46,14 +93,16 @@ const tabsData = {
|
|||
]
|
||||
}
|
||||
};
|
||||
|
||||
const finalTabsData = tabsDataProp || defaultTabsData;
|
||||
---
|
||||
|
||||
<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>
|
||||
<span class="section-label center">{finalSectionLabel}</span>
|
||||
<h2>{finalSectionTitle}</h2>
|
||||
<p class="section-desc">{finalSectionDesc}</p>
|
||||
</div>
|
||||
|
||||
<div class="tabs-container animate-on-scroll" data-animation="fade-up" data-delay="200">
|
||||
|
|
@ -81,11 +130,11 @@ const tabsData = {
|
|||
<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>
|
||||
<h3>{finalTabsData.problem.title}</h3>
|
||||
<p set:html={finalTabsData.problem.description}></p>
|
||||
<p set:html={finalTabsData.problem.description2}></p>
|
||||
<div class="problem-list">
|
||||
{tabsData.problem.items.map(item => (
|
||||
{finalTabsData.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>
|
||||
|
|
@ -95,12 +144,12 @@ const tabsData = {
|
|||
</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-number">{finalTabsData.problem.visualNumber}</div>
|
||||
<div class="visual-label">{finalTabsData.problem.visualLabel}</div>
|
||||
<div class="visual-bar">
|
||||
<div class="visual-bar-fill" style={`width: ${tabsData.problem.barWidth}%`}></div>
|
||||
<div class="visual-bar-fill" style={`width: ${finalTabsData.problem.barWidth}%`}></div>
|
||||
</div>
|
||||
<div class="visual-note">{tabsData.problem.visualNote}</div>
|
||||
<div class="visual-note">{finalTabsData.problem.visualNote}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -110,11 +159,11 @@ const tabsData = {
|
|||
<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>
|
||||
<h3>{finalTabsData.approach.title}</h3>
|
||||
<p set:html={finalTabsData.approach.description}></p>
|
||||
<p set:html={finalTabsData.approach.description2}></p>
|
||||
<div class="approach-list">
|
||||
{tabsData.approach.items.map(item => (
|
||||
{finalTabsData.approach.items.map(item => (
|
||||
<div class="approach-item">
|
||||
<div class="approach-icon">{item.icon}</div>
|
||||
<div class="approach-info">
|
||||
|
|
@ -128,7 +177,7 @@ const tabsData = {
|
|||
<div class="tab-visual">
|
||||
<div class="visual-card">
|
||||
<div class="steps-mini">
|
||||
{tabsData.approach.steps.map((step, index) => (
|
||||
{finalTabsData.approach.steps.map((step, index) => (
|
||||
<div class={`step-mini ${index === 0 ? 'active' : ''}`}>
|
||||
<span class="step-mini-num">{index + 1}</span>
|
||||
<span>{step}</span>
|
||||
|
|
@ -145,13 +194,13 @@ const tabsData = {
|
|||
<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-big-number" data-count={finalTabsData.stats.bigStat.number}>0%</div>
|
||||
<div class="stat-big-label">{finalTabsData.stats.bigStat.label}</div>
|
||||
<div class="stat-bar">
|
||||
<div class="stat-bar-fill" data-width={tabsData.stats.bigStat.barWidth}></div>
|
||||
<div class="stat-bar-fill" data-width={finalTabsData.stats.bigStat.barWidth}></div>
|
||||
</div>
|
||||
</div>
|
||||
{tabsData.stats.stats.map(stat => (
|
||||
{finalTabsData.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>
|
||||
|
|
@ -164,11 +213,11 @@ const tabsData = {
|
|||
<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>
|
||||
<h3>{finalTabsData.guarantees.title}</h3>
|
||||
<p set:html={finalTabsData.guarantees.description}></p>
|
||||
<p set:html={finalTabsData.guarantees.description2}></p>
|
||||
<div class="guarantees-list">
|
||||
{tabsData.guarantees.items.map(item => (
|
||||
{finalTabsData.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>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,20 @@
|
|||
---
|
||||
const advantages = [
|
||||
interface Advantage {
|
||||
number: string;
|
||||
title: string;
|
||||
desc: string;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
advantages?: Advantage[];
|
||||
sectionLabel?: string;
|
||||
sectionTitle?: string;
|
||||
sectionDesc?: string;
|
||||
}
|
||||
|
||||
const { advantages: advantagesProp, sectionLabel, sectionTitle, sectionDesc } = Astro.props;
|
||||
|
||||
const defaultAdvantages: Advantage[] = [
|
||||
{ number: "01", title: "Специализация на автоспорах", desc: "Мы занимаемся исключительно делами по лишению прав. Это даёт глубокое знание практики судов Сургута." },
|
||||
{ number: "02", title: "98% успешных дел", desc: "Наша статистика говорит сама за себя. Большинство дел заканчиваются в пользу клиента." },
|
||||
{ number: "03", title: "Бесплатная консультация", desc: "Первичная консультация бесплатно. Честно скажем о перспективах дела до начала работы." },
|
||||
|
|
@ -7,17 +22,22 @@ const advantages = [
|
|||
{ number: "05", title: "Полное сопровождение", desc: "Берём на себя весь процесс — от анализа документов до получения прав в ГИБДД." },
|
||||
{ number: "06", title: "Связь 24/7", desc: "На связи в любое время. Оперативно отвечаем на вопросы и информируем о ходе дела." }
|
||||
];
|
||||
|
||||
const finalAdvantages = advantagesProp || defaultAdvantages;
|
||||
const finalSectionLabel = sectionLabel || "Почему мы";
|
||||
const finalSectionTitle = sectionTitle || "Преимущества работы с нами";
|
||||
const finalSectionDesc = sectionDesc || "Доверьте своё дело профессионалам с многолетним опытом";
|
||||
---
|
||||
|
||||
<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>
|
||||
<span class="section-label center">{finalSectionLabel}</span>
|
||||
<h2>{finalSectionTitle}</h2>
|
||||
<p class="section-desc">{finalSectionDesc}</p>
|
||||
</div>
|
||||
<div class="advantages-grid">
|
||||
{advantages.map((adv, index) => (
|
||||
{finalAdvantages.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>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,21 @@
|
|||
---
|
||||
const articles = [
|
||||
interface Article {
|
||||
icon: string;
|
||||
title: string;
|
||||
desc: string;
|
||||
chance: string;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
articles?: Article[];
|
||||
sectionLabel?: string;
|
||||
sectionTitle?: string;
|
||||
sectionDesc?: string;
|
||||
}
|
||||
|
||||
const { articles: articlesProp, sectionLabel, sectionTitle, sectionDesc } = Astro.props;
|
||||
|
||||
const defaultArticles: Article[] = [
|
||||
{ icon: "🍺", title: "Ст. 12.8 — Управление в состоянии опьянения", desc: "Оспариваем результаты освидетельствования, проверяем соблюдение процедуры медосвидетельствования.", chance: "Высокий шанс" },
|
||||
{ icon: "🚫", title: "Ст. 12.26 — Отказ от медосвидетельствования", desc: "Анализируем законность требований о прохождении освидетельствования, ищем нарушения процедуры.", chance: "Высокий шанс" },
|
||||
{ icon: "🚦", title: "Ст. 12.12 — Проезд на красный свет", desc: "Проверяем работу камер, анализируем материалы дела, ищем свидетелей.", chance: "Средний шанс" },
|
||||
|
|
@ -7,17 +23,22 @@ const articles = [
|
|||
{ icon: "🚗", title: "Ст. 12.27 — Оставление места ДТП", desc: "Доказываем отсутствие умысла или необходимость покинуть место по уважительной причине.", chance: "Средний шанс" },
|
||||
{ icon: "⚠️", title: "Другие статьи", desc: "Работаем с любыми статьями КоАП — каждая ситуация индивидуальна и требует анализа.", chance: "Зависит от дела" }
|
||||
];
|
||||
|
||||
const finalArticles = articlesProp || defaultArticles;
|
||||
const finalSectionLabel = sectionLabel || "Работаем со статьями";
|
||||
const finalSectionTitle = sectionTitle || "По каким статьям КоАП возвращаем права";
|
||||
const finalSectionDesc = sectionDesc || "Оспариваем лишение по всем основным статьям КоАП РФ";
|
||||
---
|
||||
|
||||
<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>
|
||||
<span class="section-label center">{finalSectionLabel}</span>
|
||||
<h2>{finalSectionTitle}</h2>
|
||||
<p class="section-desc">{finalSectionDesc}</p>
|
||||
</div>
|
||||
<div class="articles-grid">
|
||||
{articles.map((article, index) => (
|
||||
{finalArticles.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>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,19 @@
|
|||
---
|
||||
const faqs = [
|
||||
interface FAQ {
|
||||
question: string;
|
||||
answer: string;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
faqs?: FAQ[];
|
||||
sectionLabel?: string;
|
||||
sectionTitle?: string;
|
||||
sectionDesc?: string;
|
||||
}
|
||||
|
||||
const { faqs: faqsProp, sectionLabel, sectionTitle, sectionDesc } = Astro.props;
|
||||
|
||||
const defaultFAQs: FAQ[] = [
|
||||
{ question: "Можно ли реально вернуть права после лишения?", answer: "Да, в <strong>98% случаев</strong> нам удаётся вернуть права. Мы анализируем материалы дела и честно говорим о перспективах до начала работы." },
|
||||
{ question: "Сколько времени занимает процесс?", answer: "В среднем процесс занимает <strong>от 2 недель до 3 месяцев</strong> в зависимости от сложности дела и загруженности судов." },
|
||||
{ question: "Что если суд уже вынес решение?", answer: "Мы можем <strong>обжаловать решение</strong> в апелляционном суде в течение 10 дней с момента вынесения. Даже если срок прошёл, есть другие механизмы." },
|
||||
|
|
@ -7,17 +21,22 @@ const faqs = [
|
|||
{ question: "Нужно ли моё присутствие в суде?", answer: "<strong>Нет</strong>, мы представляем ваши интересы по доверенности. Ваше присутствие не требуется — мы ведём дело полностью." },
|
||||
{ question: "Что нужно для начала работы?", answer: "Достаточно <strong>позвонить нам</strong> или оставить заявку. На бесплатной консультации мы всё обсудим и начнём работу." }
|
||||
];
|
||||
|
||||
const finalFAQs = faqsProp || defaultFAQs;
|
||||
const finalSectionLabel = sectionLabel || "Вопросы";
|
||||
const finalSectionTitle = sectionTitle || "Частые вопросы";
|
||||
const finalSectionDesc = sectionDesc || "Ответы на популярные вопросы о возврате прав";
|
||||
---
|
||||
|
||||
<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>
|
||||
<span class="section-label center">{finalSectionLabel}</span>
|
||||
<h2>{finalSectionTitle}</h2>
|
||||
<p class="section-desc">{finalSectionDesc}</p>
|
||||
</div>
|
||||
<div class="faq-list">
|
||||
{faqs.map((faq, index) => (
|
||||
{finalFAQs.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>
|
||||
|
|
|
|||
|
|
@ -1,20 +1,44 @@
|
|||
---
|
||||
const plans = [
|
||||
interface Plan {
|
||||
badge: string;
|
||||
title: string;
|
||||
price: string;
|
||||
features: string[];
|
||||
btnText: string;
|
||||
btnClass: string;
|
||||
popular?: boolean;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
plans?: Plan[];
|
||||
sectionLabel?: string;
|
||||
sectionTitle?: string;
|
||||
sectionDesc?: string;
|
||||
}
|
||||
|
||||
const { plans: plansProp, sectionLabel, sectionTitle, sectionDesc } = Astro.props;
|
||||
|
||||
const defaultPlans: Plan[] = [
|
||||
{ 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: "" }
|
||||
];
|
||||
|
||||
const finalPlans = plansProp || defaultPlans;
|
||||
const finalSectionLabel = sectionLabel || "Стоимость";
|
||||
const finalSectionTitle = sectionTitle || "Сколько стоит возврат прав";
|
||||
const finalSectionDesc = sectionDesc || "Прозрачные цены без скрытых платежей";
|
||||
---
|
||||
|
||||
<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>
|
||||
<span class="section-label center">{finalSectionLabel}</span>
|
||||
<h2>{finalSectionTitle}</h2>
|
||||
<p class="section-desc">{finalSectionDesc}</p>
|
||||
</div>
|
||||
<div class="pricing-grid">
|
||||
{plans.map((plan, index) => (
|
||||
{finalPlans.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>
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ const {
|
|||
description: "Находим процессуальные нарушения и добиваемся отмены постановлений.",
|
||||
price: "от 30 000 ₽",
|
||||
icon: "⚖️",
|
||||
href: "/services/appeal",
|
||||
href: "/services/license-challenge",
|
||||
features: ["Аудит материалов дела", "Поиск нарушений процедуры", "Подготовка жалобы", "Защита в апелляционном суде"]
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,5 +1,20 @@
|
|||
---
|
||||
const includes = [
|
||||
interface IncludeItem {
|
||||
icon: string;
|
||||
title: string;
|
||||
desc: string;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
includes?: IncludeItem[];
|
||||
sectionLabel?: string;
|
||||
sectionTitle?: string;
|
||||
sectionDesc?: string;
|
||||
}
|
||||
|
||||
const { includes: includesProp, sectionLabel, sectionTitle, sectionDesc } = Astro.props;
|
||||
|
||||
const defaultIncludes: IncludeItem[] = [
|
||||
{ icon: "📄", title: "Анализ протокола и документов", desc: "Изучаем все материалы дела, ищем процессуальные нарушения" },
|
||||
{ icon: "💬", title: "Консультация 24/7", desc: "На связи в любое время, отвечаем на все вопросы" },
|
||||
{ icon: "📝", title: "Подготовка жалоб и ходатайств", desc: "Составляем все необходимые процессуальные документы" },
|
||||
|
|
@ -7,17 +22,22 @@ const includes = [
|
|||
{ icon: "🔍", title: "Сбор доказательств", desc: "Находим свидетелей, запрашиваем видеозаписи" },
|
||||
{ icon: "✅", title: "Гарантия результата", desc: "Если не вернули права — вернём деньги" }
|
||||
];
|
||||
|
||||
const finalIncludes = includesProp || defaultIncludes;
|
||||
const finalSectionLabel = sectionLabel || "Что входит";
|
||||
const finalSectionTitle = sectionTitle || "Что входит в услугу";
|
||||
const finalSectionDesc = sectionDesc || "Полный спектр работ по возврату ваших прав";
|
||||
---
|
||||
|
||||
<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>
|
||||
<span class="section-label center">{finalSectionLabel}</span>
|
||||
<h2>{finalSectionTitle}</h2>
|
||||
<p class="section-desc">{finalSectionDesc}</p>
|
||||
</div>
|
||||
<div class="includes-grid">
|
||||
{includes.map((item, index) => (
|
||||
{finalIncludes.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>
|
||||
|
|
|
|||
|
|
@ -1,22 +1,42 @@
|
|||
---
|
||||
const steps = [
|
||||
interface Step {
|
||||
number: string;
|
||||
title: string;
|
||||
desc: string;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
steps?: Step[];
|
||||
sectionLabel?: string;
|
||||
sectionTitle?: string;
|
||||
sectionDesc?: string;
|
||||
}
|
||||
|
||||
const { steps: stepsProp, sectionLabel, sectionTitle, sectionDesc } = Astro.props;
|
||||
|
||||
const defaultSteps: Step[] = [
|
||||
{ number: "01", title: "Бесплатная консультация", desc: "Анализируем вашу ситуацию, оцениваем перспективы дела. Рассказываем о шансах и стоимости." },
|
||||
{ number: "02", title: "Анализ материалов дела", desc: "Изучаем протоколы, постановления, видеозаписи. Ищем процессуальные нарушения." },
|
||||
{ number: "03", title: "Подготовка стратегии", desc: "Разрабатываем линию защиты, собираем доказательства, готовим документы для суда." },
|
||||
{ number: "04", title: "Защита в суде", desc: "Представляем ваши интересы в суде первой и апелляционной инстанции." },
|
||||
{ number: "05", title: "Получение прав", desc: "Помогаем с процедурой возврата прав после успешного решения суда." }
|
||||
];
|
||||
|
||||
const finalSteps = stepsProp || defaultSteps;
|
||||
const finalSectionLabel = sectionLabel || "Этапы работы";
|
||||
const finalSectionTitle = sectionTitle || "Как мы возвращаем ваши права";
|
||||
const finalSectionDesc = sectionDesc || "Прозрачный процесс от первой консультации до получения прав";
|
||||
---
|
||||
|
||||
<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>
|
||||
<span class="section-label center">{finalSectionLabel}</span>
|
||||
<h2>{finalSectionTitle}</h2>
|
||||
<p class="section-desc">{finalSectionDesc}</p>
|
||||
</div>
|
||||
<div class="steps-timeline">
|
||||
{steps.map((step, index) => (
|
||||
{finalSteps.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">
|
||||
|
|
|
|||
364
frontend/src/pages/services/license-challenge.astro
Normal file
364
frontend/src/pages/services/license-challenge.astro
Normal file
|
|
@ -0,0 +1,364 @@
|
|||
---
|
||||
import Layout from '@layouts/Layout.astro';
|
||||
import { SITE_URL, COMPANY } from '@constants';
|
||||
import PageHero from "@components/base/PageHero.astro";
|
||||
import CTA from "@components/base/CTA.astro";
|
||||
// Import child components with custom data
|
||||
import AboutTabs from '@components/services/AboutTabs.astro';
|
||||
import ArticlesList from '@components/services/ArticlesList.astro';
|
||||
import WorkSteps from '@components/services/WorkSteps.astro';
|
||||
import ServiceIncludes from '@components/services/ServiceIncludes.astro';
|
||||
import AdvantagesList from '@components/services/AdvantagesList.astro';
|
||||
import PricingPlans from '@components/services/PricingPlans.astro';
|
||||
import FaqList from '@components/services/FaqList.astro';
|
||||
|
||||
// Custom data for license challenge service
|
||||
const aboutTabsData = {
|
||||
problem: {
|
||||
title: "Лишение прав — не приговор",
|
||||
description: "Каждый год тысячи водителей лишаются прав <strong>незаконно</strong>. Судебная практика показывает, что до <strong>60% постановлений</strong> о лишении прав могут быть оспорены при грамотной защите.",
|
||||
description2: "Мы специализируемся именно на <strong>оспаривании лишения</strong> — находим нарушения в процедуре, анализируем доказательства ГИБДД и строим линию защиты для возврата ваших прав.",
|
||||
items: [
|
||||
"Нарушение порядка привлечения к ответственности",
|
||||
"Неправильная квалификация правонарушения",
|
||||
"Отсутствие достаточной доказательной базы"
|
||||
],
|
||||
visualNumber: "60%",
|
||||
visualLabel: "постановлений можно оспорить",
|
||||
visualNote: "При условии своевременного обращения",
|
||||
barWidth: 60
|
||||
},
|
||||
approach: {
|
||||
title: "Системный подход к защите",
|
||||
description: "Каждое дело о лишении прав мы рассматриваем <strong>комплексно</strong>. Анализируем все материалы, ищем процессуальные нарушения и строим защиту на <strong>всех уровнях</strong>.",
|
||||
description2: "Наш опыт — это <strong>сотни выигранных дел</strong> в судах Сургута и ХМАО. Мы знаем практику судей и используем это для защиты ваших интересов.",
|
||||
items: [
|
||||
{ icon: "📋", title: "Полный аудит дела", desc: "Изучаем все материалы от протокола до решения суда" },
|
||||
{ icon: "⚖️", title: "Поиск нарушений", desc: "Находим процессуальные ошибки на каждом этапе" },
|
||||
{ icon: "📹", title: "Работа с видео", desc: "Анализируем записи с регистраторов и камер" }
|
||||
],
|
||||
steps: ["Обращение", "Аудит дела", "Жалоба", "Суд", "Победа"]
|
||||
},
|
||||
stats: {
|
||||
bigStat: { number: 85, label: "Дел выиграно", barWidth: 85 },
|
||||
stats: [
|
||||
{ number: 350, label: "Успешных апелляций", suffix: "+" },
|
||||
{ number: 12, label: "Лет в практике", suffix: "" },
|
||||
{ number: 10, label: "Дней на подачу жалобы", suffix: "" },
|
||||
{ number: 100, label: "Возврат при неудаче", suffix: "%" }
|
||||
]
|
||||
},
|
||||
guarantees: {
|
||||
title: "Гарантируем результат",
|
||||
description: "Мы берёмся только за дела с <strong>реальными перспективами</strong>. Если шансов нет — скажем честно и не будем брать оплату.",
|
||||
description2: "Работаем <strong>по договору</strong> с прописанными гарантиями. Если не выиграем дело — <strong>вернём деньги</strong>.",
|
||||
items: [
|
||||
{ title: "Честная оценка", desc: "Говорим о перспективах до начала работы" },
|
||||
{ title: "Оплата за результат", desc: "Платите только при успешном исходе" },
|
||||
{ title: "Договор", desc: "Фиксируем все условия юридически" },
|
||||
{ title: "Возврат средств", desc: "Если дело проиграно — деньги ваши" }
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
const articlesData = [
|
||||
{ icon: "🍺", title: "Ст. 12.8 — Опьянение", desc: "Оспариваем результаты освидетельствования, проверяем законность направления на медосмотр.", chance: "Высокий шанс" },
|
||||
{ icon: "🚫", title: "Ст. 12.26 — Отказ от осмотра", desc: "Анализируем законность требования об освидетельствовании, ищем ошибки в процедуре.", chance: "Средний шанс" },
|
||||
{ icon: "🔄", title: "Ст. 12.15 — Встречная полоса", desc: "Проверяем правильность фиксации нарушения, анализируем разметку и знаки.", chance: "Высокий шанс" },
|
||||
{ icon: "🚦", title: "Ст. 12.12 — Красный свет", desc: "Оспариваем работу камер, запрашиваем сертификаты оборудования.", chance: "Средний шанс" },
|
||||
{ icon: "🚗", title: "Ст. 12.27 — Оставление ДТП", desc: "Доказываем отсутствие умысла, собираем смягчающие доказательства.", chance: "Зависит от дела" },
|
||||
{ icon: "⚠️", title: "Другие статьи", desc: "Работаем со всеми статьями КоАП — анализируем каждое дело индивидуально.", chance: "Анализ дела" }
|
||||
];
|
||||
|
||||
const stepsData = [
|
||||
{ number: "01", title: "Экстренная консультация", desc: "Связываетесь с нами сразу после получения постановления. Оцениваем шансы, объясняем порядок действий." },
|
||||
{ number: "02", title: "Глубокий анализ дела", desc: "Запрашиваем все материалы, изучаем протоколы, видео, показания. Ищем процессуальные нарушения." },
|
||||
{ number: "03", title: "Подготовка апелляционной жалобы", desc: "Составляем мотивированную жалобу с ссылками на нарушения и судебную практику." },
|
||||
{ number: "04", title: "Представительство в суде", desc: "Ведём дело в апелляционной инстанции. Доказываем незаконность лишения." },
|
||||
{ number: "05", title: "Возврат прав", desc: "После отмены постановления помогаем с процедурой возврата водительских прав." }
|
||||
];
|
||||
|
||||
const includesData = [
|
||||
{ icon: "📄", title: "Анализ постановления", desc: "Изучаем законность и обоснованность решения суда" },
|
||||
{ icon: "🔍", title: "Аудит материалов", desc: "Проверяем все протоколы, рапорты, видеозаписи" },
|
||||
{ icon: "📝", title: "Апелляционная жалоба", desc: "Готовим мотивированную жалобу в вышестоящий суд" },
|
||||
{ icon: "👨⚖️", title: "Защита в суде", desc: "Представляем ваши интересы в апелляционной инстанции" },
|
||||
{ icon: "📹", title: "Видеоэкспертиза", desc: "Анализируем записи, запрашиваем оригиналы" },
|
||||
{ icon: "✅", title: "Результат", desc: "Отмена постановления или возврат денег" }
|
||||
];
|
||||
|
||||
const advantagesData = [
|
||||
{ number: "01", title: "Специализация на апелляциях", desc: "Мы фокусируемся именно на оспаривании уже вынесенных постановлений. Это наша главная экспертиза." },
|
||||
{ number: "02", title: "85% выигранных дел", desc: "Высокая статистка благодаря тщательному отбору дел и глубокому анализу материалов." },
|
||||
{ number: "03", title: "Срочное реагирование", desc: "10 дней на апелляцию — это мало. Мы работаем быстро, чтобы не упустить срок." },
|
||||
{ number: "04", title: "Без предоплаты", desc: "Оплата только после отмены постановления о лишении. Мы уверены в своей работе." },
|
||||
{ number: "05", title: "Полное ведение дела", desc: "Вам не нужно ходить по судам. Мы делаем всё от подачи жалобы до получения прав." },
|
||||
{ number: "06", title: "Связь 24/7", desc: "Всегда на связи. Информируем о каждом шаге и отвечаем на вопросы." }
|
||||
];
|
||||
|
||||
const plansData = [
|
||||
{ badge: "Экспресс", title: "Анализ + консультация", price: "Бесплатно", features: ["Анализ постановления", "Оценка перспектив", "Рекомендации", "Срочная консультация"], btnText: "Получить анализ", btnClass: "" },
|
||||
{ badge: "Стандарт", title: "Апелляция под ключ", price: "от 20 000 ₽", features: ["Всё из Экспресс", "Подготовка жалобы", "Сбор доказательств", "Представительство в суде"], btnText: "Начать дело", btnClass: "gold", popular: true },
|
||||
{ badge: "Премиум", title: "Сложные случаи", price: "от 35 000 ₽", features: ["Всё из Стандарта", "Видеоэкспертиза", "Дополнительные инстанции", "Приоритетная работа"], btnText: "Обсудить дело", btnClass: "" }
|
||||
];
|
||||
|
||||
const faqsData = [
|
||||
{ question: "Сколько времени есть на обжалование?", answer: "На обжалование постановления о лишении прав даётся <strong>10 дней</strong> с момента получения копии постановления. Пропуск срока возможен только по уважительным причинам." },
|
||||
{ question: "Можно ли вернуть права если срок прошёл?", answer: "Да, есть возможность <strong>восстановить срок</strong> обжалования при уважительных причинах пропуска. Мы поможем подготовить ходатайство." },
|
||||
{ question: "Каковы шансы на успех?", answer: "Статистика показывает, что около <strong>60% постановлений</strong> могут быть оспорены. Мы честно оценим перспективы после анализа дела." },
|
||||
{ question: "Нужно ли присутствовать на суде?", answer: "<strong>Нет</strong>, мы работаем по доверенности. Ваше присутствие не требуется — мы ведём дело полностью самостоятельно." },
|
||||
{ question: "Что если первая апелляция проиграна?", answer: "Есть возможность подачи <strong>кассационной жалобы</strong> в вышестоящий суд. Мы продолжаем борьбу до конца." },
|
||||
{ question: "С чего начать?", answer: "<strong>Свяжитесь с нами</strong> как можно быстрее. Чем раньше мы начнём, тем больше шансов на успех. Первая консультация бесплатна." }
|
||||
];
|
||||
---
|
||||
|
||||
<Layout
|
||||
title="Оспаривание лишения прав — автоюрист в Сургуте"
|
||||
description="Профессиональное оспаривание постановления о лишении водительских прав. Апелляция, анализ дела, 85% успешных дел. Бесплатная консультация."
|
||||
canonicalLink={`${SITE_URL}/services/license-challenge`}
|
||||
breadcrumbs={[
|
||||
{ label: 'Главная', href: '/' },
|
||||
{ label: 'Услуги', href: '/services' },
|
||||
{ label: 'Оспаривание лишения' }
|
||||
]}
|
||||
>
|
||||
<PageHero
|
||||
badgeText="ОСПАРИВАНИЕ ЛИШЕНИЯ"
|
||||
titleWhite="Отменим"
|
||||
titleGold="постановление о лишении"
|
||||
description="Оспариваем лишение прав в апелляционном суде. Анализируем материалы дела, находим нарушения. Бесплатная консультация и оценка перспектив."
|
||||
btnText="Бесплатная консультация"
|
||||
layout="with-image"
|
||||
sideImage="/images/services/office-table.avif"
|
||||
sideImageAlt="Юрист по оспариванию лишения"
|
||||
experienceBadge={{
|
||||
number: "85%",
|
||||
text: "УСПЕШНЫХ АПЕЛЛЯЦИЙ"
|
||||
}}
|
||||
bgImage="/images/services/servicesBg.avif"
|
||||
icon="shield"
|
||||
/>
|
||||
|
||||
<div class="service-detail-page">
|
||||
<AboutTabs
|
||||
tabsData={aboutTabsData}
|
||||
sectionLabel="Подробнее об услуге"
|
||||
sectionTitle="Всё об оспаривании лишения прав"
|
||||
sectionDesc="Полная информация об услуге оспаривания постановления о лишении прав"
|
||||
/>
|
||||
<ArticlesList
|
||||
articles={articlesData}
|
||||
sectionLabel="Работаем со статьями"
|
||||
sectionTitle="Какие статьи КоАП оспариваем"
|
||||
sectionDesc="Оспариваем лишение по всем основным статьям КоАП РФ"
|
||||
/>
|
||||
<WorkSteps
|
||||
steps={stepsData}
|
||||
sectionLabel="Этапы работы"
|
||||
sectionTitle="Как мы оспариваем лишение"
|
||||
sectionDesc="Прозрачный процесс от консультации до отмены постановления"
|
||||
/>
|
||||
<ServiceIncludes
|
||||
includes={includesData}
|
||||
sectionLabel="Что входит"
|
||||
sectionTitle="Что входит в услугу"
|
||||
sectionDesc="Полный спектр работ по оспариванию вашего дела"
|
||||
/>
|
||||
<AdvantagesList
|
||||
advantages={advantagesData}
|
||||
sectionLabel="Почему мы"
|
||||
sectionTitle="Преимущества работы с нами"
|
||||
sectionDesc="Доверьте оспаривание профессионалам с опытом в апелляциях"
|
||||
/>
|
||||
<PricingPlans
|
||||
plans={plansData}
|
||||
sectionLabel="Стоимость"
|
||||
sectionTitle="Сколько стоит оспаривание"
|
||||
sectionDesc="Прозрачные цены без скрытых платежей"
|
||||
/>
|
||||
<FaqList
|
||||
faqs={faqsData}
|
||||
sectionLabel="Вопросы"
|
||||
sectionTitle="Частые вопросы"
|
||||
sectionDesc="Ответы на популярные вопросы об оспаривании лишения"
|
||||
/>
|
||||
<CTA
|
||||
icon="consult"
|
||||
title="Отменим лишение прав"
|
||||
description="Позвоните или оставьте заявку. Бесплатный анализ постановления и оценка перспектив дела."
|
||||
btnText="Бесплатная консультация"
|
||||
/>
|
||||
</div>
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
.service-detail-page {
|
||||
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
||||
}
|
||||
|
||||
.site-container {
|
||||
max-width: var(--site-max-width, 1400px);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
section {
|
||||
padding: 5rem 1.5rem;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
text-align: center;
|
||||
margin-bottom: 3.5rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
section {
|
||||
padding: 3.5rem 1rem;
|
||||
}
|
||||
.section-header {
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
section {
|
||||
padding: 2.5rem 0.75rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script is:inline>
|
||||
// Анимации при скролле
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
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;
|
||||
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 tabButtons = document.querySelectorAll('.tab-btn');
|
||||
const tabPanels = document.querySelectorAll('.tab-panel');
|
||||
|
||||
tabButtons.forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
const tabId = btn.dataset.tab;
|
||||
|
||||
// Убираем active со всех кнопок
|
||||
tabButtons.forEach(b => {
|
||||
b.classList.remove('active');
|
||||
b.setAttribute('aria-selected', 'false');
|
||||
});
|
||||
|
||||
// Убираем active со всех панелей
|
||||
tabPanels.forEach(panel => {
|
||||
panel.classList.remove('active');
|
||||
});
|
||||
|
||||
// Активируем нужный таб
|
||||
btn.classList.add('active');
|
||||
btn.setAttribute('aria-selected', 'true');
|
||||
|
||||
const targetPanel = document.getElementById(`tab-${tabId}`);
|
||||
if (targetPanel) {
|
||||
targetPanel.classList.add('active');
|
||||
|
||||
// Запускаем анимацию счётчиков если это таб статистики
|
||||
if (tabId === 'stats') {
|
||||
animateCounters(targetPanel);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Анимация счётчиков
|
||||
function animateCounters(panel) {
|
||||
const counters = panel.querySelectorAll('[data-count]');
|
||||
|
||||
counters.forEach(counter => {
|
||||
const target = parseInt(counter.dataset.count || '0');
|
||||
const suffix = counter.textContent?.replace(/[0-9]/g, '') || '';
|
||||
const duration = 1500;
|
||||
const startTime = performance.now();
|
||||
|
||||
const easeOutCubic = (t) => 1 - Math.pow(1 - t, 3);
|
||||
|
||||
const update = (currentTime) => {
|
||||
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);
|
||||
});
|
||||
|
||||
// Анимация полосок статистики
|
||||
const statBars = panel.querySelectorAll('[data-width]');
|
||||
statBars.forEach(bar => {
|
||||
const width = bar.dataset.width;
|
||||
setTimeout(() => {
|
||||
bar.style.width = `${width}%`;
|
||||
}, 200);
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue