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

import AppearanceHr from '../../ui/AppearanceHr';
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 ContactsForm from './ContactsForm';

export function Contacts() {
  return (
    <div className="lg:py-[70px] lg:px-10 py-14 sm:px-6 px-4 lg:flex justify-between gap-x-4">
      <div>
        <div className="lg:flex gap-x-4">
          <div className="sm:max-lg:grid grid-cols-2 max-lg:mb-6">
            <h1 className="w-fit text-gradient lg:mb-6 max-sm:mb-4 2xl:text-[64px] xl:text-5xl text-[40px] leading-none">
              Свяжитесь
              <br />с нами
            </h1>
            <p className="2xl:text-xl lg:text-lg font-semibold leading-tight">
              Хотите использовать интерактивные тренажеры в обучении? <br />
              Давайте обсудим детали!
            </p>
          </div>
          <ContactsForm />
        </div>
        <div className="mt-[104px] relative">
          <div className="relative grid lg:grid-cols-4 gap-4">
            <div className="flex gap-4">
              <p className="2xl:text-xl font-gilroy font-semibold">
                Горячая линия
              </p>
              <AppearanceHr className="w-full" />
            </div>

            <div className="space-y-2 2xl:pr-4 xl:pr-2">
              <a
                href="mailto:info@graff.tech"
                className="2xl:h-16 h-14 px-6 py-4 2xl:text-base text-sm border rounded-full font-medium flex justify-between items-center w-full border-[#52587A] lg:opacity-80 lg:hover:opacity-100 transition-all"
              >
                <span>Написать</span>
                <MailIcon className="lg:w-8 lg:h-8 w-6 h-6" />
              </a>
              <a
                href="tel:88007700067"
                className="2xl:h-16 h-14 px-6 py-4 2xl:text-base text-sm border rounded-full font-medium flex justify-between items-center w-full border-[#52587A] lg:opacity-80 lg:hover:opacity-100 transition-all"
              >
                <span>Позвонить</span>
                <PhoneIcon className="lg:w-8 lg:h-8 w-6 h-6" />
              </a>
            </div>

            <div className="sm:col-span-2 flex sm:justify-end lg:mt-0 mt-10">
              <div className="lg:w-auto sm:w-1/2 w-full flex justify-between 2xl:gap-8 lg:gap-6 gap-4">
                <p className="2xl:text-xl font-gilroy font-semibold 2xl:-mt-1.5 -mt-1">
                  Социальные
                  <br />
                  сети
                </p>
                <div className="flex gap-2 h-fit">
                  <a
                    href="https://www.youtube.com/@GRAFFtech"
                    target="_blank"
                    className="group border border-[#3D425C] xl:p-4 p-3 rounded-full lg:hover:border-[#52587A] transition-all"
                  >
                    <YouTubeIcon className="2xl:w-8 2xl:h-8 w-6 h-6" />
                  </a>
                  <a
                    href="https://vk.com/graff.interactive"
                    target="_blank"
                    className="group border border-[#3D425C] xl:p-4 p-3 rounded-full lg:hover:border-[#52587A] transition-all"
                  >
                    <VKIcon className="2xl:w-8 2xl:h-8 w-6 h-6" />
                  </a>
                  <a
                    href="https://t.me/GRAFFinteractive"
                    target="_blank"
                    className="border rounded-full border-[#52587A] xl:p-4 p-3 opacity-80 lg:hover:opacity-100 transition-all"
                  >
                    <TelegramIcon className="2xl:w-8 2xl:h-8 w-6 h-6" />
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>{' '}
      {/* <div className="sm:max-lg:mb-20 mb-14">
        <Title className="desktop-figma:mb-[77px] lg:mb-[68px] desktop-figma:max-w-[899px] lg:max-w-[720px] mb-6">
          Хотите использовать интерактивные тренажеры в обучении?
          <br />
          <span
            className="text-gradient"
          >
            Давайте обсудим детали.
          </span>
        </Title>
        <button
          onClick={() => setModal(<ContactsForm />)}
          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] lg:max-desktop-figma:min-w-[368px] sm:max-lg:min-w-[332px] max-sm:w-full items-center btn-text"
        >
          Оставить заявку <img src="src/assets/send.svg" alt="" />
        </button>
      </div>
      <div className="min-w-[31.69vw] sm:max-lg:flex items-stretch justify-between gap-x-4">
        <div className="lg:min-w-[20.75vw] sm:w-full">
          <p className="text-[#ffffff] mb-4 l-text">Свяжитесь с нами</p>
          <div className="flex flex-col gap-y-3 lg:mb-20 max-sm:mb-6">
            <Link
              to={'mailto:info@graff.tech'}
              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="" />
            </Link>
            <Link
              to={'tel:+780077700067'}
              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="" />
            </Link>
          </div>
        </div>
        <div className="flex flex-col gap-y-4 sm:max-lg:justify-between md:max-lg:min-w-[332px] sm:max-md:min-w-[250px]">
          <p className="font-semibold text-[#ffffff] l-text">Социальные сети</p>
          <div className="flex gap-x-2">
            <Link
              to={'https://www.youtube.com/@GRAFFtech'}
              className="rounded-full p-4 border border-[#3D425C]"
            >
              <img src="src/assets/youtube.svg" alt="" />
            </Link>
            <Link
              to={'https://vk.com/graff.interactive'}
              className="rounded-full p-4 border border-[#3D425C]"
            >
              <img src="src/assets/vk.svg" alt="" />
            </Link>
            <Link
              to={'https://t.me/GRAFFinteractive'}
              className="rounded-full p-4 border border-[#3D425C]"
            >
              <img src="src/assets/tg.svg" alt="" />
            </Link>
          </div>
        </div> */}
      {/* </div> */}
    </div>
  );
}