Создана новая страница - license-challenge

frontend/src/components/services/AboutTabs.astro

@@ -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>

frontend/src/components/services/AdvantagesList.astro

@@ -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>

frontend/src/components/services/ArticlesList.astro

@@ -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>

frontend/src/components/services/FaqList.astro

@@ -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>

frontend/src/components/services/PricingPlans.astro

@@ -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>

frontend/src/components/services/ServiceCategories.astro

@@ -39,7 +39,7 @@ const {
                     description: "Находим процессуальные нарушения и добиваемся отмены постановлений.",
                     price: "от 30 000 ₽",
                     icon: "⚖️",
-                    href: "/services/appeal",
+                    href: "/services/license-challenge",
                     features: ["Аудит материалов дела", "Поиск нарушений процедуры", "Подготовка жалобы", "Защита в апелляционном суде"]
                 },
                 {

frontend/src/components/services/ServiceIncludes.astro

@@ -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>

frontend/src/components/services/WorkSteps.astro

@@ -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">