@extends('layouts.front.app')

@section('og')
<meta property="og:type" content="home"/>
<meta property="og:title" content="{{ config('app.name') }} - Inicial"/>
<meta property="og:description" content="{{ config('app.description') }}"/>
@endsection
@section('css')
<style type="text/css">
  html,
  body{
    height: 40vh;
  }
  /*.carousel
  height: 400px;
}*/

@media (max-width: 740px) {

  html,
  body,
  .carousel {
    height: 100vh;
  }
}

@media (min-width: 800px) and (max-width: 850px) {

  html,
  body,
  header,
  .carousel {
    height: 100vh;
  }
}
</style>
<link href="https://fonts.googleapis.com/css?family=Changa" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=ABeeZee" rel="stylesheet">

@endsection

@section('content')
<section>
  <div class="row">
    <!-- Grid column -->
    <div class="col-lg-12 mb-4">
      <!--Card-->
      <div class="card">
        <!--Card content-->
        <div class="card-body">
          <!--Title-->
          <h4 class="card-title text-center">{!! strtoupper($pagina->nome) !!}</h4>
          <!--Text-->
          <div class="card-text text-justify">{!! $pagina->conteudo !!}</div>
        </div>

      </div>
      <!--/.Card-->

    </div>
    <!-- Grid column -->
  </div>
</section>
    <!-- /.content -->
@endsection
@section('js')

<script type="text/javascript">
  $(document).ready(function () {
    $('.carousel').carousel()
    $('ul.navbar-nav li.dropdown').hover(function() {
      $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
    }, function() {
      $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
    });
    $('.link-categoria').on('click', function(){
      window.location.href = $(this).data('href');
    })

    $(".regular").slick({
      dots: false,
      infinite: true,
      speed: 1500,
      slidesToShow: 4,
      autoplay:false,
      slidesToScroll: 1,
      responsive: [
      { breakpoint: 1024,
        settings: {
          slidesToShow: 3,
          infinite: true
        }
      }, {
        breakpoint: 600,
        settings: {
          slidesToShow: 2,
          dots: true
        }
      }, {
        breakpoint: 300,
        settings: "unslick" // destroys slick
      }
      ]
    });
    $(".random").slick({
      dots: false,
      infinite: true,
      speed: 1500,
      slidesToShow: 1,
      autoplay:true,
      slidesToScroll: 1,
      responsive: [
      { breakpoint: 1024,
        settings: {
          slidesToShow: 3,
          infinite: true
        }
      }, {
        breakpoint: 600,
        settings: {
          slidesToShow: 2,
          dots: true
        }
      }, {
        breakpoint: 300,
        settings: "unslick" // destroys slick
      }
      ]
    });
  })
</script>
@endsection