Current File : /home/exataengenharia/public_html/resources/views/components/body.blade.php

<style>


    .container__body {
        margin-top: 5.5rem;
    }

    .container__body p {
        color: var(--color-main);
    }

    .card-group {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }


    @media (max-width: 1000px) {
        .card-group {
            display: grid !important;
            grid-template-columns: 2fr;
            padding: 0;
        }

    }

    .card {
        flex: 1 1 300px;
        align-items: center;
        margin: 10px;
        padding: 2rem 0;
        background-image: linear-gradient(to right top, #2980b3, #227aae, #1b73a9, #136da4, #09679f);
        border-radius: 10px;
        text-align: center;
    }

    .card .card-title {
        color: var(--color-font-white);
        font-size: 30px;
    }

    .card .card-text {
        color: var(--color-font-white);
        font-size: 18px;
    }

    .card .card-body {
        transform: translateY(-30%);
    }

    .card .card-icon {
        background-color: var(--color-main);
        border-radius: 50%;
        font-size: 1.6rem;
        color: var(--color-font-white);
        transform: translateY(-90%);

        padding: 1.5rem;
    }

    .solar__house {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        flex-wrap: wrap;
    }

    .solar__house img {
        width: 100%;
    }

    .solar__house ul li {
        font-size: 18px;
        margin-top: 2rem;

        display: flex;
        align-items: center;
    }

    .solar__house ul li span {
        background-color: var(--color-main);
        color: var(--color-font-white);
        padding: 10px 15px;
        margin-right: .4rem;
        width: 10%;
        border-radius: 50%;
        font-weight: bold;
        text-align: center;
        cursor: pointer;
        transition: cubic-bezier(0.215, 0.610, 0.355, 1) all .5s;
    }

    .solar__house ul li span:hover {
        background-color: #1b73a9;
    }

    /* section_four */

    .section_four .h1,
    .section_four .h2 {
        color: var(--color-main);
    }

    .banner__slide {
        width: 100vw;
        height: 120vh;
        background: #FF6700;
        color: #fff;
        padding: 2rem 5rem;
        position: relative;

    }

    .container__set {
        color: #fff;
        display: inline-block;
        position: absolute;
        bottom: -20px;

    }

    .banner__slide::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 86%;
        background-image: url('/img/11.png');
        background-size: contain;
        background-repeat: no-repeat;
        left: 0;
        bottom: 0;
        z-index: 0;
    }

    .banner__slide h2 {
        font-size: 3rem;
        font-weight: 400;
    }

    .letter__mobile {
        text-align: justify;
    }

    .letter__mobile:nth-child(2) {
        margin-left: 4rem;
        line-height: 80px;
    }

    .container-slide {
        position: relative;
        z-index: 1000000
    }

    .container-slide::after {
        content: "";
        position: absolute;
        right: 30%;
        top: -50%;
        background-image: url('/img/11.png');
        background-repeat: no-repeat;
        width: 100%;
        height: 2000px;
        transform: scale(.4);
        z-index: -1;
    }

    @media (max-width:800px) {



        .banner__slide {
            padding: 0 2rem;
        }


        .solar__house {
            display: flex;
            flex-direction: column;
        }

        .solar__house ul li span {
            width: 20%;
        }



        .letter__mobile {
            font-size: 25px;
            text-align: center;
            line-height: 2.6rem;
        }

        .type__house {

            font-size: 40px !important;
            margin-top: 10px !important;
        }

        .letter__mobile {
            text-align: center;
        }

        .letter__mobile:nth-child(2) {
            margin-left: 0;
            line-height: 30px;
        }
    }

    .container__set {
        font-size: 50px;
        cursor: pointer;
    }

    .informations__slide__content {
        padding: 10px;
        margin-top: 5rem;
        display: flex;
        flex-direction: column;
        justify-content: center;

    }

    .letter__mobile {
        font-size: 3rem;
        font-weight: 600;
    }

    .container-slide {
        width: 100vw;
        height: 100vh;
        background-color: #FF6700;

    }




    .container-slide--organization {
        display: grid;
        grid-template-columns: 1.5fr 2fr;
        align-items: flex-start;
        justify-content: space-around;

    }

    .text {
        font-size: 48px;
        color: #fff;
        padding: 4rem;
    }

    .container-slide-infor {
        font-size: 40px;
        color: #fff;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    @media (min-width: 1024px) and (max-width: 1200px) {


        #projectImage {
            height: 420px;
            width: 100%;
            max-width: 90%;
            /* Garante que a largura não ultrapasse a largura do contêiner */
        }

        .container-slide-infor {
            align-items: center;
        }

    }

    @media (min-width: 700px) and (max-width: 1023px) {
        .container-slide--organization {
            display: grid;
            grid-template-columns: 1fr;
        }

        #projectImage {
            width: 640px;

            /* Garante que a largura não ultrapasse a largura do contêiner */
        }

        .image-thumb>img {
            width: 100%;
            height: 360px !important;
        }

        .container-slide-infor {
            align-items: center;
        }

        .container-slide {
            width: 100vw;
            height: auto !important;
            max-height: 120vh;
            background-color: #FF6700;
        }

        .adjust {
            margin-left: 0rem !important;
            line-height: 2 !important;
            font-weight: 800 !important;
            letter-spacing: 6px;
        }

        .container-slide::after {
            content: "";
            position: absolute;
            right: -40%;
            top: -5%;
            background-image: url('/img/11.png');
            background-repeat: no-repeat;
            background-position: left;
            background-size: contain;
            width: 150vw;
            height: 1000px;
            z-index: -1;
            transform: scale(.5);
        }

        .container__set {
            color: #fff;
            display: inline-block;
            position: absolute;
            bottom: 40%;
            left: -5%;
        }
    }




    @media (min-width: 1024px) and (max-width: 1200px) {
        .container-slide--organization {
            display: grid;
            grid-template-columns: 1fr;
        }

        #projectImage {
            height: 54vh;
            width: 100%;
            max-width: 677px;
        }

        .container-slide {
            width: 100vw;
            height: 150vh;
            background-color: #FF6700;
        }

        .adjust {
            margin-left: 0rem !important;
            line-height: 2 !important;
            font-weight: 800 !important;
            letter-spacing: 6px;
        }

        .container-slide::after {
            content: "";
            position: absolute;
            right: -40%;
            top: -5%;
            background-image: url('/img/11.png');
            background-repeat: no-repeat;
            background-position: left;
            background-size: contain;
            width: 150vw;
            height: 1000px;
            z-index: -1;
            transform: scale(.5);
        }

        .container__set {
            color: #fff;
            display: inline-block;
            position: absolute;
            bottom: 10%;
            left: 0;
        }

        .text {
            text-align: center;
        }
    }

    @media (min-width: 300px) and (max-width: 700px) {
        .container__set {
            margin-top: 2rem;
        }

        .container__body {
            transform: translateY(-3 0px);
            padding: 3px 0px 40px 0rem !important;
            text-align: center !important;
        }

        .container-slide--organization {
            display: grid;
            grid-template-columns: 1fr;
            align-items: center;
            justify-content: center;
        }

        .container-slide-infor {
            align-items: center;
        }

        .container-slide {
            width: 100vw;
            height: auto;
            background-color: #FF6700;
        }

        .adjust {
            font-size: 35px;
            margin-left: 0rem !important;
            line-height: 2 !important;
            font-weight: 800 !important;
            letter-spacing: 0px;
        }

        .container-slide::after {
            content: "";
            position: absolute;
            right: -40%;
            top: 0%;
            background-image: url('/img/11.png');
            background-repeat: no-repeat;
            background-position: left;
            background-size: contain;
            width: 150vw;
            height: 1000px;
            z-index: -1;
            transform: scale(.5);
        }

        .container__set {
            color: #fff;
            display: inline-block;
            position: absolute;
            left: 0%;
            top: 45%;
            margin-top: 100px;
        }

        .buttons #prevButton {

            transform: translateX(-90px);
        }

        .image-thumb {
            height: 400px !important;
        }

        .text {
            padding: 3rem 4rem !important;
        }

        #prevButton {
            margin-left: 118px !important;
        }

        .servicos {
            padding: 5rem 2rem !important;
            padding-bottom: 0 !important;
        }



    }

    .adjust {
        margin-left: 3rem;
        line-height: 3;
        font-weight: 800;
    }

    @media (min-width: 1400px) {
        .container-slide {
            height: 113vh;
        }
        footer.row {
        --bs-gutter-x: 1.5rem;
        --bs-gutter-y: 0;
        display: flex;
        flex-wrap: wrap;
        margin-top: calc(-1 * var(--bs-gutter-y));
        margin-right: calc(-.5 * var(--bs-gutter-x));
        margin-left: calc(-.5 * var(--bs-gutter-x));
        align-items: center;
    }



        .image-thumb>img {
            width: 100%;
            height: 450px !important;
        }

    }

    @media (min-width: 1200px) {

        .container__set {

            display: inline-block;
            position: absolute;
            left: -80%;
            top: 100%;
        }



    }

    .container__body {
        transform: translateY(-30px);
        padding: 3px 0px 40px 4rem;
    }

    .section_four {
        margin-top: 64px;
    }

    @media only screen and (orientation: landscape) and (min-width: 300px) and (max-width: 900px) {
        .container-slide {
            height: auto;
            max-height: 240vh;
        }

        .container__set {
            background: red;
            display: block;
            height: 0;
            text-align: center;
            transform: translateY(470px);

        }

        #prevButton {
            margin-left: 550px !important;
        }
    }

    @media only screen and (orientation: landscape) and (min-width: 600px) and (max-width: 900px) and (max-height: 400px) {

        .container__set {
            background: red;
            display: block;
            height: 0;
            text-align: center;
            transform: translateY(320px) !important;

        }

        #prevButton {
            margin-left: 350px !important;
        }
    }

    @media (min-width: 1920px) {
        .container-slide {
            height: 80vh !important;
        }

        .servicos  {
            height: 60vh !important;
        }
    }

    .icon_soon {
        width: 100px;
        position: absolute;

    }

    .icon_soon img {
        width: 100%;

    }

    @media only screen and (min-width: 1366px) and (min-height: 768px) {
        .container-slide {
            height: 106vh;
        }
    }

    /* computadores grades */

    @media (min-width: 2560px) and (min-height: 900px) {
        .servicos {
            background-color: red;
        }

        .image-thumb>img {
            width: 850px !important;
            height: 490px !important;


        }

        .image-thumb {
           margin: 0 auto;
        }

        .container-slide-infor {
            font-size: 40px;
            color: #fff;
            display: flex;
            flex-direction: column;
            align-items: center;
            align-content: center;
            transform: scale(1.2);
        }
        .container-slide {
            display: grid;
            --bs-gutter-x: 32.5rem !important;
            justify-items: center;
        }

        .container-slide {
            min-height: 105vh;
            height: auto;
            margin-top: 3rem;
        }

        .container-slide::after {
            content: "";
            position: absolute;
            right: 18%;
            top: -36%;
            background-image: url(/img/11.png);
            background-repeat: no-repeat;
            width: 86%;
            height: 2000px;
            transform: scale(.5);
            z-index: -1;
        }
        .text {
            font-size: 48px;
            color: #fff;
            padding: 4rem;
            text-align: center;
        }

    }

    @media only screen and (min-width: 1920px) and (max-width: 3000px) {
        .servicos {
            background-color: red;
        }
        .informations-cards {
            font-size: 20px;
            color: #000;
            font-weight: 600;
            width: 40rem;
            box-sizing: content-box;
        }

        .solar__house {
            display: grid !important;
            grid-template-columns: .5fr .3fr !important;
            align-items: center !important;
            flex-wrap: wrap !important;
            justify-items: end !important;
            align-content: stretch !important;
            justify-content: space-between !important;
        }
        .image-thumb>img {
            width: 800px !important;
            height: 440px !important;

        }

        .image-thumb {
            display: flex !important;
            align-items: baseline;
            justify-content: space-evenly;
            height: 500 !important;
            flex-direction: column;
            flex-wrap: wrap;
            align-content: flex-end;
        }

        .container-slide-infor {
            font-size: 40px;
            color: #fff;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            align-content: flex-start;
            transform: scale(1);
        }
        .container-slide {
            display: grid;
            justify-items: start;
        }

        .container-slide {
            min-height: 90vh !important;
            height: auto;
            margin-top: 1rem;
        }

        .container-slide::after {
            content: "";
            position: absolute;
            right: 40%;
            top: -56%;
            background-image: url(/img/11.png);
            background-repeat: no-repeat;
            width: 86%;
            height: 2000px;
            z-index: -1;
        }
        .text {
            padding: 4rem;
            height: 0;
        }


    }

    @media (min-width: 1855px) {
        .container-slide {
            min-height: 95vh !important;
            height: auto;
            margin-top: 3rem;
        }

        .solar__house img {
            width: 90%;
        }

        .solar__house {
            display: grid !important;
            grid-template-columns: .6fr .4fr !important;
            align-items: center !important;
            flex-wrap: wrap !important;
            justify-items: center  !important;
            align-content: stretch !important;
            justify-content: space-between  !important;
        }


    }
