/**
 * @fileoverview React component for ForWhom.jsx
 * 
 * @module pages.HomePage.ForWhom
 */

import FirstPersonImage from "./assets/first-person.png";
import SecondPersonImage from "./assets/second-person.png";
import ThirdPersonImage from "./assets/third-person.png";
import SectionTitle from "./SectionTitle";

const ForWhom = () => {
  return (
    <div className=" bg-brand-300 py-10 lg:py-[72px] px-10 lg:px-[120px]">
      <SectionTitle title="Para quem?" squaresColor="brand-400" />
      <div className="flex flex-col lg:flex-row mt-8 items-center justify-center">
        <div className="w-full lg:w-1/3 px-4">
          <img
            src={FirstPersonImage}
            alt="Imagem de um jovem negro com mochila, segurando papéis e olhando para o lado"
          />
          <h4 className="text-[24px] font-bold text-center">
            Estudantes iniciantes
          </h4>
          <p className="text-[18px] text-center">
            Aprender a lógica da programação da base com programação com códigos
          </p>
        </div>
        <div className="w-full lg:w-1/3 px-4">
          <img
            src={SecondPersonImage}
            alt="Imagem de uma jovem branca com mochila, segurando um fichário, olhando para frente e sorrindo"
          />
          <h4 className="text-[24px] font-bold text-center">
            Estudantes avançados
          </h4>
          <p className="text-[18px] text-center">
            Conseguem prototipar seus primeiros apps já com código.
          </p>
        </div>
        <div className="w-full lg:w-1/3 px-4">
          <img
            src={ThirdPersonImage}
            alt="Imagem de um jovem negro conversando com uma jovem branca apontando para um celular em suas mãos"
          />
          <h4 className="text-[24px] font-bold text-center">Educadores</h4>
          <p className="text-[18px] text-center">
            Materiais para desenvolver suas aulas de programação
          </p>
        </div>
      </div>
    </div>
  );
};

export default ForWhom;
