@extends('layouts.guest')

@section('content')
<div class="relative bg-gray-900 content-top h-96">

    <!-- Decorative image and overlay -->
    <div aria-hidden="true" class="absolute inset-0 overflow-hidden">
        <img src="{{ asset('uploads/images/'. $about->image) }}" alt="" class="object-cover object-center w-full h-96">
    </div>
    <div aria-hidden="true" class="absolute inset-0 bg-gray-900 opacity-40"></div>

    <!--NAV-->
    @include('layouts._partials._navbar')

    {{--HERO--}}
    <div class="relative flex flex-col content-center max-w-3xl px-10 py-16 mx-auto text-center sm:py-32 lg:px-0">
        <h1 class="text-4xl font-bold tracking-tight text-white lg:text-6xl">
            {{ app()->getLocale() == 'ar' ? $about->title_ar : $about->title }}</h1>
    </div>

</div>

<!--CONTENT-->
<div class="px-6 py-24 bg-white lg:px-8">
    <div
        class="mx-auto max-w-3xl text-base leading-7 text-gray-700 {{ app()->getLocale() == 'ar' ? 'text-right' : '' }}">
        <div dir="{{ app()->getLocale() == 'ar' ? 'rtl' : 'ltr' }}" class="max-w-2xl">
            <p>{!! app()->getLocale() == 'ar' ? $about->content_ar : $about->content !!}</p>
        </div>
    </div>
</div>

{{--OUR SERVICES--}}
<div class="px-8 mx-auto my-24 max-w-7xl">
    <div class="inset-0 flex items-center" aria-hidden="true">
        <div class="w-full border-t border-gray-300"></div>
    </div>
    <div class="flex justify-center">
        <span class="px-2 mt-2 font-serif italic text-green-800 bg-white">{{ __('general.all_services') }}</span>
    </div>
    <div class="bg-white pb-22">
        <div class="px-6 mx-auto max-w-7xl lg:px-8">
            <dl class="grid grid-cols-1 gap-12 mt-20 sm:grid-cols-2 sm:gap-x-6 lg:grid-cols-4 lg:gap-x-8">
                @foreach(\App\Models\Service::all() as $item)
                <div class="relative">
                    <dt>
                        <svg class="absolute w-6 h-6 mt-1 text-green-900" fill="none" viewBox="0 0 24 24"
                            stroke-width="1.5" stroke="currentColor" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                        </svg>
                        <p class="ml-10 text-lg font-semibold leading-8 text-gray-900">
                            {{ app()->getLocale() == 'ar' ? $item->title_ar : $item->title }}</p>
                    </dt>
                    <dd dir="{{ app()->getLocale() == 'ar' ? 'rtl' : 'ltr' }}"
                        class="mt-2 ml-10 text-base leading-7 text-gray-600">
                        {!! app()->getLocale() == 'ar' ? $item->content_ar : $item->content !!}</dd>
                </div>
                @endforeach
            </dl>
        </div>
    </div>
</div>

{{--INSTAGRAM--}}
@include('layouts._partials._instagram-page')

{{--TESTIMONIAL--}}
{{-- <div class="pb-24">
    @include('layouts._partials._testimonial')
</div>
--}}
@endsection

@section('js')
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.8.1/flowbite.min.js"></script>
@endsection