diff --git a/src/Pages/HelpCenter.js b/src/Pages/HelpCenter.js
index 00568618fa84829306a66df96baf531d1b07ffb3..06a14488242452e7c52f2401373aa286cf6c6ef0 100644
--- a/src/Pages/HelpCenter.js
+++ b/src/Pages/HelpCenter.js
@@ -19,14 +19,129 @@ 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 { Link } from 'react-router-dom';
+
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';
+import CardPublicando from '../Components/HelpCenter/Cards/CardPublicando';
+import CardEncontrando from '../Components/HelpCenter/Cards/CardEncontrando';
+import CardParticipando from '../Components/HelpCenter/Cards/CardParticipando';
+import CardGerenciando from '../Components/HelpCenter/Cards/CardGerenciando';
+
+
+
+
+function HelpCenter(props) {
+ return(
+ <div style={{backgroundColor: "#f4f4f4"}}>
+ <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={2}>
+ <Grid item xs={3}>
+ <CardPublicando/>
+ </Grid>
+ <Grid item xs={3}>
+ <CardEncontrando/>
+ </Grid>
+ <Grid item xs={3}>
+ <CardParticipando/>
+ </Grid>
+ <Grid item xs={3}>
+ <CardGerenciando/>
+ </Grid>
+ </Grid>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ </Secao2>
+
+ <Secao3>
+ <Grid style={{height:"100%"}} container spacing={2}>
+ <Grid style={{backgroundColor: "#333",paddingInline:"0" }} item xs={6}>
+ <iframe src="https://player.vimeo.com/video/231609051" width="100%" height="100%" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
+ </Grid>
+ <Grid item xs={6}>
+ <p className="titulo-sobre-ajuda">Plataforma MEC de Recursos Educacionais Digitais</p>
+ <p className="conteudo-sobre-ajuda">
+ Construa conosco a plataforma e amplie sua rede de conhecimento<br/>
+ interagindo com pessoas envolvidas com experiências que ocorrem<br/>
+ em todo o Brasil!
+ </p>
+ <hr/>
+ <Grid container spacing={1}>
+ <Grid item xs={6}>
+ <p className="links">
+ <br/>
+ <Link to={{
+ pathname : 'plataforma-mec',
+ state : {value : '0'}
+ }}>O que é a Plataforma MEC</Link>
+ <br/>
+ <a>Como foi construida a Plataforma<br/>MEC?</a>
+ <br/>
+ <a>Quais são os Portais Parceiros?</a>
+ </p>
+ </Grid>
+ <Grid item xs={6}>
+ <p className="links">
+ <br/>
+ <Link to={{
+ pathname : 'plataforma-mec',
+ state : {value : '2'}
+ }}>Entendendo as 3 áreas</Link>
+ <br/>
+ <a>Tipos de recursos</a>
+ <br/>
+ <a>Softwares especÃficos</a>
+ </p>
+ </Grid>
+ </Grid>
+
+ </Grid>
+ </Grid>
+ </Secao3>
+
+ <Secao4>
+ <div className="container">
+ <div className="conteudo">
+ <h2>Não encontrou o que você precisa?</h2>
+ <span>Entre em contato com a nossa Central de Ajuda</span>
+ <br/>
+ <button><a href="contato">ENTRAR EM CONTATO</a></button>
+
+ </div>
+ </div>
+ </Secao4>
+
+ </div>
+ );
+}
+
+export default HelpCenter;
+
const Secao1 = styled.div`
height: 374px;
@@ -48,7 +163,7 @@ const Secao1 = styled.div`
img {
position: absolute;
left: 364px;
- top: 36.5%;
+ top: 36.9%;
width: 230px;
float: left;
min-height: 1px;
@@ -208,6 +323,13 @@ const Secao3 = styled.div`
text-align: center;
margin: 0 0 10px;
line-height: 1.42857143;
+ a {
+ color: #666;
+ text-decoration: none;
+ :hover {
+ color: #000;
+ }
+ }
}
.titulo-sobre-ajuda {
@@ -308,172 +430,3 @@ const Secao4 = styled.div`
`
-
-
-
-
-function HelpCenter(props) {
- return(
- <div style={{backgroundColor: "#f4f4f4"}}>
- <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={2}>
- <Grid item xs={3}>
- <div className="card-ajuda">
- <div className="card">
- <img src={PublicandoRecursos} alt="" />
- <h3>Publicando Recursos</h3>
- <hr/>
- <a>Por que enviar um recurso?</a>
- <br/>
- <a>Como publicar um recurso?</a>
- <br/>
- <a>Quais tipos de recurso e formatos a plataforma aceita?</a>
- <br/>
- </div>
- <div className="card-rodape">
- <a>VER MAIS</a>
- </div>
- </div>
- </Grid>
- <Grid item xs={3}>
- <div className="card-ajuda">
- <div className="card">
- <img src={EncontrandoRecurso} alt="" />
- <h3>Encontrando Recursos</h3>
- <hr/>
- <a>Como fazer uma busca?</a>
- <br/>
-
- <a>Como filtrar os resultados?</a>
- <br/>
- <a>Como os recursos são ranqueados?</a>
- <br/>
- </div>
- <div className="card-rodape">
- <a>VER MAIS</a>
- </div>
- </div>
- </Grid>
- <Grid item xs={3}>
- <div className="card-ajuda">
- <div className="card">
- <img src={ParticipandoRede} alt="" />
- <h3>Participando da Rede</h3>
- <hr/>
- <a>Comentanto os recursos</a>
- <br/>
- <a>Como relatar uma experiência ou avaliar um recurso?</a>
- <br/>
- </div>
- <div className="card-rodape">
- <a>VER MAIS</a>
- </div>
- </div>
- </Grid>
- <Grid item xs={3}>
- <div className="card-ajuda">
- <div className="card">
- <img src={GerenciandoConta} alt="" />
- <h3>Gerenciando a Conta</h3>
- <hr/>
- <a>Por que me cadastrar?</a>
- <br/>
- <a>Como fazer meu cadastro?</a>
- <br/>
- <a>Como alterar minha senha?</a>
- <br/>
- <a>Como acessar a conta?</a>
- <br/>
- <a>Esqueci minha senha. O que fazer?</a>
- <br/>
- </div>
- <div className="card-rodape">
- <a>VER MAIS</a>
- </div>
- </div>
- </Grid>
- </Grid>
- </div>
- </div>
- </div>
- </div>
-
- </Secao2>
-
- <Secao3>
- <Grid style={{height:"100%"}} container spacing={2}>
- <Grid style={{backgroundColor: "#333",paddingInline:"0" }} item xs={6}>
- <iframe src="https://player.vimeo.com/video/231609051" width="100%" height="100%" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
- </Grid>
- <Grid item xs={6}>
- <p className="titulo-sobre-ajuda">Plataforma MEC de Recursos Educacionais Digitais</p>
- <p className="conteudo-sobre-ajuda">
- Construa conosco a plataforma e amplie sua rede de conhecimento<br/>
- interagindo com pessoas envolvidas com experiências que ocorrem<br/>
- em todo o Brasil!
- </p>
- <hr/>
- <Grid container spacing={1}>
- <Grid item xs={6}>
- <p className="links">
- <br/>
- <a>O que é a Plataforma MEC</a>
- <br/>
- <a>Como foi construida a Plataforma<br/>MEC?</a>
- <br/>
- <a>Quais são os Portais Parceiros?</a>
- </p>
- </Grid>
- <Grid item xs={6}>
- <p className="links">
- <br/>
- <a>Entendendo as 3 áreas</a>
- <br/>
- <a>Tipos de recursos</a>
- <br/>
- <a>Softwares especÃficos</a>
- </p>
- </Grid>
- </Grid>
-
- </Grid>
- </Grid>
- </Secao3>
-
- <Secao4>
- <div className="container">
- <div className="conteudo">
- <h2>Não encontrou o que você precisa?</h2>
- <span>Entre em contato com a nossa Central de Ajuda</span>
- <br/>
- <button><a href="contato">ENTRAR EM CONTATO</a></button>
-
- </div>
- </div>
- </Secao4>
-
- </div>
- );
-}
-
-export default HelpCenter;