Carousel.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 "react-responsive-carousel/lib/styles/carousel.min.css";
import { Carousel } from 'react-responsive-carousel';
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";
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 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;

    p {
      margin: 0 0 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: absolute;
    display: table-row;
  }

  .arrow{
    display: table-row;
    position: absolute;
    margin-left: 55px;
    margin-top: -15px;
    width: 282px;
  }

  .circle{
    display: table-row;
    position: absolute;
    margin-top: -100px;
    margin-left: 795px;
    width: 191px;
  }

  h2 {
    margin-top: 20px;
    margin-bottom: 10px;
    font-weight: 500;
  }

  .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;
      margin-top: 0px;
    }


    .licences{
      padding: 35px 150px 50px 35px;
      margin-top: 50pz;
      background-image: url(${Entenda});
      background-repeat: no-repeat;
      background-size: cover;
      p::before{
        content: url(${V});
      }
      p{
        padding-left: 20px;
        font-family: "Kalam", regular;
        font-size: 24px;
        white-space: nowrap;
      }
      .row{
         padding-bottom: 5px;


      }
    }
  }


  .box-text-2{
    background-image: url(${OrthogonalLineUp}),url(${OrthogonalLineDown});
    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;
    }
    .row {
      margin-right: -15px;
      margin-left: -15px;

      p {
        padding-left: 15px;
      }
    }
  }

}

.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 CarouselStyled = styled(Carousel)`

  .carousel.carousel-slider {
    height: 500px !important;
  }

  .carousel .slider-wrapper.axis-horizontal {
    height: 500px !important;
  }
  .carousel .control-dots {
    position: absolute !important;
    padding-bottom: 20px;
  }

  .carousel .control-arrow:before, .carousel.carousel-slider .control-arrow:before {
    margin: 0 5px;
    display: inline-block;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    content: '    ';
  }
  .carousel .control-arrow {
    background: transparent !important;
  }
  .m4d-icons {
    size: 50px
  }


`


