diff --git a/src/Components/ExpansionPanels.js b/src/Components/ExpansionPanels.js
index 64c58066b1333103ff2aebd62c7b05464ed11652..9a432d10aaf3f164d177ed33cc8eebcec631a819 100644
--- a/src/Components/ExpansionPanels.js
+++ b/src/Components/ExpansionPanels.js
@@ -25,11 +25,29 @@ import { Link } from 'react-router-dom'
import Grid from '@material-ui/core/Grid';
import AddIcon from '@material-ui/icons/Add';
import RemoveIcon from '@material-ui/icons/Remove';
+import styled from 'styled-components';
+const TypographyColorido = styled(Typography)`
+ color: #666 !important;
+`
+const MuiExpansionPanelMargem = styled(MuiExpansionPanel)`
+ .expanded{
+ margin: 0 0 0 0 !important;
+ }
+`
+
+const MuiExpansionPanelSummaryColorido = styled(MuiExpansionPanelSummary)`
+ background-color:#e5e5e5 !important;
+`
+
+
+const MuiExpansionPanelDetailsColorido = styled(MuiExpansionPanelDetails)`
+ background-color: #fff;
+`
export default function CustomizedExpansionPanels() {
@@ -40,12 +58,12 @@ export default function CustomizedExpansionPanels() {
};
return (
- <div>
- <MuiExpansionPanel square expanded={expanded === 'panel1'} onChange={handleChange('panel1')}>
- <MuiExpansionPanelSummary expandIcon={<AddIcon />} aria-controls="panel1d-content" id="panel1d-header">
- <Typography>1. CaracterÃsticas da <strong>Plataforma Integrada de RED do MEC</strong></Typography>
- </MuiExpansionPanelSummary>
- <MuiExpansionPanelDetails>
+ <div style={{backgroundColor: "#e5e5e5"}}>
+ <MuiExpansionPanelMargem square expanded={expanded === 'panel1'} onChange={handleChange('panel1')}>
+ <MuiExpansionPanelSummaryColorido expandIcon={<AddIcon />} aria-controls="panel1d-content" id="panel1d-header">
+ <TypographyColorido>1. CaracterÃsticas da <strong>Plataforma Integrada de RED do MEC</strong></TypographyColorido>
+ </MuiExpansionPanelSummaryColorido>
+ <MuiExpansionPanelDetailsColorido>
<Grid container spacing={3}>
<Grid item xs={12} md={7}>
<div>
@@ -75,13 +93,13 @@ export default function CustomizedExpansionPanels() {
</div>
</Grid>
</Grid>
- </MuiExpansionPanelDetails>
- </MuiExpansionPanel>
- <MuiExpansionPanel square expanded={expanded === 'panel2'} onChange={handleChange('panel2')}>
- <MuiExpansionPanelSummary expandIcon={<AddIcon />} aria-controls="panel2d-content" id="panel2d-header">
- <Typography>2. Cadastro e segurança</Typography>
- </MuiExpansionPanelSummary>
- <MuiExpansionPanelDetails>
+ </MuiExpansionPanelDetailsColorido>
+ </MuiExpansionPanelMargem>
+ <MuiExpansionPanelMargem square expanded={expanded === 'panel2'} onChange={handleChange('panel2')}>
+ <MuiExpansionPanelSummaryColorido expandIcon={<AddIcon />} aria-controls="panel2d-content" id="panel2d-header">
+ <TypographyColorido>2. Cadastro e segurança</TypographyColorido>
+ </MuiExpansionPanelSummaryColorido>
+ <MuiExpansionPanelDetailsColorido>
<Grid container spacing={3}>
<Grid item xs={12} md={7}>
<div>
@@ -106,13 +124,13 @@ export default function CustomizedExpansionPanels() {
</div>
</Grid>
</Grid>
- </MuiExpansionPanelDetails>
- </MuiExpansionPanel>
- <MuiExpansionPanel square expanded={expanded === 'panel3'} onChange={handleChange('panel3')}>
- <MuiExpansionPanelSummary expandIcon={<AddIcon />} aria-controls="panel3d-content" id="panel3d-header">
- <Typography>3. Publicações de usuários</Typography>
- </MuiExpansionPanelSummary>
- <MuiExpansionPanelDetails>
+ </MuiExpansionPanelDetailsColorido>
+ </MuiExpansionPanelMargem>
+ <MuiExpansionPanelMargem square expanded={expanded === 'panel3'} onChange={handleChange('panel3')}>
+ <MuiExpansionPanelSummaryColorido expandIcon={<AddIcon />} aria-controls="panel3d-content" id="panel3d-header">
+ <TypographyColorido>3. Publicações de usuários</TypographyColorido>
+ </MuiExpansionPanelSummaryColorido>
+ <MuiExpansionPanelDetailsColorido>
<Grid container spacing={3}>
<Grid item xs={12} md={7}>
<div>
@@ -169,13 +187,13 @@ export default function CustomizedExpansionPanels() {
</div>
</Grid>
</Grid>
- </MuiExpansionPanelDetails>
- </MuiExpansionPanel>
- <MuiExpansionPanel square expanded={expanded === 'panel4'} onChange={handleChange('panel4')}>
- <MuiExpansionPanelSummary expandIcon={<AddIcon />} aria-controls="panel4d-content" id="panel4d-header">
- <Typography>4. Licença de uso do conteúdo</Typography>
- </MuiExpansionPanelSummary>
- <MuiExpansionPanelDetails>
+ </MuiExpansionPanelDetailsColorido>
+ </MuiExpansionPanelMargem>
+ <MuiExpansionPanelMargem square expanded={expanded === 'panel4'} onChange={handleChange('panel4')}>
+ <MuiExpansionPanelSummaryColorido expandIcon={<AddIcon />} aria-controls="panel4d-content" id="panel4d-header">
+ <TypographyColorido>4. Licença de uso do conteúdo</TypographyColorido>
+ </MuiExpansionPanelSummaryColorido>
+ <MuiExpansionPanelDetailsColorido>
<Grid container spacing={3}>
<Grid item xs={12} md={7}>
<div>
@@ -213,13 +231,13 @@ export default function CustomizedExpansionPanels() {
</div>
</Grid>
</Grid>
- </MuiExpansionPanelDetails>
- </MuiExpansionPanel>
- <MuiExpansionPanel square expanded={expanded === 'panel5'} onChange={handleChange('panel5')}>
- <MuiExpansionPanelSummary expandIcon={<AddIcon />} aria-controls="panel5d-content" id="panel5d-header">
- <Typography>5. Práticas de uso e armazenamento</Typography>
- </MuiExpansionPanelSummary>
- <MuiExpansionPanelDetails>
+ </MuiExpansionPanelDetailsColorido>
+ </MuiExpansionPanelMargem>
+ <MuiExpansionPanelMargem square expanded={expanded === 'panel5'} onChange={handleChange('panel5')}>
+ <MuiExpansionPanelSummaryColorido expandIcon={<AddIcon />} aria-controls="panel5d-content" id="panel5d-header">
+ <TypographyColorido>5. Práticas de uso e armazenamento</TypographyColorido>
+ </MuiExpansionPanelSummaryColorido>
+ <MuiExpansionPanelDetailsColorido>
<Grid container spacing={3}>
<Grid item xs={12} md={7}>
<div>
@@ -234,13 +252,13 @@ export default function CustomizedExpansionPanels() {
</div>
</Grid>
</Grid>
- </MuiExpansionPanelDetails>
- </MuiExpansionPanel>
- <MuiExpansionPanel square expanded={expanded === 'panel6'} onChange={handleChange('panel6')}>
- <MuiExpansionPanelSummary expandIcon={<AddIcon />} aria-controls="panel6d-content" id="panel6d-header">
- <Typography>6. Privacidade da informação</Typography>
- </MuiExpansionPanelSummary>
- <MuiExpansionPanelDetails>
+ </MuiExpansionPanelDetailsColorido>
+ </MuiExpansionPanelMargem>
+ <MuiExpansionPanelMargem square expanded={expanded === 'panel6'} onChange={handleChange('panel6')}>
+ <MuiExpansionPanelSummaryColorido expandIcon={<AddIcon />} aria-controls="panel6d-content" id="panel6d-header">
+ <TypographyColorido>6. Privacidade da informação</TypographyColorido>
+ </MuiExpansionPanelSummaryColorido>
+ <MuiExpansionPanelDetailsColorido>
<Grid container spacing={3}>
<Grid item xs={12} md={7}>
<div >
@@ -258,13 +276,13 @@ export default function CustomizedExpansionPanels() {
</div>
</Grid>
</Grid>
- </MuiExpansionPanelDetails>
- </MuiExpansionPanel>
- <MuiExpansionPanel square expanded={expanded === 'panel7'} onChange={handleChange('panel7')}>
- <MuiExpansionPanelSummary expandIcon={<AddIcon />} aria-controls="panel7d-content" id="panel7d-header">
- <Typography>7. Violação no sistema ou na base de dados</Typography>
- </MuiExpansionPanelSummary>
- <MuiExpansionPanelDetails>
+ </MuiExpansionPanelDetailsColorido>
+ </MuiExpansionPanelMargem>
+ <MuiExpansionPanelMargem square expanded={expanded === 'panel7'} onChange={handleChange('panel7')}>
+ <MuiExpansionPanelSummaryColorido expandIcon={<AddIcon />} aria-controls="panel7d-content" id="panel7d-header">
+ <TypographyColorido>7. Violação no sistema ou na base de dados</TypographyColorido>
+ </MuiExpansionPanelSummaryColorido>
+ <MuiExpansionPanelDetailsColorido>
<Grid container spacing={3}>
<Grid item xs={12} md={7}>
<div >
@@ -279,13 +297,13 @@ export default function CustomizedExpansionPanels() {
</div>
</Grid>
</Grid>
- </MuiExpansionPanelDetails>
- </MuiExpansionPanel>
- <MuiExpansionPanel square expanded={expanded === 'panel8'} onChange={handleChange('panel8')}>
- <MuiExpansionPanelSummary expandIcon={<AddIcon />} aria-controls="panel8d-content" id="panel8d-header">
- <Typography>8. Sanções</Typography>
- </MuiExpansionPanelSummary>
- <MuiExpansionPanelDetails>
+ </MuiExpansionPanelDetailsColorido>
+ </MuiExpansionPanelMargem>
+ <MuiExpansionPanelMargem square expanded={expanded === 'panel8'} onChange={handleChange('panel8')}>
+ <MuiExpansionPanelSummaryColorido expandIcon={<AddIcon />} aria-controls="panel8d-content" id="panel8d-header">
+ <TypographyColorido>8. Sanções</TypographyColorido>
+ </MuiExpansionPanelSummaryColorido>
+ <MuiExpansionPanelDetailsColorido>
<Grid container spacing={3}>
<Grid item xs={12} md={7}>
<div >
@@ -311,13 +329,13 @@ export default function CustomizedExpansionPanels() {
</div>
</Grid>
</Grid>
- </MuiExpansionPanelDetails>
- </MuiExpansionPanel>
- <MuiExpansionPanel square expanded={expanded === 'panel9'} onChange={handleChange('panel9')}>
- <MuiExpansionPanelSummary expandIcon={<AddIcon />} aria-controls="panel9d-content" id="panel9d-header">
- <Typography>9. Limitações de responsabilidade</Typography>
- </MuiExpansionPanelSummary>
- <MuiExpansionPanelDetails>
+ </MuiExpansionPanelDetailsColorido>
+ </MuiExpansionPanelMargem>
+ <MuiExpansionPanelMargem square expanded={expanded === 'panel9'} onChange={handleChange('panel9')}>
+ <MuiExpansionPanelSummaryColorido expandIcon={<AddIcon />} aria-controls="panel9d-content" id="panel9d-header">
+ <TypographyColorido>9. Limitações de responsabilidade</TypographyColorido>
+ </MuiExpansionPanelSummaryColorido>
+ <MuiExpansionPanelDetailsColorido>
<Grid container spacing={3}>
<Grid item xs={12} md={7}>
<div >
@@ -336,13 +354,13 @@ export default function CustomizedExpansionPanels() {
</div>
</Grid>
</Grid>
- </MuiExpansionPanelDetails>
- </MuiExpansionPanel>
- <MuiExpansionPanel square expanded={expanded === 'panel10'} onChange={handleChange('panel10')}>
- <MuiExpansionPanelSummary expandIcon={<AddIcon />} aria-controls="panel10d-content" id="panel10d-header">
- <Typography>10.Inexistência de vÃnculo</Typography>
- </MuiExpansionPanelSummary>
- <MuiExpansionPanelDetails>
+ </MuiExpansionPanelDetailsColorido>
+ </MuiExpansionPanelMargem>
+ <MuiExpansionPanelMargem square expanded={expanded === 'panel10'} onChange={handleChange('panel10')}>
+ <MuiExpansionPanelSummaryColorido expandIcon={<AddIcon />} aria-controls="panel10d-content" id="panel10d-header">
+ <TypographyColorido>10.Inexistência de vÃnculo</TypographyColorido>
+ </MuiExpansionPanelSummaryColorido>
+ <MuiExpansionPanelDetailsColorido>
<Grid container spacing={3}>
<Grid item xs={12} md={7}>
<div >
@@ -357,13 +375,13 @@ export default function CustomizedExpansionPanels() {
</div>
</Grid>
</Grid>
- </MuiExpansionPanelDetails>
- </MuiExpansionPanel>
- <MuiExpansionPanel square expanded={expanded === 'panel11'} onChange={handleChange('panel11')}>
- <MuiExpansionPanelSummary expandIcon={<AddIcon />} aria-controls="panel11d-content" id="panel11d-header">
- <Typography>11. Como reportar violações</Typography>
- </MuiExpansionPanelSummary>
- <MuiExpansionPanelDetails>
+ </MuiExpansionPanelDetailsColorido>
+ </MuiExpansionPanelMargem>
+ <MuiExpansionPanelMargem square expanded={expanded === 'panel11'} onChange={handleChange('panel11')}>
+ <MuiExpansionPanelSummaryColorido expandIcon={<AddIcon />} aria-controls="panel11d-content" id="panel11d-header">
+ <TypographyColorido>11. Como reportar violações</TypographyColorido>
+ </MuiExpansionPanelSummaryColorido>
+ <MuiExpansionPanelDetailsColorido>
<Grid container spacing={3}>
<Grid item xs={12} md={7}>
<div >
@@ -380,13 +398,13 @@ export default function CustomizedExpansionPanels() {
</div>
</Grid>
</Grid>
- </MuiExpansionPanelDetails>
- </MuiExpansionPanel>
- <MuiExpansionPanel square expanded={expanded === 'panel12'} onChange={handleChange('panel12')}>
- <MuiExpansionPanelSummary expandIcon={<AddIcon />} aria-controls="panel12d-content" id="panel12d-header">
- <Typography>12. Modificações nos Termos de Uso</Typography>
- </MuiExpansionPanelSummary>
- <MuiExpansionPanelDetails>
+ </MuiExpansionPanelDetailsColorido>
+ </MuiExpansionPanelMargem>
+ <MuiExpansionPanelMargem square expanded={expanded === 'panel12'} onChange={handleChange('panel12')}>
+ <MuiExpansionPanelSummaryColorido expandIcon={<AddIcon />} aria-controls="panel12d-content" id="panel12d-header">
+ <TypographyColorido>12. Modificações nos Termos de Uso</TypographyColorido>
+ </MuiExpansionPanelSummaryColorido>
+ <MuiExpansionPanelDetailsColorido>
<Grid container spacing={3}>
<Grid item xs={12} md={7}>
<div >
@@ -401,13 +419,13 @@ export default function CustomizedExpansionPanels() {
</div>
</Grid>
</Grid>
- </MuiExpansionPanelDetails>
- </MuiExpansionPanel>
- <MuiExpansionPanel square expanded={expanded === 'panel13'} onChange={handleChange('panel13')}>
- <MuiExpansionPanelSummary expandIcon={<AddIcon />} aria-controls="panel13d-content" id="panel13d-header">
- <Typography>13. Foro</Typography>
- </MuiExpansionPanelSummary>
- <MuiExpansionPanelDetails>
+ </MuiExpansionPanelDetailsColorido>
+ </MuiExpansionPanelMargem>
+ <MuiExpansionPanelMargem square expanded={expanded === 'panel13'} onChange={handleChange('panel13')}>
+ <MuiExpansionPanelSummaryColorido expandIcon={<AddIcon />} aria-controls="panel13d-content" id="panel13d-header">
+ <TypographyColorido>13. Foro</TypographyColorido>
+ </MuiExpansionPanelSummaryColorido>
+ <MuiExpansionPanelDetailsColorido>
<Grid container spacing={3}>
<Grid item xs={12} md={7}>
<div >
@@ -422,8 +440,8 @@ export default function CustomizedExpansionPanels() {
</div>
</Grid>
</Grid>
- </MuiExpansionPanelDetails>
- </MuiExpansionPanel>
+ </MuiExpansionPanelDetailsColorido>
+ </MuiExpansionPanelMargem>
</div>
);
}
diff --git a/src/Components/Modal.js b/src/Components/Modal.js
index d4af974b2dcb2a4f2e7097df216749f1affde8f5..6c5e794883080f444a4fcdb08ff4473cfb330803 100644
--- a/src/Components/Modal.js
+++ b/src/Components/Modal.js
@@ -25,9 +25,6 @@ import Fade from '@material-ui/core/Fade';
import VisibilityOutlinedIcon from '@material-ui/icons/VisibilityOutlined';
import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';
import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';
-
-
-
import styled from 'styled-components'
diff --git a/src/Pages/UserTerms.js b/src/Pages/UserTerms.js
index 7a7c6e348fe578191c07b86aab02b1cf16733fbb..7cb902e0af1d2efa5c335fc38a07fa2e58ae14dc 100644
--- a/src/Pages/UserTerms.js
+++ b/src/Pages/UserTerms.js
@@ -18,24 +18,30 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React, {Component} from 'react';
import ExpansionPanels from '../Components/ExpansionPanels'
import Grid from '@material-ui/core/Grid';
-import Banner1 from "../img/termos/banner.jpg";
import Modal from '../Components/Modal'
+import styled from 'styled-components'
+
+/*Importação de imagens para a página*/
import Busca from "../img/termos/Busca.png"
+import Banner1 from "../img/termos/banner.jpg";
+import Aberto from "../img/termos/Aberto.png";
+import CadeadoAberto from "../img/termos/AbertoG.svg";
+import Fechado from "../img/termos/Fechado.png";
+import CadeadoFechado from "../img/termos/FechadoG.svg";
+import Linha from "../img/termos/linha.svg";
-import styled from 'styled-components'
-const bannerStyle={
- width: "100%",
- backgroundImage: `url(${Banner1})`,
- backgroundSize: "cover",
- backgroundPosition: "topCenter",
- height: "370px",
+const BannerStyle=styled.div`
+ width: 100%;
+ background-image: url(${Banner1});
+ background-size: cover;
+ background-position: top center;
+ height: 370px;
verticalAlign: "middle"
+`
-
-}
const center={
width: "100%",
textAlign: "center"
@@ -69,11 +75,67 @@ const ImagemSeçao2 = styled.div`
background-size: contain;
background-repeat: no-repeat;
}
- height: 100%;
+ color: rgba(0,0,0,0.87);
+ height: auto;
align-items: center;
padding-block: 30px;
`
+const Secao3 = styled.div`
+ background-color: #FF7F00;
+ @media (min-width: 1000px) {
+ background-image: url(${CadeadoAberto}), url(${CadeadoFechado});
+ background-repeat: no-repeat;
+ background-position: bottom left, bottom right;
+ background-position-y: 120%, 120%;
+ height:340px;
+ padding-block:30px;
+ }
+
+ color: #fff;
+ text-align: left;
+
+ h3 {
+ font-family: 'Pompiere', cursive;
+ font-size: 46px;
+ padding-bottom: 20px;
+ margin-top: 20px;
+ margin-bottom: 10px;
+ width: 100%;
+ text-align: center !important;
+ font-weight: 500 ;
+
+ }
+
+ .aberto {
+ background-image: url(${Aberto}), url(${Linha});
+ }
+ .fechado {
+ background-image: url(${Fechado}), url(${Linha});
+ }
+
+ .caixa {
+ background-repeat: no-repeat;
+ background-size: 70px 70px, auto auto;
+ background-position: top left;
+ background-position-x: 0, 35px;
+ padding-left: 90px;
+ .texto{
+ background-image: url(${Linha});
+ background-position: top left;
+ background-repeat: repeat-x;
+ background-size: auto auto;
+ span {
+ font-size: 26px;
+ }
+ p {
+ text-align: left;
+ font-size: 15px;
+ margin: 0 0 10px;
+ }
+ }
+ }
+`
@@ -81,13 +143,13 @@ class UserTerms extends Component {
render() {
return (
- <div >
+ <div style={{color:"rgba(0,0,0,0.87"}} >
<link href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto&display=swap" rel="stylesheet"/>
- <div style = {bannerStyle}>
+ <BannerStyle>
<h2 style={{width: "100%",textAlign: "center",marginTop:"0px", paddingTop:"6rem",marginBottom:"16px",fontSize:"52px",fontFamily: "'Pompiere', cursive",color:"#fff",fontWeight:"500"}}>TERMOS DE USO</h2>
<Modal/>
- </div>
+ </BannerStyle>
<ImagemSeçao2>
<Grid container spacing={3}>
@@ -106,26 +168,34 @@ class UserTerms extends Component {
</Grid>
</ImagemSeçao2>
- <div style = {{background: "#ff7f00",color:"#fff"}} >
- <h1 style = {{textAlign: "center",width: "100%",fontSize:"46px",fontFamily: "'Pompiere', cursive",fontWeight:"500"}}>Para melhor compreensão, podemos dividir os recursos em dois tipos:</h1>
- <Grid container spacing ={3}>
+ <Secao3 >
+ <Grid container spacing ={3}>
+ <h3>Para melhor compreensão, podemos dividir os recursos em dois tipos:</h3>
<Grid item xs={12} md={1} ></Grid>
- <Grid item xs={12} md={4} >
- <div>
- <h2>Abertos</h2>
- <p>De acordo com a Declaração de Paris, são recursos que, no mÃnimo, têm uma licença de uso mais flexÃvel, que garante livre redistribuição. Adicionalmente, um recurso aberto deve utilizar um formato aberto, um formato de arquivo que permite a fácil edição por terceiros. Nenhum controle sobre o acesso (como cadastro e senha) deve existir para acesso a recursos abertos. Em sua maioria, são recursos gratuitos.</p>
+ <Grid item xs={12} md={5} >
+ <div class="caixa aberto">
+ <div class ="texto">
+ <span>Abertos</span>
+ <p>De acordo com a Declaração de Paris, são recursos que, no mÃnimo, têm uma licença de uso mais flexÃvel, que garante livre redistribuição. Adicionalmente, um recurso aberto deve utilizar um formato aberto, um formato de arquivo que permite a fácil edição por terceiros. Nenhum controle sobre o acesso (como cadastro e senha) deve existir para acesso a recursos abertos. Em sua maioria, são recursos gratuitos.</p>
+ </div>
</div>
</Grid>
- <Grid item xs={12} md={1} ></Grid>
- <Grid item xs={12} md={4}>
- <div>
- <h2>Fechados</h2>
- <p>São recursos que criam restrições no seu acesso, uso ou reuso. Como exemplo, podemos mencionar recursos que só são acessÃveis mediante cadastro ou que têm licenças restritivas (como “todos os direitos reservadosâ€, o sÃmbolo ©). Podem ser gratuitos ou pagos.</p>
+
+ <Grid item xs={12} md={5}>
+ <div class="caixa fechado">
+ <div class ="texto">
+ <span>Fechados</span>
+ <p>São recursos que criam restrições no seu acesso, uso ou reuso. Como exemplo, podemos mencionar recursos que só são acessÃveis mediante cadastro ou que têm licenças restritivas (como “todos os direitos reservadosâ€, o sÃmbolo ©). Podem ser gratuitos ou pagos.</p>
+ </div>
</div>
</Grid>
<Grid item xs={12} md={1} ></Grid>
</Grid>
- </div>
+ </Secao3>
+
+
+
+
<Grid container spacing={3}>
<Grid item xs={12} md={1}></Grid>
<Grid item xs={12} md={10}>
@@ -151,11 +221,15 @@ class UserTerms extends Component {
</div>
</Grid>
<Grid item xs={12} md={1}></Grid>
+
+
</Grid>
+
+
<Grid container spacing={3}>
<Grid item xs={12} md={1}></Grid>
<Grid item xs={12} md={10}>
- <div style={{verticalAlign: "middle"}}>
+ <div style={{ marginBottom:"50px"}}>
<ExpansionPanels/>
</div>
</Grid>