95 lines
5.3 KiB
Text
95 lines
5.3 KiB
Text
---
|
||
const specializations = [
|
||
{
|
||
title: "Уголовное право",
|
||
description: "Защита по уголовным делам, досудебное урегулирование, представительство в судах всех инстанций",
|
||
icon: "scale"
|
||
},
|
||
{
|
||
title: "Гражданское право",
|
||
description: "Споры по договорам, имущественные споры, наследственные дела, жилищные вопросы",
|
||
icon: "building"
|
||
},
|
||
{
|
||
title: "Административное право",
|
||
description: "Обжалование постановлений, защита прав водителей, дела об административных правонарушениях",
|
||
icon: "clipboard"
|
||
},
|
||
{
|
||
title: "Семейное право",
|
||
description: "Разводы, раздел имущества, споры о детях, алименты",
|
||
icon: "users"
|
||
},
|
||
{
|
||
title: "Жилищное право",
|
||
description: "Приватизация, переселение, незаконная перепланировка, выселение",
|
||
icon: "home"
|
||
},
|
||
{
|
||
title: "Земельное право",
|
||
description: "Оформление земельных участков, споры о границах, изъятие земли",
|
||
icon: "territory"
|
||
}
|
||
];
|
||
|
||
const iconPaths: Record<string, string> = {
|
||
scale: "M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3",
|
||
building: "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",
|
||
clipboard: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01",
|
||
users: "M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z",
|
||
home: "M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6",
|
||
territory: "M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 4l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"
|
||
};
|
||
---
|
||
|
||
<section class="relative py-20 bg-[#F8F9FA] overflow-hidden -mx-4 md:mx-0">
|
||
<div class="absolute inset-0 pointer-events-none">
|
||
<div class="absolute bottom-0 left-1/4 w-96 h-96 bg-[var(--color-gold)] opacity-5 rounded-full blur-3xl"></div>
|
||
</div>
|
||
|
||
<div class="w-full px-4 md:container md:mx-auto md:px-4 md:max-w-7xl relative z-10">
|
||
<div class="text-center mb-16">
|
||
<span class="inline-block px-4 py-2 bg-[var(--color-blue-primary)]/10 text-[var(--color-blue-primary)] text-sm font-bold uppercase tracking-wider rounded-full mb-4">
|
||
Экспертиза
|
||
</span>
|
||
<h2 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
|
||
Мои <span class="text-transparent bg-clip-text bg-gradient-to-r from-[var(--color-blue-primary)] to-blue-600">специализации</span>
|
||
</h2>
|
||
<div class="w-24 h-1.5 bg-gradient-to-r from-[var(--color-gold)] to-[var(--color-gold-hover)] mx-auto rounded-full"></div>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||
{specializations.map((item, index) => (
|
||
<div class="group bg-white/80 backdrop-blur-xl p-8 rounded-2xl shadow-lg border border-white/50 hover:shadow-2xl hover:shadow-[var(--color-blue-primary)]/10 hover:-translate-y-2 transition-all duration-500 relative overflow-hidden">
|
||
<!-- Декоративный фон при hover -->
|
||
<div class="absolute inset-0 bg-gradient-to-br from-[var(--color-blue-primary)]/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
|
||
|
||
<div class="relative z-10">
|
||
<!-- Иконка -->
|
||
<div class="w-16 h-16 bg-gradient-to-br from-[var(--color-blue-primary)] to-blue-600 rounded-2xl flex items-center justify-center mb-6 shadow-lg shadow-blue-500/30 group-hover:scale-110 transition-transform duration-300">
|
||
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
|
||
<path stroke-linecap="round" stroke-linejoin="round" d={iconPaths[item.icon]}/>
|
||
</svg>
|
||
</div>
|
||
|
||
<h3 class="text-xl font-bold text-gray-900 mb-3 group-hover:text-[var(--color-blue-primary)] transition-colors">
|
||
{item.title}
|
||
</h3>
|
||
|
||
<p class="text-gray-600 leading-relaxed text-sm">
|
||
{item.description}
|
||
</p>
|
||
|
||
<!-- Стрелка при hover -->
|
||
<div class="mt-6 flex items-center text-[var(--color-blue-primary)] font-semibold text-sm opacity-0 transform translate-x-4 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-300">
|
||
Подробнее
|
||
<svg class="w-4 h-4 ml-2" 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"/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|