first commit
This commit is contained in:
Web-serfer
commit
4a589825c2
297 changed files with 33019 additions and 0 deletions
339
frontend/src/components/services/civil/ServicesHero.astro
Normal file
339
frontend/src/components/services/civil/ServicesHero.astro
Normal file
|
|
@ -0,0 +1,339 @@
|
|||
---
|
||||
import { CONTACT_CONSTANTS } from "@constants/constants.ts";
|
||||
|
||||
interface Props {
|
||||
title?: string;
|
||||
subtitle?: string;
|
||||
}
|
||||
|
||||
const {
|
||||
title = "Гражданские правовые споры",
|
||||
subtitle = "Решение сложных имущественных и семейных конфликтов. Полное сопровождение от консультации до исполнения решения суда.",
|
||||
} = Astro.props;
|
||||
|
||||
const features = [
|
||||
"Бесплатный первичный анализ",
|
||||
"Работаем по всему ХМАО-Югра",
|
||||
"Оплата по результату",
|
||||
];
|
||||
---
|
||||
|
||||
<section
|
||||
class="relative min-h-screen flex items-center overflow-hidden bg-[var(--color-navy)]"
|
||||
>
|
||||
<!-- Диагональный фон -->
|
||||
<div class="absolute inset-0 z-0">
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-br from-[var(--color-navy)] via-[var(--color-navy)] to-[var(--color-navy-dark)]"
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="absolute top-0 right-0 w-2/3 h-full bg-[var(--color-gold)] opacity-[0.02] transform skew-x-12 translate-x-1/4"
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="absolute bottom-0 left-0 w-1/2 h-1/2 bg-[var(--color-gold)] opacity-[0.03] rounded-full blur-[150px]"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Анимированные линии -->
|
||||
<div class="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
<div
|
||||
class="absolute top-1/4 left-0 w-full h-px bg-gradient-to-r from-transparent via-[var(--color-gold)]/20 to-transparent animate-slide-right"
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="absolute top-1/2 left-0 w-full h-px bg-gradient-to-r from-transparent via-[var(--color-gold)]/10 to-transparent animate-slide-left"
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="absolute top-3/4 left-0 w-full h-px bg-gradient-to-r from-transparent via-[var(--color-gold)]/20 to-transparent animate-slide-right"
|
||||
style="animation-delay: 1s;"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Плавающие декорации -->
|
||||
<div
|
||||
class="absolute top-20 right-20 w-32 h-32 border border-[var(--color-gold)]/10 rounded-full animate-float"
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="absolute top-20 right-20 w-24 h-24 border border-[var(--color-gold)]/20 rounded-full animate-float-delayed"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="absolute bottom-32 left-20 w-40 h-40 bg-[var(--color-gold)]/5 rounded-full blur-3xl animate-pulse-slow"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="container mx-auto px-4 md:px-8 lg:px-16 relative z-10 pt-8 md:pt-0"
|
||||
>
|
||||
<div class="max-w-4xl mx-auto md:mx-0">
|
||||
<!-- Тег -->
|
||||
<div class="flex justify-center md:justify-start mb-8">
|
||||
<div
|
||||
class="inline-flex items-center gap-2 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 backdrop-blur-sm"
|
||||
>
|
||||
<span
|
||||
class="w-2 h-2 bg-[var(--color-gold)] rounded-full animate-pulse"
|
||||
></span>
|
||||
Гражданское право
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Заголовок с выделением -->
|
||||
<h1
|
||||
class="text-5xl md:text-7xl font-bold text-[var(--color-white)] leading-[1.05] mb-8 text-center md:text-left"
|
||||
>
|
||||
{
|
||||
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>
|
||||
|
||||
<!-- Подзаголовок с линией -->
|
||||
<div class="relative pl-0 md:pl-8 mb-12 text-center md:text-left">
|
||||
<div
|
||||
class="hidden md:block absolute left-0 top-0 bottom-0 w-1 bg-gradient-to-b from-[var(--color-gold)] to-transparent"
|
||||
>
|
||||
</div>
|
||||
<p
|
||||
class="text-[var(--color-gray-400)] text-xl md:text-2xl leading-relaxed"
|
||||
>
|
||||
{subtitle}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Быстрые фичи -->
|
||||
<div class="flex flex-wrap gap-4 mb-12 justify-center md:justify-start">
|
||||
{
|
||||
features.map((feature) => (
|
||||
<div class="flex items-center gap-2 px-4 py-2 bg-[var(--color-navy-dark)]/50 border border-[var(--color-gray-600)]/20 rounded-lg text-[var(--color-gray-400)] text-sm">
|
||||
<svg
|
||||
class="w-4 h-4 text-[var(--color-gold)]"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M5 13l4 4L19 7"
|
||||
/>
|
||||
</svg>
|
||||
{feature}
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
|
||||
<!-- CTA группа -->
|
||||
<div class="flex flex-col sm:flex-row gap-4">
|
||||
<button
|
||||
data-consultation-modal
|
||||
class="group relative px-8 py-4 bg-[var(--color-gold)] hover:bg-[var(--color-gold-hover)] text-[var(--color-white)] font-bold rounded-lg overflow-hidden transition-all hover:shadow-[0_0_40px_rgba(191,155,88,0.3)] hover:-translate-y-1 cursor-pointer"
|
||||
>
|
||||
<span
|
||||
class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-700"
|
||||
></span>
|
||||
<span class="relative flex items-center justify-center gap-3">
|
||||
<svg
|
||||
class="w-5 h-5"
|
||||
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>
|
||||
Бесплатная консультация
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onclick="document.getElementById('calculator').scrollIntoView({behavior: 'smooth'})"
|
||||
class="px-8 py-4 bg-transparent border-2 border-[var(--color-gray-600)]/30 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-2 group"
|
||||
>
|
||||
<svg
|
||||
class="w-5 h-5 text-[var(--color-gold)] group-hover:scale-110 transition-transform"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"
|
||||
></path>
|
||||
</svg>
|
||||
Рассчитать стоимость
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Статистика в ряд -->
|
||||
<div class="mt-16 pt-8 border-t border-[var(--color-gray-600)]/10">
|
||||
<div class="grid grid-cols-3 gap-8 text-center md:text-left">
|
||||
<div>
|
||||
<div class="text-3xl font-black text-[var(--color-gold)] mb-1">
|
||||
1000+
|
||||
</div>
|
||||
<div class="text-sm text-[var(--color-gray-500)]">
|
||||
Выигранных дел
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-3xl font-black text-[var(--color-gold)] mb-1">
|
||||
95%
|
||||
</div>
|
||||
<div class="text-sm text-[var(--color-gray-500)]">
|
||||
Успешных исходов
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-3xl font-black text-[var(--color-gold)] mb-1">
|
||||
12 лет
|
||||
</div>
|
||||
<div class="text-sm text-[var(--color-gray-500)]">
|
||||
Юридической практики
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Декоративная плашка справа -->
|
||||
<div class="hidden xl:block absolute right-16 top-1/2 -translate-y-1/2">
|
||||
<div class="relative">
|
||||
<div
|
||||
class="absolute -inset-4 bg-[var(--color-gold)]/10 rounded-2xl blur-xl"
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="relative bg-[var(--color-navy-dark)]/80 backdrop-blur border border-[var(--color-gold)]/20 rounded-2xl p-6 w-80"
|
||||
>
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div
|
||||
class="w-10 h-10 rounded-lg bg-[var(--color-gold)]/20 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="2"
|
||||
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-[var(--color-white)] font-bold text-sm">
|
||||
Срочная помощь
|
||||
</div>
|
||||
<div class="text-[var(--color-gray-500)] text-xs">
|
||||
Ответ за 15 минут
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<div class="flex justify-between text-sm">
|
||||
<span class="text-[var(--color-gray-500)]">Семейные дела</span>
|
||||
<span class="text-[var(--color-gold)]">24/7</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm">
|
||||
<span class="text-[var(--color-gray-500)]">Недвижимость</span>
|
||||
<span class="text-[var(--color-gold)]">24/7</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm">
|
||||
<span class="text-[var(--color-gray-500)]">Наследство</span>
|
||||
<span class="text-[var(--color-gold)]">Пн-Пт</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
@keyframes slide-right {
|
||||
0% {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
@keyframes slide-left {
|
||||
0% {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
@keyframes float {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0) rotate(0deg);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-20px) rotate(5deg);
|
||||
}
|
||||
}
|
||||
@keyframes float-delayed {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0) rotate(0deg);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-15px) rotate(-5deg);
|
||||
}
|
||||
}
|
||||
@keyframes pulse-slow {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.05;
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.1;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-slide-right {
|
||||
animation: slide-right 8s linear infinite;
|
||||
}
|
||||
.animate-slide-left {
|
||||
animation: slide-left 8s linear infinite;
|
||||
}
|
||||
.animate-float {
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
.animate-float-delayed {
|
||||
animation: float-delayed 8s ease-in-out infinite;
|
||||
}
|
||||
.animate-pulse-slow {
|
||||
animation: pulse-slow 4s ease-in-out infinite;
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue