@extends('layouts.frontend')

@section('content')
@include('layouts.frontend-partial.breadcrumb')
<section class="sectionGap">
    <div class="container">
        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            @if (!empty($services) && $services->isNotEmpty())
            @foreach ($services as $service)
            <div class="transition duration-600 ease-out bg-gradient-to-b from-primary/30 to-transparent hover:from-primary/90 hover:to-primary/90 rounded-3xl p-0.5"
                data-aos="fade-up" data-aos-duration="1000">
                <div class="group text-center grid h-full gap-10 duration-500 bg-white px-10 py-12 rounded-[22px]">
                    @if (!empty($service->icon))
                    <img src="{{asset($service->icon)}}" class="size-16 mx-auto "
                        alt="{{$service->serviceCategory->name}}">
                    @endif

                    <div class="grid gap-3">
                        <h4 class="text-[#8e8f92] font-medium uppercase tracking-widest">
                            {{ !empty($service->serviceCategory->name) ? $service->serviceCategory->name : '' }}
                        </h4>

                        <h3 class="duration-300 text-xl group-hover:text-primary md:text-2xl font-semibold">
                            {{ !empty($service->title) ? $service->title : '' }}
                        </h3>
                    </div>

                    <div>
                        <a class="uppercase whitespace-nowrap font-semibold inline-flex text-sm tracking-widest items-center gap-2.5 duration-300 hover:text-primary group/btn"
                            href="{{ url('service', $service->page_url) }}">
                            Learn more
                            <span
                                class="border rounded-full size-8 text-sm flex items-center duration-300 justify-center group-hover/btn:bg-primary group-hover/btn:border-primary group-hover/btn:text-white">
                                <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 20 20"
                                    aria-hidden="true" height="1.5em" width="1.5em" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd"
                                        d="M5.22 14.78a.75.75 0 0 0 1.06 0l7.22-7.22v5.69a.75.75 0 0 0 1.5 0v-7.5a.75.75 0 0 0-.75-.75h-7.5a.75.75 0 0 0 0 1.5h5.69l-7.22 7.22a.75.75 0 0 0 0 1.06Z"
                                        clip-rule="evenodd"></path>
                                </svg>
                            </span>
                        </a>
                    </div>
                </div>
            </div>
            @endforeach
            @endif
        </div>
    </div>
</section>
@endsection