@extends('layouts.app')

@section('content')


<style>
    ul {
        list-style: none;

    }

    ul li:before {

        content: '✓';

    }
</style>
    <div class="container py-5">
        <div class="row">




            <div class="px-md-5 p-3  m-1 col-md-12 d-flex flex-column justify-content-center">
                <h1 class="text-center">Como Funciona </h1>
                <p class="mb-2 text-justify text-wrap">Com a Central do Trabalhador Autônomo você amplia as formas de
                    aumentar sua renda. Nossa missão é simplificar o processo de busca e contratação de profissionais
                    autônomos, proporcionando uma experiência confiável e eficiente. Veja como é simples: </p>
            </div>
        </div>


        <div class="row d-flex justify-content-center text-center p-1">
          


            <div class="col-md-2 d-flex justify-content-center m-1">
                <div class="row">


                    <div class="col-md-12">
                        <img style="width: 200px;" src="{{ URL('imagens/1.png') }}" alt="Card image cap">

                    </div>
                    <div class="col-md-12  my-1 py-1">
                        <h5>Cadastro</h5>
                        <p >Registre-se para ter acesso a todas as funcionalidades da Central do Trabalhador Autônomo.</p>

                    </div>

                </div>


              
    
            </div>


            <div class="col-md-2 d-flex justify-content-center m-1">
                <div class="row">


                    <div class="col-md-12">
                        <img style="width: 200px;" src="{{ URL('imagens/seta.png') }}" alt="Card image cap">

                    </div>
                   

                </div>
            
    
            </div>

            <div class="col-md-2 d-flex justify-content-center m-1">
                <div class="row">


                    <div class="col-md-12">
                        <img style="width: 200px;" src="{{ URL('imagens/2.png') }}" alt="Card image cap">

                    </div>
                    <div class="col-md-12 my-1 py-1" style="top:-10px;">
                        <h5>Busca</h5>
                        <p >Busque pelo serviço que deseja contratar! &nbsp</p>

                    </div>

                </div>


              
    
            </div>



            <div class="col-md-2 d-flex justify-content-center m-1">
                <div class="row">


                    <div class="col-md-12">
                        <img style="width: 200px;" src="{{ URL('imagens/seta.png') }}" alt="Card image cap">

                    </div>
                   

                </div>
            
    
            </div>


            <div class="col-md-2 d-flex justify-content-center m-1">
                <div class="row">


                    <div class="col-md-12">
                        <img style="width: 200px;" src="{{ URL('imagens/3.png') }}" alt="Card image cap">

                    </div>
                    <div class="col-md-12  my-1 py-1">
                        <h5>Contato</h5>
                        <p >Negocie com o prestador: horário, preço, endereço e muito mais. </p>

                    </div>

                </div>


              
    
            </div>
            
        </div>

    </div>



    <div class="container py-5 text-justify">



        <div class="row rounded shadow" style="border-top: solid 3px #13317c;">
            <div class="col-md-6">
                <img class="d-block w-100 card-img mx-auto" src="{{ URL('imagens/atendimento.jpg') }}"
                    style=" object-fit: cover; ">
            </div>
            <div class="col-md-6">
                <div class="card-body justify-content-center">
                    <div class="card-title mx-auto py-1">
                        <h5 class="mb-1 p-3 px-5" >Como faço para cadastrar e divulgar meus serviços no catálogo da Central
                            do Trabalhador Autônomo?
                        </h5>
                    </div> 
                    <div class="col-md-12 px-5 mx-auto py-1 justify-content-center">
                        
                        <ul class="list-group">

                            <li>

                                Verifique se seu município tem a Central do Trabalhador Autônomo.
                                <a href="{{ route('locais') }}" class="text-secondary" style="text-decoration:none;">Clique abaixo para verificar os municípios e endereço para atendimento</a>.<br>
                                <a href="{{ route('locais') }}" class="btn btn-primary">Lista de municípios</a>

                            </li> <br>
                            <li>
                                Cadastre-se presencialmente na Central do Trabalhador Autônomo do
                                seu município para oferecer seus serviços profissionais. 
                            </li><br>
                            <li>
                                Leve os seguintes documentos: CPF, RG, Comprovante de endereço
                                dos últimos 90 dias, certificados e comprovação de experiência caso
                                possua.
                            </li><br>
                            <li>
                                Participe e conclua o curso de Formação Básica para Autônomos,
                                oferecido pela Central do Trabalhador Autônomo do município parceiro.

                            </li><br>
                            <li>
                                Seu cadastro é ativado no catálogo de serviços e seus contatos aparecem nas buscas
                                realizadas pelos contratantes cadastrados.

                            </li><br>
                            <li>
                                O contratante pode entrar em contato com você. Negocie com o
                                contratante: o preço do serviço, horário, dia e etc.
                            </li><br>
                            
                        </ul>
                    </div>
                    <div class="col-md-12 mt-7 px-5 mx-auto justify-content-center">

                    </div>
                </div>
            </div>
        </div>



    </div>
    <div class="row m-5">
        <hr style="width: 40%; margin: 0 auto; height: 3px; color:#13317c;" class="rounded"><br>
    </div>




    <div class="container py-5 text-justify">



        <div class="row rounded shadow" style="border-top: solid 3px #13317c;">
            
            <div class="col-md-6">
                <div class="card-body justify-content-center">
                    <div class="card-title mx-auto py-1">
                        <h5 class="mb-1 p-3 px-5">Encontre prestadores de serviços perto de você!
                        </h5>
                    </div> <br>
                    <div class="col-md-12 px-5 mx-auto py-1 justify-content-center">
                        
                        <ul class="list-group">

                            <li>
                                <b>Cadastro</b> <br>
                                Cadastre-se para ter acesso a todas as funcionalidades da Central do
                                Trabalhador Autônomo. Cadastro on-line ou presencial, simples e rápido.
                            </li><br>
                            <li>
                                <b>Busca</b> <br>
                                Busque pelo serviço que deseja contratar! Basta realizar os filtros que
                                precisa, seja por ocupação, município ou nome.

                            </li><br>
                            <li>
                                <b>Contato</b> <br>
                                Negocie direto com o prestador todos os detalhes, como horário, preço,
                                endereço, e o que mais precisar!
                            </li><br>
                            
                        </ul>
                    </div>
                    <div class="col-md-12 mt-7 px-5 mx-auto justify-content-center">

                    </div>
                </div>
            </div>

            <div class="col-md-6">
                <img class="d-block w-100 card-img mx-auto" src="{{ URL('imagens/contratante.png') }}"
                    style=" object-fit: cover; ">
            </div>
        </div>



        <div class="row rounded shadow my-5" style="border-top: solid 3px #13317c;">
            <div class="col-md-6">
                <img class="d-block w-100 card-img mx-auto" src="{{ URL('imagens/regras.png') }}"
                    style=" object-fit: cover; position:relative;top:10%; ">
            </div>
            <div class="col-md-6">
                <div class="card-body justify-content-center">
                    <div class="card-title mx-auto py-1">
                        <h5 class="mb-1 p-3 px-5" >Requisitos para se cadastrar e regras estabelecidas
                        </h5>
                    </div> 
                    <div class="col-md-12 px-5 mx-auto py-1 justify-content-center">
                        
                        <h6>Para o Trabalhador</h6>
                        <p class="mb-1">

                            Ser maior de 18 anos de idade, atuar em uma ou mais categorias oferecidas pelo catálogo de serviços da
                            Central do Trabalhador Autônomo <br> <a href="{{ url('/regTrabalhador') }}" class="btn btn-primary">Veja Mais</a>
                        </p>
                    </div>
                    <div class="col-md-12  px-5 mx-auto py-1 justify-content-center">

                        <h6>Para o Contratante</h6>
                        <p class="mb-1">
                            <ul>
                                <li>Ser maior de 18 anos de idade ou emancipado.

                                </li>

                                <li>Realizar cadastro simples e rápido na plataforma da Central do Trabalhador Autônomo.

                                </li>
                                

                                <li>Concordar com algumas regras estabelecidas.</li>
                            </ul> <a href="{{ url('/regContratante') }}" class="btn btn-primary">Veja Mais</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>

    </div>
@endsection