Current File : /home/exataengenharia/public_html/resources/views/usuarios/index.blade.php

<script src="https://unpkg.com/scrollreveal"></script>
<style>
    :root {
        --color-main: #ff6700;
        --color-font-white: #FFFFFF;
        --color-card: #007CA3;
    }

    @font-face {
        font-family: 'main';
        src: url('/fonts/MarlinGeo-Regular.otf') format('opentype');
    }
    body {
        padding-top: 0rem;
        font-family: 'main', Helvetica, sans-serif !important;
        overflow-x: hidden;
    }

    .banner {
        background-color: var(--color-main);
        background-repeat: no-repeat;
        width: 100vw;
        height: 100vh;
        color: var(--color-font-white);
        position: relative;
        opacity: 1;
        z-index: 1;
    }

    .banner::after {
        content: '';
        position: absolute;
        left: 0;

        top: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        background: linear-gradient(to right, var(--color-main) 40%, rgba(255, 0, 0, 0) 200%), url('/img/fundo-one.png');
        background-size: cover;
        background-attachment: fixed;
        background-repeat: no-repeat;
    }


    .container__left {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        position: relative;
    }

    .content__infor {
        padding: 120px 50px 0;
    }

    .container__left h1 {
        font-size: 2.8rem;
    }

    .container__left h1 span {
        display: block;
    }

    .container__left p {
        font-size: 1.5rem;
    }

    .content__left {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100vh;
    }

    .banner_flex {
        height: 100%;
    }

    .container__right h1 {
        width: 50%;
    }


    /* Mobile */

    @media (max-width:1000px) {
        .banner_flex {
            padding: 0;
            margin: 0 auto;
        }

        .container__left {
            margin: 0 auto;
        }

        .img-not-mobile {
            display: none;
            width: 0;
        }

        .content__infor {
            padding: 50% 0;
            width: 93vw;
            text-align: center;
        }

        .container__right img {
            display: none;
        }

    }

    /* Modo paisagem */

    @media (max-width: 1000px) and (orientation: landscape) {

        .content__infor {
            transform: translateY(-27%);
        }

        .container-slide .text {
            font-size: 20px;
        }

        .container-slide::after {
            display: none;
        }
        .container-slide  {
            height: 310vh !important;
        }

        .container-slide--organization .container-slide-infor {
            font-size: 20px;

        }
        .container__set {
            top: -60px !important;
            left: 50px !important;
        }
        .text {
            padding: 0 4rem;
        }
        .text h1, .text h2 {
            font-size: 25px;
        }
    }

    .foot {
        display: flex;
        width: 100%;
        padding: .4rem;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: #06617f;
    }
    .foot p{
        margin-top: 1.2rem;
        align-self: center;
        justify-self: center;
    }
    html {
        overflow-x: hidden !important;
    }
</style>
<x-layout title="Exata">
    <x-navbar></x-navbar>

    <div class="container-fluid banner " id="home">
        <div class="row banner_flex">
            <div class="col col-lg-6 col-sm-12 container__left">
                <div class="content__left">
                    <div class="content__infor headline">
                        <h1>Economize agora com <span>a energia solar da Exata!</span></h1>
                        <p>Limpa, Sustentável e eficiente</p>

                        <a class="btn btn-dark btn-lg" href="{{route('orcamento')}}">Orçamento grátis</a>
                    </div>
                    <div style="opacity: .1;" class="headline">
                        <img src="/img/logo-curta.png" width="120%" alt="" class="align-self-end img-not-mobile">
                    </div>
                </div>

            </div>

            <div class="col col-lg-6 col-sm-1 d-flex container__right" >
                <h1 class="align-self-end"></h1> {{-- tag vazia para que o flex funcione --}}
                <img src="/img/imagem-mulher.png" class="align-self-end img-not-mobile" alt="" width="70%">
            </div>
        </div>
    </div>
    <x-body :informations="$informations" ></x-body>
    <div></div>
    <div class="container-fluid" style="background-color: #0D7A9F;width: 100vw;">
        <x-footer></x-footer>
    </div>



</x-layout>

<script>
  function smoothScroll(target) {
    const targetElement = document.querySelector(target);
    const targetPosition = targetElement.offsetTop;
    const startPosition = window.pageYOffset;
    const distance = targetPosition - startPosition;
    const duration = 1000; // Tempo de duração da rolagem em milissegundos
    let start = null;

    function step(timestamp) {
      if (!start) start = timestamp;
      const progress = timestamp - start;
      window.scrollTo(0, easeInOutCubic(progress, startPosition, distance, duration));
      if (progress < duration) window.requestAnimationFrame(step);
    }

    function easeInOutCubic(t, b, c, d) {
      t /= d / 2;
      if (t < 1) return c / 2 * t * t * t + b;
      t -= 2;
      return c / 2 * (t * t * t + 2) + b;
    }

    window.requestAnimationFrame(step);
  }
</script>

<footer class="container-fluid foot text-center ">
    <p class="" style="font-weight: 600; color: #fff;">Exata Engenharia Solar &copy; 2023</p>
</footer>