@extends('layout.padrao')
@section('content')
@section('title', 'Social Actions')

<!-- Primeira Página -->
<div class="row cortar">
    <div class="col-6 col-lg-6 col-md-5 col-sm-12">
        <div class="aboutPage">
            <div class="mainTitle">
                <p class="smallerSpacing"> SOCIAL </p>
                <p> ACTIONS </p>
            </div>
            <div class="aboutSection">
                <p>
                    Com o intuito de preservar vidas, a <b>Commodity Supplies AG</b> passou a apoiar o Instituto
                    LariAmor.
                </p>
                <p>
                    Que só em 2020 <b>beneficiou mais de 60 ONGs</b>, incluindo trabalhos com moradores de rua, comunidades
                    em vulnerabilidades, residenciais, abrigos, casas de apoio, reservas indígenas e animais.
                </p>

                <a href="#section2">
                    <button class="btn btn-blue" id="readMore">
                        READ MORE
                    </button>
                </a>
            </div>
        </div>
    </div>
    <div class="col-6 col-lg-6 col-md-7 d-sm-none d-md-block illustrationColumn">
        <img src="{!! asset('/image/SocialActions/illustrations/pg1-illustrationWebPeople.png') !!}" class="illustrationWeb img-fluid">
        <img src="{!! asset('/image/SocialActions/blobs/pg1-blob1.png') !!}" class="blob1 img-fluid">
        <img src="{!! asset('/image/SocialActions/blobs/pg1-blob2.png') !!}" class="blob2 img-fluid">
        <img src="{!! asset('/image/SocialActions/blobs/pg1-blob3.png') !!}" class="blob3 img-fluid">
        <img src="{!! asset('/image/SocialActions/blobs/pg1-blob4.png') !!}" class="blob4 img-fluid">
    </div>
</div>

