astro_autoservices/src/components/ContactForm.astro

79 lines
No EOL
4.5 KiB
Text
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
---
<section id="Контакты" class="py-24 bg-white relative overflow-hidden">
<div class="max-w-7xl mx-auto px-6 grid md:grid-cols-2 gap-16 items-center">
<div class="text-center md:text-left">
<h2 class="text-4xl md:text-5xl font-bold mb-8">Ждем вас в нашем сервисе</h2>
<div class="space-y-8">
<div class="flex gap-4 items-center">
<div class="w-12 h-12 bg-red-50 text-[#E51937] rounded-full flex items-center justify-center shrink-0">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/>
<circle cx="12" cy="10" r="3"/>
</svg>
</div>
<div>
<h4 class="font-bold text-lg mb-1">Адрес</h4>
<p class="text-gray-600">г. Сургут, ул. Профсоюзов, 45 (Пример)</p>
</div>
</div>
<div class="flex gap-4 items-center">
<div class="w-12 h-12 bg-red-50 text-[#E51937] rounded-full flex items-center justify-center shrink-0">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
</svg>
</div>
<div>
<h4 class="font-bold text-lg mb-1">Телефон</h4>
<p class="text-gray-600">+7 (3462) 00-00-00</p>
<p class="text-gray-600">+7 (900) 000-00-00</p>
</div>
</div>
<div class="flex gap-4 items-center">
<div class="w-12 h-12 bg-red-50 text-[#E51937] rounded-full flex items-center justify-center shrink-0">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"/>
<polyline points="12 6 12 12 16 14"/>
</svg>
</div>
<div>
<h4 class="font-bold text-lg mb-1">Режим работы</h4>
<p class="text-gray-600">Ежедневно: 09:00 20:00</p>
<p class="text-gray-400 text-sm">Без перерывов и выходных</p>
</div>
</div>
</div>
</div>
<div class="glass-panel rounded-[2rem] p-8 md:p-12 relative text-center">
<div class="absolute -top-4 -right-4 w-24 h-24 bg-[#E51937]/10 rounded-full blur-2xl" />
<h3 class="text-2xl font-bold mb-6">Остались вопросы?</h3>
<p class="text-gray-500 mb-8 font-light">Оставьте ваши контакты, и мы перезвоним вам в течение 15 минут для консультации.</p>
<form class="space-y-4" onsubmit="event.preventDefault()">
<input
type="text"
placeholder="Ваше имя"
class="w-full bg-gray-50 border-none rounded-xl px-5 py-4 focus:ring-2 focus:ring-[#E51937] transition-all"
/>
<input
type="tel"
placeholder="Номер телефона"
class="w-full bg-gray-50 border-none rounded-xl px-5 py-4 focus:ring-2 focus:ring-[#E51937] transition-all"
/>
<button class="w-full bg-[#E51937] text-white py-4 rounded-xl font-bold text-lg hover:bg-red-700 transition-all shadow-lg shadow-red-600/20">
Заказать консультацию
</button>
</form>
<div class="mt-8 pt-8 border-t border-gray-100 flex items-center gap-2 text-xs text-green-600 font-bold uppercase tracking-widest">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
<polyline points="22 4 12 14.01 9 11.01"/>
</svg>
Мы онлайн и готовы помочь
</div>
</div>
</div>
</section>