diff --git a/src/Components/HelpCenter/Cards/CardEncontrando.js b/src/Components/HelpCenter/Cards/CardEncontrando.js
index f989352e13a40ded76308ec44c830f27d0ec0080..173f179d24445dcc8aebdab0ef5ab7bfb59d3eda 100644
--- a/src/Components/HelpCenter/Cards/CardEncontrando.js
+++ b/src/Components/HelpCenter/Cards/CardEncontrando.js
@@ -75,7 +75,7 @@ const CardAjuda = styled.div`
height: 360px;
margin-bottom: 20px;
-
+ width: 100%
.card {
height: 280px;
@@ -84,7 +84,7 @@ const CardAjuda = styled.div`
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-top:30px
h3 {
font-size: 23px;
font-weight: 400;
diff --git a/src/Components/HelpCenter/Cards/CardGerenciando.js b/src/Components/HelpCenter/Cards/CardGerenciando.js
index 3cc9506ab3f75de0f0ee1d8298fa714e6a07f6c4..d3e1daa3299815d50e1c948ce1810d172d49c9ae 100644
--- a/src/Components/HelpCenter/Cards/CardGerenciando.js
+++ b/src/Components/HelpCenter/Cards/CardGerenciando.js
@@ -93,7 +93,7 @@ const CardAjuda = styled.div`
height: 360px;
margin-bottom: 20px;
-
+ width: 100%
.card {
height: 280px;
@@ -102,6 +102,7 @@ const CardAjuda = styled.div`
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-top:30px
h3 {
font-size: 23px;
diff --git a/src/Components/HelpCenter/Cards/CardParticipando.js b/src/Components/HelpCenter/Cards/CardParticipando.js
index 9dfdbf1a8c0553adc760fc14bf3fd27dcd76f1d0..5091e9908cf3a52399f0ce08907601f24b93618a 100644
--- a/src/Components/HelpCenter/Cards/CardParticipando.js
+++ b/src/Components/HelpCenter/Cards/CardParticipando.js
@@ -66,7 +66,8 @@ const CardAjuda = styled.div`
height: 360px;
margin-bottom: 20px;
-
+ width: 100%
+
.card {
height: 280px;
@@ -75,6 +76,8 @@ const CardAjuda = styled.div`
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-top:30px
+
h3 {
font-size: 23px;
diff --git a/src/Components/HelpCenter/Cards/CardPublicando.js b/src/Components/HelpCenter/Cards/CardPublicando.js
index 673c7d153a5ae2fe6e75f0fd21b3739d17a5cba3..c5fb0a3ff925d87a602f30ff467daf95182bc8b9 100644
--- a/src/Components/HelpCenter/Cards/CardPublicando.js
+++ b/src/Components/HelpCenter/Cards/CardPublicando.js
@@ -74,7 +74,7 @@ const CardAjuda = styled.div`
height: 360px;
margin-bottom: 20px;
-
+width: 100%
.card {
height: 280px;
@@ -83,7 +83,7 @@ margin-bottom: 20px;
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-top:30px
h3 {
font-size: 23px;
font-weight: 400;
diff --git a/src/Components/ResourceList.js b/src/Components/ResourceList.js
index 77c3ce1d67be2751618ee39477a3c6cd8651a756..1925388cbb5a35552ed35bb1a4eacca0a8d6538a 100644
--- a/src/Components/ResourceList.js
+++ b/src/Components/ResourceList.js
@@ -36,7 +36,6 @@ function Alert(props) {
export default function ResourceList(props) {
- console.log(props);
const [selected, setSelected] = useState(Array.apply(
null, {length: props.resources.length}).map(i => false));
diff --git a/src/Pages/HelpCenter.js b/src/Pages/HelpCenter.js
index a082dce11815138a40eb343c1b81b1958bde2b84..f70481b0db11f0001894d7909721f1f293758eca 100644
--- a/src/Pages/HelpCenter.js
+++ b/src/Pages/HelpCenter.js
@@ -34,13 +34,20 @@ import CardGerenciando from '../Components/HelpCenter/Cards/CardGerenciando';
function HelpCenter(props) {
+ let windowWidth = window.innerWidth
+
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"/>
+ {
+ windowWidth > 420?
+ <img src={Banner3} alt="banner3"/>
+ :
+ <div/>
+ }
<div className= "conteudo">
<div className= "title">
<h2>OLÃ! COMO PODEMOS AJUDAR?</h2>
@@ -57,17 +64,17 @@ function HelpCenter(props) {
<h2>Tópicos de Ajuda</h2>
</div>
<div>
- <Grid container spacing={2}>
- <Grid item xs={3}>
+ <Grid container justify="center" style={{margin:-8}}>
+ <Grid item xs={12} md={5} style={{padding:8}}>
<CardPublicando/>
</Grid>
- <Grid item xs={3}>
+ <Grid item xs={12} md={5} style={{padding:8}}>
<CardEncontrando/>
</Grid>
- <Grid item xs={3}>
+ <Grid item xs={12} md={5} style={{padding:8}}>
<CardParticipando/>
</Grid>
- <Grid item xs={3}>
+ <Grid item xs={12} md={5} style={{padding:8}}>
<CardGerenciando/>
</Grid>
</Grid>
@@ -77,64 +84,66 @@ function HelpCenter(props) {
</div>
</Secao2>
-
+ <div style={{width:"100%"}}>
<Secao3>
- <Grid style={{height:"100%"}} container spacing={2}>
- <Grid style={{backgroundColor: "#333",paddingInline:"0" }} item xs={6}>
- <iframe title="VÃdeo página ajuda" 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/>
- <Link to={{
- pathname : 'plataforma-mec',
- state : {value : '1'}
- }}>Como foi construida a Plataforma<br/>MEC?</Link>
- <br/>
- <Link to={{
- pathname : 'plataforma-mec',
- state : {value : '3'}
- }}>Quais são os Portais Parceiros?</Link>
- </p>
- </Grid>
- <Grid item xs={6}>
- <p className="links">
- <br/>
- <Link to={{
- pathname : 'plataforma-mec',
- state : {value : '2'}
- }}>Entendendo as 3 áreas</Link>
- <br/>
- <Link to={{
- pathname : 'plataforma-mec',
- state : {value : '4'}
- }}>Tipos de recursos</Link>
- <br/>
- <Link to={{
- pathname : 'plataforma-mec',
- state : {value : '5'}
- }}>Softwares especÃficos</Link>
+ <Grid style={{height:"100%"}} container justify="center">
+ <Grid style={{backgroundColor: "#333",paddingInline:"0" }} item xs={12} md={6}>
+ <iframe title="VÃdeo página ajuda" src="https://player.vimeo.com/video/231609051" width="100%" height="100%" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
+ </Grid>
+ <Grid item xs={12} md={6}>
+ <div>
+ <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
+ interagindo com pessoas envolvidas com experiências que ocorrem
+ em todo o Brasil!
</p>
+ </div>
+ <Grid container>
+ <Grid item xs={12} md={6}>
+ <p className="links">
+ <br/>
+ <Link to={{
+ pathname : 'plataforma-mec',
+ state : {value : '0'}
+ }}>O que é a Plataforma MEC</Link>
+ <br/>
+ <Link to={{
+ pathname : 'plataforma-mec',
+ state : {value : '1'}
+ }}>Como foi construida a Plataforma<br/>MEC?</Link>
+ <br/>
+ <Link to={{
+ pathname : 'plataforma-mec',
+ state : {value : '3'}
+ }}>Quais são os Portais Parceiros?</Link>
+ </p>
+ </Grid>
+ <Grid item xs={12} md={6}>
+ <p className="links">
+ <br/>
+ <Link to={{
+ pathname : 'plataforma-mec',
+ state : {value : '2'}
+ }}>Entendendo as 3 áreas</Link>
+ <br/>
+ <Link to={{
+ pathname : 'plataforma-mec',
+ state : {value : '4'}
+ }}>Tipos de recursos</Link>
+ <br/>
+ <Link to={{
+ pathname : 'plataforma-mec',
+ state : {value : '5'}
+ }}>Softwares especÃficos</Link>
+ </p>
+ </Grid>
</Grid>
- </Grid>
+ </Grid>
</Grid>
- </Grid>
- </Secao3>
+ </Secao3>
+ </div>
<Secao4>
<div className="container">
@@ -142,7 +151,7 @@ function HelpCenter(props) {
<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>
+ <button style={{marginBottom:50, marginTop:20}}><a href="contato">ENTRAR EM CONTATO</a></button>
</div>
</div>
@@ -156,27 +165,25 @@ export default HelpCenter;
const Secao1 = styled.div`
- height: 374px;
background-color:#00bcd4;
text-align: center;
+ width: 100%;
.container {
height: 100%;
- width: 1170px;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
- padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
img {
position: relative;
- left: 82px;
top: 41.6%;
- width: 230px;
+ max-width: 230px;
+ width: 90%;
float: left;
min-height: 1px;
padding-right: 15px;
@@ -208,14 +215,13 @@ const Secao1 = styled.div`
`
const Secao2 = styled.div`
- height: 536px;
background-color:#f4f4f4;
text-align: center;
margin-bottom: 20px;
-
+ padding-bottom: 50px
+ width: 100%;
.container {
height: 100%;
- width: 1170px;
margin-right: auto;
margin-left: auto;
@@ -243,7 +249,7 @@ const Secao2 = styled.div`
.card {
height: 280px;
- padding: 40px 15px;
+ padding: 40px 0px;
text-align: center;
font-size: 14px;
background-color:#fff;
@@ -258,13 +264,6 @@ const Secao2 = styled.div`
line-height: 1.1;
}
- hr {
- margin-top: 20px;
- margin-bottom: 20px;
- border: 0;
- border-top: 1px solid #eee;
- color: #a5a5a5;
- }
a {
font-size: 15px;
@@ -321,14 +320,12 @@ 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);
-
+ width: 100%;
.links {
font-size: 15px;
font-weight: lighter;
@@ -356,26 +353,16 @@ const Secao3 = styled.div`
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;
-
+ width: 100%;
.container {
height: 100%;
color: #a5a5a5;
- width: 1170px;
margin-inline: auto;
display: flex;
flex-direction: column;