Merge branch 'master' of https://github.com/rede-cidada/girls-code

src/Pages/Colaboradores/index.js

@@ -1,6 +1,8 @@
 import React, { useEffect, useState } from "react";
 import axios from "axios";
 
+import Grupes from "../../components/Grupes";
+
 import "./styles.css";
 
 const Profissoes = ['Dev. Front End', 'Dev. Full Stack', 'Dev. Back End', 'Analista de Sistemas', 'Engenheira de Software'];
@@ -12,7 +14,7 @@ const Colaboradores = () => {
   useEffect(() => {
     const getData = async () => {
       const dataResponse = await axios.get(
-        "https://randomuser.me/api/?results=10&gender=female"
+        "https://randomuser.me/api/?results=11&gender=female"
       );
 
       const data = await dataResponse.data.results;
@@ -49,14 +51,22 @@ const Colaboradores = () => {
               <div className="contatos">
                 <p className="mail">{item.email}</p>
                 <p>{item.phone}</p>
-                <button>contato</button>
+
               </div>
             </div>
           ))}
         </div>
 
+        <div className="register-box">
+          <h3>Quer </h3>
+        </div>
+
       </div>
+      < Grupes />
     </div>
+
+
+
   );
 };
 

src/Pages/Colaboradores/styles.css

@@ -10,9 +10,7 @@
   }
 
 
-  .container {
-    background: #a3679a;
-
+  .container {  
     width: 90%;
 
     display: flex;
@@ -34,6 +32,8 @@
   .colaboradores-text h1 {
     font-size: 2.6rem;
     color: #a3679a;
+
+    font-weight: bolder;
   }
 
   .colaboradores-text p {
@@ -65,6 +65,10 @@
 
     border-radius: 5px;
     /* border: 3px solid green; */
+
+    -webkit-box-shadow: 3px 5px 5px 0px rgba(156,148,156,1);
+    -moz-box-shadow: 3px 5px 5px 0px rgba(156,148,156,1);
+    box-shadow: 3px 5px 5px 0px rgba(156,148,156,1);
   }
 
   .info-colaboradores {
@@ -111,17 +115,28 @@
 
   }
 
-  button {
-    width: 6rem;
-    padding: 2px;
-    margin: 5px;
-    font-weight: 600;
-
-    background-color: #ff907d;
-    color: #fff;
-    cursor: pointer;
-
-    border-radius: 10px;
-    border: transparent;
-  }
 
+  @media (min-width: 900px) {
+
+    .colaboradores-text h1 {
+      font-size: 3rem;
+
+    }
+
+    .colaboradores-text p {
+      font-size: 1.2rem;
+
+    }
+
+    .card {
+      width: 17rem;
+      height: 19rem;
+      margin: 30px;
+    }
+
+    .contatos p {
+      font-size: 1rem;
+
+    }
+
+  }

src/components/Grupes/index.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import './styles.css';
+
+const Grupes = () => {
+    return (
+        <div>
+            <div className="grupe-container">
+
+               <section className="grupe-text">
+
+                <h2>Participe dos nossos grupos de estudos!</h2>
+                <p>Esses grupos foram pensados para aquelas mulheres que não conseguiram entrar em nenhum curso. Nele você terá contato com outras mulheres, com até história e rotina semelhantes.</p>
+                <p className="rotine-info"> <span>ah!</span> Os grupos são pensados seguindo a flexibilidade da sua rotina de estudos: se você tem pouco tempo para estudar ou um horário mais flexivél.</p>
+
+               </section>
+
+               <div className="btn-grupes">
+                   <section className="first-btn-grupes">
+                    <p>Grupo para quem tem de 30 á 40 minutos livres para estudo.</p>
+                    <button className="less-time">Vamos lá!</button>
+
+                   </section>
+
+                   <section className="second-btn-grupes">
+                    <p>Grupo para quem tem de 60 minutos á 1 hora e meia para estudo.</p>
+                    <button className="more-time">Bora!</button>
+
+                   </section>
+
+
+
+               </div>
+
+            </div>
+        </div>
+    )
+}
+
+export default Grupes;

src/components/Grupes/styles.css

@@ -0,0 +1,102 @@
+.grupe-container {
+    width: 100%;
+    background-color: #FFC864;
+    padding: 10px;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+
+.grupe-text {
+    width: 90%;
+}
+
+.grupe-text h2 {
+    font-size: 1.6rem;
+    margin: 25px auto 25px auto;
+}
+
+.grupe-text p {
+    font-size: 1.2rem;
+    line-height: 1.4;
+
+    margin: 10px auto 25px auto;
+}
+
+.rotine-info span {
+    text-transform: uppercase;
+
+}
+
+.rotine-info {
+    font-weight: bold;
+    color: #1A3059;
+
+}
+.btn-grupes {
+    display: flex;
+    flex-direction: column;
+
+    align-items: center;
+    justify-content: center;
+}
+
+.first-btn-grupes,
+.second-btn-grupes {
+
+
+    margin: 10px 5px 13px 5px;
+}
+
+.btn-grupes button {
+
+    width: 10rem;
+    height: 2.2rem;
+    border-radius: 25px;
+
+    margin: 15px auto;
+
+    background-color: #24285b;
+    border: transparent;
+    color: #ff907d;
+
+    font-size: 1.2rem;
+    font-weight: bolder;
+
+}
+
+.btn-grupes p {
+    font-size: 1.2rem;
+    font-weight: bold;
+}
+
+.btn-grupes button:hover {
+    cursor: pointer;
+    opacity: 0.8;
+}
+
+@media (min-width: 900px) {
+    .grupe-container {
+
+        flex-direction: row;
+
+    }
+
+    .grupe-text {
+
+        width: 50%;
+
+        margin: 15px 25px 15px auto;
+    }
+
+    .btn-grupes {
+        width: 50%;
+    }
+
+    .grupe-text h2 {
+        font-size: 2rem;
+    }
+
+}

src/components/InternetPage/index.js

@@ -1,8 +1,6 @@
 import React from "react";
 import "./styles.css";
 
-import InternetFigure from "../../assets/internet_figure.svg";
-
 const InternetPage = () => {
   return (
     <div className="internet-area">