</style>

<section id="sobre" style="position: relative;left: 0;top: -20px;height: .1px;width: .1px;background-color: red;"></section>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js" integrity="sha512-fD9DI5bZwQxOi7MhYWnnNPlvXdp/2Pj3XSTRrFs5FQa4mizyGLnJcN6tuvUS6LbmgN1ut+XGSABKvjN0H6Aoow==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div class=" container__body">

    <div class=" text-dark rounded space-adjust">
        <p class="h1"><strong> Porque a Energia Solar</strong> da <strong>Exata</strong></p>
        <p class="h2">é sua melhor opção?</p>
    </div>
</div>

<div class="container" style="margin-bottom: 63px;">
    <div class="card-group">
        <div class="card">
            <div class="card-icon">
                <i class="fa-solid fa-solar-panel"></i>
            </div>
            <div class="card-body">
                <h5 class="card-title" style="font-weight: 700;">Qualidade</h5>
                <p class="card-text">Os sistemas de energia solar da Exata, bem como seus painéis fotovoltaicos tem vida útil de 25 anos.</p>
            </div>
        </div>
        <div class="card">
            <div class="card-icon">
                <i class="fa-solid fa-hand-holding-dollar"></i>
            </div>
            <div class="card-body">
                <h5 class="card-title" style="font-weight: 700;">Economia Imediata</h5>
                <p class="card-text">Após a instalação, a energia solar já oferece uma redução de até 95% no valor da conta de energia.</p>
            </div>
        </div>
        <div class="card">
            <div class="card-icon">
                <i class="fa-solid fa-recycle"></i>
            </div>
            <div class="card-body">
                <h5 class="card-title" style="font-weight: 700;">Cuida do Planeta</h5>
                <p class="card-text">A energia solar é renovável porque a luz vem do sol e é possível fazer uso dele sem desgastá-lo, e muito menos causar danos ao meio ambiente.</p>
            </div>
        </div>
        <div class="card">
            <div class="card-icon">
                <i class="fa-solid fa-house"></i>
            </div>
            <div class="card-body">
                <h5 class="card-title" style="font-weight: 700;">Valorização do Imóvel</h5>
                <p class="card-text">Agências imobiliárias estimam que o valor de um imóvel pode obter um crescimento de cerca de 4% a 6%.</p>
            </div>
        </div>
    </div>
