[CAE-90] Criado ConhecaFrentes

src/components/ConhecaFrentes/index.jsx

@@ -0,0 +1,61 @@
+import './styles.css';
+import boycoding from '../../assets/imagem-azul-desenvolvimento.png';
+import girl from '../../assets/imagem-verde-dados.png';
+import telefone from '../../assets/imagem-vermelho-comunicacao.png';
+
+export default function ConhecaFrentes() {
+  return (
+    <div className="conhecaFrentes">
+      <div className="textoPrincipal_bluebox">
+        <div className="texto">
+          <h2 className="tituloPrincipal">
+            Conheça as frentes <br />
+            do Caronaê
+          </h2>
+          <p>
+            Os membros do projeto de extensão Caronaê atuam em três
+            frentes principais: desenvolvimento, comunicação e dados.
+            Conheça elas ao lado.
+          </p>
+        </div>
+        <div className="caixaAzul">
+          <div className="textoAzul">
+            <h2>Desenvolvimento</h2>
+            <p>
+              A equipe de desenvolvimento trabalha para garantir um
+              aplicativo de qualidade e com uma experiência de
+              usuário agradável.
+            </p>
+          </div>
+          <img src={boycoding} alt="boy coding" />
+        </div>
+      </div>
+      <div className="redBox_greenBox">
+        <div className="redBox">
+          <div className="textoVermelho">
+            <h2>Comunicação</h2>
+            <p>
+              Já a equipe de comunicação se dedica a disseminar
+              informações sobre o projeto e conscientizar a população
+              sobre a importância das caronas para a
+              sustentabilidade.
+            </p>
+          </div>
+          <img src={telefone} alt="Telefone" />
+        </div>
+
+        <div className="greenBox">
+          <div className="textoVerde">
+            <h2>Dados</h2>
+            <p>
+              Por fim, a equipe de dados é responsável por coletar e
+              analisar informações relevantes para aprimorar o
+              projeto e torná-lo cada vez mais eficiente.
+            </p>
+          </div>
+          <img src={girl} alt="Girl" className="fotoVerde" />
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/ConhecaFrentes/styles.css

@@ -0,0 +1,136 @@
+@import url('https://fonts.googleapis.com/css2?family=Lato&family=Poppins:wght@600&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
+
+
+.conhecaFrentes{
+    width: 1159px;
+    height: 532px;
+    justify-content: center;
+    position: relative;
+    margin: 0 auto;
+
+}
+
+.tituloPrincipal{
+    font-family: 'Poppins', sans-serif;
+    font-weight: 600;
+    font-style: normal;
+}
+
+.texto{
+    margin-right: 30px;
+    width: 380px;
+    height: 194px;
+}
+
+.textoPrincipal_bluebox{
+    width: 1157px;
+    height: 250px;
+    display: flex;
+}
+
+.textoPrincipal > p {
+    font-family: 'Lato', sans-serif;
+    font-weight: 400;
+    font-style: normal
+}
+
+.caixaAzul{
+    display: flex;
+    width: 749px;
+    height: 250px;
+    background-color:#2B388A ;
+    border-radius: 25px;
+}
+
+.textoAzul{
+    width: 358px;
+    height: 250px;
+    margin-top: 40px;
+    margin-left: 26px;
+}
+
+.textoAzul > p{
+    color:white;
+    font-family: 'Lato', sans-serif;
+    font-weight: 400;
+    font-style: normal
+}
+
+.textoAzul > h2{
+    color: white;
+    font-family: 'Poppins', sans-serif;
+    font-weight: 600;
+    font-style: normal;
+
+}
+
+.redBox_greenBox{
+    width: 1159px;
+    height: 250px;
+    display: flex;
+    margin-top: 32px;
+}
+
+.redBox{
+    width: 663px;
+    height: 250px;
+    background-color: #EB3D38;
+    border-radius: 25px;
+    display: flex;
+}
+
+.textoVermelho{
+    width: 310px;
+    height: 200px;
+    margin-top: 40px;
+    margin-left: 26px;
+}
+.textoVermelho > h2{
+    color: white;
+    font-family: 'Poppins', sans-serif;
+    font-weight: 600;
+    font-style: normal;
+}
+
+.textoVermelho> p{
+    color:white;
+    font-family: 'Lato', sans-serif;
+    font-weight: 400;
+    font-style: normal
+}
+
+.greenBox{
+    width: 465px;
+    height: 250px;
+    margin-left: 30px;
+    background-color: #17B270;
+    border-radius: 25px;
+    display: flex;
+}
+
+.textoVerde{
+    width: 233px;
+    height: 151px;
+    margin-top: 40px;
+    margin-left: 26px;
+
+}
+
+.textoVerde > h2{
+    color: white;
+    font-family: 'Poppins', sans-serif;
+    font-weight: 600;
+    font-style: normal;
+}
+
+.textoVerde > p{
+    color:white;
+    font-family: 'Lato', sans-serif;
+    font-weight: 400;
+    font-style: normal
+}
+
+.fotoVerde{
+    border-bottom-right-radius: 25px;
+}

src/pages/About/index.jsx

@@ -1,3 +1,4 @@
+import ConhecaFrentes from '../../components/ConhecaFrentes';
 import ConhecaProjeto from '../../components/ConhecaProjeto';
 import EquipeCaronae from '../../components/EquipeCaronae';
 import Footer from '../../components/Footer';
@@ -11,6 +12,7 @@ const About = () => {
       <Navbar />
       <ConhecaProjeto/>
       <RazaoTudo />
+      <ConhecaFrentes/>
       <SeInteressouPeloProjeto/>
       <EquipeCaronae/>
       <Footer/>;