class TermsCarousel extends Component {
  render() {
        return (
            <CarouselStyled
              showThumbs= {false}
              showStatus= {false}
              transitionTime={1000}

              width={"1366px"}

            >
                <div >
                  <Slide>
                    <div className="tmpl1">
                      <div className="container">
                        <Grid container spacing={0}>
                          <Grid item xs={6} >
                            <div className="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 style={{display:"flex",justifyContent:"center"}} item xs={6}>
                            <div className="box-image">
                              <img src={Handshake} alt="handshake"/>
                            </div>
                          </Grid>
                        </Grid>
                      </div>
                    </div>
                  </Slide>

                </div>
                <div>
                  <Slide>
                    <div className="tmpl2">
                      <div className="container">
                        <div className="title">
                          <h2>O que é a Plataforma Integrada MEC RED e como ela está organizada?</h2>
                          <div className="images">
                            <div className="arrow">
                              <img src={Arrow_O} alt="Arrow_O"/>
                            </div>
                            <div className="circle">
                              <img src={Arrow_O_1} alt="Arrow_O_1"/>
                            </div>
                          </div>
                        </div>
                        <Grid container>
                          <Grid className="box-text" item xs={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>
                          </Grid>
                          <Grid className="box-text" item xs={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>
                          </Grid>
                        </Grid>
                      </div>
                    </div>
                  </Slide>
                </div>
                <div>
                  <Slide>
                    <div className="tmpl3">
                      <div className="container">
                        <Grid className="title" container spacing={1}>
                          <Grid item xs={12}>
                            <h3>Os recursos educacionais disponibilizados<br/> podem ser de dois tipos:</h3>
                          </Grid>
                        </Grid>
                        <Grid className="box-text1" container spacing={1}>
                          <Grid className="text" item xs={8}>
                            <div className="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 className="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 className="box-text2" item xs={4}>
                            <div className="content">
                              <img src={Arrow_down} alt="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 className="content">
                              <img alt="" className="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>
                  </Slide>
                </div>
                <div>
                  <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 style={{width:"150px",height:"150px"}} src={Pessoa} alt="Pessoa" /> </Grid>
                        <Grid item xs={2} style={{alignSelf:"center"}}> <img style={{width:"150px",height:"150px"}} src={Email} alt="Email" /> </Grid>
                        <Grid item xs={2} style={{alignSelf:"center"}}> <img style={{width:"150px",height:"150px"}} src={Seguranca} alt="Seguranca" /> </Grid>
                        </Grid>
                      </div>
                    </div>
                  </Slide>
                </div>
                <div>
                  <Slide>
                    <div class="tmpl5">
                      <div class="container">
                       <Grid container justify="space-evenly" spacing={12}>
                        <Grid style={{paddingRight: "40px"}} item xs={6}>
                          <div class="title">
                            <img src={Like} alt= "Like"/>
                            <h2>O que publicar?</h2>
                          </div>
                          <img src={Line} alt="Line"/>
                          <div class="box-text">
                            <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>
                          </div>
                        </Grid>
                        <Grid item xs={6}>
                          <div class= "title">
                            <img src={Unlike} alt="Unlike"/>
                            <h2>O que não publicar?</h2>
                          </div>
                          <img src={Line} alt="Line"/>
                          <div class="box-text">
                            <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>
                        </Grid>
                       </Grid>
                      </div>
                    </div>
                  </Slide>
                </div>
                <div>
                  <Slide>
                    <div className="tmpl6">
                      <div className="container">
                        <Grid container>
                          <Grid className="box-text-1" item xs={7}>
                            <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>
                            <div className="licences">
                              <Grid className="row" container>
                                <Grid item xs={6}>
                                  <p>CC-BY</p>
                                </Grid>
                                <Grid item xs={6}>
                                  <p>CC-BY-SA</p>
                                </Grid>
                              </Grid>
                              <Grid className="row" container>
                                <Grid item xs={6}>
                                  <p>CC-BY-NC</p>
                                </Grid>
                                <Grid item xs={6}>
                                  <p>CC-BY-NC-SA</p>
                                </Grid>
                              </Grid>
                            </div>
                          </Grid>
                          <Grid className="box-text-2" item xs={5}>
                            <Grid className="row" container>
                              <Grid item xs={2}>
                                <p className="licenses_type">CC-BY</p>
                              </Grid>
                              <Grid item xs={10}>
                                <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>
                              </Grid>
                            </Grid>
                            <Grid className="row" container>
                              <Grid item xs={2}>
                                <p className="licenses_type">NC</p>
                              </Grid>
                              <Grid item xs={10}>
                              <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>
                              </Grid>
                            </Grid>
                            <Grid className="row" container>
                              <Grid item xs={2}>
                                <p className="licenses_type">SA</p>
                              </Grid>
                              <Grid item xs={10}>
                                <p> quer dizer que as novas criações devem ser licenciadas sob termos idênticos aos do trabalho original</p>
                              </Grid>
                            </Grid>
                          </Grid>
                        </Grid>
                      </div>
                    </div>
                  </Slide>
                </div>
                <div>
                  <Slide>
                    <div class="tmpl7">
                      <div class="container">
                        <Grid container>
                          <Grid className="title" item xs={4}>
                            <h2>Respeitamos<br/> a sua privacidade</h2>
                          </Grid>
                          <Grid className="box-text" item xs={8}>
                            <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>
                          </Grid>
                        </Grid>
                        <div class="rodape col-md-12">
                          <p>Dúvidas? Leia a íntegra dos <span ng-click="hide()">Termos de Uso</span> ou fale conosco por meio do <a style={{color: "#fff"}} href="contato">formulário de contato</a>.</p>
                        </div>
                      </div>
                    </div>
                  </Slide>
                </div>
            </CarouselStyled>
        )
    }
}

export default TermsCarousel;