diff --git a/src/Pages/HelpCenter.js b/src/Pages/HelpCenter.js
index d5f6b89f0973976346cd208a7eb46d741a2f6fc6..00568618fa84829306a66df96baf531d1b07ffb3 100644
--- a/src/Pages/HelpCenter.js
+++ b/src/Pages/HelpCenter.js
@@ -108,19 +108,81 @@ const Secao2 = styled.div`
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 ;
+ .card-ajuda {
+
+ height: 360px;
+ margin-bottom: 20px
+
+
+ .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);
+
+ h3 {
+ font-size: 24px;
+ font-weight: 400;
+ color: #666;
+ margin-top: 20px;
+ margin-bottom: 10px;
+ line-height: 1.1;
+ }
+
+ hr {
+ margin-top: 20px;
+ margin-bottom: 20px;
+ border: 0;
+ border-top: 1px solid #eee;
+ color: #a5a5a5;
+ }
+
+ a {
+ font-size: 15px;
+ color: #666;
+ text-decoration: none;
+ text-align: center;
+
+ }
+
+ img {
+ height: 62px ;
+ width: 62px ;
+ }
+
+ }
+
+ .card-rodape {
+ box-sizing: border-box;
+
+ a {
+ border-radius: 0;
+ width: 240.5px;
+ font-size: 13px;
+ font-weight: 700;
+ color: #fff;
+ transition: .2s ease;
+ border: none;
+ height: 40px;
+ padding: 0 20px;
+ line-height: 40px;
+ background-color: #00bcd4;
+ touch-action: manipulation;
+ cursor: pointer;
+ text-decoration: none;
+ display: inline-block;
+ margin-bottom: 0;
+ text-align: center;
+ white-space: nowrap;
+ vertical-align: middle;
+ touch-action: manipulation;
+ cursor: pointer;
+ user-select: none;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+
+ }
}
}
@@ -133,10 +195,118 @@ const Secao2 = styled.div`
const Secao3 = styled.div`
height: 375px;
+ padding: 0;
+ text-align: center;
+ background-color: #fff;
+ width: 1170px;
+ margin-inline: auto;
+ color: rgba(0,0,0,0.87);
+
+ .links {
+ font-size: 15px;
+ font-weight: lighter;
+ text-align: center;
+ margin: 0 0 10px;
+ line-height: 1.42857143;
+ }
+
+ .titulo-sobre-ajuda {
+ font-family: Pompiere;
+ font-size: 30px;
+ margin-block: 40px
+ }
+
+ .conteudo-sobre-ajuda {
+ font-size: 15px;
+ margin-bottom: 30px;
+ margin: 0 0 10px;
+ }
+
+ hr {
+ width: 350px;
+ border: 0;
+ border-top: 1px solid #ccc;
+ margin-top: 20px;
+ margin-bottom: 20px;
+
+ }
+
+
+
`
const Secao4 = styled.div`
height: 290px;
+
+ .container {
+ height: 100%;
+ color: #a5a5a5;
+ width: 1170px;
+ margin-inline: auto;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ .conteudo {
+ width: 100%;
+ text-align: center;
+
+ h2 {
+ font-size: 24px;
+ font-weight: lighter;
+ color:#666;
+ margin-top: 20px;
+ margin-bottom: 10px;
+ text-align: center;
+ }
+
+ span {
+ font-size: 15px;
+ color:#777;
+ text-align: center;
+
+ }
+
+ button {
+ margin-top: 25px;
+ color: rgba(255,255,255,0.87);
+ background-color: rgb(255,127,0);
+ box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
+ outline: none;display: inline-block;
+ position: relative;
+ cursor: pointer;
+ min-height: 36px;
+ min-width: 88px;
+ line-height: 36px;
+ vertical-align: middle;
+ -webkit-box-align: center;
+ align-items: center;
+ text-align: center;
+ border-radius: 3px;
+ box-sizing: border-box;
+ user-select: none;
+ border: 0;
+ padding: 0 6px;
+ margin: 6px 8px;
+ white-space: nowrap;
+ text-transform: uppercase;
+ font-weight: 500;
+ font-size: 14px;
+ font-style: inherit;
+ font-variant: inherit;
+ font-family: inherit;
+ text-decoration: none;
+ overflow: hidden;
+ transition: box-shadow .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1);
+ letter-spacing: .01em;
+ a {
+ text-decoration: none;
+ color: #fff;
+ }
+ }
+ }
+ }
+
+
`
@@ -144,8 +314,9 @@ 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"/>
@@ -165,53 +336,84 @@ function HelpCenter(props) {
<h2>Tópicos de Ajuda</h2>
</div>
<div>
- <Grid container spacing={3}>
+ <Grid container spacing={2}>
<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 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">
- <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 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">
- <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 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">
- <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 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>
@@ -219,14 +421,58 @@ function HelpCenter(props) {
</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>
);
}