Add secao 1 e 80% da secao 2 1/4

src/Pages/HelpCenter.js

@@ -18,13 +18,214 @@ along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>
 
 import React, { Component, useState, useEffect } from 'react';
 import styled from 'styled-components';
+import Grid from '@material-ui/core/Grid';
+
+
+
+import Banner3 from '../img/ajuda/Banner3.png';
+import EncontrandoRecurso from '../img/ajuda/Encontrando_recursos.png';
+import GerenciandoConta from '../img/ajuda/Gerenciando_a_conta.png';
+import ParticipandoRede from '../img/ajuda/Participando_da_rede.png';
+import PublicandoRecursos from '../img/ajuda/Publicando_recursos.png';
+
+const Secao1 = styled.div`
+  height: 374px;
+  background-color:#00bcd4;
+  text-align: center;
+  .container {
+    height: 100%;
+    width: 1170px;
+    display: flex;
+    -webkit-box-pack: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    align-items: center;
+    padding-right: 15px;
+    padding-left: 15px;
+    margin-right: auto;
+    margin-left: auto;
+
+    img {
+      position: absolute;
+      left: 364px;
+      top: 36.5%;
+      width: 230px;
+      float: left;
+      min-height: 1px;
+      padding-right: 15px;
+      padding-left: 15px;
+
+    }
+
+
+    .conteudo {
+      display: flex;
+      justify-content: center;
+
+      .title {
+
+      }
+    }
+
+    h2 {
+      font-family: Pompiere,cursive;
+      font-size: 35px;
+      margin: 0;
+      margin-top: 45px;
+      color:#fff;
+      font-weight: 500;
+      line-height: 1.1;
+    }
+
+  }
+`
+
+const Secao2 = styled.div`
+  height: 536px;
+  background-color:#f4f4f4;
+  text-align: center;
+  margin-bottom: 20px;
+
+  .container {
+    height: 100%;
+    width: 1170px;
+    margin-right: auto;
+    margin-left: auto;
+
+    .container-secao {
+      height: 100%;
+      padding-top: 50px;
+      .conteudo {
+        width: 100%;
+        text-align: center;
+        .cabecalho {
+          margin-bottom: 50px;
+          text-align: center;
+          h2 {
+            font-size: 30px;
+            font-weight: lighter;
+            color:#666;
+            margin: 0;
+          }
+        }
+        .card {
+          height: 280px;
+          padding: 40px 15px;
+          text-align: center;
+          font-size: 14px;
+          background-color:#fff;
+          box-shadow: 0 1px 3px
+          rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+          margin-bottom: 20px;
+
+          img {
+            height: 62px ;
+            width: 62px ;
+          }
+
+        }
+      }
+    }
+  }
+
+
+`
+
+const Secao3 = styled.div`
+  height: 375px;
+`
+
+const Secao4 = styled.div`
+  height: 290px;
+`
+
 
 
 
 function HelpCenter(props) {
   return(
     <>
-      <h1>Agora to manjando?</h1>
+      <link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:300,400&display=swap" rel="stylesheet"/>
+      <Secao1>
+        <div className= "container">
+          <img src={Banner3} alt="banner3"/>
+          <div className= "conteudo">
+            <div className= "title">
+              <h2>OLÁ! COMO PODEMOS AJUDAR?</h2>
+            </div>
+          </div>
+        </div>
+      </Secao1>
+
+      <Secao2>
+        <div className="container">
+          <div className="container-secao">
+            <div className="conteudo">
+              <div className="cabecalho">
+                <h2>Tópicos de Ajuda</h2>
+              </div>
+              <div>
+                <Grid container spacing={3}>
+                  <Grid item xs={3}>
+                    <div className="card">
+                      <img src={PublicandoRecursos} alt="" />
+                      <h3>Professores</h3>
+                      <p>
+                        Encontre recursos digitais que se encaixem aos objetivos
+                        das suas aulas! Aproveite para seguir outros professores,
+                        coleções e conhecer experiências de uso!
+                      </p>
+                    </div>
+                  </Grid>
+                  <Grid item xs={3}>
+                    <div className="card">
+                      <img src={EncontrandoRecurso} alt="" />
+                      <h3>Alunos</h3>
+                      <p>
+                        Você pode complementar os seus estudos com recursos
+                        digitais que lhe interessem. Gostou de algum recurso?
+                        Recomende ao seu professor ou professora.
+                      </p>
+                    </div>
+                  </Grid>
+                  <Grid item xs={3}>
+                    <div className="card">
+                      <img src={ParticipandoRede} alt="" />
+                      <h3>Gestores</h3>
+                      <p>
+                        Desenvolva junto com o coletivo da escola ações e projetos
+                        pedagógicos com recursos digitais importantes para o seu contexto.
+                      </p>
+                    </div>
+                  </Grid>
+                  <Grid item xs={3}>
+                    <div className="card">
+                      <img src={GerenciandoConta} alt="" />
+                      <h3>Comunidade Escolar</h3>
+                      <p>
+                        Encontre recursos digitais e materiais de formação que
+                        contribuam para a aprendizagem e práticas educativas na
+                        sua comunidade escolar.
+                      </p>
+                    </div>
+                  </Grid>
+                </Grid>
+              </div>
+
+            </div>
+          </div>
+        </div>
+
+      </Secao2>
+
+      <Secao3>
+
+      </Secao3>
+
+      <Secao4>
+
+      </Secao4>
+
     </>
   );
 }