121 lines
No EOL
9.4 KiB
Text
121 lines
No EOL
9.4 KiB
Text
---
|
||
import { LAWYER_NAME } from '@constants/constants.ts';
|
||
import { getAboutHeroStats, getYearsOfPractice, getClientDeclension, getYearDeclension } from '@utils/stats.utils.ts';
|
||
|
||
const lawyerImage = '/images/about/advokat_surguta.avif';
|
||
|
||
const dynamicStats = getAboutHeroStats();
|
||
|
||
const content = {
|
||
quote: "Моя миссия — не просто представлять интересы в суде, а обеспечивать реальную защиту прав и свобод каждого клиента в Сургуте и ХМАО - Югре. В законе нет мелочей, есть только возможности.",
|
||
description: `С 2005 года я специализируюсь на сложных уголовных, административных и гражданских делах. Мой опыт позволяет находить нестандартные решения там, где другие видят тупик.`,
|
||
};
|
||
---
|
||
|
||
<section class="relative py-20 md:py-32 overflow-hidden bg-[#F8F9FA] -mx-4 md:mx-0">
|
||
<!-- Декоративный фон -->
|
||
<div class="absolute inset-0 pointer-events-none">
|
||
<div class="absolute top-0 right-0 w-[600px] h-[600px] bg-[var(--color-blue-primary)] opacity-5 rounded-full blur-3xl translate-x-1/3 -translate-y-1/3"></div>
|
||
<div class="absolute bottom-0 left-0 w-[500px] h-[500px] bg-[var(--color-gold)] opacity-5 rounded-full blur-3xl -translate-x-1/3 translate-y-1/3"></div>
|
||
</div>
|
||
|
||
<div class="relative z-10 w-full px-4 md:container md:mx-auto md:px-4 md:max-w-7xl">
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center">
|
||
|
||
<!-- ЛЕВАЯ КОЛОНКА: Фото с эффектами -->
|
||
<div class="relative w-full max-w-md mx-auto lg:max-w-none">
|
||
<!-- Декоративная рамка с градиентом -->
|
||
<div class="absolute -inset-4 bg-gradient-to-br from-[var(--color-gold)]/20 to-[var(--color-blue-primary)]/20 rounded-3xl blur-2xl opacity-50"></div>
|
||
|
||
<div class="relative">
|
||
<!-- Главное фото с glassmorphism рамкой -->
|
||
<div class="relative bg-white/80 backdrop-blur p-3 rounded-2xl shadow-2xl border border-white/50">
|
||
<div class="aspect-[4/5] rounded-xl overflow-hidden bg-gray-900 relative">
|
||
<img
|
||
src={lawyerImage}
|
||
alt={LAWYER_NAME.full}
|
||
class="w-full h-full object-cover transform hover:scale-105 transition-transform duration-700"
|
||
loading="eager"
|
||
/>
|
||
<!-- Градиентный overlay снизу -->
|
||
<div class="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent pointer-events-none"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Плавающий бейдж опыта -->
|
||
<div class="absolute -bottom-6 -right-6 bg-white/95 backdrop-blur-xl p-6 rounded-2xl shadow-2xl border border-[var(--color-gold)]/20 transform hover:scale-105 transition-transform duration-300">
|
||
<div class="flex items-center gap-4">
|
||
<div class="w-14 h-14 bg-gradient-to-br from-[var(--color-gold)] to-[var(--color-gold-hover)] rounded-xl flex items-center justify-center shadow-lg shadow-[var(--color-gold)]/30">
|
||
<svg class="w-7 h-7 text-white" 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"/>
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<span class="block text-3xl font-extrabold text-gray-900 leading-none">{getYearsOfPractice()}+</span>
|
||
<span class="text-xs font-bold text-[var(--color-gold)] uppercase tracking-wider">лет практики</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Декоративный элемент с quote -->
|
||
<div class="absolute -top-4 -left-4 w-20 h-20 bg-[var(--color-blue-primary)] rounded-2xl flex items-center justify-center shadow-xl transform -rotate-6 hover:rotate-0 transition-transform duration-300 hidden lg:flex">
|
||
<svg class="w-10 h-10 text-white" fill="currentColor" viewBox="0 0 24 24">
|
||
<path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ПРАВАЯ КОЛОНКА: Контент -->
|
||
<div class="text-center lg:text-left">
|
||
<div class="inline-flex items-center gap-2 px-4 py-2 bg-[var(--color-blue-primary)]/10 rounded-full border border-[var(--color-blue-primary)]/20 mb-6">
|
||
<span class="w-2 h-2 bg-[var(--color-blue-primary)] rounded-full animate-pulse"></span>
|
||
<span class="text-[var(--color-blue-primary)] text-sm font-bold uppercase tracking-wider">{LAWYER_NAME.position}</span>
|
||
</div>
|
||
|
||
<h1 class="text-3xl md:text-4xl font-bold text-gray-900 leading-tight mb-6">
|
||
{LAWYER_NAME.first} <span class="text-transparent bg-clip-text bg-gradient-to-r from-[var(--color-blue-primary)] to-blue-600">{LAWYER_NAME.middle}</span><br />
|
||
{LAWYER_NAME.last}
|
||
</h1>
|
||
|
||
<div class="w-24 h-1.5 bg-gradient-to-r from-[var(--color-gold)] to-[var(--color-gold-hover)] rounded-full mb-8 mx-auto lg:mx-0"></div>
|
||
|
||
<blockquote class="relative text-md md:text-xl text-gray-700 font-light italic leading-relaxed mb-8 pl-0 lg:pl-8 border-l-0 lg:border-l-4 border-[var(--color-gold)]">
|
||
<span class="absolute -top-4 -left-2 text-6xl text-[var(--color-gold)]/20 font-serif hidden lg:block">"</span>
|
||
{content.quote}
|
||
</blockquote>
|
||
|
||
<p class="text-gray-600 text-lg leading-relaxed mb-10 max-w-xl mx-auto lg:mx-0">
|
||
{content.description}
|
||
</p>
|
||
|
||
<!-- Статистика в glassmorphism карточках -->
|
||
<div class="flex flex-wrap justify-center lg:justify-start gap-4">
|
||
<div class="group bg-white/80 backdrop-blur-xl p-6 rounded-2xl shadow-lg border border-white/50 hover:shadow-xl hover:border-[var(--color-blue-primary)]/30 transition-all duration-300 min-w-[160px]">
|
||
<div class="flex items-center gap-3 mb-2">
|
||
<div class="w-10 h-10 bg-[var(--color-blue-primary)]/10 rounded-xl flex items-center justify-center group-hover:bg-[var(--color-blue-primary)] transition-colors duration-300">
|
||
<svg class="w-5 h-5 text-[var(--color-blue-primary)] group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||
</svg>
|
||
</div>
|
||
<span class="text-3xl font-bold text-gray-900">{dynamicStats[0].number}{dynamicStats[0].suffix}</span>
|
||
</div>
|
||
<span class="text-xs font-bold text-gray-500 uppercase tracking-wider">Успешных дел</span>
|
||
</div>
|
||
|
||
<div class="group bg-white/80 backdrop-blur-xl p-6 rounded-2xl shadow-lg border border-white/50 hover:shadow-xl hover:border-[var(--color-gold)]/30 transition-all duration-300 min-w-[160px]">
|
||
<div class="flex items-center gap-3 mb-2">
|
||
<div class="w-10 h-10 bg-[var(--color-gold)]/10 rounded-xl flex items-center justify-center group-hover:bg-[var(--color-gold)] transition-colors duration-300">
|
||
<svg class="w-5 h-5 text-[var(--color-gold)] group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
|
||
</svg>
|
||
</div>
|
||
<span class="text-3xl font-bold text-gray-900">{dynamicStats[1].number}{dynamicStats[1].suffix}</span>
|
||
</div>
|
||
<span class="text-xs font-bold text-gray-500 uppercase tracking-wider">Довольных клиентов</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section> |