Merge branch '16-criar-tela-de-termos-de-uso' into 'master'

Resolve "Criar tela de termos de uso"

Closes #16

See merge request !9

src/App.js

@@ -23,6 +23,8 @@ import Header from './Components/Header'
 import EcFooter from './Components/EcFooter';
 import GNUAGPLfooter from './Components/AGPLFooter';
 import UserPage from './Pages/UserPage';
+import UserTerms from './Pages/UserTerms';
+import Teste from './Pages/Teste';
 import ResourcePage from './Pages/ResourcePage';
 import {BrowserRouter, Switch, Route} from 'react-router-dom';
 import { Store } from './Store'
@@ -66,6 +68,8 @@ export default function App(){
         <Route path="/busca" component={Search} />
         <Route path="/usuario" component={UserPage} />
         <Route path="/recurso" component={ResourcePage}/>
+      	<Route path="/termos" component={UserTerms}/>
+        <Route path="/teste" component={Teste}/>
       </Switch>
       <EcFooter/>
       <GNUAGPLfooter/>

src/Components/Modal.js

+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
+
+import React from 'react';
+import { makeStyles } from '@material-ui/styles';
+import Modal from '@material-ui/core/Modal';
+import TermsCarousel  from './Carousel';
+import Backdrop from '@material-ui/core/Backdrop';
+import Grid from '@material-ui/core/Grid';
+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'
+
+/*Importação de imagens para o componente*/
+import Handshake from "../img/termos/handshake.svg"
+import Pessoa from "../img/termos/Pessoa.svg"
+import Email from "../img/termos/Email.svg"
+import Seguranca from "../img/termos/Seguranca.svg"
+import Aberto from "../img/termos/Aberto.png";
+import Fechado from "../img/termos/Fechado.png";
+import Arrow_down from "../img/termos/Arrow_down.svg";
+import Arrow_double from "../img/termos/Arrow_double.svg";
+import Arrow_O from "../img/termos/Arrow_O que é a plataforma.png";
+import Arrow_O_1 from "../img/termos/Arrow_O que é a plataforma-1.png";
+import Like from "../img/termos/Like.svg";
+import Unlike from "../img/termos/Unlike.svg";
+import Line from "../img/termos/Line.svg";
+import Entenda from "../img/termos/Entenda.svg";
+import V from "../img/termos/V.svg";
+import OrthogonalLineUp from "../img/termos/OrthogonalLineUp.png"
+import OrthogonalLineDown from "../img/termos/OrthogonalLineDown.png"
+
+
+const useStyles = makeStyles(theme => ({
+  modal: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  paper: {
+    border: '2px solid #000',
+    boxShadow: " 0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)"
+  },
+  carousel: {
+    width: "750px",
+    height:"370px",
+
+  }
+}));
+
+
+
+export default function TransitionsModal() {
+  const classes = useStyles();
+  const [open, setOpen] = React.useState(false);
+
+  const handleOpen = () => {
+    setOpen(true);
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  return (
+
+    <div style={{display:"flex", justifyContent: "center"}}>
+      <link href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto&display=swap" rel="stylesheet"/>
+
+      <button style = {{background: "none",border: "none", color:"#fff",verticalAlign:"center"}}   type="button" onClick={handleOpen}>
+        <VisibilityOutlinedIcon style={{verticalAlign:"middle"}}/> <spam style={{verticalAlign: "middle",fontWeight: "600",fontSize:"14px"}}>VEJA A VERSÃO RESUMIDA</spam>
+      </button>
+      <Modal
+        aria-labelledby="transition-modal-title"
+        aria-describedby="transition-modal-description"
+        className={classes.modal}
+        open={open}
+        onClose={handleClose}
+        closeAfterTransition
+        BackdropComponent={Backdrop}
+        BackdropProps={{
+          timeout: 500,
+        }}
+      >
+        <Fade in={open}>
+          <div>
+            <TermsCarousel/>
+          </div>
+        </Fade>
+      </Modal>
+    </div>
+  );
+}

src/Pages/Teste.js

+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
+
+import React, {Component} from 'react';
+import styled from 'styled-components';
+import Grid from '@material-ui/core/Grid';
+/*Importação de imagens para o componente*/
+import Handshake from "../img/termos/handshake.svg"
+import Pessoa from "../img/termos/Pessoa.svg"
+import Email from "../img/termos/Email.svg"
+import Seguranca from "../img/termos/Seguranca.svg"
+import Aberto from "../img/termos/Aberto.png";
+import Fechado from "../img/termos/Fechado.png";
+import Arrow_down from "../img/termos/Arrow_down.svg";
+import Arrow_double from "../img/termos/Arrow_double.svg";
+import Arrow_O from "../img/termos/Arrow_O que é a plataforma.png";
+import Arrow_O_1 from "../img/termos/Arrow_O que é a plataforma-1.png";
+
+
+const Slide = styled.div`
+
+position: absolute;
+height: 500px;
+width: 1366px;
+
+h2{
+  font-family: "Pompiere", regular;
+  font-size: 44px;
+  line-height: 120%;
+  color: #FFFFFF;
+}
+
+h3{
+  font-family: "Roboto", regular;
+  font-size: 27px;
+  line-height: 120%;
+  color: #FFFFFF;
+}
+
+p{
+  font-family: "Roboto", regular;
+  font-size: 20px;
+  line-height: 120%;
+  color: #FFFFFF;
+  text-align: left;
+}
+
+.container{
+  position: absolute;
+  height: auto;
+  width: auto;
+  margin: 70px 180px 90px;
+}
+
+
+.tmpl1{
+  background-color: #00BCD4;
+  height: inherit;
+  width: inherit;
+  display: flex;
+  align-items: center;
+
+
+  .box-text{
+    position: relative;
+    float: left;
+    padding-right: 10px;
+    padding-left: 10px;
+  }
+
+  .box-image{
+    position: relative;
+    float: right;
+  }
+}
+
+.tmpl2{
+  height: inherit;
+  width: inherit;
+  display: flex;
+  align-items: center;
+  background-color: #673AB7;
+
+  .title{
+    padding-bottom: 50px;
+  }
+
+  .images{
+    position: relative;
+    display: table-row;
+  }
+
+  .arrow{
+    display: table-row;
+    position: absolute;
+    margin-left: 15px;
+    margin-top: -15px;
+  }
+
+  .circle{
+    display: table-row;
+    position: absolute;
+    margin-top: -100px;
+    margin-left: 755px;
+  }
+
+  .box-text{
+    p{
+      font-size: 18px;
+      line-height: 25px;
+    }
+
+    position: relative;
+
+  }
+
+
+}
+
+.tmpl3{
+  height: inherit;
+  width: inherit;
+  display: flex;
+  align-items: center;
+  background-color: #E81F4F;
+
+  .title{
+    position: relative;
+    padding-left: 10px;
+    h3{
+      line-height: 40px;
+    }
+  }
+
+  .box-text1{
+    .text{
+      padding-top: 20px;
+    }
+
+    .content{
+      display: table-row;
+
+      p{
+        display: table-cell;
+        font-size: 18px;
+        line-height: 25px;
+        vertical-align: middle;
+      }
+
+      img{
+        position: relative;
+        left: 0;
+        margin-right: 20px;
+        display: table-cell;
+        vertical-align: middle;
+        margin: 10px 20px 10px -10px;
+      }
+    }
+
+  }
+
+  .box-text2{
+    top: -50px;
+    .content{
+      p{
+        padding-bottom: 20px;
+      }
+
+      img{
+        margin-left: -65px;
+        margin-top: 25px;
+      }
+
+      .twoArrow{
+        margin-top: -5px;
+      }
+    }
+
+
+  }
+
+
+
+}
+
+.tmpl4{
+  height: inherit;
+  width: inherit;
+  display: flex;
+  align-items: center;
+  background-color: #FF7F00;
+
+  h2{
+    padding-bottom: 20px;
+  }
+
+  p{
+    font-size: 20px;
+    line-height: 25px;
+    vertical-align: middle;
+  }
+
+  .box-images{
+    height: inherit;
+    display: table-row;
+    padding-top: 50px;
+  }
+
+  img{
+    display: table-cell;
+    vertical-align: middle;
+    top: 40px;
+  }
+
+
+}
+
+.tmpl5{
+  height: inherit;
+  width: inherit;
+  display: flex;
+  align-items: center;
+  background-color: #1AB9DE;
+
+  .title{
+    display: table-row;
+    align-items: center;
+
+    img{
+      display: table-cell;
+      margin-right: 30px;
+    }
+
+    h2{
+      display: table-cell;
+      text-align: center;
+      vertical-align: middle;
+    }
+  }
+
+  .box-text {
+    margin-top: 20px;
+    p{
+      font-size: 17px;
+      font-weight: 15px;
+    }
+  }
+
+}
+
+.tmpl6{
+  height: inherit;
+  width: inherit;
+  display: flex;
+  align-items: center;
+  background-color: #673AB7;
+
+  .box-text-1{
+    h3{
+      margin-bottom: 20px;
+      font-size: 27px;
+    }
+    p{
+      margin-bottom: 20px;
+      font-size: 18px;
+    }
+
+
+    .licences{
+      padding: 35px 150px 50px 35px;
+      margin-top: 50pz;
+      background-image: url("../../img/termos/Entenda.svg");
+      background-repeat: no-repeat;
+      background-size: cover;
+      p::before{
+        content: url(../../img/termos/V.svg);
+      }
+      p{
+        padding-left: 20px;
+        font-family: "Kalam", regular;
+        font-size: 24px;
+        white-space: nowrap;
+      }
+      .row{
+         padding-bottom: 5px;
+      }
+    }
+  }
+
+
+  .box-text-2{
+    background-image: url("../../img/termos/OrthogonalLineUp.png"),url("../../img/termos/OrthogonalLineDown.png");
+    background-repeat: no-repeat;
+    background-position: left top, right bottom;
+    padding-top: 30px;
+    padding-left: 50px;
+    p{
+      font-size: 15px;
+      padding-bottom: 15px;
+    }
+
+    .licenses_type{
+      margin-left: -20px;
+      font-size: 22px;
+      font-weight: bold;
+      text-align: right;
+      white-space: nowrap;
+    }
+  }
+
+}
+
+.tmpl7{
+  height: inherit;
+  width: inherit;
+  display: flex;
+  align-items: center;
+  background-color: #E81F4F;
+
+  .title{
+    h2{
+      font-family: Roboto;
+      font-size: 44px;
+    }
+  }
+
+  .box-text{
+    margin-top: 20px;
+    p{
+      line-height: 20px;
+      font-family: "Roboto";
+      font-size: 18px;
+    }
+  }
+
+  .rodape{
+    margin-top: 40px;
+    p{
+      line-height: 20px;
+      font-family: "Pompiere", regular;
+      font-size: 28px;
+      text-align: center;
+    }
+    span{
+      text-decoration: underline;
+      font-family: "Pompiere", regular;
+      line-height: 20px;
+      font-size: 28px;
+      cursor: pointer;
+    }
+  }
+}
+
+`
+
+
+
+
+const Slide1 = styled.div`
+
+  background:#00BCD4;
+  height:500px;
+  width:1366px;
+
+`
+
+
+
+const Slide3 = styled.div`
+
+  background:#e81f4f;
+  height:500px;
+  width:1366px;
+
+
+  .tmpl3{
+    height: inherit;
+    width: inherit;
+    display: flex;
+    align-items: center;
+    background-color: #E81F4F;
+
+    .title{
+      position: relative;
+      padding-left: 10px;
+      h3{
+        line-height: 40px;
+      }
+    }
+
+    .box-text1{
+      .text{
+        padding-top: 20px;
+      }
+
+      .content{
+        display: table-row;
+
+        p{
+          display: table-cell;
+          font-size: 18px;
+          line-height: 25px;
+          vertical-align: middle;
+        }
+
+        img{
+          position: relative;
+          left: 0;
+          margin-right: 20px;
+          display: table-cell;
+          vertical-align: middle;
+          margin: 10px 20px 10px -10px;
+        }
+      }
+
+    }
+
+    .box-text2{
+      top: -50px;
+      .content{
+        p{
+          padding-bottom: 20px;
+        }
+
+        img{
+          margin-left: -65px;
+          margin-top: 25px;
+        }
+
+        .twoArrow{
+          margin-top: -5px;
+        }
+      }
+    }
+  }
+`
+
+
+const Slide4 = styled.div`
+
+
+    background:#ff7f00;
+    height:500px;
+    width:1366px;
+
+    position: absolute;
+    height: 500px;
+    width: 1366px;
+
+    .container{
+      position: absolute;
+      height: auto;
+      width: auto;
+      margin: 70px 180px 90px;
+    }
+    .tmpl4{
+      height: inherit;
+      width: inherit;
+      display: flex;
+      align-items: center;
+      background-color: #FF7F00;
+
+      h2{
+        padding-bottom: 20px;
+        font-family: Pompiere,regular;
+        font-size: 44px;
+        line-height: 120%;
+        color:#fff;
+        margin-top: 20px;
+        margin-bottom: 10px
+      }
+
+      p{
+        font-size: 20px;
+        line-height: 25px;
+        vertical-align: middle;
+        font-size: 20px;
+        font-family: Roboto,regular;
+        color:#fff;
+        margin: 0 0 10px;
+        text-align: left;
+        line-height: 25px;
+        padding-right: 10px;
+      }
+
+      .box-images{
+        height: inherit;
+        display: table-row;
+        padding-top: 50px;
+      }
+
+      img{
+        display: table-cell;
+        vertical-align: middle;
+        top: 40px;
+      }
+
+
+    }
+
+`
+
+
+
+
+class Teste extends Component {
+    render() {
+      return (
+        <div>
+        <link href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto&display=swap" rel="stylesheet"/>
+
+          <Slide>
+            <div class="tmpl1">
+              <div class="container">
+                <Grid container spacing={0}>
+                  <Grid item xs={6} >
+                    <div class="box-text">
+                      <p>A Plataforma Integrada MEC RED é parte do Compromisso 6 do 3º Plano de Ação da Parceria para Governo Aberto (OGP-Brasil), que tem por objetivo “incorporar na política educacional o potencial da cultura digital, de modo a fomentar a autonomia para uso, reuso e adaptação de recursos educacionais digitais, valorizando a pluralidade e a diversidade da educação brasileira”.</p>
+                    </div>
+                  </Grid>
+                  <Grid item xs={6}>
+                    <div class="box-image">
+                      <img src={Handshake} alt="handshake"/>
+                    </div>
+                  </Grid>
+                </Grid>
+              </div>
+            </div>
+          </Slide>
+
+            <Slide>
+              <div class="tmpl2">
+                <div class="container">
+                  <div class="title">
+                    <h2>O que é a Plataforma Integrada MEC RED e como ela está organizada?</h2>
+                    <div class="images">
+                      <div class="arrow">
+                        <img src={Arrow_O} alt="Arrow_O"/>
+                      </div>
+                      <div class="circle">
+                        <img src={Arrow_O_1} alt="Arrow_O_1"/>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="box-text col-md-6">
+                    <p>Uma plataforma interativa, colaborativa e criada em software livre, que disponibiliza conteúdos do acervo do MEC e indica conteúdos de parceiros com o objetivo de formar uma rede ativa de educadores interessados em usar, criar e compartilhar recursos educacionais digitais.</p>
+                  </div>
+                  <div class="box-text col-md-6">
+                    <p><strong>Repositório</strong> de recursos educacionais digitais que permite aos usuários cadastrados a publicação de seus materiais e <strong>Referatório</strong> que aponta links para conteúdos em sites externos.</p>
+                  </div>
+                </div>
+              </div>
+            </Slide>
+
+            <Slide3>
+              <div class="tmpl3">
+                <div class="container">
+                  <div class="title">
+                    <h3>As recursos educacionais disponibilizados<br/> podem ser de dois tipos:</h3>
+                  </div>
+                  <Grid container spacing={5}>
+
+
+                    <Grid class="text" item md={8}>
+                      <div class="content">
+                        <img src={Aberto} alt="Aberto "/>
+                        <p><strong>Abertos</strong>: recursos sem nenhuma restrição de acesso e<br/> com flexibilidade quanto ao uso ou reuso.</p>
+                      </div>
+                      <div class="content">
+                        <img src={Fechado} alt="Fechado"/>
+                        <p><strong>Fechados</strong>: recursos com alguma restrição de acesso, uso<br/> ou reuso, como aqueles que, para acesso, há demanda de<br/> cadastro ou que têm licenças restritivas.</p>
+                      </div>
+                    </Grid>
+
+
+
+                    <Grid item md={4}>
+                      <div class="content">
+                        <img src={Arrow_down}/>
+                        <p>Como repositório, a Plataforma hospeda somente Recursos Educacionais Abertos (REA). Todo conteúdo inserido por usuários deve ser aberto.</p>
+                      </div>
+                      <div class="content">
+                        <img class="twoArrow" src={Arrow_double}/>
+                        <p>Como referatório, a Plataforma aponta links para parceiros, e<br/> esses recursos podem ser abertos ou fechados.</p>
+                      </div>
+                    </Grid>
+
+
+                  </Grid>
+                </div>
+              </div>
+            </Slide3>
+
+            <Slide>
+              <div class="tmpl4">
+                <div class="container">
+                <Grid container spacing={5}>
+                  <Grid item xs={6}>
+                    <h2>Como se cadastrar?</h2>
+                    <div>
+                      <p>Para criar uma conta, o usuário deverá clicar no botão “Cadastre-se” na página inicial da Plataforma e fazer um cadastro utilizando um endereço de e-mail e criando uma senha.</p>
+                    </div>
+                  </Grid>
+                  <Grid item xs={2} style={{alignSelf:"center"}}> <img src={Pessoa} alt="Pessoa" /> </Grid>
+                  <Grid item xs={2} style={{alignSelf:"center"}}> <img src={Email} alt="Email" /> </Grid>
+                  <Grid item xs={2} style={{alignSelf:"center"}}> <img src={Seguranca} alt="Seguranca" /> </Grid>
+                  </Grid>
+                </div>
+              </div>
+            </Slide>
+
+            <div style={{background:"#00BCD4", height:"500px", width:"1366px"}}>
+              <h2>O que publicar?</h2>
+
+              <p>Conteúdos de cunho educacional e pertinentes ao assunto no qual estão inseridos, de autoria do usuário, de autoria coletiva (com consentimento dos demais autores) ou que estejam no domínio público. </p>
+
+              <h2>O que não publicar?</h2>
+
+              <p>Materiais ofensivos, pornográficos, relacionados a atividades ilegais, que invadam a privacidade de terceiros, que violem a legislação de Direito Autoral ou os Direitos Humanos. Propagandas, conteúdos com vírus, spam ou comentários abusivos.</p>
+            </div>
+
+            <div style={{background:"#673ab7", height:"500px", width:"1366px"}}>
+              <h3>Direitos do autor e licenças de uso</h3>
+
+              <p>Ao inserir um novo material de sua autoria no Repositório, o usuário deverá escolher um dos tipos de licença aberta disponíveis na Plataforma:</p>
+
+              <p>CC-BY</p>
+
+              <p>CC-BY-SA</p>
+
+              <p>CC-BY-NC</p>
+
+              <p>CC-BY-NC-SA</p>
+
+              <p>CC-BY</p>
+
+              <p> significa que o autor permite que distribuam, remixem, adaptem e criem a partir do seu trabalho, desde que lhe atribuam o devido crédito pela criação original</p>
+
+              <p>NC</p>
+
+              <p> indica que as criações elaboradas a partir do trabalho do autor podem ser utilizadas somente para fins não comerciais (se não houver esta especificação, o novo recurso poderá ser utilizado para fins comerciais)</p>
+
+              <p>SA</p>
+
+              <p> quer dizer que as novas criações devem ser licenciadas sob termos idênticos aos do trabalho original</p>
+            </div>
+
+            <div style={{background:"#e81f4f", height:"500px", width:"1366px"}}>
+              <h2>Respeitamos<br/> a sua privacidade</h2>
+
+              <p>Além de solicitar alguns dados pessoais para o cadastro, a Plataforma coleta, de forma automática, os dados não pessoais relativos à interação dos usuários no sistema. Esses dados nunca serão fornecidos para fins comerciais, assim como nunca serão compartilhados quaisquer dados pessoais que possam identificar o usuário.</p>
+              <p>Os dados anônimos poderão ser utilizados para fins de melhoria da plataforma, transparência e para o uso em pesquisas.</p>
+
+              <p>Dúvidas? Leia a íntegra dos <span ng-click="hide()">Termos de Uso</span> ou fale conosco por meio do <span ui-sref="contato">formulário de contato</span>.</p>
+            </div>
+          </div>
+      );
+    }
+  }
+
+export default Teste;

src/Pages/UserTerms.js

+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
+import React, {Component} from 'react';
+import SimpleExpansionPanels from '../Components/ExpansionPanels'
+import Grid from '@material-ui/core/Grid';
+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";
+
+
+
+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"
+}
+const container={
+  paddingInline: "15px",
+  paddingBlock: "20px",
+  marginInline: "auto",
+  textAlign:"center",
+  width:"750px"
+
+}
+const secao2={
+  height: "100%",
+  alignItems: "center",
+  paddingBlock: "30px"
+}
+
+
+const AColorido = styled.a`
+
+    color: #00BCD4;
+    text-decoration:none;
+
+`
+const ImagemSeçao2 = styled.div`
+
+  font-family: Roboto, sans-serif;
+
+  @media (min-width:1450px) {
+    background-image: url(${Busca});
+    background-position: right;
+    background-size: contain;
+    background-repeat: no-repeat;
+  }
+  color: rgba(0,0,0,0.87);
+  height: auto;
+  align-items: center;
+  padding-block: 30px;
+  h3 {
+    line-height: 1.1;
+    text-align: center;
+    @media (min-width: 1000px) {
+      font-size: 30px;
+    }
+
+    @media (max-width: 1000px){
+      font-size: 20px;
+    }
+    margin-top: 20px;
+    margin-bottom: 10px;
+    font-weight: 100;
+    padding-bottom: 20px;
+
+  }
+
+  p {
+    line-height: 1.42857143;
+    padding-top: 20px;
+    font-size: 14px;
+    text-align: justify;
+    margin: 0 0 10px;
+  }
+}
+`
+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;
+      }
+    }
+  }
+`
+
+const Secao4 = styled.div`
+  font-size: 15px;
+
+  .texto {
+    text-align: left;
+    padding-top: 20px;
+    padding-bottom: 20px;
+
+    a {
+      color:#00BCD4;
+    }
+
+    p {
+      font-family: 'Roboto', Bold;
+    }
+
+  }
+
+  .titulo {
+    text-align: center;
+    color: #666666;
+    h3 {
+      font-size: 30px;
+      height: 22px;
+      padding-bottom: 20px;
+      margin-top: 20px;
+      margin-bottom: 10px;
+      font-weight: 500;
+      line-height: 1.1;
+    }
+    p {
+      height: 18px;
+      line-height: 1.42857143;
+      margin: 0 0 10px;
+    }
+
+`
+
+
+class UserTerms extends Component {
+    render() {
+
+      return (
+        <div style={{color:"rgba(0,0,0,0.87"}} >
+        <link href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto&display=swap" rel="stylesheet"/>
+
+          <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/>
+          </BannerStyle>
+
+          <ImagemSeçao2>
+            <Grid container spacing={3}>
+              <Grid item xs={12} md={1}></Grid>
+              <Grid item xs={12} md={10}>
+                <div>
+                  <h3><strong style={{fontWeight:"700"}}>Plataforma Integrada de Recursos Educacionais Digitais,</strong><br/>uma iniciativa do Ministério da Educação!</h3>
+
+                  <p>A <strong>Plataforma Integrada de RED do MEC</strong> é parte do processo de implementação do Compromisso 6 do <AColorido href="http://www.governoaberto.cgu.gov.br/noticias/2017/3o-plano-de-acao-nacional-na-parceria-para-governo-aberto" target="_blank">3º Plano de Ação da Parceria Governo Aberto</AColorido> (OGP-Brasil), que tem por objetivo “incorporar na política educacional o potencial da cultura digital, de modo a fomentar a autonomia para uso, reuso e adaptação de recursos educacionais digitais, valorizando a pluralidade e a diversidade da educação brasileira”.
+                  </p>
+                  <p>Seguindo o compromisso, a <strong>Plataforma Integrada de RED do MEC</strong> visa fortalecer a distribuição de recursos educacionais digitais para o ensino básico brasileiro. Há preferência pela disponibilização de Recursos Educacionais Abertos (REA), ou seja, recursos que “se situem no domínio público ou que tenham sido divulgados sob licença aberta que permita acesso, uso, adaptação e redistribuição gratuita por terceiros, mediante nenhuma restrição ou poucas restrições.” <AColorido  href="http://www.unesco.org/new/fileadmin/MULTIMEDIA/HQ/CI/CI/pdf/Events/Portuguese_Paris_OER_Declaration.pdf" target="_blank">(Declaração REA de Paris, 2012)</AColorido>.
+                  </p>
+                </div>
+              </Grid>
+              <Grid item xs={12} md={1}></Grid>
+            </Grid>
+          </ImagemSeçao2>
+
+          <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={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={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>
+          </Secao3>
+
+
+
+
+          <Grid container spacing={3}>
+            <Grid item xs={12} md={1}></Grid>
+            <Grid item xs={12} md={10}>
+              <Secao4>
+                <div class="texto" style={{paddingTop:"70px"}}>
+                  <p>O <a href="http://www.planalto.gov.br/ccivil_03/_ato2011-2014/2014/lei/l13005.htm" target="_blank">Plano Nacional de Educação</a> (2014-2024) enfatiza nas metas 5 e 7 a importância dos recursos educacionais abertos para fomentar a qualidade da educação básica. A <a href="http://portal.mec.gov.br/index.php?option=com_docman&view=download&alias=35541-res-cne-ces-001-14032016-pdf&category_slug=marco-2016-pdf&Itemid=30192" target="_blank">Resolução CNE/CES nº 1</a>, de 11 de março de 2016, também destaca a importância dos recursos educacionais abertos para as instituições de educação superior e para as atividades de educação a distância.</p>
+                </div>
+                <div class="titulo">
+                  <h3>TERMOS DE USO</h3>
+                  <p>Início da vigência: agosto de 2017</p>
+                </div>
+                <div class="texto" style={{paddingBottom:"40px"}}>
+                  <p>Aqui estão os “Termos de Uso” da <strong>Plataforma Integrada de RED do MEC</strong>, isto é, as regras de funcionamento da Plataforma e seus serviços,  e o que se espera de seus usuários. Por “usuário”, entende-se qualquer pessoa que acesse o domínio portal.mec.gov.br, tanto para pesquisa (acesso) como para a inclusão de dados e informações (participação) mediante cadastro.</p>
+                  <p>Fazem parte dos Termos de Uso as políticas de responsabilidade, de privacidade e confidencialidade, a licença de uso do conteúdo e as informações sobre como reportar violações.</p>
+                  <p>Ao utilizar a <strong>Plataforma Integrada de RED do MEC</strong>, o usuário aceita todas as condições aqui estabelecidas. O uso da <strong>Plataforma Integrada de RED do MEC</strong> implica aceite das condições aqui elencadas.</p>
+                  <p>Por “serviço”, entende-se qualquer funcionalidade ou ferramenta que permita a interatividade com o usuário, como, por exemplo, usuário subir um recurso, postar um comentário, criar uma coleção ou enviar uma mensagem.</p>
+                  <p>A aceitação destes "Termos de Uso" é indispensável à utilização da <strong>Plataforma Integrada de RED do MEC</strong>. Todos os usuários deverão ler, certificar-se de tê-los entendido e aceitar todas as condições neles estabelecidas. Dessa forma, deve ficar claro que a utilização desta "<strong>Plataforma Integrada de RED do MEC</strong>" implica aceitação completa deste documento intitulado Termos de Uso. Caso tenha dúvidas sobre os termos, utilize o formulário disponível em “Contato” para saná-las.</p>
+                </div>
+              </Secao4>
+            </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={{ marginBottom:"50px",paddingTop: "20px"}}>
+                <SimpleExpansionPanels/>
+              </div>
+            </Grid>
+            <Grid item xs={12} md={1}></Grid>
+            </Grid>
+        </div>
+      );
+    }
+  }
+
+export default UserTerms;

src/img/termos/AbertoG.svg

+<svg width="226" height="233" viewBox="0 0 226 233" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M143.133 172.229V191.729C143.133 193.767 144.881 195.419 146.9 195.419C148.98 195.419 150.667 193.707 150.667 191.729V172.229C155.056 170.682 158.2 166.506 158.2 161.597C158.2 155.37 153.141 150.323 146.9 150.323C140.659 150.323 135.6 155.37 135.6 161.597C135.6 166.506 138.744 170.682 143.133 172.229ZM90.4 56.3703C90.4 37.691 75.1844 22.5484 56.5 22.5484C37.7775 22.5484 22.6 37.7075 22.6 56.3703V67.6452V86.4292C22.6 92.6096 17.5408 97.7097 11.3 97.7097C5.01567 97.7097 0 92.6592 0 86.4292V67.6452V56.3652C0 25.2294 25.2959 0 56.5 0C87.6406 0 113 25.2356 113 56.3652V112.742H203.334C215.863 112.742 226 122.869 226 135.362V210.38C226 222.954 215.852 233 203.334 233H90.4662C77.9368 233 67.8 222.873 67.8 210.38V135.362C67.8 122.81 77.9122 112.777 90.4 112.742V56.3703Z" fill="white" fill-opacity="0.1"/>
+</svg>

src/img/termos/Arrow_double.svg

+<svg width="74" height="84" viewBox="0 0 74 84" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.13646 74.69C5.85887 75.1674 6.02089 75.7795 6.49834 76.0571L14.2789 80.5807C14.7564 80.8583 15.3684 80.6962 15.646 80.2188C15.9236 79.7413 15.7616 79.1293 15.2841 78.8517L8.36809 74.8307L12.3891 67.9146C12.6667 67.4372 12.5046 66.8251 12.0272 66.5475C11.5497 66.2699 10.9376 66.4319 10.66 66.9094L6.13646 74.69ZM69.348 40.4352C54.9449 52.8517 39.2878 61.3041 27.2207 66.6534C21.1897 69.3269 16.062 71.2225 12.4455 72.4487C10.6374 73.0617 9.2076 73.5072 8.23206 73.7989C7.74431 73.9448 7.37018 74.0521 7.11916 74.1227C6.99365 74.158 6.89893 74.1841 6.83619 74.2013C6.80481 74.2098 6.78144 74.2161 6.7662 74.2202C6.75859 74.2223 6.753 74.2238 6.74947 74.2247C6.74771 74.2252 6.74646 74.2255 6.74572 74.2257C6.74536 74.2258 6.74519 74.2258 6.74501 74.2259C6.74498 74.2259 6.74507 74.2259 7.00096 75.1926C7.25686 76.1593 7.25721 76.1592 7.25769 76.1591C7.25803 76.159 7.25864 76.1588 7.25931 76.1586C7.26064 76.1583 7.2625 76.1578 7.26487 76.1571C7.2696 76.1559 7.2764 76.1541 7.28523 76.1517C7.3029 76.1469 7.32873 76.14 7.36257 76.1307C7.43026 76.1123 7.53 76.0848 7.6606 76.0481C7.92179 75.9746 8.30644 75.8642 8.80502 75.7151C9.80214 75.417 11.2551 74.9641 13.0877 74.3427C16.7525 73.1002 21.9373 71.1832 28.0312 68.4818C40.2142 63.0811 56.057 54.5335 70.6539 41.95L69.348 40.4352Z" fill="white"/>
+<path d="M2.37639 9.41044C1.94427 9.75438 1.87278 10.3835 2.21671 10.8156L7.82143 17.8574C8.16536 18.2896 8.79448 18.361 9.2266 18.0171C9.65872 17.6732 9.73021 17.0441 9.38627 16.6119L4.40431 10.3525L10.6637 5.37058C11.0958 5.02665 11.1673 4.39753 10.8234 3.96541C10.4794 3.53329 9.85033 3.4618 9.41821 3.80573L2.37639 9.41044ZM69.6718 34.4529C58.4905 24.2881 41.7993 17.9882 28.0123 14.2281C21.1005 12.3431 14.8816 11.0868 10.3901 10.3016C8.14382 9.90885 6.32822 9.63373 5.07241 9.45658C4.44448 9.368 3.9564 9.3039 3.62432 9.26183C3.45828 9.2408 3.33122 9.22527 3.24518 9.21494C3.20215 9.20978 3.16938 9.20592 3.1471 9.20332C3.13597 9.20202 3.12746 9.20103 3.12161 9.20036C3.11868 9.20002 3.11642 9.19976 3.11482 9.19958C3.11402 9.19949 3.11333 9.19941 3.11293 9.19936C3.11241 9.1993 3.11205 9.19926 2.99914 10.1929C2.88623 11.1865 2.8862 11.1865 2.88635 11.1865C2.88662 11.1865 2.88693 11.1866 2.88747 11.1866C2.88856 11.1867 2.89031 11.1869 2.89272 11.1872C2.89755 11.1878 2.90502 11.1886 2.91512 11.1898C2.93531 11.1922 2.96599 11.1958 3.00689 11.2007C3.08868 11.2105 3.21138 11.2255 3.37298 11.246C3.69617 11.2869 4.17489 11.3498 4.79305 11.437C6.02943 11.6114 7.82321 11.8831 10.0457 12.2717C14.4916 13.0489 20.6478 14.2927 27.486 16.1576C41.199 19.8975 57.5077 26.0976 68.3264 35.9328L69.6718 34.4529Z" fill="white"/>
+</svg>

src/img/termos/Arrow_down.svg

+<svg width="82" height="56" viewBox="0 0 82 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.09395 47.5336C4.83636 48.0221 5.02358 48.627 5.51211 48.8846L13.4733 53.0822C13.9618 53.3398 14.5667 53.1526 14.8242 52.664C15.0818 52.1755 14.8946 51.5706 14.4061 51.313L7.3295 47.5818L11.0607 40.5052C11.3183 40.0167 11.1311 39.4119 10.6425 39.1543C10.154 38.8967 9.54915 39.0839 9.29156 39.5724L5.09395 47.5336ZM72.1729 0.407605C59.7897 17.2486 43.1744 28.9133 29.6213 36.3738C22.8496 40.1014 16.8552 42.7724 12.5568 44.5104C10.4079 45.3792 8.68389 46.0145 7.49969 46.4318C6.90762 46.6405 6.45058 46.7946 6.14295 46.8961C5.98914 46.9468 5.87269 46.9844 5.7954 47.0091C5.75676 47.0215 5.72791 47.0306 5.70907 47.0365C5.69965 47.0395 5.69274 47.0416 5.68835 47.043C5.68616 47.0437 5.6846 47.0442 5.68368 47.0444C5.68322 47.0446 5.683 47.0447 5.68277 47.0447C5.68272 47.0447 5.68283 47.0447 5.97852 48C6.27421 48.9553 6.27464 48.9551 6.27522 48.955C6.27563 48.9548 6.27638 48.9546 6.2772 48.9544C6.27884 48.9538 6.28111 48.9531 6.28401 48.9522C6.28983 48.9504 6.29818 48.9478 6.30905 48.9444C6.33077 48.9376 6.36254 48.9275 6.40412 48.9142C6.4873 48.8876 6.60974 48.8481 6.76966 48.7953C7.08947 48.6898 7.55919 48.5314 8.16438 48.3181C9.37471 47.8917 11.1272 47.2457 13.3065 46.3645C17.6644 44.6025 23.7324 41.8984 30.5857 38.1259C44.2826 30.5863 61.1674 18.7511 73.7842 1.59239L72.1729 0.407605Z" fill="white" fill-opacity="0.5"/>
+</svg>

src/img/termos/Email.svg

+<svg width="121" height="121" viewBox="0 0 121 121" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M90.4533 42.3498C90.4533 39.0223 87.7391 36.2998 84.4217 36.2998H36.1684C32.851 36.2998 30.1367 39.0223 30.1367 42.3498V78.6498C30.1367 81.9773 32.851 84.6998 36.1684 84.6998H84.4217C87.7391 84.6998 90.4533 81.9773 90.4533 78.6498V42.3498ZM84.4217 42.3498L60.295 57.4748L36.1684 42.3498H84.4217ZM84.4217 78.6498H36.1684V48.3998L60.295 63.5248L84.4217 48.3998V78.6498Z" fill="white"/>
+<path d="M119.526 60.5C119.526 93.3646 92.9896 120 60.2632 120C27.5367 120 1 93.3646 1 60.5C1 27.6354 27.5367 1 60.2632 1C92.9896 1 119.526 27.6354 119.526 60.5Z" stroke="white" stroke-width="2"/>
+</svg>