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`
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>
);
}
......
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