@extends('layouts.guest')

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

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

{{--
    --}}
{{--HERO--}}{{--

    <div class="relative mx-auto flex max-w-7xl flex-col py-28 px-8">
        <h1 class="text-4xl font-bold tracking-tight text-white">{{ __('HANDBOOK of FURNITURE') }}</h1>
    </div>
--}}
</div>

@section('content')

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

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

        <div class="grid grid-cols-1 grid-rows-2 lg:grid-cols-2 lg:grid-rows-1 mt-8">
            <div class="relative flex">
                <img src="{{ asset('../uploads/images/' . $page_material->image) }}" alt=""
                     class="absolute rounded-t-3xl lg:rounded-l-3xl lg:rounded-r-none inset-0 h-full w-full object-cover object-center">
                <div class="relative rounded-t-3xl lg:rounded-l-3xl lg:rounded-r-none flex w-full flex-col items-start justify-end bg-black bg-opacity-20 px-12 sm:px-20 py-24 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 rounded-b-3xl lg:rounded-r-3xl lg:rounded-l-none inset-0 h-full w-full object-cover object-center">
                <div class="relative rounded-b-3xl lg:rounded-r-3xl lg:rounded-l-none flex w-full flex-col items-end justify-end bg-black bg-opacity-20 px-12 sm:px-20 py-24 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>


@endsection