@extends('templates.theme-eleven')

@section('menu-home')
    active
@endsection

@section('imagem-header')
    @if($conteudo->conteudos()->where('tipo','banner_home')->first())
        {{route('arquivo.show',$conteudo->conteudos()->where('tipo','banner_home')->first()->imagem)}}
    @else
        {{asset('theme-five/img/bg.jpg')}}
    @endif
@endsection


@section('titulo-pagina')
    @empty($site->informacao->nome_comercial)
        Página inicial
    @else
        {{ $site->informacao->nome_comercial }} - Página inicial
    @endif
@endsection

@section('content')
    <section class="section-servico">
        <div class="owl-carousel ">
            <div class="item-servico" style="background-image: url('https://upis.br/blog/wp-content/uploads/2019/07/contabilidade-gerencial-o-que-e-onde-ela-pode-ajudar-sua-empresa-1.jpg');">
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-md-10 informacao text-center">
                            <h1 class="fw-bold">
                                Lorem ipsum dolor sit amet
                            </h1>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, assumenda at atque debitis ex facere fugiat id labore, minus molestias necessitatibus nobis quam quidem repellat voluptates! Consequatur perspiciatis reprehenderit soluta?
                            </p>
                            <a class="btn btn-main px-5 py-2 mt-2">CTA</a>
                        </div>
                    </div>
                </div>
                <span class="camada"></span>
            </div>

            <div class="item-servico" style="background-image: url('https://upis.br/blog/wp-content/uploads/2019/07/contabilidade-gerencial-o-que-e-onde-ela-pode-ajudar-sua-empresa-1.jpg');">
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-md-10 informacao text-center">
                            <h1 class="fw-bold">
                                Lorem ipsum dolor sit amet
                            </h1>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, assumenda at atque debitis ex facere fugiat id labore, minus molestias necessitatibus nobis quam quidem repellat voluptates! Consequatur perspiciatis reprehenderit soluta?
                            </p>
                            <a class="btn btn-main px-5 py-2 mt-2">CTA</a>
                        </div>
                    </div>
                </div>
                <span class="camada"></span>
            </div>
            <div class="item-servico" style="background-image: url('https://upis.br/blog/wp-content/uploads/2019/07/contabilidade-gerencial-o-que-e-onde-ela-pode-ajudar-sua-empresa-1.jpg');">
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-md-10 informacao text-center">
                            <h1 class="fw-bold">
                                Lorem ipsum dolor sit amet
                            </h1>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, assumenda at atque debitis ex facere fugiat id labore, minus molestias necessitatibus nobis quam quidem repellat voluptates! Consequatur perspiciatis reprehenderit soluta?
                            </p>
                            <a class="btn btn-main px-5 py-2 mt-2">CTA</a>
                        </div>
                    </div>
                </div>
                <span class="camada"></span>
            </div>
        </div>
    </section>

    <section class="section-escritorio">
        <div class="container">
            <div class="row mt-0 mt-md-5">
                <div class="col-md-6 px-4">
                    <img src="https://cdn.pixabay.com/photo/2014/07/06/13/55/calculator-385506_960_720.jpg" data-aos="fade-right" data-aos-duration="1400" alt="">
                </div>
                <div class="col-md-6 escritorio mt-5 mt-md-0">
                    <h2>
                        O escritório nome
                    </h2>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus distinctio dolor esse excepturi incidunt itaque neque odio, omnis perspiciatis repudiandae temporibus velit! At consectetur cupiditate inventore ipsum molestiae quasi tempore.
                    </p>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus distinctio dolor esse excepturi incidunt itaque neque odio, omnis perspiciatis repudiandae temporibus velit! At consectetur cupiditate inventore ipsum molestiae quasi tempore.
                    </p>
                    <div>
                        <a class="btn btn-main fw-bolder mt-3 mx-auto">
                            Conheça nossos serviços
                        </a>
                    </div>

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

    <section class="section-orcamento mb-5" style="background-image: var(--color-background_mensagem_add)">
        <div class="container">
            <div class="row justify-content-center text-center">
                <div class="col-md-8">
                    <h3> Sua Contabilidade agora mais Prática e Rápida</h3>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam consectetur facere maxime natus possimus quisquam quos rem tempore vero? Culpa et nobis qui suscipit. Assumenda nam pariatur quasi repellat vitae.
                    </p>
                    <button class="btn btn-main btn-lg">Solicite um orçamento</button>
                </div>
            </div>
        </div>
        <span class="camada"></span>
    </section>


    <section class="section-servico">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="section-title-servico">
                        <h2>CONHEÇA NOSSAS ÁREAS DE ASSESSORIA ESPECIALIZADA</h2>
                    </div>
                </div>

                <div class="col-md-3  px-0 px-md-3 col-6">
                    <div class="flip-card">
                        <div class="flip-card-inner">
                            <div class="flip-card-front d-flex align-items-center justify-content-center px-1" style="background-image: var(--color-background_mensagem_add)">
                                <h4>teste</h4>
                            </div>
                            <div class="flip-card-back d-flex align-items-center justify-content-center flex-column px-1" style="background-color: var(--color-card-1)">
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam, cum esse et harum illo impedit ipsum magnam molestias nisi quam sunt ullam unde vitae, voluptas. Ad esse minima ratione.
                                </p>
                                <a href="" class="btn btn-main">Sabia mais</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3  px-0 px-md-3 col-6">
                    <div class="flip-card">
                        <div class="flip-card-inner">
                            <div class="flip-card-front d-flex align-items-center justify-content-center px-1" style="background-image: var(--color-background_mensagem_add)">
                                <h4>teste</h4>
                            </div>
                            <div class="flip-card-back d-flex align-items-center justify-content-center flex-column px-1" style="background-color: var(--color-card-1)">
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam, cum esse et harum illo impedit ipsum magnam molestias nisi quam sunt ullam unde vitae, voluptas. Ad esse minima ratione.
                                </p>
                                <a href="" class="btn btn-main">Sabia mais</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3  px-0 px-md-3 col-6">
                    <div class="flip-card">
                        <div class="flip-card-inner">
                            <div class="flip-card-front d-flex align-items-center justify-content-center px-1" style="background-image: var(--color-background_mensagem_add)">
                                <h4>teste</h4>
                            </div>
                            <div class="flip-card-back d-flex align-items-center justify-content-center flex-column px-1" style="background-color: var(--color-card-1)">
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam, cum esse et harum illo impedit ipsum magnam molestias nisi quam sunt ullam unde vitae, voluptas. Ad esse minima ratione.
                                </p>
                                <a href="" class="btn btn-main">Sabia mais</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 px-0 px-md-3 col-6">
                    <div class="flip-card">
                        <div class="flip-card-inner">
                            <div class="flip-card-front d-flex align-items-center justify-content-center px-1" style="background-image: var(--color-background_mensagem_add)">
                                <h4>teste</h4>
                            </div>
                            <div class="flip-card-back d-flex align-items-center justify-content-center flex-column px-1" style="background-color: var(--color-card-1)">
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam, cum esse et harum illo impedit ipsum magnam molestias nisi quam sunt ullam unde vitae, voluptas. Ad esse minima ratione.
                                </p>
                                <a href="" class="btn btn-main">Sabia mais</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection