redi/astro_advokat
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

first commit

Browse source
This commit is contained in:
Web-serfer 2026-03-30 20:21:41 +05:00
commit 4a589825c2
297 changed files with 33019 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

166
frontend/src/components/services/arbitration/ArbitrationHero.astro Normal file
View file

@ -0,0 +1,166 @@
---
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>