graff.estate-nextjs/src/components/Stream/Stream.tsx

/* eslint-disable @next/next/no-img-element */
import Button from "../Button";
import Heading2 from "../Headings/Heading2";
import StreamButton from "./StreamButton";

const Stream = () => {
  return (
    <div className="relative 2xl:mb-[200px] sm:mb-[120px] mb-20">
      <div className="grid sm:grid-cols-2 sm:gap-4 gap-6 2xl:mb-16 xl:mb-10 sm:mb-12 mb-8">
        <div className="flex flex-col gap-8 justify-between">
          <Heading2>
            Graff.estate stream —
            <br />
            <span className="text-gradient-none">
              удаленная
              <br />
              демонстрация
              <br />
              жилого комплекса
            </span>
          </Heading2>
          <a
            href="https://stream.graff.tech"
            target="_blank"
            className="w-fit sm:inline-block hidden"
          >
            <Button>Узнать больше</Button>
          </a>
        </div>
        <div className="flex flex-col xl:gap-16 gap-6">
          <div className="grid xl:grid-cols-2 xl:gap-4 gap-2">
            <p className="2xl:text-base text-sm">
              Высокий уровень графики и полное погружение покупателя в процесс
              выбора квартиры
            </p>
            <p className="2xl:text-base text-sm">
              Местоположение и устройство значения не имеют. Нужен только
              интернет
            </p>
          </div>
          <div className="xl:grid grid-cols-2 gap-4">
            <img src="/images/Datamining.jpg" alt="" className="w-full" />
          </div>
          <a
            href="https://stream.graff.tech"
            target="_blank"
            className="w-fit sm:hidden inline-block"
          >
            <Button>Узнать больше</Button>
          </a>
        </div>
      </div>

      <div className="border-t border-[#3D425C]">
        <StreamButton
          icon="/icons/Revolution.svg"
          title="МФК «Re:volution towers»"
          location="Россия, Екатеринбург"
          background="/images/stream/nks.jpg"
          link="https://stream.graff.tech/?build=nksJukovaDev&location=a1"
        />
        <StreamButton
          icon="/icons/Residence.svg"
          title="ЖК «Life Резиденция»"
          location="Россия, Тюмень"
          background="/images/stream/liferes.jpg"
          link="https://stream.graff.tech/?build=lifeResidence&location=a1"
        />
        <StreamButton
          icon="/icons/Aivaz.svg"
          title="ЖК «Айвазовский City»"
          location="Россия, Тюмень"
          background="/images/stream/aivaz.jpg"
          link="https://stream.graff.tech/?build=IvazowskyDev&location=a1"
        />
      </div>

      <div className="absolute -top-36 left-0 -z-10 blur-[20px]">
        <img src="/images/blendings/3.svg" alt="" />
      </div>
    </div>
  );
};

export default Stream;