AboutCarousel.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 "./AboutCarousel.css"

//Image Import
import { Img1 } from "ImportImages.js";
import { Img2 } from "ImportImages.js";
import { Img3 } from "ImportImages.js";
import { Img4 } from "ImportImages.js";
import { Img5 } from "ImportImages.js";

const CarouselAbout = styled(Carousel)`

  .carousel.carousel-slider .control-arrow {
    font-size: 18px !important;
    bottom: 40% !important;
  }

  .carousel .thumb{
    border-radius: 50%;
    width:62px;
    filter: grayscale(1);
  }

  .carousel .thumb.selected, .carousel .thumb:hover {
    border: 2px solid #a4a4a4 !important;
    filter:grayscale(0);
  }


  div {
    color: #666 !important;
    text-align: center !important;

    img {
      height: 52px;
      width: 52px !important;
      display: block;
      margin: auto;

    }
    span {
      font-size: 26px;
      font-weight: 400;
      margin-bottom: 10px;
    }
    p {
      font-size: 15px;
      line-height: 1.42857143;
      text-align: center;
      display: block;
      margin: auto;
      /* padding-inline: 235px */
    }
  }
`



function AboutCarousel({ contrast }) {

  return (
    <div id={"You-Can-Caroussel"}>
      <CarouselAbout showThumbs={true}
        showStatus={false}
        showIndicators={false}
        interval={8000}
        transitionTime={1000}
        autoPlay
        infiniteLoop

      >
        <div className={`${contrast}BackColor`}>
          <img src={Img1} alt="Slide 1" />
          <span className={`${contrast}TextColor`}>Buscar e Baixar Recursos</span>
          <p className={`${contrast}TextColor`} style={{ margin: 0, padding: 0 }}>São mais de 20 mil recursos educacionais à sua disposição. São recursos de portais parceiros do MEC e de professores que, como você, atuam na Educação Básica!</p>
        </div>
        <div className={`${contrast}BackColor`}>
          <img src={Img2} alt="Slide 2" />
          <span className={`${contrast}TextColor`}>Guardar Recursos em Coleções</span>
          <p className={`${contrast}TextColor`} style={{ margin: 0, padding: 0 }}>Guarde e organize em coleções aqueles recursos que você considera ser interessantes para elaborar a sua aula. Aproveite e indique aos colegas pelas redes sociais ou e-mail.</p>
        </div>
        <div className={`${contrast}BackColor`}>
          <img src={Img3} alt="Slide 3" />

          <span className={`${contrast}TextColor`}>Compartilhar suas Experiências</span>
          <p className={`${contrast}TextColor`} style={{ margin: 0, padding: 0 }}>Você pode relatar suas experiências sobre o uso de recursos no seu cotidiano escolar. Aproveite esse espaço para sugerir e conhecer novos usos para um mesmo recurso.</p>

        </div>
        <div className={`${contrast}BackColor`}>
          <img src={Img4} alt="Slide 4" />

          <span className={`${contrast}TextColor`}>Publicar o seu Recurso</span>
          <p className={`${contrast}TextColor`} style={{ margin: 0, padding: 0 }}>Colabore e ajude a fortalecer a plataforma publicando um recurso educacional desenvolvido por você ou pelo coletivo da escola do qual faz parte. Compartilhe seu conhecimento e dê visibilidade ao seu recurso, torne-o público enriquecendo o conhecimento partilhado!</p>


        </div>
        <div className={`${contrast}BackColor`}>
          <img src={Img5} alt="Slide 5" />

          <span className={`${contrast}TextColor`}>Encontrar Materiais de Formação</span>
          <p className={`${contrast}TextColor`} style={{ margin: 0, padding: 0 }}>A plataforma disponibiliza um conjunto de materiais de formação desenvolvidos pelo Ministério da Educação com diversidade de temas e recursos educacionais.</p>


        </div>
      </CarouselAbout>
    </div>
  );
}

export default AboutCarousel;