<div class="row segundaPag" id="section2">
    <div class="col-12 col-lg-12 col-md-12">
        <div class="aboutPage">

            <div class="subTitle">
                <p> Read More </p>
                <div class="subLine"></div>
            </div>

            <div class="readMore">
                <img src="{!! asset('/image/SocialActions/blobs/pg2-blob1.png') !!}" class="blob2-1 img-fluid">
                <div class="row">
                    <div class="col-1" style="text-align: end">
                        <div class="btn left" id="btnLeft" onclick="esquerda()">
                            <i class="fas fa-chevron-left"></i>
                        </div>
                    </div>
                    <div class="col-10">
                        <!-- Galeria de fotos -->
                        <section>
                            <div class="container gal-container">
                                <!-- Primeira página da galeria -->
                                <div class="col-md-8 col-sm-12 co-xs-12 gal-item" id="a1" style="display: block;">
                                    <div class="box">
                                        <a href="#" data-toggle="modal" data-target="#1">
                                            <img
                                                src="{!! asset('/image/SocialActions/imagesONG/IMG-20210609-WA0031.jpg') !!}">
                                        </a>
                                        <div class="modal fade" id="1" tabindex="-1" role="dialog">
                                            <div class="modal-dialog" role="document">
                                                <div class="modal-content">
                                                    <button type="button" class="close" data-dismiss="modal"
                                                        aria-label="Close"><span aria-hidden="true">×</span></button>
                                                    <div class="modal-body">
                                                        <img
                                                            src="{!! asset('/image/SocialActions/imagesONG/IMG-20210609-WA0031.jpg') !!}">
                                                    </div>
                                                    <div class="col-md-12 description">
                                                        <h4>Nossa Equipe</h4>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4 col-sm-6 co-xs-12 gal-item" id="a2" style="display: block;">
                                    <div class="box">
                                        <a href="#" data-toggle="modal" data-target="#2">
                                            <img
                                                src="{!! asset('/image/SocialActions/imagesONG/IMG-20210609-WA0069.jpg') !!}">
                                        </a>
                                        <div class="modal fade" id="2" tabindex="-1" role="dialog">
                                            <div class="modal-dialog" role="document">
                                                <div class="modal-content">
                                                    <button type="button" class="close" data-dismiss="modal"
                                                        aria-label="Close"><span aria-hidden="true">×</span></button>
                                                    <div class="modal-body">
                                                        <img
                                                            src="{!! asset('/image/SocialActions/imagesONG/IMG-20210609-WA0069.jpg') !!}">
                                                    </div>
                                                    <div class="col-md-12 description">
                                                        <h4>Distribuição de flores</h4>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4 col-sm-6 co-xs-12 gal-item" id="a3" style="display: block;">
                                    <div class="box">
                                        <a href="#" data-toggle="modal" data-target="#3">
                                            <img
                                                src="{!! asset('/image/SocialActions/imagesONG/IMG-20210609-WA0077.jpg') !!}">
                                        </a>
                                        <div class="modal fade" id="3" tabindex="-1" role="dialog">
                                            <div class="modal-dialog" role="document">
                                                <div class="modal-content">
                                                    <button type="button" class="close" data-dismiss="modal"
                                                        aria-label="Close"><span aria-hidden="true">×</span></button>
                                                    <div class="modal-body">
                                                        <img
                                                            src="{!! asset('/image/SocialActions/imagesONG/IMG-20210609-WA0077.jpg') !!}">
                                                    </div>
                                                    <div class="col-md-12 description">
                                                        <h4>Distribuição de cestas básicas</h4>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4 col-sm-6 co-xs-12 gal-item" id="a4" style="display: block;">
                                    <div class="box">
                                        <a href="#" data-toggle="modal" data-target="#4">
                                            <img
                                                src="{!! asset('/image/SocialActions/imagesONG/IMG-20210609-WA0106.jpg') !!}">
                                        </a>
                                        <div class="modal fade" id="4" tabindex="-1" role="dialog">
                                            <div class="modal-dialog" role="document">
                                                <div class="modal-content">
                                                    <button type="button" class="close" data-dismiss="modal"
                                                        aria-label="Close"><span aria-hidden="true">×</span></button>
                                                    <div class="modal-body">
                                                        <img
                                                            src="{!! asset('/image/SocialActions/imagesONG/IMG-20210609-WA0106.jpg') !!}">
                                                    </div>
                                                    <div class="col-md-12 description">
                                                        <h4>Família recebendo doações</h4>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4 col-sm-6 co-xs-12 gal-item" id="a5" style="display: block;">
                                    <div class="box">
                                        <a href="#" data-toggle="modal" data-target="#5">
                                            <img
                                                src="{!! asset('/image/SocialActions/imagesONG/IMG-20210609-WA0064.jpg') !!}">
                                        </a>
                                        <div class="modal fade" id="5" tabindex="-1" role="dialog">
                                            <div class="modal-dialog" role="document">
                                                <div class="modal-content">
                                                    <button type="button" class="close" data-dismiss="modal"
                                                        aria-label="Close"><span aria-hidden="true">×</span></button>
                                                    <div class="modal-body">
                                                        <img
                                                            src="{!! asset('/image/SocialActions/imagesONG/IMG-20210609-WA0064.jpg') !!}">
                                                    </div>
                                                    <div class="col-md-12 description">
                                                        <h4>Distribuindo cestas básicas</h4>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Segunda página da galeria -->
                                <div class="col-md-4 col-sm-6 co-xs-12 gal-item" id="b1" style="display: none;">
                                    <div class="box">
                                        <a href="#" data-toggle="modal" data-target="#6">
                                            <img
                                                src="{!! asset('/image/SocialActions/imagesONG/IMG-20210609-WA0027.jpg') !!}">
                                        </a>
                                        <div class="modal fade" id="6" tabindex="-1" role="dialog">
                                            <div class="modal-dialog" role="document">
                                                <div class="modal-content">
                                                    <button type="button" class="close" data-dismiss="modal"
                                                        aria-label="Close"><span aria-hidden="true">×</span></button>
                                                    <div class="modal-body">
                                                        <img
                                                            src="{!! asset('/image/SocialActions/imagesONG/IMG-20210609-WA0027.jpg') !!}">
                                                    </div>
                                                    <div class="col-md-12 description">
                                                        <h4>Doação de alimentos</h4>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4 col-sm-6 co-xs-12 gal-item" id="b2" style="display: none;">
                                    <div class="box">
                                        <a href="#" data-toggle="modal" data-target="#7">
                                            <img
                                                src="{!! asset('/image/SocialActions/imagesONG/IMG-20210609-WA0036.jpg') !!}">
                                        </a>
                                        <div class="modal fade" id="7" tabindex="-1" role="dialog">
                                            <div class="modal-dialog" role="document">
                                                <div class="modal-content">
                                                    <button type="button" class="close" data-dismiss="modal"
                                                        aria-label="Close"><span aria-hidden="true">×</span></button>
                                                    <div class="modal-body">
                                                        <img
                                                            src="{!! asset('/image/SocialActions/imagesONG/IMG-20210609-WA0036.jpg') !!}">
                                                    </div>
                                                    <div class="col-md-12 description">
                                                        <h4>120 Enxovais montados no primeiro trimestre de 2021</h4>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4 col-sm-6 co-xs-12 gal-item" id="b3" style="display: none;">
                                    <div class="box">
                                        <a href="#" data-toggle="modal" data-target="#8">
                                            <img
                                                src="{!! asset('/image/SocialActions/imagesONG/IMG-20210609-WA0100.jpg') !!}">
                                        </a>
                                        <div class="modal fade" id="8" tabindex="-1" role="dialog">
                                            <div class="modal-dialog" role="document">
                                                <div class="modal-content">
                                                    <button type="button" class="close" data-dismiss="modal"
                                                        aria-label="Close"><span aria-hidden="true">×</span></button>
                                                    <div class="modal-body">
                                                        <img
                                                            src="{!! asset('/image/SocialActions/imagesONG/IMG-20210609-WA0100.jpg') !!}">
                                                    </div>
                                                    <div class="col-md-12 description">
                                                        <h4>Família recebendo doações</h4>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4 col-sm-6 co-xs-12 gal-item" id="b4" style="display: none;">
                                    <div class="box">
                                        <a href="#" data-toggle="modal" data-target="#9">
                                            <img
                                                src="{!! asset('/image/SocialActions/imagesONG/IMG-20210609-WA0096.jpg') !!}">
                                        </a>
                                        <div class="modal fade" id="9" tabindex="-1" role="dialog">
                                            <div class="modal-dialog" role="document">
                                                <div class="modal-content">
                                                    <button type="button" class="close" data-dismiss="modal"
                                                        aria-label="Close"><span aria-hidden="true">×</span></button>
                                                    <div class="modal-body">
                                                        <img
                                                            src="{!! asset('/image/SocialActions/imagesONG/IMG-20210609-WA0096.jpg') !!}">
                                                    </div>
                                                    <div class="col-md-12 description">
                                                        <h4>Cestas básicas</h4>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-8 col-sm-12 co-xs-12 gal-item" id="b5" style="display: none;">
                                    <div class="box">
                                        <a href="#" data-toggle="modal" data-target="#10">
                                            <img
                                                src="{!! asset('/image/SocialActions/imagesONG/IMG-20210609-WA0107.jpg') !!}">
                                        </a>
                                        <div class="modal fade" id="10" tabindex="-1" role="dialog">
                                            <div class="modal-dialog" role="document">
                                                <div class="modal-content">
                                                    <button type="button" class="close" data-dismiss="modal"
                                                        aria-label="Close"><span aria-hidden="true">×</span></button>
                                                    <div class="modal-body">
                                                        <img
                                                            src="{!! asset('/image/SocialActions/imagesONG/IMG-20210609-WA0107.jpg') !!}">
                                                    </div>
                                                    <div class="col-md-12 description">
                                                        <h4>Dia de solidariedade</h4>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Terceira página da galeria -->
                                <div class="col-md-4 col-sm-6 co-xs-12 gal-item" id="c1" style="display: none;">
                                    <div class="box">
                                        <a href="#" data-toggle="modal" data-target="#11">
                                            <img
                                                src="{!! asset('/image/SocialActions/imagesONG/IMG-20210609-WA0043.jpg') !!}">
                                        </a>
                                        <div class="modal fade" id="11" tabindex="-1" role="dialog">
                                            <div class="modal-dialog" role="document">
                                                <div class="modal-content">
                                                    <button type="button" class="close" data-dismiss="modal"
                                                        aria-label="Close"><span aria-hidden="true">×</span></button>
                                                    <div class="modal-body">
                                                        <img
                                                            src="{!! asset('/image/SocialActions/imagesONG/IMG-20210609-WA0043.jpg') !!}">
                                                    </div>
                                                    <div class="col-md-12 description">
                                                        <h4>Entrega de enxovais</h4>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4 col-sm-6 co-xs-12 gal-item" id="c2" style="display: none;">
                                    <div class="box">
                                        <a href="#" data-toggle="modal" data-target="#12">
                                            <img
                                                src="{!! asset('/image/SocialActions/imagesONG/IMG-20210609-WA0115.jpg') !!}">
                                        </a>
                                        <div class="modal fade" id="12" tabindex="-1" role="dialog">
                                            <div class="modal-dialog" role="document">
                                                <div class="modal-content">
                                                    <button type="button" class="close" data-dismiss="modal"
                                                        aria-label="Close"><span aria-hidden="true">×</span></button>
                                                    <div class="modal-body">
                                                        <img
                                                            src="{!! asset('/image/SocialActions/imagesONG/IMG-20210609-WA0115.jpg') !!}">
                                                    </div>
                                                    <div class="col-md-12 description">
                                                        <h4>Doação de brinquedos</h4>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4 col-sm-6 co-xs-12 gal-item" id="c3" style="display: none;">
                                    <div class="box">
                                        <a href="#" data-toggle="modal" data-target="#13">
                                            <img
                                                src="{!! asset('/image/SocialActions/imagesONG/IMG-20210609-WA0065.jpg') !!}">
                                        </a>
                                        <div class="modal fade" id="13" tabindex="-1" role="dialog">
                                            <div class="modal-dialog" role="document">
                                                <div class="modal-content">
                                                    <button type="button" class="close" data-dismiss="modal"
                                                        aria-label="Close"><span aria-hidden="true">×</span></button>
                                                    <div class="modal-body">
                                                        <img
                                                            src="{!! asset('/image/SocialActions/imagesONG/IMG-20210609-WA0065.jpg') !!}">
                                                    </div>
                                                    <div class="col-md-12 description">
                                                        <h4>Família recebendo doações</h4>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4 col-sm-6 co-xs-12 gal-item" id="c4" style="display: none;">
                                    <div class="box">
                                        <a href="#" data-toggle="modal" data-target="#14">
                                            <img
                                                src="{!! asset('/image/SocialActions/imagesONG/IMG-20210609-WA0076.jpg') !!}">
                                        </a>
                                        <div class="modal fade" id="14" tabindex="-1" role="dialog">
                                            <div class="modal-dialog" role="document">
                                                <div class="modal-content">
                                                    <button type="button" class="close" data-dismiss="modal"
                                                        aria-label="Close"><span aria-hidden="true">×</span></button>
                                                    <div class="modal-body">
                                                        <img
                                                            src="{!! asset('/image/SocialActions/imagesONG/IMG-20210609-WA0076.jpg') !!}">
                                                    </div>
                                                    <div class="col-md-12 description">
                                                        <h4>Kits de livros infantis</h4>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4 col-sm-6 co-xs-12 gal-item" id="c5" style="display: none;">
                                    <div class="box">
                                        <a href="#" data-toggle="modal" data-target="#15">
                                            <img
                                                src="{!! asset('/image/SocialActions/imagesONG/IMG-20210609-WA0070.jpg') !!}">
                                        </a>
                                        <div class="modal fade" id="15" tabindex="-1" role="dialog">
                                            <div class="modal-dialog" role="document">
                                                <div class="modal-content">
                                                    <button type="button" class="close" data-dismiss="modal"
                                                        aria-label="Close"><span aria-hidden="true">×</span></button>
                                                    <div class="modal-body">
                                                        <img
                                                            src="{!! asset('/image/SocialActions/imagesONG/IMG-20210609-WA0070.jpg') !!}">
                                                    </div>
                                                    <div class="col-md-12 description">
                                                        <h4>Doação de cestas básicas</h4>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4 col-sm-6 co-xs-12 gal-item" id="c6" style="display: none;">
                                    <div class="box">
                                        <a href="#" data-toggle="modal" data-target="#16">
                                            <img
                                                src="{!! asset('/image/SocialActions/imagesONG/IMG-20210609-WA0034.jpg') !!}">
                                        </a>
                                        <div class="modal fade" id="16" tabindex="-1" role="dialog">
                                            <div class="modal-dialog" role="document">
                                                <div class="modal-content">
                                                    <button type="button" class="close" data-dismiss="modal"
                                                        aria-label="Close"><span aria-hidden="true">×</span></button>
                                                    <div class="modal-body">
                                                        <img
                                                            src="{!! asset('/image/SocialActions/imagesONG/IMG-20210609-WA0034.jpg') !!}">
                                                    </div>
                                                    <div class="col-md-12 description">
                                                        <h4>Separando alimentos para doação</h4>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </section>
                    </div>
                    <div class="col-1" style="text-align: start">
                        <div class="btn right" id="btnRight" onclick="direita()">
                            <i class="fas fa-chevron-right"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12" style="text-align: center; margin-top: -200px">
        <i class="fas fa-circle option op1 selected" onclick="primeiroSlide()"></i>
        <i class="fas fa-circle option op2" onclick="segundoSlide()"></i>
        <i class="fas fa-circle option op3" onclick="terceiroSlide()"></i>
    </div>

    <!-- Cards -->
    <div class="row cards">
        <div class="col-1"></div>
        <div class="col">
            <div class="readBlue">
                <div class="card">
                    <img class="card-img-top"
                        src="{!! asset('/image/SocialActions/illustrations/pg2-illustrationEarth.png') !!}"
                        alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title text-center">COMPAIXÃO</h5>
                        <p class="card-text">
                            Foram doadas <b>mais de 2000 cestas básicas</b> para comunidades carentes.
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="readBlue">
                <div class="card">
                    <img class="card-img-top"
                        src="{!! asset('/image/SocialActions/illustrations/pg2-IllustrationGiveLove.png') !!}"
                        alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title text-center">CARIDADE</h5>
                        <p class="card-text">A caridade enche o coração de quem pratica e de quem a recebe.</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="readBlue">
                <div class="card">
                    <img class="card-img-top"
                        src="{!! asset('/image/SocialActions/illustrations/pg2-illustrationBoxLove.png') !!}"
                        alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title text-center">GENEROSIDADE</h5>
                        <p class="card-text">Mais de <b>200 enxovais</b> foram doados a futuras mães.
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="readBlue">
                <div class="card">
                    <img class="card-img-top"
                        src="{!! asset('/image/SocialActions/illustrations/pg2-illustrationDonation.png') !!}"
                        alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title text-center">SOLIDARIEDADE</h5>
                        <p class="card-text">Foram doados <b>mais de 800 brinquedos</b> para crianças em situação de
                            vulnerabilidade.</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-1"></div>
    </div>
    <img src="{!! asset('/image/SocialActions/blobs/pg2-blob3.png') !!}" class="blob2-3 img-fluid">
    <img src="{!! asset('/image/SocialActions/blobs/pg2-blob2.png') !!}" class="blob2-2 img-fluid">
