@extends('layouts.app')
@section('js')

@endsection
@section('css')
<style>
    .breadcrumbSer {
        width: auto;
        height: 206px;
        background-image: url({{$cat[0]->cover_img}});
        mask-image: linear-gradient(to right, #000000 -32%, rgba(63, 63, 63, 0.24) 81%, rgba(84, 84, 84, 0) 149%);
        background-size: cover;
    }
    
</style>
@endsection
@section('content')
<section class="Rectangle-111">
    <div class="breadcrumbSer"></div>
</section>
<section class="featured-cat pb-5">
    <div class="text-center py-5">
        <h1>Featured Categories</h1>
        <h2>Discover our traditional product</h2>
    </div>
    <div class="container img-cover">
        <div class="row">
            @foreach ($cat as $item)
            <div class="col-md-3 col-xs-12 pb-20">
                <div class="home-categorie">
                    <img height="255pc" src="{{ asset($item->image) }}" alt="">
                    <div class="cat-layer"></div>
                    <div class="content">
                        <h3>{!! $item->title !!}</h3>
                        <h4 class="mb-4">{!!html_entity_decode(mb_strimwidth(strip_tags($item->body), 0, 80, '...')) !!}</h4>
                    <a href="{{URL::to('/category/'.$item->id)}}" class="btn btn-more"><span class="plus">+</span><span
                                class="more">{{ $message ?? 'Learn More' }}</span></a>
                    </div>
                </div>

            </div>
            @endforeach

        </div>

</section>
@endsection