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 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 Arrow_down from "../img/termos/Arrow_down.svg";
import Arrow_double from "../img/termos/Arrow_double.svg";
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";
//Image Import
import { Aberto } from "ImportImages.js";
import { Fechado } from "ImportImages.js";
import { Arrow_O } from "ImportImages.js";
import { Arrow_O_1 } from "ImportImages.js";
import { OrthogonalLineUp } from "ImportImages.js";
import { OrthogonalLineDown } from "ImportImages.js";

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: ${props => props.contrast === "" ? "#00BCD4" : "black"};
        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: ${props => props.contrast === "" ? "#673AB7" : "black"};

        .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: ${props => props.contrast === "" ? "#E81F4F" : "black"};

        .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: ${props => props.contrast === "" ? "#FF7F00" : "black"};

        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: ${props => props.contrast === "" ? "#1AB9DE" : "black"};

        .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: ${props => props.contrast === "" ? "#673AB7" : "black"};

        .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: ${props => props.contrast === "" ? "#E81F4F" : "black"};

        .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
    }


`
export default function TermsCarousel({ contrast }) {
    return (
        <CarouselStyled
            showThumbs={false}
            showStatus={false}
            transitionTime={1000}

            width={"1366px"}

        >
            <div >
                <Slide contrast={contrast}>
                    <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 contrast={contrast}>
                    <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 contrast={contrast}>
                    <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 contrast={contrast}>
                    <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 contrast={contrast}>
                    <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 contrast={contrast}>
                    <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 contrast={contrast}>
                    <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>
    )
}