</div>

<center style="margin-bottom: 2rem;">
    <a target="_blank" href="https://wa.me/5586999405102" style="padding: 12px 32px;font-weight: 700;text-transform: uppercase;" class="btn btn-dark"><span style="color: #fff; font-size: 1rem;">Saiba mais</span></a>
</center>
<div> <!--views/components/cards.blade.php -->
    <x-cards></x-cards>
</div>


<div class="container" >
<section id="energia" style="position: relative;left: 0;top: -100px;height: .1px;width: .1px;background-color: red;"></section>

    <section class="section_four">
        <p class="h1">
            Conheça um pouco mais sobre <strong> Energia Solar! </strong>
        </p>
        <p class="h2">
            E veja como ela pode ser amiga do seu bolso!
        </p>
    </section>
    <section class="solar__house">
        <div>
            <img src="/img/casa-image.png" alt="imagem de uma casa" class="img-fluid" />
        </div>

        <div style="font-size: 20px;color:#000;font-weight: 600;">
            <ul class="informations-cards">
                <li style="display: flex;align-items: center;justify-content: center;">
                    <span>A</span>
                    Durante o dia, a luz solar que incide sobre os painéis é absorvida e convertida em energia elétrica, corrente contínua (CC).
                </li>
                <li style="display: flex;align-items: center;justify-content: center;">
                    <span class="solar__order">B</span>
                    O inversor capta a corrente contínua e a transforma em corrente alternada (CA) que pode ser consumida na casa ou empresa.
                </li style="display: flex;align-items: center;justify-content: center;">
                <li>
                    <span class="solar__order">C</span>
                    A corrente alternada (CA) é então consumida na residência ou empresa, gerando energia para lâmpadas, eletrodoméstico e outros.
                </li>
                <li style="display: flex;align-items: center;justify-content: center;">
                    <span class="solar__order">D</span>
                    O excedente de energia gerada é injetada na rede de distribuição, gerando créditos que podem ser utilizados em até 60 meses.
                </li>
            </ul>
        </div>
    </section>
