@extends('frontend.layouts.main2')

<title>Humsafar - Membership</title>

    <!-- ====main-section==== -->
    <main class="pb-20 xs:pb-0">
        <section class="flex items-start justify-between">
            <!-- ==left-banner-part== -->
            <div class="w-[400px] 2xl:w-[500px] h-screen md:block">
                <img src="{{ asset('frontend/src/images/banner-image-02.png') }}"
                    alt="banner image"
                    class="w-[400px] 2xl:w-[500px] h-full fixed left-0 top-0">
                <picture class="hidden"><img
                        src="{{ asset('frontend/src/images/banner-image-02-alt.png') }}"
                        alt="banner image" loading="lazy"></picture>
            </div>
            <!-- ==right-all-content-part== -->
            <div
                class="md:px-10 xl:px-[60px] py-5 md:py-[30px] md:pb-[50px] flex-1 w-full">
                <!-- =logo-part= -->
                <div
                class="flex md:items-center justify-between flex-col text-center md:flex-row">
                <a href="./index.html"
                    class="pl-6 xs:pl-10 sm:pl-20 md:pl-0 fixed w-full left-0 top-0 backdrop-blur-[20px] py-5 md:static md:w-fit md:backdrop-blur-none md:py-0 z-20"><img
                        src="{{ asset('frontend/src/images/logo-alt.png') }}" alt="logo"
                        class="w-[152px] lg:w-[177.74px]"></a>
                <!-- =small-device-image= -->
                <picture class="py-7 md:hidden">
                    <img src="{{ asset('frontend/src/images/banner-image-02-alt.png') }}"
                        alt="banner image"
                        class="mb-9 w-full max-h-[400px] object-cover"
                        loading="lazy">
                </picture>
                <p class="text-base font-normal text-black">Do you have
                    an account? <a href="#"
                        class="font-bold duration-300 hover:text-red-color">Log
                        in</a></p>
            </div>
                <!-- =main-part= -->
                <div
                    class="px-6 xs:px-10 sm:px-20 md:px-10 xl:px-[60px] pt-6 md:pt-20 w-full">
                    <div class="w-full">
                        <h3
                            class="text-black text-[22px] lg:text-[26px] xl:text-[30px] font-semibold mb-2.5 relative">
                            Membership <br class="min-[360px]:hidden">
                            Required
                            <img src="{{ asset('frontend/src/images/happy-face-emoji.png') }}"
                                alt="happy-face-emoji"
                                class="w-[50px] h-50px lg:w-[70px] lg:h-[70px] rounded-full absolute right-0 top-0">
                        </h3>
                        <p class="text-black text-sm font-medium">Please
                            select a membership plan to continue.</p>
                        <!-- ==package== -->
                        <div
                            class="grid gap-5 grid-cols-1 min-[500px]:grid-cols-2 min-[850px]:grid-cols-3 lg:grid-cols-2 xl:grid-cols-3 mt-[50px]">
                            <!-- =item= -->
                            <a href="#">
                                <div
                                    class="h-[86px] rounded-[5px] border-[1px] border-[#e2e2e2] flex items-center justify-center relative">
                                    <h3
                                        class="text-black text-[32px] font-bold">$24</h3>
                                    <span
                                        class="whitespace-nowrap px-2.5 py-1 bg-red-color rounded-[5px] text-xs font-bold text-white absolute right-5 -top-3">24
                                        Hours</span>
                                </div>
                                <p
                                    class="mt-2.5 text-xs text-black font-normal">Free
                                    Membership</p>
                            </a>
                            <!-- =item= -->
                            <a href="#">
                                <div
                                    class="h-[86px] rounded-[5px] border-[1px] border-[#e2e2e2] flex items-center justify-center relative">
                                    <h3
                                        class="text-black text-[32px] font-bold">$50</h3>
                                    <span
                                        class="whitespace-nowrap px-2.5 py-1 bg-red-color rounded-[5px] text-xs font-bold text-white absolute right-5 -top-3">1
                                        Month</span>
                                </div>
                                <p
                                    class="mt-2.5 text-xs text-black font-normal">Silver
                                    Membership</p>
                            </a>
                            <!-- =item= -->
                            <a href="#">
                                <div
                                    class="h-[86px] rounded-[5px] border-[1px] border-[#e2e2e2] flex items-center justify-center relative">
                                    <h3
                                        class="text-black text-[32px] font-bold">$75</h3>
                                    <span
                                        class="whitespace-nowrap px-2.5 py-1 bg-red-color rounded-[5px] text-xs font-bold text-white absolute right-5 -top-3">180
                                        Days</span>
                                </div>
                                <p
                                    class="mt-2.5 text-xs text-black font-normal">Gold
                                    Membership</p>
                            </a>
                        </div>

                        <!-- =extra-free-plan= -->
                        <div
                            class="py-6 flex items-center justify-between gap-10  border-y-[1px] border-y-[#e2e2e2] mt-10">
                            <!-- =text= -->
                            <div class="flex-1">
                                <h4
                                    class="mb-1 text-black text-base font-bold">Free
                                    Membership</h4>
                                <p
                                    class="text-sm text-black font-normal">Free
                                    for 24 hour access!</p>
                            </div>
                            <!-- =button= -->
                            <a href="#"
                                class="whitespace-nowrap py-[11px] px-[32px] bg-blue-color rounded-[5px] duration-300 hover:bg-red-color text-sm font-semibold text-white">Select</a>
                        </div>
                        <!-- =extra-free-plan= -->
                        <div
                            class="py-6 flex items-center justify-between gap-10  border-b-[1px] border-b-[#e2e2e2]">
                            <!-- =text= -->
                            <div class="flex-1">
                                <h4
                                    class="mb-1 text-black text-base font-bold">Silver
                                    Membership</h4>
                                <p
                                    class="text-sm text-black font-normal">$20
                                    for 1 months access!</p>
                            </div>
                            <!-- =button= -->
                            <a href="#"
                                class="whitespace-nowrap py-[11px] px-[32px] bg-blue-color rounded-[5px] duration-300 hover:bg-red-color text-sm font-semibold text-white">Select</a>
                        </div>
                        <!-- =extra-free-plan= -->
                        <div
                            class="py-6 flex items-center justify-between gap-10  border-b-[1px] border-b-[#e2e2e2]">
                            <!-- =text= -->
                            <div class="flex-1">
                                <h4
                                    class="mb-1 text-black text-base font-bold">Gold
                                    Membership</h4>
                                <p
                                    class="text-sm text-black font-normal">$50
                                    for 6 months access!</p>
                            </div>
                            <!-- =button= -->
                            <a href="#"
                                class="whitespace-nowrap py-[11px] px-[32px] bg-blue-color rounded-[5px] duration-300 hover:bg-red-color text-sm font-semibold text-white">Select</a>
                        </div>
                        <a href="#"
                            class="rounded-[5px] py-[15px] px-[32px] bg-[#f8f9fa] w-full block text-center text-black text-sm font-semibold mt-10 duration-300 hover:bg-red-color hover:text-white">Compare
                            Features</a>

                    </div>

                    <!-- ===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 py-2.5 max-w-[400px] w-full  rounded-t-lg">
                            <!-- =left= -->
                            <div class="w-1/2 flex items-center gap-[25%]">
                                <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-[25%] 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-[50px] h-[50px] rounded-full bg-blue-color absolute left-1/2 text-white -translate-x-1/2 -top-6 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>
                </div>
            </div>
        </section>
    </main>