@extends('frontend.layouts.app')

@section('title', 'Our Services')

@section('metatags')
    <meta name="description"
        content="We are specialized in sending flexible, service-oriented catering employees with an emphasis on
                        hospitality!" />
    <meta name="keywords" content="" />
    <meta name="copyright" content="Consulting Masters Africa" />
    <meta name="url" content="/" />
    <meta name="identifier-URL" content="/" />

    <meta itemprop="image" content="/assets/images/meta.jpg" />
    <meta property="og:image" itemprop="image/*" content="/assets/images/meta.jpg" />
    <meta property="og:image:width" content="256" />
    <meta property="og:image:height" content="256" />
    <meta property="og:site_name" content="Consulting Masters Africa" />


@endsection

@section('content')

    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="fronty--breadcrumb--area "
                    style="background-image: linear-gradient(to left, rgba(255, 74, 104, 0.8) , rgba(6, 17, 52, 0.6)   ), url('/assets/images/bg--0001.jpg')">
                    <div class="fronty--breadcrumb--area--content">
                        <div class="head">
                            <h1>
                                <span>Our Services</span>
                            </h1>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <section class="services__area">
        <div class="container">
    
        <div class="grid--3 mt-4">
            
            @foreach($services as $service)
            <div class="services__area--item">
                <a href="{{ route('showService', [$service->slug]) }}">
                    <img src="{{ asset('/storage/app/public/services/' . $service->image) }}" alt="">
                    <div class="content">
                        <h3>{{$service->title}}</h3>
                    </div>
                </a>
            </div>
            @endforeach
    
        </div>
    
        </div>
    </section>



    @include('frontend/partials/sections/bg')
    @include('frontend/partials/sections/features')
    {{-- @include('frontend/partials/sections/partners') --}}


@endsection

@section('scripts')




@endsection