</div>

<!-- Como doar -->
<div class="row terceiraPag" id="section2">
    <div class="col-12 col-lg-12 col-md-12" style="margin-top: -136px">
        <div class="aboutPage">
            <div class="subTitle">
                <p> How to Help? </p>
                <div class="subLine"></div>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <div class="readBlue donateElements">
                    <div class="card relatorio">
                        <img class="card-img-top"
                            src="{!! asset('/image/SocialActions/imagesONG/RelatorioSemestral.jpeg') !!}"
                            alt="Relatório Semestral">
                        <div class="card-body" style="height: 285px;">
                            <h5 class="card-title text-center text-center">INSTITUTO LARIAMOR</h5>
                            <p class="card-text" style="padding: 13px;">
                                O Instituto LariAmor é uma organização sem fins lucrativos.
                                <br>
                                Caso queira doar de maneira segura siga os passos:

                                <ol>
                                    <li>Clique no botão abaixo</li>
                                    <li>Escolha quantas cestas básicas deseja doar</li>
                                    <li>Informe seu método de pagamento</li>
                                </ol>
                                <br>
                            </p>
                            <div class="col text-center">

                                <a href="http://www.realcestas.com.br/entidade/instituto-lariamor/" target="​_blank">
                                    <button class="btn btn-blue donate">
                                        DONATE
                                    </button>
                                </a>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="col colIMG">
                <img class="illustrationSit" src="{!! asset('/image/SocialActions/illustrations/pg3-illustrationSit.png') !!}">
            </div>
        </div>
    </div>
    <img src="{!! asset('/image/SocialActions/blobs/pg3-blob4.png') !!}" class="blob3-4 img-fluid">
    <img src="{!! asset('/image/SocialActions/blobs/pg3-blob5.png') !!}" class="blob3-5 img-fluid">
    <img src="{!! asset('/image/SocialActions/blobs/pg3-blob2.png') !!}" class="blob3-2 img-fluid">
    <img src="{!! asset('/image/SocialActions/blobs/pg3-blob1.png') !!}" class="blob3-1 img-fluid">

</div>

<!-- Contato -->
<div class="row quartaPag" id="section4">
    <div class="col-12 col-lg-12 col-md-12">
        <div class="aboutPage" style="margin: 21px 164px !important;">
            <div class="subTitle">
                <p> Contact </p>
                <div class="subLine"></div>
            </div>
        </div>
        <div class="row" style="margin-top: -86px;">
            <div class="col">
                <div id='map'></div>
            </div>
            <div class="col-5">
                <div class="contato">
                    <label for="phone">Phone Number</label>
                    <p name="phone">
                        <i class="fas fa-phone"></i> +55 11 3040 4780
                    </p>

                    <br>

                    <label for="address">Address</label>
                    <p name="address">
                        Alameda dos Maracatins nº 780 cj 1301
                    </p>
                    <p>
                        04089-001 São Paulo, Brazil
                    </p>
                </div>
            </div>
        </div>

    </div>
</div>

<!-- Inserindo biblioteca de mapas de código aberto: MapLibre  -->
<script src="https://unpkg.com/maplibre-gl@1.15.0/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/maplibre-gl@1.15.0/dist/maplibre-gl.css" rel="stylesheet" />

@include('socialActions.style')
@include('socialActions.script')
@endsection