Skip to content
Snippets Groups Projects
Commit 39f54f2e authored by mrp19's avatar mrp19
Browse files

Finish página de central de ajuda

parent bfb3a906
No related branches found
No related tags found
3 merge requests!57Merge of develop into master,!56Fixed buttons reportar, seguir, compartilhar, guardar and entrar (in comments...,!15Resolve "Criar telas da central de ajuda"
Hide whitespace changes
Inline Side-by-side
src/Pages/HelpCenter.js
+ 295
− 49
View file @ 39f54f2e
...@@ -108,19 +108,81 @@ const Secao2 = styled.div` ...@@ -108,19 +108,81 @@ const Secao2 = styled.div`
margin: 0; margin: 0;
} }
} }
.card { .card-ajuda {
height: 280px;
padding: 40px 15px; height: 360px;
text-align: center; margin-bottom: 20px
font-size: 14px;
background-color:#fff;
box-shadow: 0 1px 3px .card {
rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24); height: 280px;
margin-bottom: 20px; padding: 40px 15px;
text-align: center;
img { font-size: 14px;
height: 62px ; background-color:#fff;
width: 62px ; 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` ...@@ -133,10 +195,118 @@ const Secao2 = styled.div`
const Secao3 = styled.div` const Secao3 = styled.div`
height: 375px; 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` const Secao4 = styled.div`
height: 290px; 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` ...@@ -144,8 +314,9 @@ const Secao4 = styled.div`
function HelpCenter(props) { function HelpCenter(props) {
return( return(
<> <div style={{backgroundColor: "#f4f4f4"}}>
<link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:300,400&display=swap" rel="stylesheet"/> <link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:300,400&display=swap" rel="stylesheet"/>
<Secao1> <Secao1>
<div className= "container"> <div className= "container">
<img src={Banner3} alt="banner3"/> <img src={Banner3} alt="banner3"/>
...@@ -165,53 +336,84 @@ function HelpCenter(props) { ...@@ -165,53 +336,84 @@ function HelpCenter(props) {
<h2>Tópicos de Ajuda</h2> <h2>Tópicos de Ajuda</h2>
</div> </div>
<div> <div>
<Grid container spacing={3}> <Grid container spacing={2}>
<Grid item xs={3}> <Grid item xs={3}>
<div className="card"> <div className="card-ajuda">
<img src={PublicandoRecursos} alt="" /> <div className="card">
<h3>Professores</h3> <img src={PublicandoRecursos} alt="" />
<p> <h3>Publicando Recursos</h3>
Encontre recursos digitais que se encaixem aos objetivos <hr/>
das suas aulas! Aproveite para seguir outros professores, <a>Por que enviar um recurso?</a>
coleções e conhecer experiências de uso! <br/>
</p> <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> </div>
</Grid> </Grid>
<Grid item xs={3}> <Grid item xs={3}>
<div className="card"> <div className="card-ajuda">
<img src={EncontrandoRecurso} alt="" /> <div className="card">
<h3>Alunos</h3> <img src={EncontrandoRecurso} alt="" />
<p> <h3>Encontrando Recursos</h3>
Você pode complementar os seus estudos com recursos <hr/>
digitais que lhe interessem. Gostou de algum recurso? <a>Como fazer uma busca?</a>
Recomende ao seu professor ou professora. <br/>
</p>
<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> </div>
</Grid> </Grid>
<Grid item xs={3}> <Grid item xs={3}>
<div className="card"> <div className="card-ajuda">
<img src={ParticipandoRede} alt="" /> <div className="card">
<h3>Gestores</h3> <img src={ParticipandoRede} alt="" />
<p> <h3>Participando da Rede</h3>
Desenvolva junto com o coletivo da escola ações e projetos <hr/>
pedagógicos com recursos digitais importantes para o seu contexto. <a>Comentanto os recursos</a>
</p> <br/>
<a>Como relatar uma experiência ou avaliar um recurso?</a>
<br/>
</div>
<div className="card-rodape">
<a>VER MAIS</a>
</div>
</div> </div>
</Grid> </Grid>
<Grid item xs={3}> <Grid item xs={3}>
<div className="card"> <div className="card-ajuda">
<img src={GerenciandoConta} alt="" /> <div className="card">
<h3>Comunidade Escolar</h3> <img src={GerenciandoConta} alt="" />
<p> <h3>Gerenciando a Conta</h3>
Encontre recursos digitais e materiais de formação que <hr/>
contribuam para a aprendizagem e práticas educativas na <a>Por que me cadastrar?</a>
sua comunidade escolar. <br/>
</p> <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> </div>
</Grid> </Grid>
</Grid> </Grid>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
...@@ -219,14 +421,58 @@ function HelpCenter(props) { ...@@ -219,14 +421,58 @@ function HelpCenter(props) {
</Secao2> </Secao2>
<Secao3> <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> </Secao3>
<Secao4> <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> </Secao4>
</> </div>
); );
} }
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment