{{--
<x-new-layout>
    <!-- wire:dirty.class="border-red-500" -->
    <div class="flex w-full mx-auto">
        <div class="w-3/12">
            <div
                class="flex flex-col bg-white border shadow-sm rounded-xl dark:bg-neutral-900 dark:border-neutral-700 dark:shadow-neutral-700/70">
                <img class="w-full h-auto max-h-36 rounded-t-xl"
                    src="https://jakehosting.xyz/resources/images/cards.jpg" alt="Card Image" />

                <div class="p-4 md:p-5">
                    <h3 class="text-lg font-bold text-gray-800 dark:text-white">{{__('Card title')}}</h3>
                    <p class="mt-1 text-gray-500 dark:text-neutral-400">
                        Some quick example text to build on the card title and make up the bulk of the card's content.
                    </p>
                    <a class="inline-flex items-center justify-center px-3 py-2 mt-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-lg gap-x-2 hover:bg-blue-700 focus:outline-none focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none"
                        href="#">
                        Go somewhere
                    </a>
                </div>
            </div>
        </div>
        <div class="w-3/12">
            <div
                class="flex flex-col bg-white border shadow-sm rounded-xl dark:bg-neutral-900 dark:border-neutral-700 dark:shadow-neutral-700/70">
                <img class="w-full h-auto max-h-24 rounded-t-xl" src="https://jakehosting.xyz/resources/images/soon.png"
                    alt="Card Image">
                <div class="p-4 md:p-5">
                    <h3 class="text-lg font-bold text-gray-800 dark:text-white">
                        Card title
                    </h3>
                    <p class="mt-1 text-gray-500 dark:text-neutral-400">
                        Some quick example text to build on the card title and make up the bulk of the card's content.
                    </p>
                    <a class="inline-flex items-center justify-center px-3 py-2 mt-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-lg gap-x-2 hover:bg-blue-700 focus:outline-none focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none"
                        href="#">
                        Go somewhere
                    </a>
                </div>
            </div>
        </div>
    </div>
</x-new-layout>
--}}




