first commit

frontend/src/components/contacts/ContactsHero.astro

@@ -0,0 +1,40 @@
+---
+export interface Props {
+    title?: string;
+    subtitle?: string;
+    highlightText?: string;
+}
+
+const {
+    title = "Контакты",
+    subtitle = "Нужна юридическая помощь? Свяжитесь напрямую или доверьте предварительный анализ нашему",
+    highlightText = "AI-ассистенту"
+} = Astro.props;
+---
+
+<div class="text-center mb-16 sm:mb-20 lg:mb-28 relative">
+    <!-- Декоративные элементы -->
+    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[200px] bg-gradient-to-r from-[var(--color-gold)]/20 via-[var(--color-blue-primary)]/20 to-[var(--color-gold)]/20 blur-3xl -z-10 opacity-50"></div>
+
+    <!-- Заголовок в стиле страницы кейсов -->
+    <div class="mb-12 max-w-3xl mx-auto">
+        <div class="flex items-center justify-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 mb-6 mx-auto w-fit">
+            <span class="w-2 h-2 bg-[var(--color-gold)] rounded-full animate-pulse"></span>
+            Наши координаты
+        </div>
+
+        <h1 class="text-3xl sm:text-4xl md:text-6xl lg:text-8xl font-bold tracking-tight text-gray-900 mb-6 relative inline-block">
+            {title}
+            <span class="absolute -bottom-3 sm:-bottom-4 left-1/2 -translate-x-1/2 w-16 sm:w-24 h-1 bg-gradient-to-r from-transparent via-[var(--color-gold)] to-transparent rounded-full"></span>
+        </h1>
+
+        <p class="text-gray-600 text-base sm:text-lg md:text-xl lg:text-2xl leading-relaxed font-light max-w-2xs sm:max-w-3xl mx-auto">
+            {subtitle}
+            <span class="relative inline-block mx-1 sm:mx-2 mt-2 block sm:inline">
+                <span class="relative z-10 text-[var(--color-gold)] font-bold bg-gradient-to-r from-[var(--color-gold)]/20 to-[var(--color-gold-hover)]/20 px-2 sm:px-3 py-0.5 sm:py-1 rounded-lg sm:rounded-xl border border-[var(--color-gold)]/20 text-sm sm:text-base">
+                    {highlightText}
+                </span>
+            </span>
+        </p>
+    </div>
+</div>