@extends('layout.padrao')
@section('content')
@include('Intranet.menu')

    @if(Auth::user()->checkCharacteristics(['1', '2', '3', '4']))
        <div class="col folha-branca-soft margin-top-15">
    @else
        <div class="col folha-branca-soft">
    @endif
    <div class="row padding-45">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 base">
            <div class="row margin-top-45">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-3 col-xl-3 img-badge base1">
                    <img src="{!! asset('/image/LGPD/wpf_security-checked.svg') !!}" class="badgeLgpd">
                </div>
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 base2">
                    <div class="titleLgpd text-center">
                        LGPD
                    </div>
                    <p class="text-center numLei margin-top-10">Lei nº 13.709/2018</p>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-3 col-xl-3 base3">
                    <div class="descriptionLgpd">
                        LEI GERAL 
                        DE PROTEÇÃO 
                        DE DADOS
                    </div>
                </div>

                <div class="w-100"></div>

                <p class="infoLgpd">
                  A Lei Geral de Proteção de Dados (LGPD),
                  sancionada em agosto de 2018
                  estabelece regras para <b class="grifado"> uso</b>, <b class="grifado"> coleta</b>,
                  <b class="grifado"> armazenamento</b> e <b class="grifado"> compartilhamento de dados</b> 
                  dos usuários por empresas privadas e públicas.
                </p>
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 base4 text-center">
            <img src="{!! asset('/image/LGPD/communicationMan.svg') !!}" class="img-fluid">
        </div>

        <!-- Divisão - Objetivo -------------------------------------------------------------------------------- -->

        <h2 class="linhaBlue margin-top-60">
          <span class="divisoriaBlue">
            <span class="textoTopico">OBJETIVO</span>
          </span>
        </h2>

        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-3 col-xl-3">
            
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 text-center align-self-center"> 
            <img src="{!! asset('/image/LGPD/technologyWoman.svg') !!}" class="img-fluid techWoman margin-bottom-20">
            <div class="cardObjetivo fade divFlutuante">
                O objetivo principal é garantir maior <b class="grifado">segurança</b>, 
                <b class="grifado">privacidade</b> e <b class="grifado">transparência</b> no uso de 
                informações pessoais.
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-3 col-xl-3 text-center">
            <div class="margin-top-90">
                <div class="objTopics margin-bottom-20 fade">
                    TRANSPARÊNCIA
                </div>
                <div class="objTopics margin-bottom-20 fade">
                    PRIVACIDADE
                </div>
                <div class="objTopics margin-bottom-20 fade">
                    SEGURANÇA
                </div>
            </div>
        </div>

        <!-- Divisão - Fundamentos -------------------------------------------------------------------------------- -->

        <h2 class="linhaBlue margin-top-60">
          <span class="divisoriaBlue">
            <span class="textoTopico">FUNDAMENTOS</span>
          </span>
        </h2>

        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">
        <ol class="fundamentos">
            <li class="fade">
                O <b>respeito</b> à privacidade;
            </li>
            <li class="fade">
                A <b>autodeterminação</b> informativa;
            </li>
            <li class="fade">
                A <b>liberdade</b> de expressão, informação, comunicação e opinião;
            </li>
            <li class="fade">
                A <b>inviolabilidade</b> da intimidade, da honra e da imagem;
            </li>
            <li class="fade">
                O <b>desenvolvimento econômico</b>, <b>tecnológico</b> e a <b>inovação</b>;
             </li>
            <li class="fade">
                A <b>livre iniciativa</b>, <b>livre concorrência</b> e <b>defesa do consumidor</b>;
            </li>
            <li class="fade">
                Os <b>Direitos humanos</b>, o <b>livre desenvolvimento da personalidade</b>, 
                a <b>dignidade</b> e o <b>exercício da cidadania</b> pelas pessoas físicas.
            </li>
        </ol>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 text-center align-self-center">
            <img src="{!! asset('/image/LGPD/supportMan.svg') !!}" class="img-fluid supportMan margin-bottom-20">
        </div>

        <!-- Divisão - CICLO DE DADOS -------------------------------------------------------------------------------- -->

        <h2 class="linhaBlue margin-top-60 margin-bottom-30">
          <span class="divisoriaBlue">
            <span class="textoTopico">CICLO DE DADOS</span>
          </span>
        </h2>

        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 text-center align-self-center">
            <img src="{!! asset('/image/LGPD/cicloDeDados.svg') !!}" class="img-fluid margin-bottom-20 fade">
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-7 col-xl-7">
            <div class="questDados margin-bottom-20">
                Quais são os dados que o sistema TABEX coleta?
            </div>
            <div class="textInfo margin-bottom-15">
                Coletamos seus <b> dados pessoais </b> (nome, telefone e e-mail) para cadastro e identificação do usuário. 
                Os seus dados pessoais serão armazenados e  preservados por um período indeterminado. </br></br>
                Você poderá, a qualquer momento:
            </div>
            <div class="infoDados margin-bottom-15 fade">
                Ter acesso às informações sobre a forma e a duração de 
                tratamento dos seus dados na nossa plataforma
            </div>
            <div class="infoDados margin-bottom-15 fade">
                Solicitar a atualização ou correção dos seus dados
            </div>
            <div class="infoDados margin-bottom-15 fade">
                Solicitar a eliminação dos seus dados pessoais tratados e 
                revogação do consentimento, nos termos da Lei
            </div>
        </div>

        <div class="sep-line-dados fade"></div>
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 fade">
            <div class="questDados margin-bottom-20">
                Onde meus dados ficam armazenados?
            </div>
            <div class="textInfo margin-bottom-15">
                Todos os seus dados ficam armazenados seguramente no Sistema TABEX, 
                sob a supervisão do departamento de TI.     
            </div>
        </div>

        <div class="sep-line-dados fade"></div>
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 fade">
            <div class="questDados margin-bottom-20">
                Quais são os impactos da LGPD para mim?
            </div>
            <div class="textInfo margin-bottom-15">
                A Lei Geral de Proteção de Dados estabelece uma série de regras e restrições para que os seus dados, quando em posse da empresa, sejam tratados de forma correta e segura. 
                </br>
                </br>
                Esta lei garante ao usuário que a empresa trate seus dados de acordo com o que determina a legislação, garantindo sua eficácia através de fiscalização e penalidades, permitindo que todos tenham mais tranquilidade ao saber que  suas informações e documentações estão sendo manejadas com cuidado e segurança. 
            </div>
        </div>

        <!-- Divisão - CONTE CONOSCO -------------------------------------------------------------------------------- -->

        <h2 class="linhaBlue margin-top-60 margin-bottom-30">
          <span class="divisoriaBlue">
            <span class="textoTopico">CONTE CONOSCO</span>
          </span>
        </h2>

        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 align-self-center">
            <div class="conteConoscoText fade">
                Esperamos que essa página tenha te ajudado a 
                entender melhor sobre a segurança dos seus dados.
                </br></br>
                A <b class="grifado">LGPD</b>, é uma lei extensa e passível de 
                mudanças a qualquer momento, por isso é muito
                importante que você se mantenha atualizado.
                </br></br>
                Qualquer dúvida entre em contato conosco através 
                do e-mail  <a href="mailto:csaprojetos@commodity.ch">csaprojetos@commodity.ch</a>.
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 text-center align-self-center">
            <img src="{!! asset('/image/LGPD/conversation.svg') !!}" class="img-fluid margin-bottom-20">
        </div>

    </div>
</div>

<script>
    $(window).on("load",function() {
    $(window).scroll(function() {
        var windowBottom = $(this).scrollTop() + $(this).innerHeight();
        $(".fade").each(function() {
        /* Check the location of each desired element */
        var objectBottom = $(this).offset().top + $(this).outerHeight();
        
        /* If the element is completely within bounds of the window, fade it in */
        if (objectBottom < windowBottom) { //object comes into view (scrolling down)
            if ($(this).css("opacity")==0) {$(this).fadeTo(500,1);}
        } else { //object goes out of view (scrolling up)
            if ($(this).css("opacity")==1) {$(this).fadeTo(500,0);}
        }
        });
    }).scroll(); //invoke scroll-handler on page-load
    });
</script>

@include('Intranet.style')
@endSection