103 lines
4.2 KiB
TypeScript
103 lines
4.2 KiB
TypeScript
import { Phone, Mail, MapPin, Clock } from 'lucide-react'
|
||
|
||
export function Contact() {
|
||
return (
|
||
<section className="py-4 bg-gray-50">
|
||
<div className="max-w-[900px] mx-auto px-6">
|
||
{/* Заголовок */}
|
||
<div className="text-center mb-12">
|
||
<h2 className="text-3xl lg:text-4xl text-gray-900 mb-3">Обсудим ваш проект</h2>
|
||
<p className="text-gray-600">Оставьте заявку — перезвоним в течение часа</p>
|
||
</div>
|
||
|
||
{/* Форма */}
|
||
<div className="bg-white rounded-2xl p-8 shadow-sm border border-gray-100">
|
||
<form className="space-y-5">
|
||
<div className="grid md:grid-cols-2 gap-5">
|
||
<div>
|
||
<input
|
||
type="text"
|
||
id="name"
|
||
className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white transition-all"
|
||
placeholder="Ваше имя"
|
||
required
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<input
|
||
type="text"
|
||
id="company"
|
||
className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white transition-all"
|
||
placeholder="Компания"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid md:grid-cols-2 gap-5">
|
||
<div>
|
||
<input
|
||
type="email"
|
||
id="email"
|
||
className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white transition-all"
|
||
placeholder="Email"
|
||
required
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<input
|
||
type="tel"
|
||
id="phone"
|
||
className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white transition-all"
|
||
placeholder="Телефон"
|
||
required
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<textarea
|
||
id="message"
|
||
rows={4}
|
||
className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white transition-all resize-none"
|
||
placeholder="Расскажите о вашем проекте"
|
||
></textarea>
|
||
</div>
|
||
|
||
<div className="flex flex-col sm:flex-row items-center gap-4">
|
||
<button
|
||
type="submit"
|
||
className="w-full sm:w-auto px-8 py-3 bg-blue-600 text-white rounded-xl hover:bg-blue-700 transition-all"
|
||
>
|
||
Отправить заявку
|
||
</button>
|
||
<p className="text-sm text-gray-500">Нажимая кнопку, вы соглашаетесь с политикой конфиденциальности</p>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
{/* Контакты компактно */}
|
||
<div className="mt-12 flex flex-wrap justify-center gap-8 text-sm text-gray-600">
|
||
<a href="tel:+74951234567" className="flex items-center gap-2 hover:text-blue-600 transition-colors">
|
||
<Phone className="w-4 h-4" />
|
||
<span>+7 (495) 123-45-67</span>
|
||
</a>
|
||
<a href="mailto:info@softclick.ru" className="flex items-center gap-2 hover:text-blue-600 transition-colors">
|
||
<Mail className="w-4 h-4" />
|
||
<span>info@softclick.ru</span>
|
||
</a>
|
||
<div className="flex items-center gap-2">
|
||
<MapPin className="w-4 h-4" />
|
||
<span>Москва, Пресненская наб., 12</span>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<Clock className="w-4 h-4" />
|
||
<span>Пн-Пт 9:00–18:00</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
)
|
||
}
|