93 lines
4.9 KiB
TypeScript
93 lines
4.9 KiB
TypeScript
import React from 'react';
|
||
import PageHeader from '../components/PageHeader';
|
||
import { Phone, Mail, MapPin, Clock, Send } from 'lucide-react';
|
||
|
||
const ContactsPage: React.FC = () => {
|
||
return (
|
||
<div className="bg-white pb-20">
|
||
<PageHeader
|
||
title="Контакты"
|
||
description="Мы всегда на связи и готовы ответить на любые ваши вопросы."
|
||
image="/media/images/headers/header-kontakri.png"
|
||
/>
|
||
|
||
<div className="container mx-auto px-6 py-20">
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-20">
|
||
<div className="bg-brand-light p-8 rounded-2xl">
|
||
<Phone className="text-brand-orange w-8 h-8 mb-4" />
|
||
<h3 className="font-bold text-lg mb-2">Телефон</h3>
|
||
<a href="tel:83472927370" className="text-gray-600 hover:text-brand-orange transition-colors">8 (347) 292 73 70</a>
|
||
</div>
|
||
<div className="bg-brand-light p-8 rounded-2xl">
|
||
<Mail className="text-brand-orange w-8 h-8 mb-4" />
|
||
<h3 className="font-bold text-lg mb-2">Email</h3>
|
||
<a href="mailto:gw@geowektor.ru" className="text-gray-600 hover:text-brand-orange transition-colors">gw@geowektor.ru</a>
|
||
</div>
|
||
<div className="bg-brand-light p-8 rounded-2xl">
|
||
<MapPin className="text-brand-orange w-8 h-8 mb-4" />
|
||
<h3 className="font-bold text-lg mb-2">Офис</h3>
|
||
<p className="text-gray-600">450001, РБ, г. Уфа,</p>
|
||
<p className="text-gray-600">ул. Комсомольская 19/1</p>
|
||
</div>
|
||
<div className="bg-brand-light p-8 rounded-2xl">
|
||
<Clock className="text-brand-orange w-8 h-8 mb-4" />
|
||
<h3 className="font-bold text-lg mb-2">Режим работы</h3>
|
||
<p className="text-gray-600">Пн-Пт: 09:00 - 18:00</p>
|
||
<p className="text-gray-600">Сб-Вс: Выходной</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Telegram QR-код */}
|
||
<div className="mb-20 bg-gradient-to-br from-brand-orange/10 to-brand-orange/5 rounded-3xl p-12">
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center max-w-5xl mx-auto">
|
||
<div>
|
||
<div className="flex items-center gap-3 mb-6">
|
||
<Send className="w-10 h-10 text-brand-orange" />
|
||
<h2 className="text-3xl font-bold text-brand-dark">Мы в Telegram</h2>
|
||
</div>
|
||
<p className="text-gray-600 text-lg mb-6 leading-relaxed">
|
||
Подписывайтесь на наш Telegram-канал, чтобы быть в курсе новостей компании, актуальных проектов и специальных предложений.
|
||
</p>
|
||
<div className="space-y-3">
|
||
<p className="text-gray-700">
|
||
📱 Отсканируйте QR-код камерой телефона
|
||
</p>
|
||
<p className="text-gray-700">
|
||
💬 Или перейдите по ссылке: <a href="https://t.me/ooo_geo_wektor" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline font-semibold">@ooo_geo_wektor</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex justify-center">
|
||
<div className="bg-white p-8 rounded-3xl shadow-xl border-4 border-brand-orange/20 hover:border-brand-orange/40 transition-all duration-300 hover:scale-105">
|
||
<img
|
||
src="/media/qr-code.png"
|
||
alt="QR-код для перехода в Telegram канал ГеоВектор"
|
||
className="w-64 h-64 object-contain"
|
||
/>
|
||
<p className="text-center mt-4 text-sm text-gray-600 font-medium">
|
||
Наведите камеру на QR-код
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Яндекс карта */}
|
||
<div className="w-full h-[400px] bg-gray-200 rounded-3xl overflow-hidden relative">
|
||
<iframe
|
||
src="https://yandex.ru/map-widget/v1/?text=ГеоВектор%20Уфа%20Комсомольская%2019%2F1&z=17&l=map"
|
||
width="100%"
|
||
height="100%"
|
||
frameBorder="0"
|
||
allowFullScreen={true}
|
||
style={{ position: 'relative', border: 0 }}
|
||
title="Яндекс карта - ГеоВектор, ул. Комсомольская 19/1, Уфа"
|
||
></iframe>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default ContactsPage; |