@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 my-5">
    <div class="icones text-md-left text-center">
      <div class="row">
        
        <div class="col-lg">
          <div class="row">
            <div class="col-lg-3 text-md-right text-center my-auto">
              <i class="fas fa-tags fosco-text fa-2x"></i>
            </div>
            <div class="col-lg pl-0">
              <h5 class="font-weight-bold fosco-text">30 anos de tradição</h5>
              <p class="font-weight-bolder grey-new mb-0">uma empresa confiavel</p>
            </div>
          </div>
        </div>
        
        <div class="col-lg">
          <div class="row pb-3">
            <div class="col-lg-3 text-md-right text-center my-auto">
              <i class="fas fa-shipping-fast fosco-text fa-2x"></i>
            </div>
            <div class="col-lg pl-0">
              <h5 class="font-weight-bold fosco-text">Receba em casa</h5>
              <p class="font-weight-bolder grey-new mb-0">fácil e rápido</p>
            </div>
          </div>
        </div>
        
        <div class="col-lg">
          <div class="row">
            <div class="col-lg-3 text-md-right text-center my-auto">
              <i class="fas fa-hand-holding-usd fosco-text fa-2x"></i>
            </div>
            <div class="col-lg pl-0">
              <h5 class="font-weight-bold fosco-text">Parcele no cartão</h5>
              <p class="font-weight-bolder grey-new mb-0">em até {{config('site.sem_juros')}}x sem juros</p>
            </div>
          </div>
        </div>
        
        <div class="col-lg">
          <div class="row">
            <div class="col-lg-3 text-md-right text-center my-auto">
              <i class="fas fa-comments fosco-text fa-2x"></i>
            </div>
            <div class="col-lg pl-0">
              <h5 class="font-weight-bold fosco-text">Envie sua cotação</h5>
              <p class="font-weight-bolder grey-new mb-0">por email ou telefone</p>
            </div>
          </div>
        </div>
        
      </div>
    </div>
  </div>
</section>

<section>
  
  {{-- Area 1 --}}
  <div class="container">
    <div class="cat-1">
      
      <div class="position-relative legend">
        <h2 class="d-inline-flex position-relative font-weight-bold bg-white font-nunito px-3">DESTAQUES</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>
  
  {{-- Area 2 --}}
  <div class="container">
    <div class="cat-2">
      
      <div class="position-relative legend">
        <h2 class="d-inline-flex position-relative font-weight-bold bg-white font-nunito px-3">CUIDADO COM A SAÚDE</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="cat-3">
      
      <div class="position-relative legend">
        <h2 class="d-inline-flex position-relative font-weight-bold bg-white font-nunito px-3">PROMOÇÕES</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>
  
</section>

@endsection