Skip to content
Snippets Groups Projects
Commit 0e2adb5f authored by mrp19's avatar mrp19
Browse files

Fix, cards colocados como componentes e ao invés de html puro

parent e6f2eef1
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
+ 127
− 174
View file @ 0e2adb5f
......@@ -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;
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