112 lines
6.3 KiB
Text
112 lines
6.3 KiB
Text
---
|
||
const steps = [
|
||
{
|
||
phase: "Этап 1",
|
||
title: "Анализ ситуации",
|
||
description: "Изучение документов, правовой анализ, оценка перспектив спора в арбитражном суде",
|
||
details: ["Аудит документов", "Анализ судебной практики", "Оценка рисков"],
|
||
duration: "1-3 дня"
|
||
},
|
||
{
|
||
phase: "Этап 2",
|
||
title: "Досудебная работа",
|
||
description: "Обязательное соблюдение претензионного порядка, переговоры, подготовка позиции",
|
||
details: ["Претензионное письмо", "Сбор доказательств", "Расчёт требований"],
|
||
duration: "1-4 недели"
|
||
},
|
||
{
|
||
phase: "Этап 3",
|
||
title: "Первая инстанция",
|
||
description: "Подача искового заявления, участие в судебных заседаниях, представление доказательств",
|
||
details: ["Исковое заявление", "Ходатайства", "Судебные заседания"],
|
||
duration: "2-6 месяцев"
|
||
},
|
||
{
|
||
phase: "Этап 4",
|
||
title: "Апелляция и кассация",
|
||
description: "Обжалование решения, защита позиции в вышестоящих инстанциях",
|
||
details: ["Апелляционная жалоба", "Кассационная жалоба", "Защита в суде"],
|
||
duration: "2-4 месяца"
|
||
},
|
||
{
|
||
phase: "Этап 5",
|
||
title: "Исполнение решения",
|
||
description: "Получение исполнительного листа, контроль исполнения решения суда",
|
||
details: ["Исполнительный лист", "Банк или ФССП", "Контроль взыскания"],
|
||
duration: "1-6 месяцев"
|
||
}
|
||
];
|
||
---
|
||
|
||
<section id="process" class="py-24 bg-[var(--color-navy)] relative overflow-hidden">
|
||
<!-- Вертикальная линия по центру -->
|
||
<div class="absolute left-1/2 top-0 bottom-0 w-px bg-gradient-to-b from-transparent via-[var(--color-gold)]/20 to-transparent hidden lg:block"></div>
|
||
|
||
<!-- Декоративные элементы -->
|
||
<div class="absolute top-1/4 left-1/4 w-64 h-64 bg-[var(--color-gold)]/5 rounded-full blur-3xl"></div>
|
||
<div class="absolute bottom-1/4 right-1/4 w-80 h-80 bg-[var(--color-blue-primary)]/5 rounded-full blur-3xl"></div>
|
||
|
||
<div class="container mx-auto px-4 md:px-8 lg:px-16 relative z-10">
|
||
<!-- Заголовок -->
|
||
<div class="text-center max-w-3xl mx-auto mb-20">
|
||
<span class="inline-block px-4 py-2 bg-[var(--color-gold)]/10 border border-[var(--color-gold)]/20 rounded-full text-[var(--color-gold)] text-xs font-bold uppercase tracking-wider mb-6">
|
||
Как работаем
|
||
</span>
|
||
<h2 class="text-4xl md:text-5xl font-bold text-[var(--color-white)] mb-6">
|
||
Путь к <span class="text-[var(--color-gold)]">результату</span>
|
||
</h2>
|
||
<p class="text-[var(--color-gray-500)] text-lg">
|
||
Пошаговый алгоритм ведения арбитражного дела от консультации до исполнения решения суда
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Временная линия -->
|
||
<div class="space-y-12 lg:space-y-0">
|
||
{steps.map((step, index) => (
|
||
<div class={`relative lg:grid lg:grid-cols-2 lg:gap-16 ${index !== steps.length - 1 ? 'lg:pb-16' : ''}`}>
|
||
<!-- Точка на линии -->
|
||
<div class="hidden lg:flex absolute left-1/2 top-0 -translate-x-1/2 z-10">
|
||
<div class="w-12 h-12 rounded-full bg-[var(--color-navy)] border-4 border-[var(--color-gold)] flex items-center justify-center shadow-lg shadow-[var(--color-gold)]/20">
|
||
<span class="text-[var(--color-gold)] font-bold text-sm">{index + 1}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Контент слева/справа -->
|
||
<div class={`lg:pr-16 ${index % 2 === 0 ? 'lg:text-right lg:col-start-1' : 'lg:col-start-2 lg:pl-16 lg:pr-0'}`}>
|
||
<div class="group bg-[var(--color-navy-dark)] border border-[var(--color-gray-600)]/10 rounded-2xl p-8 hover:border-[var(--color-gold)]/30 transition-all duration-500 hover:-translate-y-1 text-center lg:text-left">
|
||
<!-- Верхняя строка: фаза и длительность -->
|
||
<div class={`flex items-center justify-between mb-4 ${index % 2 === 0 ? 'lg:justify-end' : 'lg:justify-start'}`}>
|
||
<span class="text-[var(--color-gold)] text-xs font-bold uppercase tracking-wider">{step.phase}</span>
|
||
<span class="px-3 py-1 bg-[var(--color-gold)]/10 rounded-full text-[var(--color-gold)] text-xs">{step.duration}</span>
|
||
</div>
|
||
|
||
<h3 class="text-2xl font-bold text-[var(--color-white)] mb-3 group-hover:text-[var(--color-gold)] transition-colors">
|
||
{step.title}
|
||
</h3>
|
||
<p class="text-[var(--color-gray-500)] mb-6 leading-relaxed">
|
||
{step.description}
|
||
</p>
|
||
|
||
<!-- Детали - центрируем контейнер, но текст по левому краю -->
|
||
<div class="flex justify-center lg:block">
|
||
<ul class="inline-block text-left space-y-2">
|
||
{step.details.map((detail) => (
|
||
<li class={`flex items-center gap-2 text-sm text-[var(--color-gray-400)] ${index % 2 === 0 ? 'lg:flex-row-reverse lg:text-right' : ''}`}>
|
||
<svg class="w-4 h-4 text-[var(--color-gold)] flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||
</svg>
|
||
<span>{detail}</span>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Пустая колонка для сетки -->
|
||
{index % 2 === 0 ? <div class="hidden lg:block"></div> : <div class="hidden lg:block lg:col-start-1 lg:row-start-1"></div>}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|