<x-new-layout>

    <div class="relative w-full mx-auto bg-transparent max-w-7xl dark:bg-transparent">

        {{-- <x-section>
            <x-slot name="title">STORE</x-slot>
            <x-slot name="description">MEMBERSHIPS AND MORE</x-slot>
            <x-slot name="content">
            </x-slot>
        </x-section> --}}



        <header class="flex flex-col gap-4 my-12 sm:flex-row sm:items-center sm:justify-between">
            <div>
                <h1 class="text-2xl font-semibold tracking-tight uppercase text-gray-950 dark:text-white">
                    STORE
                </h1>
            </div>

            <div>
                <div class="flex items-center w-full gap-2 p-2 rounded-sm justify-evenly bg-slate-900 bg-opacity-55">
                    <a href="{{route('shop.index')}}" class="" wire:navigate>
                        <div
                            class="flex items-center justify-center px-6 py-1 font-mono font-semibold text-green-200 rounded-sm bg-slate-800 ">
                            <x-fas-circle-user class="w-6 h-6 mr-2 text-gray-950" />MEMBERSHIPS
                        </div>
                    </a>
                    <a href="{{route('settings.show')}}" class="font-mono font-semibold text-green-200 bg-green-900 "
                        wire:navigate>
                        <div class="flex items-center justify-center px-6 py-1 rounded-sm ">
                            <x-fas-cog class="w-6 h-6 mr-2 text-gray-950" />ITEMS
                        </div>
                    </a>

                </div>
            </div>

        </header>


        <main class="">
            <div class="">
                <h4>main</h4>
            </div>
        </main>


        <footer>
            footer
        </footer>

        <div class="">




            {{--
            <x-section class="">
                <x-slot name="title">{{__('Membersships')}}</x-slot>
                <x-slot name="description">
                    {{__('Purchase recurring or once off memberships')}}
                </x-slot>
                <x-slot name="content">
                    <div class="lg:flex lg:items-center lg:justify-between">
                        <div class="flex-1 min-w-0">
                            <h2
                                class="text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:text-3xl sm:tracking-tight">
                                Back End Developer</h2>
                            <div class="flex flex-col mt-1 sm:mt-0 sm:flex-row sm:flex-wrap sm:space-x-6">
                                <div class="flex items-center mt-2 text-sm text-gray-500">
                                    <x-fas-gift class="w-8 h-8 text-emerald-600 " />
                                    Full-time
                                </div>
                                <div class="flex items-center mt-2 text-sm text-gray-500">
                                    <svg class="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400" viewBox="0 0 20 20"
                                        fill="currentColor" aria-hidden="true" data-slot="icon">
                                        <path fill-rule="evenodd"
                                            d="m9.69 18.933.003.001C9.89 19.02 10 19 10 19s.11.02.308-.066l.002-.001.006-.003.018-.008a5.741 5.741 0 0 0 .281-.14c.186-.096.446-.24.757-.433.62-.384 1.445-.966 2.274-1.765C15.302 14.988 17 12.493 17 9A7 7 0 1 0 3 9c0 3.492 1.698 5.988 3.355 7.584a13.731 13.731 0 0 0 2.273 1.765 11.842 11.842 0 0 0 .976.544l.062.029.018.008.006.003ZM10 11.25a2.25 2.25 0 1 0 0-4.5 2.25 2.25 0 0 0 0 4.5Z"
                                            clip-rule="evenodd" />
                                    </svg>
                                    Remote
                                </div>
                                <div class="flex items-center mt-2 text-sm text-gray-500">
                                    <svg class="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400" viewBox="0 0 20 20"
                                        fill="currentColor" aria-hidden="true" data-slot="icon">
                                        <path
                                            d="M10.75 10.818v2.614A3.13 3.13 0 0 0 11.888 13c.482-.315.612-.648.612-.875 0-.227-.13-.56-.612-.875a3.13 3.13 0 0 0-1.138-.432ZM8.33 8.62c.053.055.115.11.184.164.208.16.46.284.736.363V6.603a2.45 2.45 0 0 0-.35.13c-.14.065-.27.143-.386.233-.377.292-.514.627-.514.909 0 .184.058.39.202.592.037.051.08.102.128.152Z" />
                                        <path fill-rule="evenodd"
                                            d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-8-6a.75.75 0 0 1 .75.75v.316a3.78 3.78 0 0 1 1.653.713c.426.33.744.74.925 1.2a.75.75 0 0 1-1.395.55 1.35 1.35 0 0 0-.447-.563 2.187 2.187 0 0 0-.736-.363V9.3c.698.093 1.383.32 1.959.696.787.514 1.29 1.27 1.29 2.13 0 .86-.504 1.616-1.29 2.13-.576.377-1.261.603-1.96.696v.299a.75.75 0 1 1-1.5 0v-.3c-.697-.092-1.382-.318-1.958-.695-.482-.315-.857-.717-1.078-1.188a.75.75 0 1 1 1.359-.636c.08.173.245.376.54.569.313.205.706.353 1.138.432v-2.748a3.782 3.782 0 0 1-1.653-.713C6.9 9.433 6.5 8.681 6.5 7.875c0-.805.4-1.558 1.097-2.096a3.78 3.78 0 0 1 1.653-.713V4.75A.75.75 0 0 1 10 4Z"
                                            clip-rule="evenodd" />
                                    </svg>
                                    $120k &ndash; $140k
                                </div>
                                <div class="flex items-center mt-2 text-sm text-gray-500">
                                    <svg class="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400" viewBox="0 0 20 20"
                                        fill="currentColor" aria-hidden="true" data-slot="icon">
                                        <path fill-rule="evenodd"
                                            d="M5.75 2a.75.75 0 0 1 .75.75V4h7V2.75a.75.75 0 0 1 1.5 0V4h.25A2.75 2.75 0 0 1 18 6.75v8.5A2.75 2.75 0 0 1 15.25 18H4.75A2.75 2.75 0 0 1 2 15.25v-8.5A2.75 2.75 0 0 1 4.75 4H5V2.75A.75.75 0 0 1 5.75 2Zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75Z"
                                            clip-rule="evenodd" />
                                    </svg>
                                    Closing on January 9, 2020
                                </div>
                            </div>
                        </div>
                        <div class="flex mt-5 lg:ml-4 lg:mt-0">
                            <span class="hidden sm:block">
                                <button type="button"
                                    class="inline-flex items-center px-3 py-2 text-sm font-semibold text-gray-900 bg-white rounded-md shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
                                    <svg class="-ml-0.5 mr-1.5 h-5 w-5 text-gray-400" viewBox="0 0 20 20"
                                        fill="currentColor" aria-hidden="true" data-slot="icon">
                                        <path
                                            d="m2.695 14.762-1.262 3.155a.5.5 0 0 0 .65.65l3.155-1.262a4 4 0 0 0 1.343-.886L17.5 5.501a2.121 2.121 0 0 0-3-3L3.58 13.419a4 4 0 0 0-.885 1.343Z" />
                                    </svg>
                                    Edit
                                </button>
                            </span>
                            <span class="hidden ml-3 sm:block">
                                <button type="button"
                                    class="inline-flex items-center px-3 py-2 text-sm font-semibold text-gray-900 bg-white rounded-md shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
                                    <svg class="-ml-0.5 mr-1.5 h-5 w-5 text-gray-400" viewBox="0 0 20 20"
                                        fill="currentColor" aria-hidden="true" data-slot="icon">
                                        <path
                                            d="M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z" />
                                        <path
                                            d="M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z" />
                                    </svg>
                                    View
                                </button>
                            </span>
                            <span class="sm:ml-3">
                                <button type="button"
                                    class="inline-flex items-center px-3 py-2 text-sm font-semibold text-white bg-indigo-600 rounded-md shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
                                    <svg class="-ml-0.5 mr-1.5 h-5 w-5" viewBox="0 0 20 20" fill="currentColor"
                                        aria-hidden="true" data-slot="icon">
                                        <path fill-rule="evenodd"
                                            d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
                                            clip-rule="evenodd" />
                                    </svg>
                                    Publish
                                </button>
                            </span>
                        </div>
                    </div>
                </x-slot>
            </x-section>
            --}}


            {{--
        </div> --}}
    </div>
</x-new-layout>
{{-- <x-dynamic-component component="button" :field="$text = 'text'">
    <div x-data="{state:$wire.$entangle('$getStatePath()')}">
        <div class="text-left">
            <div class="w-full text-sm text-gray-600 border">
                {{__($text)}}
            </div>
        </div>
    </div>
</x-dynamic-component> --}}