<x-layouts.page title="Buy and Sell">
    <section class="mx-4 sm:mx-8 md:mx-10 lg:mx-20 flex flex-col md:flex-row items-center  mt-4 md:mt-12 lg:mt-20">

        <div class="flex flex-col text-center md:text-left items-center md:items-start md:w-1/2">

            <h1 class="text-gray-25">Buy Instantly</h1>
            <div class="text-gray-75 mt-2">
                Keep your crypto secure, experience high-quality products, and receive exceptional service.
            </div>

            <a href="/signup" class="w-auto">
                <button type="button"
                    class="block rounded-md
       duration-150 ease-linear transition-all
      text-center justify-center
      text-base tracking-normal leading-6
      focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed
       bg-gold-500 border border-gold-500 text-gray-875 hover:bg-gold-400 font-semibold w-auto px-6 py-2 md:px-8 md:py-3 md:text-lg md:leading-8 mt-4 lg:mt-6">

                    Buy Coins

                </button>
            </a>


        </div>
        <div class="relative flex flex-col items-center w-2/3 md:w-1/2 md:ml-24 mt-20 md:mt-0">

            <img class="md:w-2/3 xl:w-1/2" src="/images/i9.webp?vsn=d">


            <div class="absolute -z-1 block pointer-events-none -inset-x-full -inset-y-1/4" style="">
                <img src="/images/glow-effect-3-985bcd5697945e9ef30c1d5304ccf49c.svg?vsn=d">
            </div>

        </div>

    </section>

    <section class="mx-4 sm:mx-8 md:mx-10 lg:mx-20 text-center self-center  mt-4 md:mt-12 lg:mt-20">

        <div class="flex flex-col items-center">
            <div class="text-gray-25" style="max-width: 776px">

                <h2>
                    How it works

                </h2>

            </div>
            <div class="text-gray-75 mt-2 text-center" style="max-width: 600px">

            </div>
            <div class="text-gray-75 mt-2 text-center" style="max-width: 600px">

            </div>
            <div class="flex justify-center">



            </div>
        </div>

    </section>

    <section class="mx-4 sm:mx-8 md:mx-10 lg:mx-20  mt-4 md:mt-12 lg:mt-20">

        <div class="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-3 lg:grid-cols-3 gap-8">

            <div
                class=" flex flex-col items-center md:items-start text-center md:text-left md:border-l md:border-white md:border-opacity-10 md:px-8">
                <img class="flex w-8 h-8 mb-6" src="/images/gold-user-5445978d649e4f8cad7e026247cf6919.svg?vsn=d">
                <h5 class="text-gray-25 mb-2">Sign up</h5>
                <div class="text-gray-75">Sign up for {{ setting('site_name') }} on your desktop or mobile app</div>
            </div>
            <div
                class=" flex flex-col items-center md:items-start text-center md:text-left md:border-l md:border-white md:border-opacity-10 md:px-8">
                <img class="flex w-8 h-8 mb-6" src="/images/gold-bank-alt2-4634c409a5aebca426b11843d4f2fce6.svg?vsn=d">
                <h5 class="text-gray-25 mb-2">Payment method</h5>
                <div class="text-gray-75">There are standard and secure payment methods that you can use</div>
            </div>
            <div
                class=" flex flex-col items-center md:items-start text-center md:text-left md:border-l md:border-white md:border-opacity-10 md:px-8">
                <img class="flex w-8 h-8 mb-6" src="/images/gold-two-coins-f9d44acc7da809a95aaee03016d34cd7.svg?vsn=d">
                <h5 class="text-gray-25 mb-2">Buy coins instantly</h5>
                <div class="text-gray-75">Buy and hodl or start investing instantly</div>
            </div>

        </div>

    </section>



    <div class="relative flex items-center justify-center  mt-20 md:mt-36 lg:mt-64">
        <div class="absolute -z-1 block pointer-events-none " style="">
            <img src="/images/glow-effect-1-d65154e6fef49277f600a5032ef3d629.svg?vsn=d">
        </div>

        <section class="mx-4 sm:mx-8 md:mx-10 lg:mx-20 text-center self-center  ">

            <div class="flex flex-col items-center">
                <div class="text-gray-25" style="max-width: 776px">

                    <h2>
                        Buy Crypto instantly with {{ setting('site_name') }} today

                    </h2>

                </div>
                <div class="text-gray-75 mt-2 text-center" style="max-width: 600px">

                </div>
                <div class="text-gray-75 mt-2 text-center" style="max-width: 600px">

                </div>
                <div class="flex justify-center">



                    <a href="/signup" class="w-auto">
                        <button type="button"
                            class="block rounded-md
      duration-150 ease-linear transition-all
      text-center justify-center
      text-base tracking-normal leading-6
      focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed
       bg-gold-500 border border-gold-500 text-gray-875 hover:bg-gold-400 font-semibold w-auto px-6 py-2 md:px-8 md:py-3 md:text-lg md:leading-8 mt-4 lg:mt-6">

                            Buy Now

                        </button>
                    </a>



                </div>
            </div>

        </section>
    </div>
</x-layouts.page>