@extends('layouts.frontend_layout.frontend_design')
@section('content')


<div class="kode-blog-style-2">
    <div class="container">
        <!--FIRST ROW START-->

        <div class="row">
            <!--COL-MD-4 START-->
            @foreach ($services as $service )
            <div class="col-md-4">
                <!--KODE_EVENT_BLOG2 START-->
                <div class="kode-event-blog3">
                    <div class="kode-thumb-caption">
                        <div class="services__icon-4 mb-35">

                            <img src="{{ asset('frontend_assets/img/service/02/'.$service->image)}}" style="height: 200px;"  alt="">
                        </div>
                        <h4>{{ $service->name }}</h4>
                        <ul>
                            <p>{{ $service->brief_description }} <br></p>
                        </ul>
                        <span><a href="{{ url('/service_detail/'.$service->id) }}">Read More</a></span>
                    </div>
                </div>
                <!--KODE_EVENT_BLOG2 START-->
            </div>

            @endforeach



        </div>


        <!--PAGINATION ROW START-->

        <div class="row">
            <div class="col-md-12">
                <!---PAGINATIOn START-->
                <div class="pag">
                    <ul class="pagination">
                        <li>
                          <a href="#" aria-label="Previous">
                            <span aria-hidden="true">Prev</span>
                          </a>
                        </li>
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                        <li>
                          <a href="#" aria-label="Next">
                            <span aria-hidden="true">Next</span>
                          </a>
                        </li>
                    </ul>
                </div>
                <!--PAGINATION END-->
            </div>
        </div>

        <!--PAGINATION ROW END-->
    </div>
</div>

@endsection