166 lines
8.8 KiB
Text
166 lines
8.8 KiB
Text
---
|
||
import { CONTACT_CONSTANTS } from "@constants/constants.ts";
|
||
|
||
interface Props {
|
||
title?: string;
|
||
subtitle?: string;
|
||
}
|
||
|
||
const {
|
||
title = "Арбитражные споры",
|
||
subtitle = "Защита интересов бизнеса в арбитражных судах всех инстанций. От Первого арбитражного суда до Верховного суда РФ.",
|
||
} = Astro.props;
|
||
|
||
const stats = [
|
||
{ value: "500+", label: "Дел в арбитраже" },
|
||
{ value: "92%", label: "Успешных решений" },
|
||
{ value: "15+", label: "Лет практики" },
|
||
{ value: "₽500М+", label: "Взыскано для клиентов" },
|
||
];
|
||
---
|
||
|
||
<section class="relative min-h-screen flex items-center bg-[var(--color-navy)] overflow-hidden">
|
||
<!-- Фоновая сетка -->
|
||
<div class="absolute inset-0 z-0">
|
||
<div
|
||
class="absolute inset-0 opacity-[0.03]"
|
||
style="background-image: linear-gradient(var(--color-gold) 1px, transparent 1px), linear-gradient(90deg, var(--color-gold) 1px, transparent 1px); background-size: 80px 80px;"
|
||
></div>
|
||
|
||
<!-- Градиентные пятна -->
|
||
<div class="absolute top-0 right-0 w-[600px] h-[600px] bg-gradient-to-bl from-[var(--color-gold)]/10 to-transparent rounded-full blur-3xl"></div>
|
||
<div class="absolute bottom-0 left-0 w-[500px] h-[500px] bg-gradient-to-tr from-[var(--color-blue-primary)]/5 to-transparent rounded-full blur-3xl"></div>
|
||
</div>
|
||
|
||
<!-- Декоративные линии -->
|
||
<div class="absolute inset-0 z-0 pointer-events-none">
|
||
<div class="absolute top-[20%] left-0 w-[30%] h-px bg-gradient-to-r from-[var(--color-gold)]/40 to-transparent"></div>
|
||
<div class="absolute top-[40%] right-0 w-[40%] h-px bg-gradient-to-l from-[var(--color-gold)]/30 to-transparent"></div>
|
||
<div class="absolute bottom-[30%] left-[10%] w-[25%] h-px bg-gradient-to-r from-[var(--color-gold)]/20 to-transparent"></div>
|
||
</div>
|
||
|
||
<div class="container mx-auto px-4 md:px-8 lg:px-16 relative z-10 py-20">
|
||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
|
||
|
||
<!-- Левая часть - контент -->
|
||
<div class="lg:col-span-7">
|
||
<!-- Бейдж -->
|
||
<div class="inline-flex items-center gap-3 mb-8">
|
||
<div class="flex items-center gap-2">
|
||
<span class="w-3 h-3 bg-[var(--color-gold)] rounded-sm rotate-45"></span>
|
||
<span class="w-2 h-2 bg-[var(--color-gold)]/60 rounded-sm rotate-45"></span>
|
||
<span class="w-1 h-1 bg-[var(--color-gold)]/40 rounded-sm rotate-45"></span>
|
||
</div>
|
||
<span class="text-[var(--color-gold)] text-xs font-bold uppercase tracking-[0.3em] ml-4">
|
||
Арбитражная практика
|
||
</span>
|
||
</div>
|
||
|
||
<!-- Заголовок -->
|
||
<h1 class="text-5xl md:text-7xl font-bold text-[var(--color-white)] leading-[1.05] mb-8">
|
||
{
|
||
title
|
||
.split(" ")
|
||
.map((word, i) =>
|
||
i === 0 ? (
|
||
<span class="block text-[var(--color-gold)] mb-2">{word}</span>
|
||
) : (
|
||
<span class="inline-block mr-4">{word}</span>
|
||
),
|
||
)
|
||
}
|
||
</h1>
|
||
|
||
<!-- Описание -->
|
||
<p class="text-[var(--color-gray-400)] text-lg md:text-xl leading-relaxed mb-10 max-w-xl">
|
||
{subtitle}
|
||
</p>
|
||
|
||
<!-- Кнопки -->
|
||
<div class="flex flex-col sm:flex-row gap-4 mb-12">
|
||
<a
|
||
href="#contact"
|
||
class="group px-8 py-4 bg-[var(--color-gold)] hover:bg-[var(--color-gold-hover)] text-[var(--color-white)] font-bold rounded-lg transition-all hover:shadow-[0_0_30px_rgba(191,155,88,0.4)] flex items-center justify-center gap-3"
|
||
>
|
||
<span>Бесплатная консультация</span>
|
||
<svg class="w-5 h-5 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
|
||
</svg>
|
||
</a>
|
||
<button
|
||
data-consultation-modal
|
||
class="px-8 py-4 border border-[var(--color-gray-600)]/50 text-[var(--color-white)] font-bold rounded-lg hover:border-[var(--color-gold)]/50 hover:bg-[var(--color-gold)]/5 transition-all flex items-center justify-center gap-3 cursor-pointer"
|
||
>
|
||
<svg class="w-5 h-5 text-[var(--color-gold)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
|
||
</svg>
|
||
{CONTACT_CONSTANTS.phone}
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Статистика в ряд -->
|
||
<div class="grid grid-cols-2 md:grid-cols-4 gap-6 pt-8 border-t border-[var(--color-gray-600)]/20">
|
||
{stats.map((stat) => (
|
||
<div>
|
||
<div class="text-2xl md:text-3xl font-black text-[var(--color-gold)] mb-1">{stat.value}</div>
|
||
<div class="text-xs text-[var(--color-gray-500)] uppercase tracking-wider">{stat.label}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Правая часть - визуальный элемент -->
|
||
<div class="lg:col-span-5 hidden lg:block">
|
||
<div class="relative">
|
||
<!-- Основная карточка -->
|
||
<div class="relative bg-[var(--color-navy-dark)]/80 backdrop-blur-sm border border-[var(--color-gray-600)]/20 p-8 rounded-2xl">
|
||
<!-- Заголовок карточки -->
|
||
<div class="flex items-center gap-3 mb-6">
|
||
<div class="w-10 h-10 bg-[var(--color-gold)]/10 rounded-lg flex items-center justify-center">
|
||
<svg class="w-5 h-5 text-[var(--color-gold)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<div class="text-[var(--color-white)] font-bold text-sm">Арбитражный суд</div>
|
||
<div class="text-[var(--color-gray-500)] text-xs">Все инстанции РФ</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Список инстанций -->
|
||
<div class="space-y-4">
|
||
<div class="flex items-center justify-between py-3 border-b border-[var(--color-gray-600)]/20">
|
||
<span class="text-[var(--color-gray-400)] text-sm">Первая инстанция</span>
|
||
<span class="text-[var(--color-gold)] text-xs font-bold">✓</span>
|
||
</div>
|
||
<div class="flex items-center justify-between py-3 border-b border-[var(--color-gray-600)]/20">
|
||
<span class="text-[var(--color-gray-400)] text-sm">Апелляция</span>
|
||
<span class="text-[var(--color-gold)] text-xs font-bold">✓</span>
|
||
</div>
|
||
<div class="flex items-center justify-between py-3 border-b border-[var(--color-gray-600)]/20">
|
||
<span class="text-[var(--color-gray-400)] text-sm">Кассация</span>
|
||
<span class="text-[var(--color-gold)] text-xs font-bold">✓</span>
|
||
</div>
|
||
<div class="flex items-center justify-between py-3">
|
||
<span class="text-[var(--color-gray-400)] text-sm">Верховный суд</span>
|
||
<span class="text-[var(--color-gold)] text-xs font-bold">✓</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Декоративная линия снизу -->
|
||
<div class="mt-6 pt-6 border-t border-[var(--color-gray-600)]/20">
|
||
<div class="flex items-center gap-2 text-[var(--color-gray-500)] text-xs">
|
||
<span class="w-2 h-2 bg-[var(--color-gold)] rounded-full animate-pulse"></span>
|
||
<span>Работаю по всему Уральскому округу</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Фоновые элементы -->
|
||
<div class="absolute -top-4 -right-4 w-24 h-24 bg-gradient-to-br from-[var(--color-gold)]/10 to-transparent rounded-full blur-xl"></div>
|
||
<div class="absolute -bottom-4 -left-4 w-32 h-32 bg-gradient-to-tr from-[var(--color-gold)]/5 to-transparent rounded-full blur-xl"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|