90 lines
3.4 KiB
TypeScript
90 lines
3.4 KiB
TypeScript
import { Button } from '../../ui/Button';
|
||
import { Link } from 'react-router-dom';
|
||
import { MailIcon } from '../icons/MailIcon';
|
||
import { PhoneIcon } from '../icons/PhoneIcon';
|
||
import { TelegramIcon } from '../icons/TelegramIcon';
|
||
import { VKIcon } from '../icons/VKIcon';
|
||
import { YouTubeIcon } from '../icons/YoutubeIcon';
|
||
import { useModalStore } from '../../store/modalStore';
|
||
import { ModalWithForm } from './ModalWithForm';
|
||
import { ArrowRightIcon } from '../icons/ArrowRightIcon';
|
||
import { ClassNameWrapper } from '../../hocs/ClassNameWrapper';
|
||
|
||
export function Contacts() {
|
||
const setModal = useModalStore(state => state.setModal);
|
||
|
||
return (
|
||
<div className="sm:grid lg:grid-cols-12 sm:grid-cols-2 lg:gap-x-4 sm:gap-x-14 lg:gap-y-[68px] pb-20 pt-[70px]">
|
||
<h2 className="font-medium lg:col-span-7 sm:col-span-full h2 max-lg:mb-6">
|
||
Хотите использовать интерактивные тренажеры в обучении?
|
||
<br />
|
||
<span className="text-gradient">Давайте обсудим детали</span>
|
||
</h2>
|
||
<Button
|
||
color="primary"
|
||
icon={
|
||
<div className="p-2 bg-white rounded-full">
|
||
<ClassNameWrapper
|
||
element={<ArrowRightIcon />}
|
||
className="text-black"
|
||
/>
|
||
</div>
|
||
}
|
||
className="self-end row-start-2 px-6 py-4 lg:col-span-3 sm:max-lg:mb-20 max-sm:mb-14"
|
||
width="full"
|
||
onClick={() => setModal(<ModalWithForm />)}
|
||
>
|
||
Оставить заявку
|
||
</Button>
|
||
<div className="space-y-3 lg:col-start-9 lg:col-span-4 sm:col-span-1 sm:col-start-1 max-sm:mb-8">
|
||
<h4 className="mb-1 text-xl font-medium">Свяжитесь с нами</h4>
|
||
<Button
|
||
color="secondary"
|
||
className="py-4"
|
||
width="full"
|
||
icon={<MailIcon />}
|
||
onClick={() => {
|
||
window.location.href = 'mailto:info@graff.tech';
|
||
}}
|
||
>
|
||
<span className="btn-text opacity-80">Написать</span>
|
||
</Button>
|
||
<Button
|
||
color="secondary"
|
||
className="py-4"
|
||
width="full"
|
||
icon={<PhoneIcon />}
|
||
onClick={() => {
|
||
window.location.href = 'tel:88007700067';
|
||
}}
|
||
>
|
||
<span className="btn-text opacity-80">Позвонить</span>
|
||
</Button>
|
||
</div>
|
||
<div className="col-start-2 space-y-4 lg:col-start-9 lg:col-span-4 lg:row-start-2 sm:row-start-3 lg:self-end sm:flex sm:flex-col sm:justify-between">
|
||
<h4 className="font-medium h4">Социальные сети</h4>
|
||
<div className="flex gap-x-2">
|
||
<Link
|
||
to={'https://www.youtube.com/@GRAFFtech'}
|
||
className="p-4 rounded-full opacity-80 border-[#3D425C] border hover:border-[#52587A] transition-all"
|
||
>
|
||
<YouTubeIcon />
|
||
</Link>
|
||
<Link
|
||
to={'https://vk.com/graff.interactive'}
|
||
className="p-4 rounded-full opacity-80 border-[#3D425C] border hover:border-[#52587A] transition-all"
|
||
>
|
||
<VKIcon />
|
||
</Link>
|
||
<Link
|
||
to={'https://t.me/graffestate'}
|
||
className="p-4 rounded-full opacity-80 border-[#3D425C] border hover:border-[#52587A] transition-all"
|
||
>
|
||
<TelegramIcon />
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|