@extends('frontend.layouts.main3')

<title>Humsafar - {{$pages->title}}</title>

@php
$generalSetting = App\Models\GeneralSetting::first();
@endphp

@section('content')
<!-- =====main-section======= -->
<main class="bg-[#fafafb] mt-[70px] lg:mt-[100px] xl:mt-[110px] pb-20 xs:pb-0">


    <!-- ==blog-section== -->
    <section class="bg-[#f7f8fb] py-[50px] xl:pt-20 xl:pb-[150px]">
        <div class="small_container">



            <div class="mt-10 mb-10">

                <h3
                    class="text-black text-[22px] lg:text-[26px] font-semibold">{{$pages->title}}
                </h3>
                <h5
                    class="text-[#011026] text-base font-medium md:text-xl md:leading-[31px]">Home > {{$pages->title}}
                </h5>

            </div>

            <div>

               {!! $pages->content !!}

            </div>

             <!-- Banner Space -->
            <div class="mt-20 bg-gray-300 flex items-center justify-center h-40">
                @if($banner != NULL)
                        <img src="{{ asset('admin/Banners/' . $banner->banner_image) }}" alt="Banner" class="object-cover w-full h-full" style="height: 190px;" loading="lazy">
                @endif
            </div>


        </div>
    </section>


        <!-- ===small-device-footer=== -->
        <section
            class="xs:hidden w-full fixed bottom-0 left-0 flex items-center justify-center z-10 bg-white"
            style="box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.3);">
            <div
                class="small_container flex items-center justify-between bg-white pt-2.5 pb-3 max-w-[400px] w-full  rounded-t-lg">
                <!-- =left= -->
                <div class="w-1/2 flex items-center gap-[20%]">
                    <a href="#"
                        class="flex flex-col items-center justify-center text-black gap-0 hover:text-red-color duration-300">
                        <i class="ri-home-6-line text-2xl"></i>
                        <p class="text-[12px] font-semibold -mt-1">Home</p>
                    </a>
                    <button
                        class="flex flex-col items-center justify-center text-black gap-0 hover:text-red-color duration-300">
                        <i class="ri-search-2-line text-2xl"></i>
                        <p
                            class="text-[12px] font-semibold -mt-1">Search</p>
                    </button>
                </div>
                <!-- =right= -->
                <div
                    class="w-1/2 flex items-center gap-[20%] justify-end">
                    <a href="#"
                        class="flex flex-col items-center justify-center text-black gap-0 hover:text-red-color duration-300">
                        <i class="ri-account-circle-line text-2xl"></i>
                        <p class="text-[12px] font-semibold -mt-1">My
                            Account</p>
                    </a>
                    <button
                        class="flex flex-col items-center justify-center text-black gap-0 hover:text-red-color duration-300">
                        <i class="ri-message-3-line text-2xl"></i>
                        <p class="text-[12px] font-semibold -mt-1">Blog</p>
                    </button>
                </div>
                <!-- =add-button= -->
                <button
                    class="w-[56px] h-[56px] rounded-full bg-blue-color absolute left-1/2 text-white -translate-x-1/2 -top-4 flex items-center justify-center duration-300 hover:bg-red-color"
                    style="box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.3);">
                    <svg width="20" height="20" viewBox="0 0 20 20"
                        fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd"
                            d="M19.4922 10C19.4922 10.5477 19.0482 10.9917 18.5005 10.9917L1.50052 10.9917C0.952837 10.9917 0.508854 10.5477 0.508854 10C0.508854 9.45235 0.952837 9.00837 1.50052 9.00837L18.5005 9.00837C19.0482 9.00837 19.4922 9.45235 19.4922 10Z"
                            fill="white" />
                        <path fill-rule="evenodd" clip-rule="evenodd"
                            d="M10.0005 0.508301C10.5482 0.508301 10.9922 0.952285 10.9922 1.49997L10.9922 18.5C10.9922 19.0477 10.5482 19.4916 10.0005 19.4916C9.45284 19.4916 9.00885 19.0477 9.00885 18.5L9.00885 1.49997C9.00885 0.952285 9.45284 0.508301 10.0005 0.508301Z"
                            fill="white" />
                    </svg>
                </button>
            </div>
        </section>

</main>

@endsection