Files
graff.training/src/components/Main/Contacts.tsx
T

57 lines
2.9 KiB
TypeScript
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.
import { Title } from '../../ui/Title';
export function Contacts() {
return (
<div className="desktop:py-[70px] desktop:px-10 mobile:py-14 tablet:px-6 mobile:px-4 desktop:flex justify-between gap-x-4">
<div className="tablet:max-desktop:mb-20 mobile:mb-14">
<Title className="desktop:mb-[68px] desktop-figma:max-w-[899px] desktop:max-w-[720px] mobile:mb-6">
Хотите использовать интерактивные тренажеры в обучении?
<br />
<span
className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]"
style={{
backgroundClip: 'text',
WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent',
}}
>
Давайте обсудим детали.
</span>
</Title>
<button className="bg-gradient-to-r from-[#798FFF] to-[#D375FF] rounded-[104px] py-4 px-6 flex font-semibold text-[#ffffff] justify-between desktop-figma:min-w-[23vw] desktop:max-desktop-figma:min-w-[368px] tablet:max-desktop:min-w-[332px] mobile:max-tablet:w-full items-center btn-text">
Оставить заявку <img src="src/assets/send.svg" alt="" />
</button>
</div>
<div className="min-w-[31.69vw] tablet:max-desktop:flex items-stretch justify-between gap-x-4">
<div className="desktop:min-w-[20.75vw] tablet:w-full">
<p className="text-[#ffffff] mb-4 l-text">Свяжитесь с нами</p>
<div className="flex flex-col gap-y-3 desktop:mb-20 mobile:max-tablet:mb-6">
<button className="text-[#ffffff] font-semibold py-4 px-6 flex items-center justify-between rounded-[104px] border border-[#3D425C] btn-text">
Написать
<img src="src/assets/mail.svg" alt="" />
</button>
<button className="text-[#ffffff] font-semibold py-4 px-6 flex items-center justify-between rounded-[104px] border border-[#3D425C] btn-text">
Позвонить
<img src="src/assets/phone.svg" alt="" />
</button>
</div>
</div>
<div className="flex flex-col gap-y-4 tablet:max-desktop:justify-between tablet-figma:max-desktop:min-w-[332px] tablet:max-tablet-figma:min-w-[250px]">
<p className="font-semibold text-[#ffffff] l-text">Социальные сети</p>
<div className="flex gap-x-2">
<button className="rounded-full p-4 border border-[#3D425C]">
<img src="src/assets/youtube.svg" alt="" />
</button>
<button className="rounded-full p-4 border border-[#3D425C]">
<img src="src/assets/vk.svg" alt="" />
</button>
<button className="rounded-full p-4 border border-[#3D425C]">
<img src="src/assets/tg.svg" alt="" />
</button>
</div>
</div>
</div>
</div>
);
}