@extends('layouts.front.app')

@section('og')
<meta property="og:locale" content="{{ app()->getLocale() }}"/>
<meta property="og:type" content="home"/>
<meta property="og:title" content="{{ config('app.name') }} - Home"/>
<meta property="og:site_name" content="{{ config('app.name') }}"/>
<meta property="og:description" content="{{ config('site.description') }}"/>
@endsection

@section('content')

<section>
  <div class="container">
    <div class="text-center text-md-left mt-5">
      <div class="row">
        
        <div class="col-lg">
          <div class="row">
            <div class="col-lg-3 text-md-right text-center">
              <img src="{{ asset('storage/images/frete_.png') }}">
            </div>
            <div class="col-lg">
              <h5 class="font-weight-bold fosco-text font-nunito">
                Retire na loja
              </h5>
              <h6 class="fosco-text font-weight-bolder">veja as condições</h6>
            </div>
          </div>
        </div>
        
        <div class="col-lg">
          <div class="row">
            <div class="col-lg-3 text-md-right text-center">
              <img src="{{ asset('storage/images/parcelamento.png') }}">
            </div>
            <div class="col-lg">
              <h5 class="font-weight-bold fosco-text font-nunito">
                Até {!! config('cart.parc_sem_juros')!!}x sem/ juros
              </h5>
              <h6 class="fosco-text font-weight-bolder">no cartão de crédito</h6>
            </div>
          </div>
        </div> 
        
        <div class="col-lg">
          <div class="row">
            <div class="col-lg-3 text-md-right text-center">
              <img src="{{ asset('storage/images/preco.png') }}">
            </div>
            <div class="col-lg">
              <h5 class="font-weight-bold fosco-tex font-nunito">
                Preços exclusivos
              </h5>
              <h6 class="fosco-text font-weight-bolder">para compras no site</h6>
            </div>
          </div>
        </div>
        
        <div class="col-lg">
          <div class="row">
            <div class="col-lg-3 text-md-right text-center">
              <img src="{{ asset('storage/images/promocao.png') }}">
            </div>
            <div class="col-lg">
              <h5 class="font-weight-bold fosco-text font-nunito">
                Promoções
              </h5>
              <h6 class="fosco-text font-weight-bolder">toda semana</h6>
            </div>
          </div>
        </div>
        
      </div>
    </div>
  </div>
</section>

{{-- Area 1 --}}
<div class="container my-5">
  
  <div class="categoria">
    
    <div class="area-custom rounded">
      <h2 class="text-white font-weight-bolder font-nunito">
        <span class="secondary">Confira nossas promoções</span>
      </h2>
    </div>
    
    <div class="d-lg-block d-none">
      <div class="carousel-secondary">
        @include(config('site.domain').'.front.products.product-carousel', ['products' => $promocionais])
      </div>
    </div>
    
    <div class="d-block d-lg-none">
      @include(config('site.domain').'.front.products.product-list-mobile', ['products' => $promocionais])
    </div>
    
  </div>
  
</div>

{{-- Area 2 --}}
<div class="container">
  
  <div class="categoria">
    
    <div class="area-custom rounded">
      
      <ul class="list-inline position-absolute mt-2 mb-0">
        <li class="list-inline-item">
          <a href="#!" class="font-weight-bolder fosco-text h5">
            Categoria I
          </a>
        </li>
        <li class="list-inline-item">
          <a href="#!" class="font-weight-bolder fosco-text h5">
            Categoria II
          </a>
        </li>
      </ul>
      
      <h2 class="text-white font-weight-bolder font-nunito">
        <span class="secondary">Produtos recentes</span>
      </h2>
    </div>
    
    <div class="d-lg-block d-none">
      <div class="carousel-secondary">
        @include(config('site.domain').'.front.products.product-carousel', ['products' => $novos])
      </div>
    </div>
    
    <div class="d-block d-lg-none">
      @include(config('site.domain').'.front.products.product-list-mobile', ['products' => $novos])
    </div>
    
  </div>
</div>

{{-- Area 3 --}}
<div class="container">
  
  <div class="categoria">
    
    <div class="area-custom rounded">
      <h2 class="text-white font-weight-bolder font-nunito">
        <span class="secondary">Produtos em destaque</span>
      </h2>
    </div>
    
    <div class="d-lg-block d-none">
      <div class="carousel-secondary">
        @include(config('site.domain').'.front.products.product-carousel', ['products' => $products])
      </div>
    </div>
    
    <div class="d-block d-lg-none">
      @include(config('site.domain').'.front.products.product-list-mobile', ['products' => $products])
    </div>
    
  </div>
</div>

</section>

@endsection