first commit
This commit is contained in:
commit
4a589825c2
297 changed files with 33019 additions and 0 deletions
|
|
@ -0,0 +1,179 @@
|
|||
---
|
||||
import { CONTACT_CONSTANTS } from "@constants/constants.ts";
|
||||
import SocialIcons from "@components/base/SocialIcons.astro";
|
||||
---
|
||||
|
||||
<section
|
||||
class="py-20 px-4 relative overflow-hidden bg-[var(--color-navy-dark)]"
|
||||
>
|
||||
<!-- Фоновый паттерн -->
|
||||
<div
|
||||
class="absolute inset-0 opacity-[0.02]"
|
||||
style="background-image: radial-gradient(circle at 2px 2px, var(--color-gold) 1px, transparent 0); background-size: 32px 32px;"
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Градиенты -->
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-r from-[var(--color-navy)] via-[var(--color-navy)]/95 to-[var(--color-navy)]/90"
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="absolute top-0 right-0 w-1/2 h-full bg-gradient-to-l from-[var(--color-gold)]/5 to-transparent"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="max-w-6xl mx-auto relative z-10">
|
||||
<div
|
||||
class="relative bg-[var(--color-navy)] border border-[var(--color-gray-600)]/10 rounded-3xl p-8 md:p-12 overflow-hidden shadow-2xl"
|
||||
>
|
||||
<!-- Декоративные элементы -->
|
||||
<div
|
||||
class="absolute top-0 right-0 w-64 h-64 bg-[var(--color-gold)] opacity-[0.03] rounded-full blur-3xl -translate-y-1/2 translate-x-1/2"
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="absolute bottom-0 left-0 w-48 h-48 bg-[var(--color-blue-primary)] opacity-[0.03] rounded-full blur-2xl translate-y-1/2 -translate-x-1/2"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="relative flex flex-col lg:flex-row items-center justify-between gap-10"
|
||||
>
|
||||
<!-- Левая часть -->
|
||||
<div class="flex-1 text-center lg:text-left">
|
||||
<div
|
||||
class="inline-flex items-center gap-2 px-4 py-2 bg-[var(--color-emerald-500)]/10 border border-[var(--color-emerald-500)]/20 rounded-full text-[var(--color-emerald-400)] text-xs font-bold uppercase tracking-wider mb-6"
|
||||
>
|
||||
<span class="relative flex h-2 w-2">
|
||||
<span
|
||||
class="animate-ping absolute inline-flex h-full w-full rounded-full bg-[var(--color-emerald-400)] opacity-75"
|
||||
></span>
|
||||
<span
|
||||
class="relative inline-flex rounded-full h-2 w-2 bg-[var(--color-emerald-400)]"
|
||||
></span>
|
||||
</span>
|
||||
Срочная помощь 24/7
|
||||
</div>
|
||||
|
||||
<h2
|
||||
class="text-3xl md:text-4xl lg:text-5xl font-bold text-[var(--color-white)] mb-4 leading-tight"
|
||||
>
|
||||
Нужна срочная <span class="text-[var(--color-gold)]"
|
||||
>консультация</span
|
||||
>?
|
||||
</h2>
|
||||
|
||||
<p
|
||||
class="text-[var(--color-gray-400)] text-lg mb-8 max-w-xl mx-auto lg:mx-0"
|
||||
>
|
||||
Административное дело требует немедленной реакции. Каждая минута
|
||||
важна для успешного исхода.
|
||||
</p>
|
||||
|
||||
<!-- Преимущества -->
|
||||
<div
|
||||
class="flex flex-col sm:flex-row flex-wrap gap-4 sm:gap-6 items-start justify-start pl-12 sm:pl-16 md:pl-24 lg:pl-0"
|
||||
>
|
||||
<div class="flex items-center gap-3 text-[var(--color-gray-400)]">
|
||||
<div
|
||||
class="w-10 h-10 rounded-xl bg-[var(--color-emerald-500)]/10 border border-[var(--color-emerald-500)]/20 flex items-center justify-center shrink-0"
|
||||
>
|
||||
<svg
|
||||
class="w-5 h-5 text-[var(--color-emerald-400)]"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="text-sm">Выезд за 1 час</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 text-[var(--color-gray-400)]">
|
||||
<div
|
||||
class="w-10 h-10 rounded-xl bg-[var(--color-emerald-500)]/10 border border-[var(--color-emerald-500)]/20 flex items-center justify-center shrink-0"
|
||||
>
|
||||
<svg
|
||||
class="w-5 h-5 text-[var(--color-emerald-400)]"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="text-sm">Первый звонок бесплатно</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 text-[var(--color-gray-400)]">
|
||||
<div
|
||||
class="w-10 h-10 rounded-xl bg-[var(--color-emerald-500)]/10 border border-[var(--color-emerald-500)]/20 flex items-center justify-center shrink-0"
|
||||
>
|
||||
<svg
|
||||
class="w-5 h-5 text-[var(--color-emerald-400)]"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="text-sm">Работаем по всей области</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Правая часть -->
|
||||
<div
|
||||
class="flex flex-col items-center gap-6 lg:border-l lg:border-[var(--color-gray-600)]/10 lg:pl-12"
|
||||
>
|
||||
<a
|
||||
href={CONTACT_CONSTANTS.phoneHref}
|
||||
class="group relative px-10 py-5 bg-[var(--color-gold)] hover:bg-[var(--color-gold-hover)] text-[var(--color-white)] font-black text-lg rounded-2xl shadow-lg shadow-[var(--color-gold)]/20 hover:shadow-[var(--color-gold)]/40 hover:scale-105 transition-all duration-300 overflow-hidden"
|
||||
>
|
||||
<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-1000"
|
||||
></span>
|
||||
<span class="relative flex items-center gap-3">
|
||||
<svg
|
||||
class="w-6 h-6"
|
||||
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}
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<div class="text-center">
|
||||
<p class="text-[var(--color-gray-500)] text-sm mb-3">
|
||||
Или напишите в мессенджер
|
||||
</p>
|
||||
<div class="flex gap-3 justify-center">
|
||||
<SocialIcons variant="messenger" whatsapp={false} imo={true} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
Loading…
Add table
Add a link
Reference in a new issue