Display a sizeable image and place features next to it.
<section class="py-24 overflow-hidden"> <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> <div class="grid grid-cols-1 gap-14 items-center lg:grid-cols-12 lg:gap-32 "> <div class="w-full xl:col-span-5 lg:col-span-6 2xl:-mx-5 xl:-mx-0"> <div class="relative"> <span class="text-base text-center font-medium text-indigo-600 mb-1 block lg:text-left">OUR FEATURES</span> <h2 class="text-3xl sm:text-4xl text-center font-bold text-gray-900 sm:leading-[3.25rem] lg:text-left">Receive payments quickly from anywhare</h2> </div> <div class="grid gap-8 my-12 md:max-w-2xl max-w-lg mx-auto lg:max-w-full"> <div class="flex gap-6"> <div class="relative"> <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M10 14.7875L12.6544 17.4419C13.0707 17.8582 13.2789 18.0664 13.5376 18.0665C13.7963 18.0666 14.0047 17.8586 14.4214 17.4427L20.625 11.25M12.5 27.5H17.5C22.214 27.5 24.5711 27.5 26.0355 26.0355C27.5 24.5711 27.5 22.214 27.5 17.5V12.5C27.5 7.78595 27.5 5.42893 26.0355 3.96447C24.5711 2.5 22.214 2.5 17.5 2.5H12.5C7.78595 2.5 5.42893 2.5 3.96447 3.96447C2.5 5.42893 2.5 7.78595 2.5 12.5V17.5C2.5 22.214 2.5 24.5711 3.96447 26.0355C5.42893 27.5 7.78595 27.5 12.5 27.5Z" stroke="#4F46E5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <div class="block"> <h4 class="mb-2 text-xl font-medium text-gray-900">100% Secure</h4> <p class="text-sm text-gray-500 font-normal leading-6">Our focus on providing a 100% secure platform means that you can rest easy, knowing that your information is protected from unauthorized access and potential cyber threats.</p> </div> </div> <div class="flex gap-6"> <div class="relative"> <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M24.6429 11.4286C24.6429 14.3872 20.2457 16.7857 14.8214 16.7857C9.3972 16.7857 5 14.3872 5 11.4286M24.6429 16.7857C24.6429 19.7444 20.2457 22.1429 14.8214 22.1429C9.3972 22.1429 5 19.7444 5 16.7857M24.6429 22.1429C24.6429 25.1015 20.2457 27.5 14.8214 27.5C9.3972 27.5 5 25.1015 5 22.1429M24.6429 6.96429C24.6429 9.42984 20.2457 11.4286 14.8214 11.4286C9.3972 11.4286 5 9.42984 5 6.96429C5 4.49873 9.3972 2.5 14.8214 2.5C20.2457 2.5 24.6429 4.49873 24.6429 6.96429Z" stroke="#4F46E5" stroke-width="2" stroke-linecap="round"/> </svg> </div> <div class="block"> <h4 class="mb-2 text-base font-medium text-gray-900">Moneyback Guarantee</h4> <p class="text-xs text-gray-500 font-normal leading-6">Our money-back guarantee gives you the freedom to explore and use our platform without worrying about the financial risks typically associated with investing.</p> </div> </div> <div class="flex gap-6"> <div class="relative"> <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M23.5526 10.3947V11.3947V10.3947ZM27.5 6.44737L28.5 6.44737L27.5 6.44737ZM23.5526 2.5V1.5V2.5ZM19.6053 6.44737H18.6053H19.6053ZM15 4.81579C15.5523 4.81579 16 4.36807 16 3.81579C16 3.2635 15.5523 2.81579 15 2.81579V4.81579ZM27.1842 15.6579C27.1842 15.1056 26.7365 14.6579 26.1842 14.6579C25.6319 14.6579 25.1842 15.1056 25.1842 15.6579H27.1842ZM8.75 15.25C8.19772 15.25 7.75 15.6977 7.75 16.25C7.75 16.8023 8.19772 17.25 8.75 17.25V15.25ZM15 17.25C15.5523 17.25 16 16.8023 16 16.25C16 15.6977 15.5523 15.25 15 15.25V17.25ZM8.75 20.25C8.19772 20.25 7.75 20.6977 7.75 21.25C7.75 21.8023 8.19772 22.25 8.75 22.25L8.75 20.25ZM20 22.25C20.5523 22.25 21 21.8023 21 21.25C21 20.6977 20.5523 20.25 20 20.25L20 22.25ZM23.5526 11.3947C24.8648 11.3947 26.1231 10.8735 27.0509 9.94569L25.6367 8.53147C25.084 9.08421 24.3343 9.39474 23.5526 9.39474V11.3947ZM27.0509 9.94569C27.9788 9.01788 28.5 7.75949 28.5 6.44737L26.5 6.44737C26.5 7.22906 26.1895 7.97873 25.6367 8.53147L27.0509 9.94569ZM28.5 6.44737C28.5 5.13524 27.9788 3.87686 27.0509 2.94905L25.6367 4.36326C26.1895 4.916 26.5 5.66568 26.5 6.44737L28.5 6.44737ZM27.0509 2.94905C26.1231 2.02124 24.8648 1.5 23.5526 1.5V3.5C24.3343 3.5 25.084 3.81053 25.6367 4.36326L27.0509 2.94905ZM23.5526 1.5C22.2405 1.5 20.9821 2.02124 20.0543 2.94905L21.4685 4.36326C22.0213 3.81053 22.7709 3.5 23.5526 3.5V1.5ZM20.0543 2.94905C19.1265 3.87686 18.6053 5.13524 18.6053 6.44737L20.6053 6.44737C20.6053 5.66568 20.9158 4.916 21.4685 4.36326L20.0543 2.94905ZM18.6053 6.44737C18.6053 7.75949 19.1265 9.01787 20.0543 9.94569L21.4685 8.53147C20.9158 7.97873 20.6053 7.22906 20.6053 6.44737H18.6053ZM20.0543 9.94569C20.9821 10.8735 22.2405 11.3947 23.5526 11.3947V9.39474C22.7709 9.39474 22.0213 9.08421 21.4685 8.53147L20.0543 9.94569ZM15 2.81579H8.75V4.81579H15V2.81579ZM1.5 10.0658V21.25H3.5V10.0658H1.5ZM8.75 28.5H19.9342V26.5H8.75V28.5ZM27.1842 21.25V15.6579H25.1842V21.25H27.1842ZM19.9342 28.5C23.9383 28.5 27.1842 25.2541 27.1842 21.25H25.1842C25.1842 24.1495 22.8337 26.5 19.9342 26.5V28.5ZM1.5 21.25C1.5 25.2541 4.74594 28.5 8.75 28.5V26.5C5.8505 26.5 3.5 24.1495 3.5 21.25H1.5ZM8.75 2.81579C4.74594 2.81579 1.5 6.06173 1.5 10.0658H3.5C3.5 7.16629 5.85051 4.81579 8.75 4.81579V2.81579ZM8.75 17.25H15V15.25H8.75V17.25ZM8.75 22.25L20 22.25L20 20.25L8.75 20.25L8.75 22.25Z" fill="#4F46E5"/> </svg> </div> <div class="block"> <h4 class="mb-2 text-base font-medium text-gray-900">Notification & Reminder</h4> <p class="text-xs text-gray-500 font-normal leading-6">Get the most out of your investment experience with our platform's customizable notification and reminder settings, allowing you to tailor your experience to your specific needs.</p> </div> </div> </div> </div> <div class="w-full xl:col-span-7 lg:col-span-6 hidden lg:block"> <div class="w-full sm:w-auto lg:w-[60.8125rem]"> <img src="https://pagedone.io/asset/uploads/1695031065.png" alt="Feature tailwind section" class="w-full rounded-3xl lg:h-auto object-cover"> </div> </div> </div> </div> </section>
