@extends('front.layouts.app')
@section('content')

<!-- /.preloader -->
<div class="page-wrapper">

    <!--Page Header Start-->
    <section class="page-header">
        <div class="page-header-bg" style="background-image: url(front/assets/images/backgrounds/page-header-bg.jpg)">
        </div>
        <div class="container">
            <div class="page-header__inner">
                <ul class="thm-breadcrumb list-unstyled">
                    <li><a href="{{route('arabiaMobiles.home')}}">Home</a></li>
                    <li><span>/</span></li>
                    <li class="active">Services</li>
                </ul>
                <h2>Our Services</h2>
            </div>
        </div>
    </section>
    <!--Page Header End-->

    <!--Project Page Two Start-->
    <section class="project-page-two">
        <div class="container">
            <div class="row">
                @foreach($services as $service)
                <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay="100ms">
                    <!--Project Page Two Single-->
                    <div class="project-two__single">
                        <div class="project-two__img">
                            <img src="{{asset($service->service_photo)}}" alt="">
                        </div>
                        <div class="project-two__content">
                            <p class="project-two__sub-title"><a href="{{route('arabiaMobiles.serviceDetails',$service->id)}}" class="text-blue"><b>{{$service->name}}</b></a></p>
{{--                            <h3 class="project-two__title"><a href="{{route('arabiaMobiles.serviceDetails',$service->id)}}">{{$service->title}}</a></h3>--}}
{{--                            <div class="project-two__arrow">--}}
{{--                                <a href="{{route('arabiaMobiles.serviceDetails',$service->id)}}"><i class="fa fa-long-arrow-alt-right"></i></a>--}}
{{--                            </div>--}}
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </section>
    <!--Project Page Two End-->


</div><!-- /.page-wrapper -->

@endsection