import { useRef, useEffect } from "react";
import { gsap } from "gsap";

const ThirdSlide = () => {
  const firstImageRef = useRef(null);

  useEffect(() => {
    if (firstImageRef.current)
      gsap.fromTo(
        firstImageRef.current,
        {
          transform: "scale(1.15)",
        },
        { transform: "scale(1)", duration: 1.5 }
      );
  }, []);
  return (
    <div className="flex flex-col justify-center align-middle min-w-[100vw] max-w-[100vw] relative">
      <p className="font-bold text-8xl text-wrap text-white w-[1500px] mx-auto leading-[87px]">
        Комплексный подход к каждому
        <br /> проекту
      </p>
      <img
        className="w-[85%] absolute top-[-150%] left-[5%]"
        src="/images/slides/third-slide-1.svg"
        alt="image"
      />
      <img
        ref={firstImageRef}
        className="absolute top-[-100%] left-[-18%]"
        src="/images/slides/third-slide-2.svg"
        alt="image"
      />
      <p className="absolute text-white text-4xl w-[550px] top-[360%] left-[60%]">
        Анализируем потенциальную аудиторию и исходные данные. Разрабатываем
        решения от концепции до идеального проекта. Создаем и реализуем ваши
        самые смелые идеи и задумки.
      </p>
    </div>
  );
};

export default ThirdSlide;
