@extends('template_front.index')
@section('url'){{url('produk')}}
@stop
@section('title','Produk Desa Manuba Kabupaten Barru')
@section('description','Produk Desa Manuba Kabupaten Barru')
@section('image'){{asset('assets/img/manuba.png')}}
@stop
@section('content')
<section class="page-header" style="background-image: url({{asset('assets/images/backgrounds/news.jpg')}});">
    <div class="container">
        <h2>Produk</h2>
        <ul class="thm-breadcrumb list-unstyled">
            <li><a href="{{url('/')}}">Beranda</a></li>
            <li><span>Produk</span></li>
        </ul>
    </div>
</section>
<section class="service_one">
            <div class="container">
                <div class="block-title text-center">
                    <h3 style="font-size: 30pt !important">Daftar Produk Desa Manuba</h3>
                    <div class="leaf">
                        &nbsp;
                    </div>
                </div>
                <div class="row">
                    @foreach($produk as $tampil)
                    <div class="@if($jum ==3) col-xl-4 col-lg-4 col-md-6 @elseif($jum==2)col-xl-6 col-lg-6 col-md-6 @elseif($jum==1)col-xl-12 col-lg-12 col-md-7 @else col-xl-3 col-lg-3 col-md-6 @endif">
                        <div class="service_1_single wow fadeInUp">
                            <div class="content" style="text-align: justify;">
                                <h3 style="text-align: center;">{{$tampil->judul}}</h3> 
                                {!!str_limit(strip_tags($tampil->isi_berita),100)!!}
                            </div>
                            <div class="service_1_img">
                                <img src="{{asset(Storage::url($tampil->img))}}" @if($jum==3)style="width: 100%;height: 220px"@elseif($jum==2)style="width: 100%;height: 300px" @elseif($jum==1)style="width: 100%;height: 500px"@else style="width: 100%;height: 140px" @endif>
                                <div class="hover_box">
                                    <a href="{{url('produk/'.$tampil->slug)}}"><span class="icon-left-arrow"></span></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </section>                 
@endsection