</div>

<div class="container-fluid container-slide" style="margin-top: 50px;" >
<section id="projetos" style="position: relative;left: 0;top: -50px;height: .1px;width: .1px;background-color: red;"></section>

    <div class="text">
        <h1>Conheça um pouco dos nossos <strong> Projetos!</strong></h1>
        <h2>Venha fazer parte desse time <strong>você também!</strong></h2>
    </div>
    <aside class="container container-slide--organization">


        <section class="container-slide-infor">

            <span id="residence" class="h1" style="font-weight: 900;font-size:3rem;"></span>

            <div class="adjust" style="font-weight: 400;"> Geração Mensal </div>

            <span id="monthlyGeneration" class="h1" style="font-weight: 900;font-size:3rem;"></span>
            <div style="display: flex;flex-direction: row;align-items: center;justify-content: space-around;">
                <img src="img/placa.png" alt="icon de painel solar" width="120">
                <div class="adjust"  style="font-weight: 400;"> Economia Anual </div>
            </div>
            <span id="annualSavings" class="h1" style="font-weight: 900;font-size:3rem;margin-top: 1rem;"></span>
        </section>
        <x-slide></x-slide>

    </aside>

</div>


<script>
    var informations = <?php echo json_encode($informations); ?>; // Converter o array PHP em um array JavaScript

    var currentIndex = 0; // Índice atual do item exibido
    var intervalId; // Variável para armazenar o identificador do intervalo

    // Função para exibir as informações com base no índice fornecido
    function showInformation(index) {
        document.getElementById("residence").textContent = informations[index].residence;
        document.getElementById("monthlyGeneration").textContent = informations[index].monthly_generation + " kWh/mês";
        document.getElementById("annualSavings").textContent = "R$ " + informations[index].annual_savings + ",00";
        document.getElementById("projectImage").src = "{{ asset('storage/') }}" + "/" + informations[index].path;
    }

    // Chamar a função inicial para exibir as informações do primeiro item
    showInformation(currentIndex);

    // Função para avançar para o próximo slide
    function nextSlide() {
        currentIndex++; // Incrementar o índice atual

        // Verificar se o índice está fora dos limites do array
        if (currentIndex >= informations.length) {
            currentIndex = 0; // Voltar ao primeiro item
        }

        showInformation(currentIndex); // Exibir as informações atualizadas
    }

    // Iniciar a contagem automática dos slides
    function startAutoSlide() {
        intervalId = setInterval(nextSlide, 5000);
    }

    // Reiniciar a contagem automática dos slides
    function resetAutoSlide() {
        clearInterval(intervalId); // Limpar o intervalo existente
        startAutoSlide(); // Iniciar um novo intervalo
    }

    // Adicionar um evento de clique ao botão "Next"
    document.getElementById("nextButton").addEventListener("click", function() {
        currentIndex++; // Incrementar o índice atual

        // Verificar se o índice está fora dos limites do array
        if (currentIndex >= informations.length) {
            currentIndex = 0; // Voltar ao primeiro item
        }

        showInformation(currentIndex); // Exibir as informações atualizadas

        resetAutoSlide(); // Reiniciar a contagem automática
    });

    // Iniciar a contagem automática dos slides
    startAutoSlide();

    // Função para voltar para o slide anterior
    function previousSlide() {
        currentIndex--; // Decrementar o índice atual

        // Verificar se o índice está abaixo do limite inferior do array
        if (currentIndex < 0) {
            currentIndex = informations.length - 1; // Voltar ao último item
        }

        showInformation(currentIndex); // Exibir as informações atualizadas

        resetAutoSlide(); // Reiniciar a contagem automática
    }

    // Adicionar um evento de clique ao botão "Prev"
    document.getElementById("prevButton").addEventListener("click", function() {
        previousSlide(); // Chamar a função para exibir o slide anterior
    });
</script>

<script>
        let lastKnownScrollPosition = 0;
        let ticking = false;

        function doSomething(scrollPos) {
            // Do something with the scroll position
        }

        document.addEventListener("scroll", (event) => {
            lastKnownScrollPosition = window.scrollY;

            if (!ticking) {
                window.requestAnimationFrame(() => {
                    doSomething(lastKnownScrollPosition);
                    ticking = false;
                });

                ticking = true;
            }
        });
    </script>