@extends('layouts.guest')

<!--HERO-->
@include('layouts._partials._hero')

@section('content')
<main>

    <!--SERVICES-->
    @include('layouts._partials._services')

    <!--INSTAGRAM-->
    @include('layouts._partials._instagram')

    <!--HANDBOOK of FURNITURE-->
    <section class="max-w-xl px-4 py-12 mx-auto lg:py-24 sm:px-6 lg:max-w-7xl lg:px-8"
        aria-labelledby="collection-heading">

        <div class="relative flex flex-col items-center max-w-3xl mx-auto text-center">
            <h2 id="comfort-heading" class="text-4xl font-bold tracking-tight sm:text-5xl text-sky-950">
                @if(app()->getLocale() == 'en')
                {{ $handbook->title }}
                @else
                {{ $handbook->title_ar }}
                @endif
            </h2>
            <p class="mt-3 font-serif text-xl italic text-gray-400">
                {{ app()->getLocale() == 'en' ? $handbook->subtitle : $handbook->subtitle_ar }}
            </p>
        </div>

        <div class="grid grid-cols-1 grid-rows-2 mt-8 lg:grid-cols-2 lg:grid-rows-1">
            <div class="relative flex">
                <img src="{{ asset('../uploads/images/' . $page_material->image) }}" alt=""
                    class="absolute inset-0 object-cover object-center w-full h-full rounded-t-3xl lg:rounded-l-3xl lg:rounded-r-none">
                <div
                    class="relative flex flex-col items-start justify-end w-full px-12 py-24 bg-black rounded-t-3xl lg:rounded-l-3xl lg:rounded-r-none bg-opacity-20 sm:px-20 sm:py-36">
                    <p class="text-4xl font-bold tracking-tight text-white">{{ __('general.materials') }}</p>
                    <a href="{{ route('materials') }}"
                        class="mt-4 rounded-md bg-white/70 px-4 py-2.5 text-sm font-medium text-sky-950 hover:bg-gray-50">{{
                        __('general.browse') }}</a>
                </div>
            </div>
            <div class="relative flex">
                <img src="{{ asset('../uploads/images/' . $page_style->image) }}" alt=""
                    class="absolute inset-0 object-cover object-center w-full h-full rounded-b-3xl lg:rounded-r-3xl lg:rounded-l-none">
                <div
                    class="relative flex flex-col items-end justify-end w-full px-12 py-24 bg-black rounded-b-3xl lg:rounded-r-3xl lg:rounded-l-none bg-opacity-20 sm:px-20 sm:py-36">
                    <p class="text-4xl font-bold tracking-tight text-white">{{ __('general.styles') }}</p>
                    <a href="{{ route('styles') }}"
                        class="mt-4 rounded-md bg-white/70 px-4 py-2.5 text-sm font-medium text-sky-950 hover:bg-gray-50">{{
                        __('general.browse') }}</a>
                </div>
            </div>
        </div>
    </section>

    <!--TESTIMONIAL-->
    {{-- @include('layouts._partials._testimonial')
    --}}
</main>

@endsection