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

import { Link } from "react-router-dom";
import GroupImage from "./assets/group.png";
import SectionTitle from "./SectionTitle";
const About = () => {
  return (
    <div id="about-section" className=" py-10 lg:pt-[72px] px-10 lg:px-[120px]">
      <SectionTitle title="Quem somos?" squaresColor="green-100" />
      <div className="flex lg:flex-row flex-col mt-8">
        <div className="lg:w-[40%] w-full">
          <img
            src={GroupImage}
            alt="Imagem com um grupo de pessoas na frente de computadores em reunião"
          />
        </div>
        <div className="w-full lg:w-[60%] -mt-20 lg:mt-0">
          <h2 className="text-[32px] font-bold font-title">
            <span className="text-brand-500">DECODA</span> é a plataforma do
            NT-MTST que facilita o processo de educação popular em programação
          </h2>
          <p className="text-[18px] mt-5">
            Voltada tanto para alunos, quanto para professores com interesse em
            aprender e ensinar programação. Inspirada na pedagogia freiriana,
            tem como origem ser material de apoio as aulas correntes do <b>Núcleo
            de Tecnologia do MTST</b>.<br /><br />Desde 2020, o <b>Núcleo de Tecnologia do
            MTST</b> promove mutirões e formações nas periferias, ensinando
            programação, inclusão digital e acesso a direitos.
          </p>
          <div className="w-full mt-5 flex flex-col-reverse lg:flex-row gap-5">
            <a href="https://www.nucleodetecnologia.com.br" target="_blank" rel="noopener noreferrer">
              <button className="w-full lg:w-auto bg-white border-2 border-brand-500 text-brand-500 py-4 px-6 rounded-[16px] text-[20px] font-bold hover:scale-110">
                Sobre o NT-MTST
              </button>
            </a>
            <Link to="/sobre">
              <button className="w-full lg:w-auto bg-brand-500 text-white py-4 px-10 rounded-[16px] text-[20px] font-bold hover:scale-110">
                Quem somos
              </button>
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
};

export default About;
